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-09-29 10:29:42 +0800

zknewbie1 gravatar image zknewbie1
370 4

Anyone gets the same problem running the code?

link publish delete flag offensive edit

answered 2010-09-29 16:23:01 +0800

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

updated 2010-09-29 16:24:24 +0800

I have tried this with IE8, but it's the same as you mentioned.

<!-- ========= Pop-up window to edit selected record ============ -->
<window id='subEditWin' visible='false' width='500px' onCreate="movieNameTxtBox.focus()" border='normal' title='Edit Sub-Window'>

By the way it looks like an old fashioned zk programming style.
1. Take apply="" instead use="" and extend from GenericForwardComposer .
2. Take the time and seperate the two windows in two composers. In that case you can write following method and your focus problem is away. (Tested in IE8)

protected Textbox movieNameTxtBox; // autowired
. . .

public void  onCreate$winModal(Event event ) {
   . . . 
   movieNameTxtBox.setFocus(true);
}

best
Stephan

link publish delete flag offensive edit

answered 2010-09-29 16:35:18 +0800

zknewbie1 gravatar image zknewbie1
370 4

Thanks Stephan, could you send the whole modified code that fixes the focus problem? (I still trying to learn ZK). Also, any insight on the tab navigation that "jumps" outside the popup window?

link publish delete flag offensive edit

answered 2010-09-30 05:51:42 +0800

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

updated 2010-09-30 05:53:19 +0800

OK, here is it:

- you must modify the path to the modalWindow zul-file.
- Focus on textBox are tested with Chrome and IE8
- i mean point 3 of your whishlist is not possible because it depends on the operating system


1. your zul-file for the listbox window

<?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='de.forsthaus.example.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>

		<space spacing='1px' />

		<!-- Edit button to edit the selected row -->
		<button id='editBtn' label='Edit Record' autodisable='self' />

	</window>
</zk>


1.1 the controller/composer therefore

package de.forsthaus.example;

import java.util.HashMap;

import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Button;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Window;

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

public class ControllerTestWin extends GenericForwardComposer {

	private static final long serialVersionUID = 1L;

	/**
	 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	 * 1. All the components that are defined here and have a corresponding
	 * component with the same 'id' in the zul-file are getting autowired by the
	 * GenericForwardComposer. Means you can acces them directly by their ID. <br>
	 * 2. You can call their events bei naming conventions. i.e.<br>
	 * EventName|Seperator|ComponentId <br>
	 * onClick$saveBtn(Event event){your code here}
	 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	 */
	protected Window testWin; // autowired
	protected Listbox detailLstBox; // autowired
	protected Button editBtn; // autowired

	/** Constructor */
	public ControllerTestWin() {
	}// end constructor

	// ======================Event Handlers===================

	/**
	 * when you click the Edit Record button
	 * 
	 * @throws InterruptedException
	 */
	public void onClick$editBtn(Event event) throws InterruptedException {

		if (detailLstBox.getSelectedItem() != null) {

			String str = (String) detailLstBox.getSelectedItem().getValue();

			// Map that holds params that we need in the new created Window
			HashMap<String, Object> paramMap = new HashMap<String, Object>();
			paramMap.put("mySelectedItem", str);

			// create the Window and overhanded a map with params
			Executions.createComponents("/test/test_tab_sequenceModal.zul", testWin, paramMap);
		} else {
			Messagebox.show("Please select a row first.");
		}
	}// end method

	/** when you click the Save Record button on the Edit Sub-Window */
	public void onClick$saveEditBtn(Event event) throws InterruptedException {
		// Some action
	}// end method

}// end class


2. your zul-file for the modal Edit Window

<?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'>

	<!-- ========= Pop-up window to edit selected record ============ -->
	<window id='subEditWin'
		apply='de.forsthaus.example.ControllerTestWinModal' 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' />

			<button id='closeSubWinBtn' label='Close Window' />
		</h:center>
	</window>
	<!-- ========= End of pop-up Window ============ -->

</

2.1 the controller/composer therefore

package de.forsthaus.example;

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

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

public class ControllerTestWinModal extends GenericForwardComposer {

	private static final long serialVersionUID = 1L;

	/**
	 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	 * 1. All the components that are defined here and have a corresponding
	 * component with the same 'id' in the zul-file are getting autowired by the
	 * GenericForwardComposer. Means you can acces them directly by their ID. <br>
	 * 2. You can call their events bei naming conventions. i.e.<br>
	 * EventName|Seperator|ComponentId <br>
	 * onClick$saveBtn(Event event){your code here}
	 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	 */
	protected Window subEditWin; // autowired
	protected Textbox movieNameTxtBox; // autowired
	protected Button saveEditBtn; // autowired
	protected Button closeSubWinBtn; // autowired

	private String movieTitle;

	/** Constructor */
	public ControllerTestWinModal() {
	}// end constructor

	@Override
	public void doAfterCompose(Component window) throws Exception {
		super.doAfterCompose(window);

		// Read back the overhanded param from the map.
		if (this.arg.containsKey("mySelectedItem")) {
			setMovieTitle((String) this.arg.get("mySelectedItem"));
		} else {
			setMovieTitle(null);
		}
	}

	// ======================Event Handlers ====================

	public void onCreate$subEditWin(Event event) throws SuspendNotAllowedException, InterruptedException {

		movieNameTxtBox.setValue(getMovieTitle()); // set the value
		movieNameTxtBox.setFocus(true); // set the focus

		subEditWin.doModal(); // show window in modal-mode
	}

	/** when you click the Save Record button on the Edit Sub-Window */
	public void onClick$saveEditBtn(Event event) throws InterruptedException {
		// Some action
	}// end method

	/** when you click the Close Window button on the Edit Sub-Window */
	public void onClick$closeSubWinBtn(Event event) throws InterruptedException {
		subEditWin.onClose();
	}// end method

	// ===================== Setter / Getter ====================

	public void setMovieTitle(String movieTitle) {
		this.movieTitle = movieTitle;
	}

	public String getMovieTitle() {
		return movieTitle;
	}

}// end class

best
Stephan

link publish delete flag offensive edit

answered 2010-09-30 08:34:14 +0800

zknewbie1 gravatar image zknewbie1
370 4

Thanks so much Stephan. It'd be great if there's a "best practice" section on the zkoss.org site where the latest code usage is recommended to be used. The way I'm learning ZK so far is to visit various articles on the website, each of them use a different way of coding, new way and old way mixed together. Please send me any link or tutorial that shows the most up-to-date approach in creating ZK app. Also please share your experience to us newbies about the best way to learn ZK. Thanks so much Stephan.

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

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 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 12:43:09 +0800

zknewbie1 gravatar image zknewbie1
370 4

Thanks a lot Stephan.

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
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