Getting started with OrangeML

Getting started with OrangeML

Before starting ...

There is no special requirement to create an OrangeML document. You can edit your documents using a simple text editor like notepad or a more sophisticated one. However, using a XHTML or XML-enabled editor will guide you during document creation and will help you to produce valid documents that won't be rejected by the portal.

Writing my first OrangeML page

In this section, you will learn how to build a simple OrangeML document step by step:

First of all, you have to create the main structure that will be the container for all data.
Then, you have to add content to your document.
Finally, you can preview the document to check its completeness.

Main structure

The structure of a OrangeML document is very similar to the HTML structure. The root element must be <html> and mainly contains a head section and a body section.

OrangeML documents have to conform to a XML DTD. However, because the CADAP platform doesn't support the doctype declaration, every document must start with an XML prolog without any doctype declaration. Documents containing text in French with accentuated characters must have an appropriate encoding declaration (ISO-8859-1).

Remember that even if it is based on XHTML, OrangeML is a pure XML language. As such, it only supports XML default entities (i.e. >, <, &quote;, &) and doesn't support HTML entities (e.g.  ). If you have to display special characters, use the ASCII syntax (cf. for example http://www.lookuptables.com/)

Putting all together, we obtain the following simple OrangeML document :

<?xml version="1.0" encoding="ISO-8859-1"?> 
<html>
 <head>
  ...
 </head>
 <body>
  ...
 </body>
</html>

Adding a page title

According to the Orange graphical guidelines, a page must start with the title of the service. This title may be clicked to go back to the home page of your service (except for this home page itself obviously).

This could be achieved by using the <title> element of the <head> section, as shown below :

<?xml version="1.0" encoding="ISO-8859-1"?> 
<html>
 <head>
  <title href="/homepage/url ">Service Title</title>
 </head>
 <body>
  ...
 </body>
</html>

Adding a breadcrumbs trail

To improve the navigation inside the service, an OrangeML page should always contain a breadcrumbs trail. This can be achieved by adding a breadcrumbs element in the head section. Such an element provides a navigation item (<ni>) for each step from the root of the service to the current page.

Note : The final rendering of the breadcrumbs depends on the Orange affiliate and the device capabilities. See Hyperlinks and Navigation for more details.

<?xml version="1.0" encoding="ISO-8859-1"?> 
<html>
 <head>
  <title href="/homepage/url ">Service Title</title>
  <breadcrumbs>
   <ni href="/any/url">Service root</ni>
   <ni href="/any/url">Step 1</ni>
   <ni href="/any/url">Step 2</ni>
   <ni href="/current/url">Current page</ni>
  </breadcrumbs>
 </head>
 <body>
  ...
 </body>
</html>

Adding content

Now, you may add content to your page by filling the body section. In OrangeML, the body section can only contains high-level components called ”blocks”. Blocks have to be inserted before adding any text or image content in the page. Any “non-block” elements will be rejected by the Orange publishing platform.

<?xml version="1.0" encoding="ISO-8859-1"?>
<html>
 <head>
  <title href="/homepage/url ">Service Title</title>
  <breadcrumbs>
   <ni href="/any/url">Service root</ni>
   <ni href="/any/url">Step 1</ni>
   <ni href="/any/url">Step 2</ni>
   <ni href="/current/url">Current page</ni>
  </breadcrumbs>
 </head>
 <body>
 <block title="First block">
  Hello World !<br/>
  This is my very first OrangeML document !<br/>
  This is great !
  </block>
 </body>
</html>

Viewing my first OrangeML page

Accessing your page through the OrangeML development platform

To preview and/or checking the validity of the page, you must put it on a web server (i.e. an HTTP server that can be accessed from the Internet) and access it through the OrangeML development platform.

Lets' consider that your page is hosted at

http://www.myserver.com/dir1/dir2/mypage.oml

You can access your page via the OrangeML platform at the folowing URL

http://ocp1.ccett.fr/httppvc_clnsswww.myserver.com/dir1/dir2/mypage.oml

Important note: The OrangeML platform only transforms content identified as OrangeML pages. In order to be identified as an OrangeML content, your page must be returned by your server with the text/orangeml content type.

See orangeml_platform for more information about the platform.

You can access this URL with an actual mobile phone or with an emulator.

Final result

During the tranformation, the platform automatically adds a header and a footer.

The final rendering of the page obviously depends on the device but also depends on the Orange affiliate (i.e. Orange UK, Orange Switzerland, Orange Romania, etc.).

Below is the result of your first page. You can play with Device profile and look&feel to see how the rendering can change

<?xml version="1.0" encoding="ISO-8859-1"?>

<html>

 <head>

   <title href="/homepage/url ">Service Title</title>

  <breadcrumbs>

   <ni href="/any/url">Service root</ni>

   <ni href="/any/url">Step 1</ni>

   <ni href="/any/url">Step 2</ni>

   <ni href="/current/url">Current page</ni>

  </breadcrumbs>

 </head>

 <body>

  <block title="First block">

   Hello World !<br/>

   This is my very first OrangeML document !<br/>

   This is great !

  </block>

 </body>

</html>

Device profile:
Look&Feel:

See also