0

Inconsistent setFocus and tab sequence behaviors

asked 2010-09-28 11:39:19 +0800

zknewbie1 gravatar image zknewbie1
370 4

Hi, I'm using ZK 5.0.4 and have a test zul page to test the setFocus and tab sequence behavior:

ZUL file:
======

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xmlns='http://www.zkoss.org/2005/zul'
    xmlns:h='http://www.w3.org/1999/xhtml'
    xsi:schemaLocation='http://www.zkoss.org/2005/zul WEB-INF/xsd/zul.xsd'
    anyAttribute= " ">


<window id='testWin' use='GcmScLaunch.ControllerTestWin'
        border='normal' title='A Test Page'>
    
  <!-- This listbox display the movies names  -->
  <listbox id='detailLstBox' width='200px' checkmark='true'>
    <listhead sizable='true'>
      <listheader label='Name'/>
    </listhead>
    <listitem label='Tom And Jerry' value='Tom And Jerry'/>
    <listitem label='Tweety and Sylvester' value='Tweety and Sylvester'/>
    <listitem label='Bugs Bunny' value='Bugs Bunny'/>
  </listbox>
  
  <!-- Edit button to edit the selected row -->
  <space spacing='1px'/>
  <button id='editBtn' label='Edit Record' autodisable='self'
     onClick='testWin.editBtn_onClick()'/>
  
  <!-- ========= Pop-up window to edit selected record ============ -->
        <window id='subEditWin' visible='false' width='500px'
                border='normal' title='Edit Sub-Window' >
          
          <label value='Movie name:'/>
          <textbox id='movieNameTxtBox' width='80%' constraint='no empty'/>

          <separator/>
          <h:center>
            <button id='saveEditBtn' label='Save Record' autodisable='self'
                    onClick='testWin.saveEditBtn_onClick()' />
            
            <button id='closeSubWinBtn' label='Close Window'
                    onClick='testWin.closeSubWinBtn_onClick()'/>
          </h:center>
        </window>
  <!-- ========= End of pop-up Window ============ -->
</window>
</zk>

Controller:
========

package GcmScLaunch;

import java.sql.SQLException;
import javax.servlet.ServletContext;
import java.util.*;
import org.zkoss.zul.*;
import org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.event.EventListener;

/** Controller class for test.zul page */

public class ControllerTestWin extends Window {
  private ZKCommonUtils zkCommonUtils = new ZKCommonUtils();
  /**  Constructor */
  public ControllerTestWin() {
  }//end constructor
  //===========================================================================
  private Listbox getDetailLstBox() throws Exception {
    return (Listbox) getFellow("detailLstBox");  
  }//end method
  private Window getSubWin() throws Exception {
    return (Window) getFellow("subEditWin");
  }//end method
  private Textbox getSubWinTxtBox(Window subWin) throws Exception {
    return (Textbox) subWin.getFellow("movieNameTxtBox");
  }//end method
  private Button getSubWinSaveBtn(Window subWin) throws Exception {
    return (Button) subWin.getFellow("saveEditBtn");
  }//end method
  // ======================Event Handlers======================================        
  /** when you click the Edit Record button */
  public void editBtn_onClick() throws Exception {
    if (this.getDetailLstBox().getSelectedItem() != null) {
      this.getSubWinTxtBox(this.getSubWin()).setValue(
        (String) this.getDetailLstBox().getSelectedItem().getValue()
                                                      );
      this.getSubWinTxtBox(this.getSubWin()).setFocus(true);
      this.getSubWin().doModal();            
    }
    else {
      Messagebox.show("Please select a row first.");
    }
  }//end method
  /** when you click the Save Record button on the Edit Sub-Window */
  public void saveEditBtn_onClick() throws Exception {
    //Some action
  }//end method
  /** when you click the Close Window button on the Edit Sub-Window */
  public void closeSubWinBtn_onClick() throws Exception {
    this.getSubWin().setVisible(false);
  }//end method

}//end class

Below are my test steps and problems:
============================
1. Select "Tweety and Sylvester" and click Edit Record button, you should see the edit textbox on the Edit Sub-window has the focus
2. Select "Tom And Jerry" and click Edit Record button, the testbox does not have focus this time !!
(Note: this only happens on IE7; Chrome or Firefox are fine)
3. while still having the Edit Sub-Window opened, hit the Tab key to navigate the sub-components without using the mouse, notice that the tab sequence go outside the Edit sub-window and jumps to the URL address bar! How could I restrict the tab sequence to only navigate within the Edit Sub-Window ? (Note: this happens to all browsers: IE, Chrome, Firefox...)

Your insight is greatly appreciated. Thanks...

delete flag offensive retag edit

15 Replies

Sort by ยป oldest newest

answered 2010-10-10 19:55:54 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

Hi zknewbie1 & terrytornado,
onCreate getting called twice is because of the way GenericForwardComposer processes event handlers based on naming convention onXXX$component. From the code it seems if you use onCreate event for currDateLabel is poseted twice, once by GenericForwardComposer when onCreate$currDateLabel method is processed and once by forward condition.

link publish delete flag offensive edit

answered 2010-10-06 05:11:24 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2010-10-06 05:29:30 +0800

Yes, this is not nice, but have no effect to the count of the created components.

Log:

================= Checking Order of execution ==================
this is Constructor
This is doAfterCompose()
this is Label onCreate
Count of zk components: 3
<Window id="testWin">
    <Label id="" />
    <Br id="" />
    <Label id="currDateLabel" />
<Window />

this is Label onCreate
Count of zk components: 3
<Window id="testWin">
    <Label id="" />
    <Br id="" />
    <Label id="currDateLabel" />
<Window />

Yes, the count is 3 , because the Br you have declared as a native html.

You can check this by implementing and calling our helper class who shows the component tree and declared methods of the DOM .

   . . .
   import de.forsthaus.util.ZkossComponentTreeUtil;
   . . .

	/** currDateLabel onCreate event-handler */
	public void onCreate$currDateLabel(Event event) throws Exception {
		System.out.println("this is Label onCreate");

		System.out.println("Count of zk components: " + testWin.getChildren().size());

		// helper class for showing the DOM tree
		System.out.println(ZkossComponentTreeUtil.getZulTree(testWin));
	
       }// end method

Maybe some of the zk core team can bring light on this.

EDIT: I see the light is bringing from samchuang in this Thread: http://www.zkoss.org/forum/listComment/13964

best
Stephan

link publish delete flag offensive edit

answered 2010-10-05 15:45:52 +0800

zknewbie1 gravatar image zknewbie1
370 4

I tried a quick test and get a very weird result: the onCreate for the Label component got called twice!! Could you run the test code below and check your Tomcat log output to see if you see the same symptom? Thanks..

ZUL file:
======

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xmlns='http://www.zkoss.org/2005/zul'
    xmlns:h='http://www.w3.org/1999/xhtml'
    xsi:schemaLocation='http://www.zkoss.org/2005/zul WEB-INF/xsd/zul.xsd'
    >

<window id='testWin' apply='GcmScLaunch.ControllerTestWin'
        border='normal' title='A Test Page'>
  <label value='Just a quick test on the order of method execution...'/><h:br/>
  <label id='currDateLabel' forward='onCreate=onCreate$currDateLabel'/>

</window>
</zk>

Controller file:
==========

package GcmScLaunch;

import java.sql.SQLException;
import javax.servlet.ServletContext;
import java.util.*;
import java.io.*;
import org.zkoss.zul.*;
import org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;

/** Controller class for test.zul page */

public class ControllerTestWin extends GenericForwardComposer {
  //private ZKCommonUtils zkCommonUtils = new ZKCommonUtils();
  //Auto-wire components
  private Window testWin;
  private Label currDateLabel;

  /** Controller constructor */
  public ControllerTestWin() {
    System.out.println("================= Checking Order of execution ==================");
    System.out.println("this is Constructor")  ;
  }//end contructor

  @Override
  public void doAfterCompose(Component win) throws Exception {
    super.doAfterCompose(win);
    System.out.println("This is doAfterCompose()");
  }//end method

  /** currDateLabel onCreate event-handler */
  public void onCreate$currDateLabel(Event event) throws Exception {
    System.out.println("this is Label onCreate");       
  }//end method
  
}//end class

link publish delete flag offensive edit

answered 2010-10-05 06:15:31 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2010-10-05 06:15:57 +0800

Yeah, that's interesting.

I have a look at the codes of the composers and searched in the forum for that.
Seems that not all components onCreate events are automatically forwarded by naming convention at time.

Have a look at these two informations. Thread and An_Introduction_of_ZK_Composer

I have done a Push in the thread. Maybe a zk developer can say something to this.

There is a way to do it manually in zul code:
zul:

<textbox	forward="onCreate=onCreateTextbox" />

composer:

public void onCreateTextbox(Event event) {
		System.out.println(event.getName());
		System.out.println("Textbox created");
	}

log:

2010-10-05 13:03:13,767 DEBUG   ArticleMainCtrl M[<init>] - super()
onCreateTextbox
Textbox created

best
Stephan

link publish delete flag offensive edit

answered 2010-10-04 17:26:02 +0800

zknewbie1 gravatar image zknewbie1
370 4

Also, could you let me know the order of execution of the 3 methods inside the ControllerTestWin that extends GenericForwardComposer:

1. the Constructor of this ControllerTestWin class.
2. the doAfterCompose() method
3. the onCreate$testWin() method

It's because I suspect the problem I have in my question above have something to do with the order of those method get executed. Please educate me. Thanks..

link publish delete flag offensive edit

answered 2010-10-04 17:08:40 +0800

zknewbie1 gravatar image zknewbie1
370 4

Hi Stephan, I notice one weird thing: in the classic way of doing things (having the Controller extends Window), my currDateLabel_onCreate() method works fine; but when I try the new way (having the Controller extends the GenericForwardComposer), my onCreate$currDateLabel() method does not work. I have to put it inside the onCreate() of the main Window in order for it to work, like below. Any idea? Thanks.

/** onCreate Handler for the main test Window */  
  public void onCreate$testWin(Event event) throws Exception {
     this.onCreate$currDateLabel(event);    
  }//end method

   /** onCreate Hander for the Label component 
    *   Note: if this method not called from inside the main testWin's onCreate() above, it will not work! 
    */
   public void onCreate$currDateLabel(Event event) throws Exception {
       currDateLabel.setValue("Hello World");
   }//end method

link publish delete flag offensive edit

answered 2010-09-30 12:43:09 +0800

zknewbie1 gravatar image zknewbie1
370 4

Thanks a lot Stephan.

link publish delete flag offensive edit

answered 2010-09-30 12:35:45 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2010-09-30 12:37:10 +0800

It's not for your application logic.

normally you have this by implementing the Interface Serializable {

the searialVersionUID is the UID by searializing of a class. Needed by saving or transfering a class. Also needed for clustering.
Eclipse will do that automatically.

http://en.wikipedia.org/wiki/Serialization

link publish delete flag offensive edit

answered 2010-09-30 10:10:12 +0800

zknewbie1 gravatar image zknewbie1
370 4

Thanks for the great insight Stephan. Just curious, there's a class variable "serialVersionUID" in your modified code that I don't see being used anywhere, could you let me know what the purpose is?

link publish delete flag offensive edit

answered 2010-09-30 09:38:22 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2010-09-30 09:40:17 +0800

Hmmmmm,

i don't know the best way to learn zk, because all times the zk guys have new features and helpfull modifications for the programmers.
I don't know which framework have such an incredible speed by updates/bugfixes/new feature.
A very very big thanks to the zk team.

I remember on what i have struggled by beginning.

1. How to build the skeleton for a North|West-Menu|Center Content area.
2. How to build a menu inWest-Menu area.
3. How to open/create a new ContentFile by clicking a menuItem.
4. How to interact between different windows, means controllers/composers.
5. How to access the database stuff.

For the first 4 points i have a guy here from the forum who helps me by phone about 2 hours. That was my Big Bang.

In your case:
Read the MVC smalltalks.
Seperate your windows/controllers.
Don't begin with scripting in zul-files.
Look at the documentation/codes structure in the Zksample2 app. After reading the MVC smalltalks,
have a look on the article module (or any module with (adb = automatically databining ) in the menu text.

best
Stephan

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-09-28 11:39:19 +0800

Seen: 855 times

Last updated: Oct 10 '10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More