<?xml version="1.0" encoding="ISO-8859-1"?><TUTORIAL>
<TITLE>How to create an XML language and its XML editor in 5 minutes</TITLE>

<SECTION>
<TITLE>Introduction</TITLE>
<PARAGRAPH>
This tutorial explains how to create a configuration file for Jaxe including the XML language, the menu to insert the XML elements, and the way XML elements are displayed. It also gives an example of an XSLT stylesheet. The example has been used to create the <LINK href="in_five_minutes.xml">file</LINK> you are just reading.
</PARAGRAPH>
</SECTION>

<SECTION>
<TITLE>Creation of the configuration file</TITLE>
<PARAGRAPH>
Configuration files are located in Jaxe's <CODE>config</CODE> folder, and their names end with <CODE>_config.xml</CODE>. For instance, the configuration file for configuration files (whose root element is CONFIG_JAXE), has the name CONFIG_JAXE_config.xml. We start this tutorial by launching Jaxe, choosing the button "New", and selecting "CONFIG_JAXE - Jaxe configuration".
</PARAGRAPH>
<PARAGRAPH>
There are two ways of creating a configuration file for Jaxe :
</PARAGRAPH>
<LIST>
<LI>Using an XML schema to define the XML language to use, and defining just the menus and the method to display elements in the configuration file. In this case it is possible to create automatically a basic configuration file from the schema, by opening the schema file and using the export menu.</LI>
<LI>Defining an XML language with a simplified syntax within the configuration file.</LI>
</LIST>
<PARAGRAPH>
We will use in this tutorial the simplified syntax, which only allows to define elements, their attributes, the sub-elements, and which elements can contain text. If we were using an XML schema, we would instead simply link to the schema file.
</PARAGRAPH>
</SECTION>

<SECTION>
<TITLE>Definition of the XML language</TITLE>
<PARAGRAPH>
We start the definition of the configuration's XML language by inserting an element <CODE>Language</CODE> under <CODE>Jaxe Configuration</CODE>. Inside the <CODE>Language</CODE> element, we choose to insert a <CODE>Simple schema</CODE> element to define the XML language within the config file.
</PARAGRAPH>
<PARAGRAPH>
All the elements in the XML language have then to be defined. Let's start with the root element, which we will call <CODE>TUTORIAL</CODE>. We insert an <CODE>Element</CODE> element under <CODE>Simple schema</CODE>, and give its name and specify it cannot contain text (other elements inside will contain text, but not the root element) (be careful not to use spaces in element names).
</PARAGRAPH>
<PARAGRAPH>
We then specify which elements will be authorized under <CODE>TUTORIAL</CODE>. In this case, we are planning to add the elements <CODE>TITLE</CODE> and <CODE>SECTION</CODE>, so we add a reference to them as sub-elements.
</PARAGRAPH>
<IMAGE file="def_tutorial.png"/>
<PARAGRAPH>
These elements <CODE>TITLE</CODE> and <CODE>SECTION</CODE> now have to be defined. We proceed in the same way, and authorize text under <CODE>TITLE</CODE> but not <CODE>SECTION</CODE>.
</PARAGRAPH>
<PARAGRAPH>
Here is the list of the elements we will define, with the possible sub-element :
</PARAGRAPH>
<LIST>
<LI><CODE>TUTORIAL</CODE>
<LIST>
<LI><CODE>TITLE</CODE></LI>
<LI><CODE>SECTION</CODE></LI>
</LIST></LI>
<LI><CODE>TITLE</CODE></LI>
<LI><CODE>SECTION</CODE>
<LIST>
<LI><CODE>TITLE</CODE></LI>
<LI><CODE>PARAGRAPH</CODE></LI>
<LI><CODE>LIST</CODE></LI>
<LI><CODE>IMAGE</CODE></LI>
</LIST></LI>
<LI><CODE>PARAGRAPH</CODE>
<LIST>
<LI><CODE>TITLE</CODE></LI>
<LI><CODE>EMPHASIS</CODE></LI>
<LI><CODE>CODE</CODE></LI>
<LI><CODE>LINK</CODE></LI>
</LIST></LI>
<LI><CODE>LIST</CODE>
<LIST>
<LI><CODE>LI</CODE></LI>
</LIST></LI>
<LI><CODE>LI</CODE>
<LIST>
<LI><CODE>LIST</CODE></LI>
<LI><CODE>EMPHASIS</CODE></LI>
<LI><CODE>CODE</CODE></LI>
<LI><CODE>LINK</CODE></LI>
</LIST></LI>
<LI><CODE>IMAGE</CODE></LI>
<LI><CODE>EMPHASIS</CODE></LI>
<LI><CODE>CODE</CODE></LI>
<LI><CODE>LINK</CODE></LI>
</LIST>
<PARAGRAPH>
Some elements will have attributes, which will will define with the <CODE>Attribute</CODE> element.
</PARAGRAPH>
<LIST>
<LI><CODE>IMAGE</CODE> will have an attribute <CODE>file</CODE> (required) to specify the image file.</LI>
<LI><CODE>LINK</CODE> will have an attribute <CODE>href</CODE> (required) to specify the link URL</LI>
</LIST>
<PARAGRAPH>
Text will be authorized under : <CODE>TITLE</CODE>, <CODE>PARAGRAPH</CODE>, <CODE>LI</CODE>, <CODE>EMPHASIS</CODE>, <CODE>CODE</CODE> and <CODE>LINK</CODE>.
</PARAGRAPH>
<PARAGRAPH>
To avoid repeating elements mixed with text in the sub-elements for <CODE>PARAGRAPH</CODE> and <CODE>LI</CODE>, we can define a set containing the elements <CODE>EMPHASIS</CODE>, <CODE>CODE</CODE> and <CODE>LINK</CODE>, and add this set instead of the 3 sub-elements in the elements <CODE>PARAGRAPH</CODE> and <CODE>LI</CODE>.
</PARAGRAPH>
<PARAGRAPH>
We can notice at this point that the <CODE>Language</CODE> element shows up in orange, which means it is not valid. Indeed, it is required to specify at least one possible root element for the language (this is required even when the language is specified with a WXS schema instead of the simplified schema). In our example, the root is <CODE>TUTORIAL</CODE>. So we add that with the <CODE>Root</CODE> element in the config file, just avec <CODE>Simple schema</CODE>.
</PARAGRAPH>
<PARAGRAPH>
Here is what the language definition looks like in Jaxe at this point :
</PARAGRAPH>
<IMAGE file="def_language.png"/>
</SECTION>

<SECTION>
<TITLE>A rough editor...</TITLE>
<PARAGRAPH>
Once the XML language is defined, it is already possible to edit documents with it in Jaxe... but the edition interface is not great : there is no menu for the language, all the elements are displayed in the same way, etc...
</PARAGRAPH>
<PARAGRAPH>
The difference between Jaxe and a random editor is that it is possible to configure the interface for the chosen XML language. This is what is coming up in the following steps.
</PARAGRAPH>
<PARAGRAPH>
It you've reached this point in the tutorial, you can still do a little test : choose the menu "Open configuration..." in Jaxe, and select your new configuration file (another way to do it is to move the configuration file to the <CODE>config</CODE> folder, to choose "New...", and to select the root <CODE>TUTORIAL</CODE>). The 3 left side panels are already working : we can see the list of the elements that can be inserted at a given position, the tree of the document, and the current element's attributes. It is also possible to insert elements with the contextual menu.
</PARAGRAPH>
</SECTION>

<SECTION>
<TITLE>Definition of the menus</TITLE>
<PARAGRAPH>
When an XML language has many elements, it becomes important to organize them, so as to insert them more easily than with a list of 100 elements in alphabetical order : this is the objective of the insertion menus in Jaxe.
</PARAGRAPH>
<PARAGRAPH>
We will prepare insertion menus for all the elements in the language (except the root which is automatically added to new documents), by organizing them into 3 menus : <EMPHASIS>Structure</EMPHASIS>, for the organization in the document, <EMPHASIS>Blocks</EMPHASIS> for block elements (that are not mixed with text), and <EMPHASIS>Text</EMPHASIS> for the elements that can be mixed with text. We can use the occasion to specify keyboard shortcuts to quickly insert frequently used elements : p for <CODE>PARAGRAPH</CODE>, and t for <CODE>TITLE</CODE>.
</PARAGRAPH>
<PARAGRAPH>
This is what we get :
</PARAGRAPH>
<IMAGE file="def_menus.png"/>
</SECTION>

<SECTION>
<TITLE>Elements display</TITLE>
<PARAGRAPH>
This section might be the most important one for Jaxe : it relates to the definition of the way elements will be displayed and edited in Jaxe. There are a number of <EMPHASIS>display types</EMPHASIS>, defined in detail in the <LINK href="../doc_config_en.html">syntax documentation</LINK>. The default display type is <CODE>string</CODE> : it just displays a start tag and an end tag to surround the content of the element, without any automatic indentation.
</PARAGRAPH>
<PARAGRAPH>
Here are some display types we can choose for the tutorial :
</PARAGRAPH>
<LIST>
<LI><CODE>TUTORIAL</CODE> : <CODE>division</CODE></LI>
<LI><CODE>TITLE</CODE> : <CODE>string</CODE></LI>
<LI><CODE>SECTION</CODE> : <CODE>division</CODE></LI>
<LI><CODE>PARAGRAPH</CODE> : <CODE>area</CODE></LI>
<LI><CODE>LIST</CODE> : <CODE>list</CODE></LI>
<LI><CODE>LI</CODE> : <CODE>item</CODE></LI>
<LI><CODE>IMAGE</CODE> : <CODE>file</CODE></LI>
<LI><CODE>EMPHASIS</CODE> : <CODE>string</CODE></LI>
<LI><CODE>CODE</CODE> : <CODE>string</CODE></LI>
<LI><CODE>LINK</CODE> : <CODE>string</CODE></LI>
</LIST>
<PARAGRAPH>
The <CODE>file</CODE> type, for instance, will automatically display the image linked by the <CODE>IMAGE</CODE> element. In order for Jaxe to know which attribute is linking to the file, we have to add a parameter to the element display : in this case, we have to use a parameter with the name <CODE>srcAtt</CODE> and the value <CODE>file</CODE> (the name of the attribute linking to the file).
</PARAGRAPH>
<PARAGRAPH>
Other parameters can be used to get a pleasant editing interface : "<CODE>style</CODE>" "<CODE>GRAS</CODE>" (bold) for the <CODE>TITLE</CODE> element, "<CODE>style</CODE>" "<CODE>ITALIQUE</CODE>" (italic) for the <CODE>EMPHASIS</CODE> element, and "<CODE>police</CODE>" (font) "<CODE>MONOSPACED</CODE>" for the <CODE>CODE</CODE> element.
</PARAGRAPH>
<PARAGRAPH>
Here is how this part of the configuration looks in Jaxe :
</PARAGRAPH>
<IMAGE file="def_display.png"/>
</SECTION>

<SECTION>
<TITLE>Exports</TITLE>
<PARAGRAPH>
All these things let us create beautiful XML files, but they are not very useful as such. We still have to export them to other languages, such as HTML to get web pages. To do that, we add to the config file an <CODE>Exports</CODE> element which contains an <CODE>Export</CODE> with the <CODE>HTML</CODE> output. Inside, we link to an XSL file defining the transform from our language to HTML. This XSL file can be created with Jaxe, with the "XSLT" configuration (see below to find how).
</PARAGRAPH>
<PARAGRAPH>
The addition of an HTML export in the config will provoke the activation of the <EMPHASIS>HTML Window</EMPHASIS> menu in Jaxe's Windows menu. The transform will occur every time the menu is called, and every time an update is asked by the user.
</PARAGRAPH>
<IMAGE file="def_exports.png"/>
</SECTION>

<SECTION>
<TITLE>Strings</TITLE>
<PARAGRAPH>
The interface we get at this point is usable, but we can wish to go further with displayed texts, to :
</PARAGRAPH>
<LIST>
<LI>choose a text displayed in Jaxe's "New" dialog</LI>
<LI>change the menu titles</LI>
<LI>change the titles of the elements on the tags when they are displayed in Jaxe</LI>
<LI>add a documentation for each element, easily available to users</LI>
<LI>change the title of the attribute values</LI>
<LI>do all this in several languages without having to change the schema (the language being automatically chosen for the user depending on the selected language in his operating system)</LI>
</LIST>
<PARAGRAPH>
All of that can be done with the <CODE>Strings</CODE> element. In this tutorial, we will just define a little text displayed in the dialog for creating a new document, with <CODE>Configuration description</CODE>.
</PARAGRAPH>
<IMAGE file="def_strings.png"/>
</SECTION>

<SECTION>
<TITLE>Tutorial file</TITLE>
<PARAGRAPH>
Here is the full configuration file for this tutorial : <LINK href="TUTORIAL_config.xml">TUTORIAL_config.xml</LINK>
</PARAGRAPH>
<PARAGRAPH>
If we had used an XML schema separate from Jaxe configuration file, we would have specified its path with the <CODE>XML schema file</CODE> element instead of using <CODE>Simple schema</CODE>.
Here is the files we would get by doing it like that : <LINK href="TUTORIAL2_config.xml">TUTORIAL2_config.xml</LINK> - <LINK href="TUTORIAL2.xsd">TUTORIAL2.xsd</LINK>.
</PARAGRAPH>
</SECTION>

<SECTION>
<TITLE>Creation of the stylesheet</TITLE>
<PARAGRAPH>
An XSLT document is created by choosing the "New" menu and selecting "stylesheet - XSLT". XSLT files mix several XLM languages in a document, and we see here the menus for XSLT together with the menus for XHTML.
</PARAGRAPH>
<PARAGRAPH>
The XSLT version should be defined with the value "1.0" for the attribute <CODE>version</CODE> of the root element. The transformation output has also to be defined. For instance, to obtain XHTML, <CODE>xsl:output</CODE> is used with the attributes :
</PARAGRAPH>
<LIST>
<LI><CODE>doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"</CODE></LI>
<LI><CODE>doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</CODE></LI>
<LI><CODE>encoding="ISO-8859-1"</CODE></LI>
<LI><CODE>indent="yes"</CODE></LI>
<LI><CODE>method="xml"</CODE></LI>
</LIST>
<PARAGRAPH>
In general, an HTML equivalent can be defined for every element. For instance, to display <CODE>CODE</CODE> as with <CODE>tt</CODE> in HTML, we use an XSLT <CODE>template</CODE> element with the value "CODE" for the <CODE>match</CODE> attribute, we insert inside the HTML <CODE>tt</CODE> element, and we apply the other rules recursively inside with the XSLT element <CODE>apply-templates</CODE> :
</PARAGRAPH>
<IMAGE file="xslt_code.png"/>
<PARAGRAPH>
Here is the finished <LINK href="TUTORIAL.xsl">XSL file</LINK>.
</PARAGRAPH>
</SECTION>

<SECTION>
<TITLE>Top chrono!</TITLE>
<PARAGRAPH>
Finally, we just need to choose the "Open configuration..." menu and to select our configuration file, <CODE>TUTORIAL_config.xml</CODE>, to create a new document with it. We could also move the configuration file to Jaxe's <CODE>config</CODE> folder, so that it appears in the list when a new document is created with the "New" menu.
</PARAGRAPH>
</SECTION>
</TUTORIAL>