overthinkings

by Ruben Daniels

Javeline Platform 101

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

Drag & Drop

The third part of the smartbinding are drag & drop rules. First I’ll discuss the short and easy way to add drag & drop to a component.

<j:List
   dragEnabled="true"
   dropEnabled="true"
   dragMoveEnabled="true">

   <j:Item icon="icoUsers.gif">Ruben</j:Item>
   <j:Item icon="icoUsers.gif">Arnold</j:Item>
   <j:Item icon="icoUsers.gif">Henrik</j:Item>
   <j:Item icon="icoUsers.gif">Caroline</j:Item>
   <j:Item icon="icoUsers.gif">Rik</j:Item>
</j:List>

<j:List
   dragEnabled="true"
   dropEnabled="true"
   dragMoveEnabled="true">

   <j:Item icon="icoUsers.gif">Justin</j:Item>
</j:List>

These three tags operate basic drag & drop behaviour:

dragEnabled	Enables dragging any element from the component
dropEnabled	Enables dropping any element on the component
dragMoveEnabled	When this is set, any element that is dropped is moved instead of copied. Using the ctrl key the element is copied.

Drag & Dropping introduces two new actions: Move and Copy. Any element that supports drag & drop can have these actions to allow/disallow and to specify how these actions are synchronized to the server.

When creating enterprise applications that run on built web services this simple way of drag & drop does not allow enough freedom. A quick solution is to hook the dispatched events on each element and write JavaScript code to create the business logic. Although I really like JavaScript for it’s ease of use, I felt that a declarative approach would be beneficial.

In the following example there are Form, Page and Element nodes. A page must be inserted under a Form. An Element must be inserted under a Page.

<j:dragdrop>
   <allow-drag select="self::Page|self::Element" />
   <allow-drop select="self::Page" target="self::Form" operation="tree-append" copy-condition="event.ctrlKey"/>
   <allow-drop select="self::Page" target="self::Page" operation="insert-before" copy-condition="event.ctrlKey"/>
   <allow-drop select="self::Element" target="self::Page" operation="tree-append" copy-condition="event.ctrlKey"/>
   <allow-drop select="self::Element" target="self::Element" operation="insert-before" copy-condition="event.ctrlKey"/>
</j:dragdrop>

The five rules in the j:dragdrop section control drag&dropping nodes from the list to the tree. The first rule allows Page and Element nodes to be dragged (and thus no Form nodes). The 2nd rule specifies when a Page is dropped on a Form it will be appended to that node. The third that when a Page is dropped on a Page it will be inserted before that node. In a similar fashion the dropping of Element nodes is configured in the 4th and 5th rule.

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

Permalink

11 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 […]

Michal wrote @ January 29th, 2009 at 4:19 pm

Hi There,

Guys, I have gone thru the documentation available on javeline.com website nevertheless I am still unable to start with it. There are several examples which I have browse as well but would you have something like tutorial or learn by example so, I can quickly adopt and use your framework?

Thank you,
Michal

Martijn wrote @ July 6th, 2009 at 1:14 pm

I’m trying to send a form in JPF. I use a set of form elements checkbox, textbox, etc. I would like to send all these elements with Teleport to a php-script to put the values in a database. I get it to work if I declare the variables within the tags. This seems not very efficient to me.

Is it possible (like plain HTML), to submit all the form elements in one, without declaring them again within the Teleport-tags?

I.e.:

…

Ruben wrote @ July 6th, 2009 at 2:51 pm

Hi Martijn,

Yes of course. There is a demo on this online here:
http://www.ajax.org/#demos/elements.s.submission

It uses a list bound to the data, but I’m sure you can see that it works the same with form elements bound to the xml.

Kind Regards,
Ruben