-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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...
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
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
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.
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
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
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
Asked: 2010-09-28 11:39:19 +0800
Seen: 855 times
Last updated: Oct 10 '10