|
How to create your own default user interface layout |
If you are going to use phpPeanuts for developing real life applications, you probably want to use your own layout. For an example of a custom layout of the default user interface, See example 11.
The easiest way to change the layout of the default user interface is to change the phppeanuts.css style sheet in the style folder. But to separate your changes from the phppeanuts default styles you can better put your changes in a stylesheet of your own and modify includes/skinHeader.php to use your own stylesheet.
Most of the layout of the default user interface is in the skins in the includes folder. If you edit these skins all applications will look differently. If you want a single application to look differently, copy the skins you want to override to the application folder and edit them there.
Some pieces of the layout are hard-coded in page, part and widget classes. If you want to change these pieces you have to override the fields that define them or the methods that produce them. In which classes you should do this depends on the code management scheme you use. If you use the simplest code management scheme with only a single subclass, you can put your overrides in the classes in the root classFolder if you want all applications to look differently. If you want a single application to look differently, copy the classes you need to override to the application classFolder and put your overrides there.
To find out which page, part or widget produces a piece of the layout you want to change, see how to specialize a part of a page. Then take a look at the source code of the pnt superclass. First look for fields with initial values. For example, PntTablePart defines fields with initial values for the row background color and the row highlight color. You can override these initial values by redefining the fields and initial values in the subclass.
If there is no field to override, take a look at the print.. methods. If one of them contains the piece of layout, override it in the subclass. For example, most of the layout of buttons is produced by the printButton method inherited by the ButtonPart class. In example 11 this method is overridden to produce button that looks very different.
Some pieces of layout are produced by event handlers. These are possibly the hardest ones to override, because the event handler code comes from outside of the part and there is no debug information on the use of event handlers. Here is a list of pieces produced by event handlers:
| piece |
handler |
set form |
| SelectionReportPage itemtable footer |
PntObjectSelectionReportPage::
printTableFooter |
PntObjectSelectionReportPage::
getInitItemTable |
| Dialog itemtable cells |
PntObjectDialog::
printItemCells |
PntObjectDialog::
getInitItemTable |
Alternatively you may use example 11 from the tutorial as a starting point. Just copy it to a new application folder, (also copy the classFolder) and change 'example11' in index.php to the name of your new folder. Move the stylesheet to the styles folder and fix skinHeader.php to reference the new stylesheet. Move the images to a new subfolder of the images folder. Fix the references to the images. Then modify the files until you have your own prototype layout. When you are finished you may make a new phpPeanuts install and copy the skins, except skinIndex.php and skinSubmenu.php, from your application folder to the new install's includes folder. Furthermore copy the classes from the example11 classFolder to the root classFolder of the new install, copy the stylesheet and the images. Now all applications in the new install will use the new layout.
|
|
