This tutorial is designed to help you learn how to use blade. It focuses mostly on the xsl devkit, although the syntax is similar to the jsp version. This is a good starting point if you want to get hands-on experience learning what blade can do.
Download and unzip a copy of the blade devkit. Using a text editor, create a file named firstpage.xml in the root directory and write the following:
The first line is standard on all XML documents. The second line tells a web browser that is should render the XML page using the stylesheet maketool.xsl. The remainder of the file is straightforward HTML. Open the file up in a browser, and you should see a basic hello world web page. Pretty simple, eh?<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="maketool.xsl"?> <html> <body> hello world! </body> </html>
BLADE provides a number of components that you can plug into your page. One of the most basic is a rollover. Change your body to the following and open it up in a web browser:
Now, your hello world text appears inside a rollover, which is essentially a cool-looking button with mouseover effects.<body> <rollover> hello world! </rollover> </body>
Every component on the page has a theme which governs its look and feel. In the above example, the rollover had a theme of "", which is the default theme. Give it a new theme instead:
<rollover theme="nblue"> hello world! </rollover>
Not all your files are going to sit in the blade root directory. For example, you might want to create a separate folder for each actor's files. Or, you might have blade and html screens mixed together, with the devkit sitting in a blade/ directory under the xml pages. When your file is not in the blade root directory, you need to tell blade where that directory is through the blade tag. Create a folder named "myfiles" and make a new xml file in it:
Notice that the stylesheet reference on the second line has been updated to reflect maketool.xsl's new relative location.<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="../maketool.xsl"?> <html> <head> <meta> <blade root="../"/> </meta> </head> <body> hello world! </body> </html>
The html/head/meta/ section that the blade tag sits in is used to pass other information to blade. One of these is a list of themes and components used by the page, via the import-theme and import-component tags.
Themes and components in blade are named similar to java files. The component set (unlike java, one file can hold many components) components.core.widgets resides in the files components/core/widgets.js and components/core/widgets.xsl. The themepack (a group of themes) themes.public.core consists of files beginning with core in the themes/public directory. Each component and theme needs to be imported before it can be used. Additionally, due to some limitations of XSL, you need to edit the main stylesheet (e.g. maketool.xsl) for every component you import.
The reason no import statements exist in the code sample above is that they already exist - in app/config.xml. When blade renders a page, it checks both html/meta/main and document('app/config.xml')/config/imports for import statements. Comment out the imports section of app/config.xml and reload your page to see what happens.
Most blade components have corresponding JS objects which you can use to control the component. You can access these JS objects by using the page.components array, which is indexed by the object's ID. For example, try this:
The pane (a box with a titlebar that surrounds content) should be minimized - that is, the body should be invisible.<body> <pane id="p1" header="this is the header" type="dynamic"> this is the body </pane> <script> page.components["p1"].minimize(); </script> </body>
So far, we've been dealing with maketool.xsl, which converts an XML file directly into HTML. BLADE also includes page.xsl and resources.xml, which help provide a single reposity for shared screen elements (headers, sidebars, etc.). As a quick example, edit resources.xml so it contains the following:
<resources>
<class name="users">
<class name="customer">
<meta>
<name>John Q. Customer</name>
<userType>Customer</userType>
</meta>
</class>
</class>
</resources>
<body> <resource path="users/customer" res="meta/name"/> </body>
This shows you how to take information on multiple pages and condense it into a single location. Now, if the client wants you to change all references to the customer's name, you don't have to search-and-replace on all 50 screens. But there's more. Change the stylesheet at the top of your XML document from maketool.xsl to page.xsl and reload. John Q's name and his Customer designation should appear at the top of the page.
Themes are simply a collection of css classes and javascript functions which modify css attributes. When BLADE first started, themes were stored directly in css and js files. As the number of themes increased, this proved difficult to maintain. Additionally, since css has no concept of inheritance, it was impossible to extend themes. For example, if you wanted to create a new theme that slightly tweaked a rollover, you had to cut and paste all of the css and js for the rollover and then make your modifications.
BLADE uses an xml-based theme format that helps overcome some of these difficulties. Open up themes\public\core.xml and search for "nblue". You should see something like the following:
<widget name="button" theme="nblue" extends="root">
<state name="render">
<element name="button">
<height value="30px"/>
</element>
<element name="Left">
<width value="15px"/>
<background-image value="url("images/buttons/Nblue_bttn_left.gif")"/>
</element>
<element name="Main">
<color value="white"/>
<background-image value="url("images/buttons/Nblue_bttn_main.gif")"/>
</element>
<element name="Right">
<width value="15px"/>
<background-image value="url("images/buttons/Nblue_bttn_right.gif")"/>
</element>
</state>
</widget>
<widget name="button" theme="nblue-new" extends="nblue"> <state name="render"> <element name="Main"> <color value="yellow"/> </element> </state> </widget>
You have now created a new rollover theme, called "nblue-new", that looks just like the nblue rollover except that the text is yellow. Before you can use it, however, you need to compile the xml file into the appropriate css and js files. Unfortunately, the theme compilation process is currently limited to dos environments. Make sure you have saxon installed in your DOS path, open up the tools directory, and double-click on build.bat. After a little while, the new theme files will be built.
A big benefit of blade is that it allows you to move quickly from static mockups to JSP pages. Download a copy of the taglib version's example war file. It should look pretty similar. The meta tag has been replaced by a blade:init tag, and the path to the blade root is now mandatory. The body tag calls page.load() when it loads, which executes blade's onLoad array. ETable header rows have to use THs instead of TDs. Tags have to have a prefix. Other than that, its a fairly simple process to copy your blade tags straight into a JSP.