Handle the events in the nested ids space

The following example show how we can handle the events in the nested ids space

Zul File

<window id="win1" title="Win1" border="normal" width="300px" apply="mypack.Example6">
<button id="btn1" label="Win 1 Button" />
<separator bar="true" />
<space />
<window id="win2" title="Win2" border="normal" width="200px">
<button id="btn2" label="Win 2 Button" />
<separator bar="true" />
<space />
<window id="win3" title="Win3 " border="normal" width="200px">
<button id="btn3" label="Win 3 Button" />
</window>
</window>
</window>



In order to manipulate the UI Components, let us follow the MVC Pattern

First we need to create a composer and let us connect the zul and composer by using apply attribute

Here is the composer java class

package mypack;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Textbox;

public class Example6 extends GenericForwardComposer {


public void onClick$btn1(Event event) {
alert("Button 1 Clicked");
}

public void onClick$btn2$win2() {
alert("Button 2 Clicked");
}

public void onClick$btn3$win3$win2() {
alert("Button 3 Clicked");
}

}

Read More

ID Space - Different method to access UI Elements

The following example is based on the following zk doc

http://books.zkoss.org/wiki/ZK_Essentials/Introduction_to_ZK/Component_Based_UI
http://books.zkoss.org/wiki/ZK_Developer's_Guide/Fundamental_ZK/Basic_Concepts/UI_Component_Forest
http://books.zkoss.org/wiki/ZK_Developer's_Reference/UI_Composing/ID_Space


Here is the simple zul file

<?page title="Example5" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Example" id="outerWin" border="normal" apply="mypack.Example5">
<button id="outerBtn" label="Outer Win Button" />
<window id="innerWin" border="normal">
<button id="innerBtn" label="Inner Win Button" />
</window>
</window>
</zk>


Now we will see how we can access all these components and do some actions. In this example,
i have just changed the caption, so that's action for us now.

In order to manipulate the UI Components, let us follow the MVC Pattern

First we need to create a composer and let us connect the zul and composer by using apply attribute

Here is the composer java class

package mypack;

import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Path;

import org.zkoss.zul.Button;
import org.zkoss.zul.Window;

@SuppressWarnings("rawtypes")
public class Example5 extends GenericForwardComposer {

private static final long serialVersionUID = 1L;
private Window outerWin;
private Window innerWin;
private Button innerBtn;
private Button outerBtn;

@SuppressWarnings("unchecked")
public void doAfterCompose(Component comp) throws Exception {
/**
* Dont forget to call super doaftercomposer. By calling this, it will
* add the event listner for us
*/
super.doAfterCompose(comp);

outerWin = (Window) comp;
// Set the outer window title
outerWin.setTitle("Title Changed");

// Now let us try to access outerbtn by different methods

// Using getfellow
outerBtn = (Button) outerWin.getFellow("outerBtn");
outerBtn.setLabel("Outer Button accessed 1");

/**
* The Path provides the utility method getComponent which takes the
* relative path of the component as its argument. outerBtn is
* equivalent to outerWin/outerBtn
*/

// Using Path
outerBtn = (Button) Path.getComponent("/outerWin/outerBtn");
outerBtn.setLabel("Outer Button accessed 2");

/**
* The getFirstChild method returns the first child component of the
* caller. The advantage of using this method is that you don't even
* need to know the component ID to fetch the component.
*/

// Using Getfirstchild
outerBtn = (Button) outerWin.getFirstChild();
outerBtn.setLabel("Outer Button accessed 3");

// Now let us try to access innerBtn by different methods

// Using getfellow
innerBtn = (Button) outerWin.getFellow("innerWin")
.getFellow("innerBtn");
innerBtn.setLabel("inner Button accessed 1");

// Using Path
innerBtn = (Button) Path.getComponent("/outerWin/innerWin/innerBtn");
innerBtn.setLabel("inner Button accessed 2");

// Using Getfirstchild
innerBtn = (Button) outerWin.getFirstChild().getNextSibling()
.getFirstChild();
innerBtn.setLabel("inner Button accessed 3");

// Now let us try to access innerWin by different methods
// Using getfellow

// Using getfellow
innerWin = (Window) outerWin.getFellow("innerWin");
innerWin.setTitle("Inner window accessed 1");

// Using Path
// We can also use (Window)Path.getComponent("outerWin/innerWin");

innerWin =  (Window)Path.getComponent("/outerWin/innerWin");
innerWin.setTitle("Inner window accessed 2");


// Using Getfirstchild
innerWin =  (Window)outerWin.getFirstChild().getNextSibling();
innerWin.setTitle("Inner window accessed 3");
}
}


You can see above, we have used different methods to access the UI Components

Read More