章 62. Skin development

This edition of the PHP Manual allows users to choose from skins to display the contents, as well as develop custom skins to meet some special needs. We decided to support skins because we realized that one skin cannot satisfy everybodies needs in a such heavily used edition.

We included two skins by default inside the CHM. These cannot be modified or removed, so if you have the CHM, you have these two skins inside. The Low skin is optimized for small window display, the High skin is a variation of the Low one with some graphics added to spice it up.

A skin must have at least two files, a skin loader JavaScript file and a CSS file. The two inline skins have these files inside the CHM. The skin loader JS should at least load in the CSS file and display the page contents to the viewer. Theoretically there are two kinds of skins: CSS skins and Full skins. CSS skins only modify the CSS and does not amend the page layout. Full skins also modify the page layout. We have included sample skins for both the CSS skin type and the Full skin type ("greenlinks" and "headernostalgia" respectively).

警告

Note that though the current skin development methods are quite final, there may be heavy changes in used CSS classes or page elements while we refine the skin development ideas. As this edition is currently in development stage, the information described herein is not to be considered completely stable.

Page Display Process

If you are going to develop your own skin, you should know how one page is loaded and displayed to the user, and how a skin fits in this process. For these paragraphs, we assume that you have put your CHM into c:\phpmanual, so it's accessible as c:\phpmanual\php_manual_LANG.chm (where LANG is the language code), and you would like to see the function page of "echo", which is function.echo.html inside the CHM. See the sections about integration for more information on CHM contents.

  • First of all the HTML content is loaded in from function.echo.html from inside the CHM.

  • At the top of this file, there is a HTML <script> tag, which loads in the _script.js file from the CHM. This file contains all the JS code needed to move on with the process. Most importantly this JS defines many variables (like where the CHM is, or what is the actual page viewed) and many functions to print out the context menu or handle online functions.

  • At last _script.js loads in the preferences file from outside the CHM (c:\phpmanual\php_manual_prefs.js in our example). This JS file defines the preference variables, and calls back prefHandler() which is also defined in _script.js.

  • That function loads in the skin JS file as the preferences dictate. The skin JS file should load in the needed CSS file, and define a displayPage() function, which displays the page if called.

  • The HTML file (function.echo.html in this example) also contains a function call to load in the user notes, which simply puts the notes into this HTML file using DHTML to be displayed as if they were here before...

  • The HTML file also contains a body onload attribute which calls the skin-defined displayPage() function to show the page to the user. This is the last function called, it should present the page in it's complete form to the user.

Every action is synchronized with calling back a function in the previously loaded file when the JS is in memory. The notes loading and skin JS loading is only synchronized with the page's onload event (which as the Microsoft documentation says only fires if the page is completely loaded).

This load and callback chain may seem to be too complicated, but so far this seemed to be the best way to do as many things as possible parallel, while also synchronize some calls.

As you can see your skin JavaScript file is loaded in by _script.js and it's displayPage() function is called by the body onload event.