How to add items to a list

March 15, 2009 at 10:49 am · Filed under Javeline, Snippet

This week’s snippet discusses two methods of adding items to a list.

First we create a list with some inline binding rules. For this example we are using a list with mode=”check” and mode=”radio” set. The mode sets the behaviour of the list, “check” to function as a list of checkboxes, “radio” to function as a list of radiobuttons.

<j:list id="lstExample1"
    mode     = "check"
    model    = "mdlData:question1"
    caption  = "text()"
    traverse = "item" />
<j:list id="lstExample2"
    mode     = "radio"
    model    = "mdlData:question2"
    caption  = "text()"
    traverse = "item" />

We can now add the model to our application:
Read the rest of this entry »

Comments

How to integrate crappy banner javascript with your neat ajax application

March 8, 2009 at 9:48 pm · Filed under Javeline, Snippet

Many banner companies are using dynamic javascript loading to insert their banners in a website. Most of these companies grew big before the Ajax term was coined and recognized as the future technology of the web. So the scripts they are using assume the page is loading while the script is inserted; they use document.write() to add html to the page. As many of you might know, using document.write on an already loaded page will clear all it’s html and leave you with a white page containing only the banner. In this week’s snippet I’ll show you how to work around this.
Read the rest of this entry »

Comments

Dynamically loading jml

February 27, 2009 at 6:16 pm · Filed under Javeline, Snippet

This weeks snippet shows how you can fetch some jml (Javeline Markup Language) from the server and run it in your jpf application. This is a good way to dynamically load parts of a big webapp or website.

First we set up the basic calls to retrieve the jml. I’ve added some handling for the error and timeout states to make sure we don’t create errors when the user is disconnected from the internet.

function callback(data, state, extra){
    if (state == jpf.ERROR || state == jpf.TIMEOUT)
        return alert("comm error:" + extra.message);

}

new jpf.http().getXml("somejml.xml", callback);

The final step is to parse the loaded jml data. We use the W3C DOM call, document.createElement to instantiate the element. Javeline Platform allows you to pass jml as a string to this function.

var jmlNode = jpf.document.createElement(data);
jpf.document.documentElement.appendChild(jmlNode);

Together it looks like this:

function callback(data, state, extra){
    if (state == jpf.ERROR || state == jpf.TIMEOUT)
        return alert("comm error:" + extra.message);

    var jmlNode = jpf.document.createElement(data);
    jpf.document.documentElement.appendChild(jmlNode);
}

new jpf.http().getXml("somejml.xml", callback);

It’s that simple.

—–

If you are new to Javeline Platform don’t hesitate to try it out. The new ajax.org website contains the downloads and reference guide which will get your started.

Comments (5)

How to synchronize states between a window and a button

February 20, 2009 at 6:09 pm · Filed under Javeline, Snippet

My colleague Lukasz is working on www.onedayapps.com, which is meant as a demo site for jpf (javeline platform). This site has a button which is selected when a window is shown, and deselected when it isn’t.

In this weeks snippet i’ll explain how to get this done easily. Lets start out with creating a simple two state button and window:

<j:button state="true">test window</j:button>
<j:window title="Test window" icon="application.png">
   Test
</j:window>

One solution is to use events. We can add an onclick event on the button and an onclose event on the window like this:

<j:button id="btnState"
   state   = "true"
   onclick = "winTest.show()">test window</j:button>
<j:window id="winTest"
   onclose = "btnTest.setValue(false)"
   title   = "Test window"
   icon    = "application.png">Test</j:window>

An easier way to do this, is to make use of bidirectional property binding. This means you connect one property to another such that when one changes, the other one changes as well. Let me show you:

<j:button
   value = "[winTest.visible]"
   state = "true">test window</j:button>
<j:window id="winTest"
   title = "Test window"
   icon  = "application.png">Test</j:window>

That’s all. Now you have a button and a window that are synchronized. When you close the window, the button is not pressed anymore.

—–

If you are new to Javeline Platform don’t hesitate to try it out. The new ajax.org website contains the downloads and reference guide which will get your started.

Comments

Ondisk and Online connecting to the right service url

February 13, 2009 at 11:57 am · Filed under Javeline, Snippet

This is the first snippet i’m writing. Hopefully I’ll manage to get one up every week. A snippet is a really short post about something useful or interesting.

This time it’s about setting up your JPF (Javeline Platform) application in such a way that it’s easy to double click and open from your disk, but also still work online. Because online can be many places; i.e. the test server, acceptance server or the live server, it’s important that relative paths are used there. But locally an absolute path needs to be used.

Start by specifying everywhere in the application relative paths, in teleport but also using data instructions. Then in the appsettings element you can specify a baseurl for all relative paths used throughout your appliaction. Now the magic comes in when using dynamic properties using the { } syntax.

<j:appsettings baseurl="{jpf.host ? jpf.host + '/' : 'http://test.example.com/'}"/>

The baseurl is set based to jpf.host if it’s set (it’s not set for the file:// protocols), otherwise it uses the url to the test server. That’s all. I hope this will be helpful in your future projects.

—-

If you are new to Javeline Platform don’t hesitate to try it out. The new ajax.org website contains the downloads and reference guide which will get your started.

Comments