Javeline Markup Language
Although the colleagues at our naming department had a day off when this one was concucted, it does cover the meaning quite well. It is a subset of XML in which you can describe how your application looks and behaves. Let me give you an example:
<html xmlns="http://www.w3.org/1999/XHTML"
xmlns:j="http://www.javeline.net/j">
<head>
<title>Hello World</title>
<script src="jfw_debug.js"></script>
</head>
<body mode="xml" bgcolor="#D4D0C8">
<j:loader>
<div id="loadscreen">Loading...</div>
</j:loader>
<j:settings debug="true" debug-teleport="true" />
<j:skin src="skins.xml" />
<j:include src="bindings.xml" />
<j:List width="150" height="100">
<j:Item icon="icoUsers.gif">Ruben</j:Item>
<j:Item icon="icoUsers.gif">Arnold</j:Item>
<j:Item icon="icoUsers.gif">Nancy</j:Item>
<j:Item icon="icoUsers.gif">Caroline</j:Item>
<j:Item icon="icoUsers.gif">Rik</j:Item>
</j:List>
</body>
</html>
Besides the basic XHTML elements there, i’m sure you notice the elements in the j: namespace. By clicking on the [View Example] button you will see a list containing five users. You can now play around with the small application. After the text ‘Loading…’ has dissapeard click on one of the users in the List. By pressing [F2] you can rename it. The list has full keyboard support; use the arrows and the [del] key for instance.
Declarative Development
What I’ve tried to accomplish with Platform is to combine the strengths of declaring your application with the imperative approach of JavaScript. Which one to use is in most cases very clear. There is a gray area however, in which it is up to you to decide which one to use. In essence everything that can be done declaratively can be done using JavaScript. Vice versa this is not the case. When declaring an application as you can think about your goals and forget about the specific implementation. Which, in my view, is the boring part; the stuff that is the same for every application. I feel it is important to tell you that when you go a little further than just placing elements, the way to think might require a change on your part.
In this part of this article I will discuss the basic JML tags and Components. In the parts to follow more feature will be discussed which introduce several tags you can use in declaring your application. To give you a general feel of what type of tags you can find here is an explanation of the ones from the example:
| j:loader | The HTML and text within this tag is displayed during the load of the application. |
|---|---|
| j:settings | This tag is used to tell Platform how it should operate. In the example above the debugging features are turned on. |
| j:skin | Loads the skin file. It is possible to define skins within this tag. |
| j:include | Includes JML from a URL at the position of this tag. |
| j:List | This is a tag, which is actually one of many. If we would like a Button component we would write j:Button and so forth. This tag draws the component and gives it it’s properties such as a width, height etc. |
| j:Item | The tag is used by the List component to determine it’s data. Other components might required other tags (i.e. the Tab component requires a Page tag) |
N.B. The cheatsheets contain all the available tags as well as several use examples.
A nice feature of using an XML based declarative approach is the ability to intermix Javeline components with XHTML elements. (From now on I will just show the relevant portions in examples):
<h1>My example list</h1> <p>Check out this list</p> <div style="border:2px solid red;padding:10px"> <j:List width="150" height="100" /> </div>
For bigger applications you don’t want to load a 100KB xml file just to load the interface. For this and other purposes you can insert JML dynamically, either using script or adding a src attribute on an element.
fig 1. Layers in architecture.
Javeline Platform has a strict way of seperating different layers. There’s not only an MVC seperation but also one of style (skin), state and language (See fig 1.). These are seperated such that each layer is changable whilst the application is running. This way of development makes it very easy to add otherwise difficult functionality. Working together with members of a team is less of a pain because you work in seperate layers. I will discuss each layer in the upcoming sections.
! I am currently doing some research with regard to layout in the native contemporary browsers, and Your approach seems to be really unique ! I have played around with it a little bit and am so impressed right now that I want to leverage Your layout engine ! I know that I can use the packager to extract only parts out of all the Javeline SDK stuff; but I couldn’t make it extract the layout parts … in fact I couldn’t get it to work at all …