To open a document, select the File/Open... menu in the XMLEditor. Click on the browse button and select your XML file. If you want to use an external CSS, stylesheet select you stylesheet in the same dialog, then click Open.
The XMLEditor keeps track of the document you open in its builtin history. Your history is present on the right side of the opening dialog. To recall a document from the history, click once on its name. You can still specify another stylesheet then press the load button.
Double-clicking on an history item closes the dialog and loads your document automatically.The XMLEditor allows you to open documents located on the network as well. Morphon currently supports HTTP and FTP. To select a file from the net, select the protocol in the method combobox of your open dialog, and click the browse button on the right to specify its location.
To open an xml document located on a webserver, select the HTTP method in the open dialog, then click the HTTP... button
If your computer is connected to the internet, try opening the xml document http://slashdot.org/slashdot.xml via HTTP, using the stylesheet <XMLEditorRoot>/examples/slashdot.css via File.The stylesheet is created by the CSSEditor. It associates visual rules with xml elements. It can be run as an independent application or by using the XMLEditor and then choosing Format | Edit CSS.
Once the CSSEditor is running, select New File and choose the DTD that the stylesheet will be based on. Choosing the DTD is done by either clicking on Edit | Choose DTD and then selecting a DTD, or adding a rule (by selecting the + icon) and selecting the DTD from the new window.
Visual rules can now be added to the elements of the xml file. This is done by clicking on the + icon or by secting Edit | Add, then selecting the element you want the rule applying to. Once the element has been selected it is available in a pool of selected elements. These can be selected as desired and visual rules applied to them using the graphical editor.
The xml file is created by the XMLEditor. When the editor is running create a new file by selecting File | New or by clicking on the new file icon. Select the DTD that the xml will be based on and if desired at this stage the stylesheet. Click the load button. The xml elements will be shown as a tree view on the left hand side with the right hand side having clearly marked boxes for data entry. Insertion of optional elements and element attributes is controlled by right clicking on the tree view and inserting the element according to the dialog box which gives all possible options at that stage.
This example will show how to create a simple xml menu for display in an xml enabled web browser.
The menu has a menu title and one or more courses. Each course has a course title (such as Main Course), and one or more dishes. Each dish has a name and a price.
The DTD for this is shown below.
<!ELEMENT MENU (MENUTITLE, COURSE+)> <!ELEMENT COURSE (COURSETITLE, DISH+)> <!ELEMENT DISH (DISHNAME, DISHPRICE)> <!ELEMENT MENUTITLE (#PCDATA)> <!ELEMENT COURSETITLE (#PCDATA)> <!ELEMENT DISHNAME (#PCDATA)> <!ELEMENT DISHPRICE (#PCDATA)>
The first thing to do is create a directory (such as Menu) for the example and save the DTD as a text file in the directory with the name Menu.dtd .
Next, start the XMLEditor by running the appropriate startup file and select New File. Browse to the DTD file and select it. Leave the stylesheet alone for the moment and select Load to load the DTD. The XMLEditor needs to be told which is the root element of the xml (the ultimate parent element). Select MENU as the root element.
The XMLEditor will now show the required elements of this xml file: a menu title and one course. The course has a course title and one dish. The dish consists of a dish name and a price.
Give data to these elements. Perhaps, Luxury Menu for the menu title, Starter for the course title, Toast and Pate for the dish name and £2.50 for the dish price.
Now optional elements can be added.
Only one starter seems a little poor so you could add another dish. Perhaps Prawn Cocktail at £3.00. To do this right click on COURSE in the tree view and select Insert Element. A window opens giving you the available insertion points. To put another dish after the current dish choose - insert at end of Course, click on DISH, then OK. This gives you another DISH element after the first dish element. Enter values into the correct boxes.
You could carry on entering more dishes into the starter course in a similar fashion. However, eventually you will want to add another course. To do this right click on COURSE in the tree view. Select Insert Element and select the after radio button to select insertion after the current COURSE element. Click on COURSE and then OK. Another COURSE element will have been added to the xml. Enter the course name in the appropriate box, perhaps Main Course. Then enter a name and a price in the boxes for the one required dish. These could be Fish and Chips and£5.50.
More dishes and courses are added in a similar way until the xml data file for the menu is complete.
Save the xml file by selecting Save As, browsing to the required directory and saving the file as Menu.xml . You must then click on Select to actually save the file. You now have a correct xml file representing the menu.
Now you can create the stylesheet. To do this select Format | Edit CSS to bring up the CSSEditor. Select File | New to create a new stylesheet. You now have a default stylesheet. You must now load the DTD that the xml file must conform to. Do this by selecting Edit | Choose DTD and browse to the required DTD. You can now start adding rules to the stylesheet.
We want the entire menu to be surrounded by a border consisting of a double red line. Click on the + icon to add a rule and select MENU to bring in into the pool of elements. Now click on MENU so that normal is highlighted.
Choose the visual rules you want for the menu.
First you want the MENU element to be considered as a block so select type | Display | block from the visual editor. Now we want to define its borders so select Box Model and then alter its parameters. Experiment with Margin, Padding and Border Width. To set the border to a double band select Border Style and then choose Double from the drop down box. To make the border red select Border Color and then choose Red from the drop down box.
You can see the effects of the changes you make by saving the stylesheet to the directory as Menu.css and then viewing the xml file through an xml aware browser such as Internet Explorer 5.
The next thing we want to do is to put the menu title in the centre in a large blue font. To do this we click on the + icon and select MENUTITLE, then Add. Selecting MENUTITLE (normal) from the pool of elements we set type | Display to block and then move to the Visual Formatting section. Click on Font then the Font Size drop down box and select Enter Value. Enter a font size e.g. 24. To centre the text select Text and press the Center icon. Then click on Color and select Blue from the drop down box. Save the CSS file and reload the browser to see the changes.
Now we want to put each course inside a double silver border. Do the same to COURSE as for MENU except select Silver as the colour.
We want the course title to be in large blue font on its own. Select COURSETITLE, type | Display | block. Then switch to Visual Formating. Set the text to large and the foreground colour to Blue.
We can put each dish in a red double border in the same way as we did MENU.
Lastly we want the dish name to be on the lefthand side and the dish price to be on the righthand side. Select DISHNAME and type as block. Select Visual Formatting | Text and select the Left button. Do the same for DISHPRICE but select the Right icon.
You now have an xml file Menu.xml with a stylesheet Menu.css, both corresponding to the Document Type Definition Menu.dtd.
The screen is split into two parts. On the left is a hierarchical view of your document's structure, and on the right is the content of your document.
To navigate around your document, select components of the tree, expanding or collapsing elements as you do so. Selecting an element in the tree will highlight that component in the content window. (Morphon will scroll the element into view if it is not already visible.)
To insert new elements into your document, you choose whether a new element should go before or after the element currently selected, or whether it should be contained within that element, or replace it. Select where you want to add a new element, in the left pane. Then click the right mouse button and select "insert element".
A dialog appears, asking you whether the element you want to create is to appear within, before or after the selected element, or whether it is to replace it. Choose "After". The list on the left then allows you to choose after which element (of the hierarchy of nested elements up to this point) you want to insert yours. the hierarchy is displayed with the inner-most element at the top. Select an element. The list on the right then offers you the choice of valid elements that may be inserted at that point.
If the element you are inserting can have a choice of structure, a dialog appears to allow you to tell Morphon what that structure should look like. Select the appriopriate elements from the choices give, and choose "OK". Depending on the choice and complexity of the element you want to insert, further dialogs may appear asking for a similar indication for their respective elements.
You can also insert an 'inline' element - the element is placed within the text, instead of as a separate level beneath the current element. Inline elements typically may only contain text and other inline elements.
To insert an inline element, right-click in the text where you want the inline element to be added. A dialog appears immediately, asking you which inline you want to add. Select the one you want and hit "OK". You may then be asked to add to this element. Select any you want, and hit "Apply". Hit "Close" to close the window.
An entity reference allows text (and/or markup) defined elsewhere to be referenced in your document.
An example is the "<" character. Because this character can be interpreted with special meaning by XML processors, it must generally be escaped using the special string "<".
To add an entity reference, select "Insert Element" as before. This time however, choose the "inline" option. A list of valid entities will be displayed in the right-hand list. Select the one you want, and hit "OK". Depending on the entity you select, an Attributes dialog may be displayed, as before.
During loading of a document (parsing) entities are expanded so their content shows up in the document. Except for external entities this content is not editable in the editorpane. This needs to be done in the Edit Entities Dialog. To see the results of such an edit the document needs to be reloaded. The same applies to adding/pasting an entity into the document.
The editor is capable of editing and saving the content of external entities. However some points need to be taken care of:
When a document contains multiple instances of the same reference (to an external entity) the instances are not kept synchronized (edit one instance does not change the other(s)).
During saving only the first instance of the entity is saved.
If an external entity has an encoding it is preserved however the editor does not support editing it (add, change or remove).
An attribute defines further characteristics of an element that typically aren't part of its content. For example, a StreetAddress element may be defined which has a number of uses. One might enable it to be identified as a "CurrentAddress" or a "PreviousAddress" in an XML document. These aren't part of the address itself (they don't specify location information), but they do identify what kind of an address is being represented.
Attributes are defined in a DTD (Document Type Definition) or a schema.
To set an attribute, select the element you want to set the attribute for, right-click, and choose "Show Attributes Dialog" from the menu that appears.
The list of valid attributes is displayed in the left column. A checkbox to the left of each indicates whether it is currently set.
To set a new attribute, first check (tick) the checkbox. You can then edit its value in the right column. Proceed in this way for any further attributes you wish to set. When you are finished, choose "Apply", then "Close". (If you just choose "Close", Morphon will prompt you to save changed attributes.)