Thursday, 26 April 2012

ID Space - Different method to access UI Elements

The following example is based on the following zk doc's_Guide/Fundamental_ZK/Basic_Concepts/UI_Component_Forest's_Reference/UI_Composing/ID_Space

Here is the simple zul file

<?page title="Example5" contentType="text/html;charset=UTF-8"?>
<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" />

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;

public class Example5 extends GenericForwardComposer {

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

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

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")
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()
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

No comments:

Post a Comment