Chapter 2. Running the examples

Table of Contents

The modified document

Im this chapter we are going to take a look at the example xml templates provided with xmlwebgui. This includes opening and saving of documents, modifying of elements, attributes and cdata sections.

The welcome screen. After having installed xmlwebgui point your DOM-conform bowser ^[1] to http://localhost:8080/xmlwebgui/ and you will se the following screen

Figure 2.1. The welcome screen

[D]

This screen includes links to various examples an to this documentation. This time we will use the wml example, so click on the corresponding link.

selecting an element. Now you are looking at the editing screen of xmlwebgui. This screen contains of the editingwindow at the right side, where you can see the various elements and their text contents. In this example you see a wml element ^[2] containing a card element, which contains a p element, wich stands for paragraph. At the right side there are four menus, create Child Elements ^[3] , insert Child Elements ^[4] , Options and Text/CData ^[5] . Each element has six menu items. These are select element ^[6] , edit attributes ^[7], remove element ^[8], cut element ^[9], copy element ^[10] and an indicator for the content model ^[11].

Figure 2.2. selecting an element

[D]

Click on the select element link of the p element to select it.

inserting a child element. After selecting an element, in the menu create Child Elements appear all types of elements, which can be inserted as child elements of the selected p. Click on the button strong to insert a strong element.

Figure 2.3. inserting a child element

[D]

After clicking, in the p element will appear a strong element. This strong element has a red marked content model indicator. This means that you will have to insert more elements or a textnode. This is what is done in the next step.

inserting text to an element. In this step you will insert a textnode in the newly-created strong element. Therefore you have to select the strong element by clicking on it's select element link.

Figure 2.4. inserting text

[D]

Now click on the button PCDATA in the Text/CDATA menu. This will insert a small paragraph containing the text cdata in the strong element. In the next step you will change the content of the paragraphs textnode.

changing textual content. This is very simple. Just click on the text you want to change, it will turn from a html- paragraph to a html-textarea, you enter the text of your choice and press the Ready-button to save your changes.

Figure 2.5. selecting text to be changed

[D]

Figure 2.6. saving changes to the text

[D]

If you delete the whole text in the textarea, the textnode will be removed from the document. You can change the text of the strong element the same way.

modifying attribute values. In order to modify the attribute values of an element, click on the link edit attributes , this will make the list of attributes visible.

Figure 2.7. showing the attributes

[D]

If you click this link again, it will hide the list of attributes. Editing attributes is quite the same like editing text nodes, just click on the value of the attribute or it's name, and an input field or an select box will appear. After having entered the right value click the Ready-Button again.

Figure 2.8. choosing the right attribute value

[D]

Saving changes. After having edited the document, you can save the changes by clicking on save to save and stay in the document or save & exit to return to the welcome screen.

Figure 2.9. saving changes

[D]

The modified document

If you are interested, what you have clicked and typed in the last steps of this example open the file results/wml.wml in your texteditor. What you will see looks like this:

            
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "../DTD/wml/wml1.dtd">
<wml>
  <card>
    <p id="myp" align="center">
      This is the content of the -p- Element
      <strong>
        This is the content of the -strong-element
      </strong>
    </p>
  </card>
</wml>

This is the code of your document, all indents, line breaks and white spaces have been removed, but reinserted for convienence in this example.

^[1] xmlwebgui makes use of DOM 1 methods and properties as described in Peter Paul Koch's DOM Compatibility Table. Theese are supported by Mozilla, Netscape 6 or Microsoft Internet Explorer 5 or higher.

^[2] wml is the root element of this document. Every document has exactly one root element.

^[3] This menu is currently empty, but there will be entries, when you select an element, where child elements can be appended. The corresponding submenu buttons will be enabled automatically by xmlwebgui. When clicking one of this buttons, the element will be appended after the last child of the selected element.

^[4] This menu is currently empty, but there will be entries, when you select an element, where child elements can be inserted. The corresponding submenu buttons will be enabled automatically by xmlwebgui. When clicking one of this buttons, the element will be inserted berfore the selected element.

^[5] This menu allows you to insert text to elements.

^[6] selects the clicked element

^[7] shows or hides the list of this element's attributes. This is also an indicator, which is green, if all attributes that are required have a value, and which is red, if not all attributes which need to have a value assigned, really have one assigned.

^[8] removes the element from the document

^[9] cuts the element, it can be inserted again with Paste Before (inserts before the selected element) or Paste Child (inserts as last child of the selected element) from the Options menu.

^[10] copies the element, it can be inserted again with Paste Before (inserts before the selected element) or Paste Child (inserts as last child of the selected element) from the Options menu.

^[11] If this indicator is green, everything is ok, the element has the right count and order of child elements. If it has a red background, you will have to take a look at the documentation for this kind of xml files, which child elements are allowed and wich are required inside this element.


Deploying the xmlwebgui web application		Chapter 3. Customizing xmlwebgui