Wiki : ModuleAdminTemplateStructure
Documentation Home :: Categories :: Index :: Recent Changes :: Comments :: Search :: Help :: Login/RegisterStructure of templates for a consistent administration interface
When authoring a PN module it's recommended that the any administration interface is coded using the following template standards. This ensures that all modules present the site administrator with the same basic look and feel.
Basic template outline
(1) <!--[include file="<module name>_admin_menu.htm"]-->
(2) <div class="pn-admincontainer">
(3) <div class="pn-adminpageicon"><!--[pnimg modname=core src=<graphic file for current action>.gif set=icons/large
alt='<alt text language define>' altml=true]--></div>
(4) <h2><page header goes here</h2>
rest of module output goes here
(2) </div>The first element (1) of this basic structure includes a standard navigation menu onto each page of the admin panel ensuring that the site administrator has easy access to all module functions. The next element (2) (div of class pn-admincontainer) is a containing element for the output from the module. By default the pn-admincontainer style displays a box around the output - this is a presentation container only.
The third element (3) add an icon to page outlining the action that takes place from the page. This icons here are from the standard icon set supplied by PN. The following list shows which icon should be used for each of the standard module actions
- new - filenew.gif
- modify - xedit.gif
- delete - editdelete.gif
- view - windowlist.gif
- modifyconfig - configure.gif
The fourth element in the structure is the action header (4). This header provides a title for the action taking place on this page. This should be a level 2 header.
The navigation menu
(1) <!--[admincategorymenu]--> (2) <div class="pn-adminbox"> (3) <h1><!--[pnml name="<langauge define for module name>"]--></h1> (4) <div class="pn-menu"> (5) <!--[moduleadminlinks modname=<module name>]--> (4) </div> (2) </div>
The first element (1) of the module navigation menu adds the main PostNuke administration navigation (module categories, base line security analyzer etc.) to each page. This ensures that the administrator can easily navigate between module admin panels.
The next element (2) is another presentation container. A div of class pn-adminbox is used to format the output of the module title and module navigation. The third element (3) provides a standard header for each admin page provided by the module and would usually be the module name or description.
Element 4 is another presentation element this time for the navigation links provided by the module. Element 5 calls a plugin to display the module navigation links. This plugin calls the getlinks admin API for the module.
Admin data tables
When outputting tabular data a consistent look to the table is desirable. For this purpose PostNuke provides a CSS class for styling data tables. This class is pn-admintable.
For example the following table is a sample of the output generated from a standard view function. It loops over the items array displaying each item in a table row
<table class="pn-admintable">
<tr>
<th>...</th>
....
</tr>
<!--[section name=items loop=$items]-->
<tr class="<!--[cycle values="pn-odd,pn-even"]-->">
<td></td>
....
</tr>
<!--[/section]-->
</table>The cycle plugin alternates each row in table between the two classes pn-odd and pn-even. This allows alternate rows to be styled differently.
Admin form styling and standard buttons
It is also desirable that all forms presented to site administrators are consistent. For this purpose PostNuke provides some CSS classes to style forms and some icons for form submission.
(1) <form class="pn-adminform" action="<!--[pnmodurl modname="Admin_Messages" type="admin" func="updateconfig"]-->" method="post" enctype="application/x-www-form-urlencoded">
(2) <div>
(3) <input type="hidden" name="authid" value="<!--[pnsecgenauthkey module="<module name>"]-->" />
(4) <div class="pn-adminformrow">
(5) <label for="<control id>"><language string></label>
(6) <control - make sure to add an id parameter to link with the for>
</div>
(7) <!--[pnmodcallhooks hookobject=module hookaction=<form action> module=<module name>]-->
(8)<div class="pn-adminformrow pn-adminformbuttons">
(9) <a href="<!--[pnmodurl modname=<module name> type=admin func=view]-->"><!--[pnimg modname=core src=button_cancel.gif set=icons/small altml=true titleml=true alt="_CANCEL" title="_CANCEL"]--></a>
(10)<!--[pnbutton src=button_ok.gif set=icons/small alt="<language define>" title="<language define>"]-->
(8)</div>
(2) </div>
(1) </form>- A form is given the class pn-adminform. This is the base class for all main forms. Requiring the use of a class rather than simply styling the form tag allows inline forms (such as filters) to be displayed correctly.
- This container ensures XHTML compliance. Since a form is not a container element all controls must have their own containment. This single div ensures that happens
- All forms should be secured with an authorization ID.
- PostNuke doesn't recommend using tables for forms - forms aren't tablular data. Each 'row' in the form is contained using a div of class pn-adminformrow. A row will most often be a label/control pair
- The label for the form control. Make sure to use the label tag and add the for attribute. This, for accessibility purposes, links the control and it's label
- The control. Make sure to add an ID to the control (see 5)
- Standard module forms should provide relevant hook template calls allowing other modules to add output to the form. The php code should also call the hook APIs to process any additional form fields
- Each form should have a row of action buttons that allow the user to submit the form or cancel the form and return to the main module admin page. Images from the standard icon library are used for consistency. The default action of the form (in most cases Submit or Update) should be the left most button, followed by any other buttons (usually at least a Cancel button).
CategoryDeveloperDocs
|
