Page Manager Tutorial - part 2

by pieterh on 02 Oct 2009 20:57

This is the second part of a slow tutorial in how to build complex tables and views using the new ListPages. It's based on a new page manager that will eventually let us "manage all pages (rename, delete, tag) from one place", as weneed:55 says. You can play with the work in progress as we develop it.

2. Styling the table

Last time I explained how to build a simple table. It does not do a lot but even if the page manager is incomplete, we might as well make it pretty. Here is some more CSS styling that makes the results look more professional:

table {
    color:#3B485F;
}
table tr {
    background: #FCFFDF;
    border-bottom:1px solid #EFEFEF;
}
table td {
    padding-left: 1em;
}
.header {
    height: 2em;
    background: #AFCCFF;
    border-bottom: 1px solid #9F9F9F;
    font-weight: bold;
    font-size: 13px;
}

And we edit the page-header to use this new header class:

[[table]]
  [[row class="header"]]
  ... rest comes here

3. What if there are no pages?

If there are no pages to show, the resulting table is invalid because there are no rows. This will make your page show [[table]] [[/table]]. We fix that by inserting an empty row at the end of table:

appendLine="[[row]][[cell]][[/cell]][[/row]][[/table]]"

The empty row will collapse to a thin line that does not disturb the look of the table. It would be nicer if ListPages did not show either appendLine or prependLine if there were no pages. But we work with what we have.

Comments: 1

Add a New Comment