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.