Introduction to XML Part 2: Stylus Studio Stylus Studio includes the following tools: XML editor, DTD editor, XML schema editor, XSLT stylesheet editor, etc. 1. To access Stylus Studio, click on START -> Programs -> excelon-> Stylus Studio 2. To create new XML or XML related documents, click File -> New and then select the corresponding document type. Below we will illustrate the special features provided by stylus studio using the following sample XML document students.xml: <?xml version="1.0"?> <students> <student> <name first_name="tai Man" last_name="chan"/> <department>e-commerce</department> <id>01234567</id> <birth>1981-10-05</birth> </student> <student> <name first_name="wai Ming" last_name="wong"/> <department>e-commerce</department> <id>02123456</id> <birth>1979-02-01</birth> </student> </students> 1
A. Opening Files 1. To open an existing document, select File -> Open. 2. The Open dialog box appears 3. Choose the xml document, click Open A. XML Editor Stylus Studio provides text, tree, grid or schema view for the XML documents 1) XML Text View You can directly modify the XML codes. Views 2
2) XML Editor Tree View a. You can modify the tree with the following buttons, or Add new Element Delete, change and move nodes with these buttons b. Select XML -> Tree Editing and select the appropriate actions 3) Grid View which provides table-like view of the xml document 4) Schema View In selecting the schema view, if the xml document does not specify its DTD or schema, a pop up window appears. It can automatically generate the DTD or XML schema for the xml document. 3
Generating Internal DTD 1. Generated DTD 2. If you click back to text view, you can see the following codes being added automatically to the students.xml <!DOCTYPE students [ <!ELEMENT name EMPTY> <!ATTLIST name first_name CDATA #REQUIRED last_name CDATA #REQUIRED> <!ELEMENT department (#PCDATA)> <!ELEMENT id (#PCDATA)> <!ELEMENT birth (#PCDATA)> <!ELEMENT student (name,department,id,birth)> <!ELEMENT students (student)+>]> 3. To validate the xml document, click XML -> Validate Document or the validate button. A pop up message appears. 4
Generating XML Schema 1. Type in the output file name 2. Generated schema 3. If click back to the text view, you can see the following code being added to the students.xml <students xmlns:xsi=http://www.w3.org/2001/xmlschema-instance xsi:nonamespaceschemalocation="students.xsd"> 4. An XML schema file students.xsd is created. To view the schema source, click XML -> Open Associated Schema or by clicking the button 5
B. Applying the XSL StyleSheet You can create a new xsl stylesheet file or open an existing one. Using the following sample xsl file -- students.xsl <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/tr ansform"> <xsl:template match="students"> <html> <head><title>student Records</title></head> <body> <table width="80%" border="1"> <tr> <th>name</th> <th>id</th> </tr> <xsl:apply-templates/> </table> </body> </html> </xsl:template> <xsl:template match="student"> <tr align="center"> <td><xsl:apply-templates select="name"/></td> <td><xsl:value-of select="id"/></td> </tr> </xsl:template> <xsl:template match="name"> <xsl:value-of select="@first_name"/>, <xsl:value-of select="@last_name"/> </xsl:template> </xsl:stylesheet> a. Create new xsl stylesheet, click File -> New -> XSLT StyleSheet. Then type in the codings. A pop up window appears (see step 3) OR b. Open an existing file, click File -> Open. c. To edit the StyleSheet, besides directly modifying in the codes, you can also: 1. double-click an item in the XML schema pane to create a template for that element 2. drag an element from the XML schema pane into the template 3. To apply the XSL stylesheet on certain XML document, click the preview XSLT result button which can show the result of apply the XSL transformation. 4. A pop up window appears. In the source XML URL field, type in the name of the XML document you want to apply the stylesheet to. E.g. students.xml 6
5. Click OK, the results will be shown in XSLT Preview box, which provided different form of view: a) Preview in browser: display as the web browser Preview in browser XML schema b) Preview in text: display the resulted source Preview in text 7
6. Debugging XSLT StyleSheet You can debug a stylesheet. You can set breakpoints and stop through the processing by using the Debug menu and toolbar. Debug Menu Indication of Breakpoint and current instruction 8
D. Querying the XML Documents In XML Editor, it also support the querying on the XML documents. 1. Open an XML document 2. Type in the Xpath query and Enter 3. The results will be show in the Query Output box on the right. e.g. type in the query to view the all the name elements in students.xml: //name Input the Xpath query Results of Query Xpath is used to address parts of an XML document. It allows you to identify a node by matching with Xpath expression. e.g. To retrieve the name node with attribute value of first_name equal to Chan, we can use the Xpath /students/student/name[@first_name= Chan ] 9