overthinkings

of Ruben Daniels

Javeline Platform 101

March 9, 2007 at 7:14 pm · Filed under Tech, Javeline

Positioning

There are many specialist who are a star at positioning using CSS. I’m one of them. Despite that, positioning elements in a GUI is a lot of work every time. Javeline Platform has two different ways to position elements which makes my life a lot easier.

Anchoring

fig 2. Anchoring.

As fig. 2 illustrates, when using anchoring you specify how much pixels any side of the component is away from the side of its parent. Each side can be positioned arbitrarily. I can even use expressions in any of the four positions. For example I can set the left position to “50%+5″, a HTML-er’s dream come true. When the parent is resized the element in the parent is resized accordingly.

<j:Text left="25%" right="25%-30" top="100" bottom="10" />

Alignment

fig 3. Alignment.

I use alignment when I want to create a GUI that has elements covering the entire plane. See fig 3. for an example. Lets say the left component is a tree, the top-right a datagrid and the bottom a text component. A basic Outlook interface.

Use the align property to set the position together with the width and height properties.

<j:Tree align="left" width="200" align-margin="3" />
<j:Datagrid align="right" height="50%" />
<j:Text align="right" align-margin="3" />

align	Sets the position to which the component is aligned.
align-margin	The margin between the components
align-splitter	Boolean to add a splitter between the components
min-width	Minimal width of the component
min-height	Minimal height of the component

There are several other alignment properties for more advanced layouts. These are outside the scope of this article.

Grid Placement
In a lot of cases it’s necessary to create a grid of components. For instance when displaying a form. In XHTML it is common to use a table element around the components. Platform has a different approach using the grid attribute:

<j:Bar width="450"
       grid="25%,25%,25%,25%"
       margin="10,10,10,10"
       cell-padding="2"
       cell-height="15">
   <j:Label>Account Number:</j:Label>
   <j:Label>1234567890</j:Label>
   <j:Label>User Name:</j:Label>
   <j:Label>Ruben</j:Label>
   <j:Label>Account Name:</j:Label>
   <j:Label>My first account</j:Label>
   <j:Label>Last login:</j:Label>
   <j:Label>21-06-1980</j:Label>
</j:Bar>

This example creates a container with four columns each with a width of 25%. It has a margin of 10px from the sides. The space between the components is 2px and the height of each component is 15px.

Pages: 1 2 3 4 5 6 7 8 9 10 11

Permalink

8 Comments »

Kai Tischler wrote @ October 4th, 2007 at 12:12 am

Hello Ruben !

I have already sent two emails to the Javeline team via the “info@javeline.nl” email
address, but unfortunately I got no response

So I am contacting You directly here via this blog entry; because I have fallen in love with Your layout engine almost immediately ! 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 …

I am also very much excited about Javeline in its whole glory, but this particular blog comment shall address the issue of leveraging Your layout engine separately. Is there a technical way to do it ? And what about licensing then ? Or do You know of other layout engines for browsers which are as capable as Yours seems to be ?

I am looking forward to the comments to come !

Cheers

Kai

Ruben wrote @ October 4th, 2007 at 9:45 am

Hi Kai,

I just found your e-mail. It got lost in the spam box somehow. You will get a reply from me on that. It is possible to extract the layout engine using the packager. For what purpose would you like to use it? Please register to the internals mailinglist at http://developer.javeline.net/mailinglists.php and sent your answers there so the community can follow them as well.

Kind Regards,

Ruben

overthinkings » Contextmagic and Repeat wrote @ October 22nd, 2007 at 2:49 pm

[…] this was the first time you read about Javeline PlatForm, this article is a good place to start learning more about this Web Application […]

Mehmet KURT wrote @ January 2nd, 2008 at 4:27 pm

Please ! Help Me…

Using for Framework Javeline… Help Me??

bharath wrote @ February 9th, 2008 at 3:25 pm

hi , my name is bharath
i have a doubt in ajax connectivity

how to connect an ajax application to database using jdbc…
can u plz clarify my doubt.. with sample example with coding.
thanx & regards.

Ruben wrote @ February 14th, 2008 at 8:32 am

Hi Bharath,

Ajax applications connect to a backend. Most popular nowadays is to use REST to connect to a backend. This backend can be written in PHP, Perl, ASP, JSP or any other language. It’s the responsibility of that language to connect to a database using jdbc.

In Javeline PlatForm you would do something like this:

<j:teleport>
   <j:rpc id="comm" protocol="POST">
      <j:method name="getUsers" url="http://example.com/users.php">
         <j:variable name="group_id" />
      </j:method>
   </j:rpc>
</j:teleport>

<j:model id="myUsers" load="rpc:comm.getUsers(10)" />

<j:list model="myUsers">
   <j:bindings>
     <j:caption select="@username" />
     <j:icon select="@icon" />
     <j:traverse select="user" />
   </j:bindings>
</j:list>

or if you want to use the javascript approach with Javeline PlatForm you’d do:


var http = new jpf.http();
var data = http.getXml(”http://example.com/users.php?group_id=10″, function(data, state, extra){
   if(state == __HTTP_SUCCESS__){
      alert(”My XML: ” + data.xml);
   }else{
      alert(”An error has occurred”);
   }
});

Please note that these code examples are for v0.9.8 of Javeline PlatForm which will be released shortly.

Kind Regards,

Ruben

overthinkings » Alignment, Layout, Docking and it’s State wrote @ June 15th, 2008 at 6:03 pm

[…] early version of Javeline PlatForm and up untill that moment I had only positioned elements using anchoring. I did remember a nice feature that Visual Basic had, where I could align an element to one of the […]

overthinkings » What is Javeline PlatForm, and how does it compare? wrote @ June 29th, 2008 at 12:34 am

[…] supports Anchoring, Alignment and position using a grid (similar to a table in […]