This example extends a copy from example 4 with AJAX and Tabs. It is only available from version 1.4.beta2 and up. To try it out on the phpPeanuts website click here.
To add the Tabs skinDetailsPart was copied from the includes folder to the example14 folder. There it was renamed to skinEmployeeDetailsPart so that it will not affect pages with other pntTypes then Employee. The DetailsForm was moved to skinDetailsForm.
Directly inside itemTableDiv a printPart call was added passing 'TabsPart', an array specifying the tabs, and 'Details' to specify which tab to be shown in front initially. The keys in the array show up on the tabs, the values are the tab identifiers. Other variants of this tabs specification are possible, see the comment of .
PntTabsPart tries to obtain the tabs contents adding 'Part' to the tabs identifiers, then using that to try to 'get' the parts. Parts that can be obtained this way are then printed. Parts that can not be obtained are printed using printPart on the whole, usually the page that included the TabsPart. This is what happened with our TabsPart too. They resolve to skinDetailsForm and skinEmployeeHoursPart in the example14 folder.
TabsPart are a bit harder to scale then the normal DetailsPart. skinDetailsPart function scaleContent has to scale not only the itemTableDiv, but also each Div that contains the content of the tab. A difference in the coordinate system of Internet Explorer and FireFox had to be brided by substracting an extra value for the latter.
Because we want to load the content of the tab 'Hours' using AJAX, skinEmployeeHoursPart only contains a message asking the user to wait for the AJAX loading. The actual AJAX request is made from the script in skinEmployeeDetailsPart that handles the tabs onClick events. The Pages on the server will know this is an AJAX request because of the pntAjaxUpd parameter. It asks for the update of Buttons0,InformationPart. The first time the Hours tab is clicked it adds MainPart to this list. MainPart is mapped to TabsPartHoursContent, which is the id of the DOM element that contains the tab content. The mapping is in an array with the partname as key and the id of the DOM element to map to as the corresponding value. When the tab 'DetailsForm' is clicked, the same AJAX request is used, but now without the pntHandler and pntProperty parameters. For more information on how to refresh parts of a page using AJAX, click here.
The default implementation of PropertyPage will include skinPropertyPart for its MainPart. That will output another itemTableDiv and override the scaleContent function. This would have messed up the scaling done by skinEmployeeDetailsPart, so example14 has its own skinEmployeePropertyPart. With the current default layout of phpPeanuts, the use of AJAX will often require some adaptation of the layout. If you develop your own layout and want do use AJAX, it may be a good idea to make the MainPart, InformationPart and the Button rows so that they will blend in smoothly when retrieved through AJAX.
Finally, to make the 'Hours' button in the EditDetailsPage for Employees disappear, a class EmployeeEditDetailsPage was added. It implements to return an array with a key 'hours'. |
