The MetaPage™ is a simple, innovative architecture for Web pages in the Demand! Management™ platform for Web applications.
Recently introduced in the Demand! Management platform, the MetaPage architecture enables a designer to build a Web page from simple, reusable HTML+CSS components — e.g., a filtered list of tasks, a list of members with tasks that are past due, or a set of control buttons that perform JavaScript functions. Each of these components of the MetaPage can itself be a MetaPage. Each Web page built on the MetaPages architecture starts with a host MetaPage that contains component MetaPages. Each MetaPage can contain references to a data set from the database but without the designer needing to know anything about Structured Query Language (SQL) or Active Data Objects (ADO) coding.
[View this page as a MetaPage which will substitute values for these references: %space20% %mdash% %trademark% %mdash% %MetaPage:_navbar_top%]
Better Collaboration During Development
The MetaPage approach makes it easier to split the styling in cascading stylesheets (CSS) from the structural elements in HTML and data access — a longtime goal — so while the designer(s) work(s) independently on the presentation layer using HTML and CSS to craft a pleasant user experience, the technical developer can work on the data model and the logic of the application. Integrating data elements and application logic into the presentation layer is now dirt simple.
And multiple designers can work independently on a site without stepping on each other’s layouts.
Here’s how it works: In the beginning of the project, the participants agree on the <DIV> IDs for the overall structure of each page, and they agree on the names for the CSS classes to be used. Their agreement is represented by …
- an HTML MetaPage template
- a site-wide CSS file
- a page-specific CSS file for each host page (the “parent” MetaPage) or component sub-page (a “child” MetaPage)
MetaPages Manage the Cascading of Stylesheets
Each MetaPage (including component MetaPages) can specify a page-specific CSS file. The site-wide CSS (the host MetaPage’s stylesheet) overrides or augments whatever is specified in the page-specific CSS files. The Micro-Agreements implementation of MetaPages is an effective rapid-prototyping approach in agile development … and a much more effective model for collaboration between technical developers and Web designers! Project methodology support tools in the Demand! Management platform have been used and refined by Web developers for over 10 years.
MetaPages deliver a simple content management system. You can manage as much or as little of the content as you want in the application’s database supported by the simple workflow and project management functionality of the Demand! Management platform. The presentation structure for the content can be maintained separately from the content.
MetaPageCompiler.asp is a server page (the MetaPage processor) that reads the HTML “template” from tblMetaPage in the database, either as stored text or from a file (like “MetaPage_Quotations.htm”), the path to which is identified in the page metadata. Here’s the text form of a MetaPage template for a page that displays quotations from the table tblQuotation –> Quotations MetaPage. Note how references to data fields from the data source (which would be specified by the developer) are encoded — e.g., %PageTitle% is an inline reference that tells the MetaPage processor to substitute the page title from the page metadata. Note that %row_start% and %row_end% delimit the HTML that’s to be repeated for each row in the recordset specified by the SQL query identified in the page metadata. So %memQuotation% between %row_start% and %row_end% tells the MetaPage processor to substitute the value in the field “memQuotation” for the reference %memQuotation% in the MetaPage template, once for each row in the recordset for the MetaPage.
To present the following page, the MetaPage Processor reads the MetaPage template, substitutes the data, and applies the site-specific and page-specific CSS files –> MetaPageCompiler.asp?MetaPageID=Quotations
Here’s the page-specific CSS –> CSS/Quotations.css (Coming soon: the ability to edit the CSS within the MetaPage editor in real time)
Notice how iteration through rows is handled in the associated recordset, specified by a SQL query in the page metadata (in tblMetaPage). %row_start% delimits the beginning of the HTML which will be replicated to display each row in the SQL-specified recordset. %row_end% delimits the end of the HTML to iterate for each row.
This might require a shared-desktop runthrough to make any sense, depending on how facile you are with building Web pages.
As I build new features into the Demand! Management%trademark% platform, I intend to adopt this architecture as much as possible, which will force me to make it more adaptable in applying the prototyping principles where designers and developers can work separately and avoid stepping on each other’s work. As an example, I needed a list of the MetaPages I’ve built in tblMetaPage. After scratching my head about how to code a page to list the rows in that table (which usually takes me at least half a day), I slapped my forehead, then built a metapage that lists the metapages (in about 7 minutes) –> MetaPageCompiler.asp?MetaPageID=_MetaPages
And it’s JUST … that simple!