| <?xml version="1.0" encoding="utf-8"?> |
| <?xml-stylesheet type="text/xsl" href="../../../wtp.xsl"?> |
| <html> |
| <head> |
| <meta name="root" content="../../../../" /> |
| <title>XML Schema Editor Tutorial</title> |
| </head> |
| <body> |
| |
| <h1>XML Schema Editor Tutorial</h1> |
| <p> |
| <b>By Keith Chong and Craig Salter</b><BR/> |
| December 23, 2004<BR/> |
| <BR/> |
| <P> |
| This tutorial will use the catalog.xsd from the "Editing and validating XML files" Examples. To create it, |
| select New -> Examples... to launch the wizard. Follow the instructions described in the wizard, then click Finish to create the example project. |
| </P> |
| <P> |
| Once created, under the PublicationCatalogue folder, locate the Catalogue.xsd file and double click the file to open it in the XML Schema Editor. As shown below, an Outline and Properties view is provided in addition |
| to the editor pane. At the bottom of the editor area you'll see that there is a 'Source' and a 'Graph' tab at the bottom of the editor area. The 'Source' tab is used |
| for basic XML source editing. The 'Graph' tab is used for higher level graphical editing. Select the 'Graph' tab so that you're looking at the Graph view. As shown |
| below you should see a 'top level' view of the XML Schema that summarizes all of the components (e.g. elements and types) that are defined in the schema. |
| <BR/> |
| <BR/> |
| <IMG border="0" src="images/xsdeditor-figure1.jpg"/> |
| </P> |
| <P>In order to see these components in detail you can 'drill down' on a component of interest by double clicking on it. For example, |
| if we double click on the 'Book' component, the editor will display the structure of the 'Book' element as shown below. Notice that the +/- controls can |
| be used to navigate into an element's containment structure. To return to the 'top level' view, press the back button |
| <IMG border="0" src="images/xsdeditor-backbutton.jpg"/> |
| at the top left of the editor, or right clicking within the editor and selecting 'Back to Schema' from the context menu.<BR/> |
| <BR/> |
| <IMG border="0" src="images/xsdeditor-figure2.jpg"/> |
| </P> |
| <P>Editing the schema is achieved by invoking context menu actions on selected objects in the Graph view and |
| using the properties view to modify the properties of the selected object. Follow the steps below to create a new element |
| declaration and define its content.</P> |
| <OL> |
| <LI>right click within the 'Elements' section of the top level schema and choose 'Add Global Element'</LI> |
| <LI>use the properties view to change the name of the element to 'Paper' |
| <IMG border="0" src="images/xsdeditor-figure3.jpg"/> |
| </LI> |
| <LI>now double click on the element in the editor to drill down on the element so that we can edit its structure</LI> |
| <LI>right click on Paper and select 'Add Sequence' to specify that the element will contain a sequence of child elements.<BR/> |
| <IMG border="0" src="images/xsdeditor-figure4.jpg"/> |
| <BR/> |
| </LI> |
| <LI>click on the anonymous complex type, and then from the properties view, click on the [...] button for Base Type.<BR/> |
| <IMG border="0" src="images/xsdeditor-figure5.jpg"/> |
| <BR/> |
| <BR/> |
| </LI> |
| <LI> |
| The Available Types dialog will appear. Select the User Defined Complex Types radio button, then select PublicationType, and click OK |
| <IMG border="0" src="images/xsdeditor-figure6.jpg"/> |
| <br/> |
| <BR/> |
| </LI> |
| <LI> |
| Paper's type is now shown below. Right click on the sequence node and add an element.<BR/> |
| <IMG border="0" src="images/xsdeditor-figure7.jpg"/> |
| <BR/> |
| <BR/> |
| </LI> |
| <LI> |
| Name the newly added element 'URL', because, say, the paper is found on the web.<BR/> |
| <IMG border="0" src="images/xsdeditor-figure8.jpg"/> |
| <br/></LI> |
| <LI> |
| Click on the Paper element. In the properties view, click on the 'Other' tab. For the |
| substitutionGroup property, click in the cell editor to the right of the label. A drop-down |
| combobox will appear. Select PublisherType. Your editor should look like this:<BR/> |
| <BR/> |
| <IMG border="0" src="images/xsdeditor-figure9.jpg"/> |
| <BR/> |
| </LI> |
| <BR/> |
| <LI>Now that we've finished editing the XML Schema you can save the file.</LI> |
| </OL> |
| </p> |
| </body> |
| </html> |
