This is a quickstart guide for the XSL devkit version of blade. It assumes you already have some familiarity with blade (see the general quickstart or the tutorial for more information).
The devkit is a flattened (client-side and server-side functionality in the same tree) xsl version of blade with documentation, theme-generation tools, and extra features for making static screenshots. While the devkit is almost entirely platform-independent, some of the command-line tools are written as DOS batch files and require a DOS environment. Plans are for this platform dependency to be eliminated.
The XSL devkit comes with the following directory structure:
blade app - application-specific specific files, including features for static screenshots common - a core library of xsl and js functionality, plus common images and css components - xsl and js files for component sets documentation - blade documentation - core docs, xsl devkit docs, and component set docs themes - themepacks that come with blade tools - command-line tools -ext.xml (required dummy file) -img.xml (required dummy file) maketool.xsl (no page layout) page*.xsl (various page layouts) *.xml (sample pages)
BLADE pages are built in xml and then translated to html through maketool.xsl or one of the page*.xsl stylesheets. This can be done using a 3rd party utility like saxon, but most modern web browsers will translate into HTML on the fly if you begin your xml files like this:
The rest of the page can look like a normal XHTML page with blade tags mixed in. Some of the newer blade tags have namespaces associated with them; the older ones are namespaceless. The XML file does not need a generic html namespace associated with it in order to be rendered properly.<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="maketool.xsl"?>
BLADE requires themes and components to be imported before they can be used. Components must be imported on both the "server" and the "client"; themes only need to be imported on the client side. To import a server-side component, edit the root xsl file you are using for page layout (maketool, page, etc). Before any of the matched templates, insert an xsl:import command:
Client-side themes and components can be imported in the html/head/meta section of the document using the import-component and import-theme tags:<xsl:import href="components/core/widgets.xsl"/>
Additionally, client-side components which are going to be shared across every static page you develop can be added to the imports section of app/config.xml for automatic importation. Several themes and components are already imported by default, so look at app/config.xml for an example.<html> <head> <meta> <import-component pkg="package name"/> <import-theme pkg="package name"/> </meta> . . .
If your xml files are not located in the root directory of the devkit, you need to specify where blade is located. You can do this with the blade tag, also inside html/head/meta:
If blade is located up the directory structure from your files, make sure you include the trailing backslash ("blade/", "lib/blade/", etc). If your file is in the root directory, you can omit the blade tag.<blade root="../"/>
As mentioned before, the devkit provides extra functionality to support static mockups of applications. The page*.xsl files draw a header, navbar, and sidebar automatically, so that you can update a single file and change these common elements on every page. Tags are also provided so that you can import the content of other xml files, reducing the amount of work you have to do as static prototypes are iterated. A few other tags allow for the creation of more realistic-looking mockups. For example, the date tag prints the current date on the page, so that screenshots always look "live".
All of the page*.xsl's work similarly. The xml file being displayed specifies a user id. Page*.xsl turns that into a username and role to display on the screen. It also looks up a navigation menu and sidebar associated with that user, and places them on the page. If the xml file specifies a tab on the navbar, page*.xsl also highlights that tab.
All this per-user information is located in the app/resources.xml file. The resources file is a hierarchical organization of xml objects which supports inheritance. The basic structure looks like this:
The class tags lay out the hierarchy, and all XML under a class tag (except for other class tags) is part of that class. The resources parser makes it look as if child classes inherit any missing xml nodes from parent classes. So looking for tag1/tag2/@attr in class a/b would still return 2, even though there is no tag2 defined for class b. This allows all user IDs to inherit the same navigation bar or the same title from a base class. For documentation on how to use page*.xsl and resources.xml to mockup pages, look at the page.xsl tutorial and the resouces tutorial.<resources> <class name="a"> <tag1 attr="1"> <tag2 attr="2"/> </tag1> <class name="b"> <tag1 attr="3"/> </class> </class> </resources>
The components.static.mockup component set includes a number of tags to assist in creating static page mockups. Refer to the component set's documentation for more information.