Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Is there a way to override the generated UI Widget Id?
Here's why I want/need it.
Scenario:
In my "Edit Profile' page, I offer strong password generation, which I am trying to encourage my users to utilize. As part of that encouragement, I wanted to offer/suggest that they use a browser tool/plugin, such as LastPass. However, in testing my ZK application, LastPass doesn't actually work. Why? Because such tools rely on their being a textfield that has a variation of "user" and "password" or "pwd" as part of the id. Because ZK generates some funky random id, such as a0212, of course no password manager is going to recognize a field with such an id as being either the user or password field.
Ron
You'll need to add a form component around your textboxes, because it seems that Lastpass ignores names otherwise. So, something like this should work:
<window xmlns:h="http://www.w3.org/1999/xhtml">
<h:form>
<vlayout>
<textbox name="username" />
<textbox name="password" />
</vlayout>
</h:form>
</window>
Another option is to use the ZHTML input component, which you can then configure manually however you like. The id values of ZHTML components end up in the dom element as-is in the client-side, so you can just directly set the ids and it will work. You will, however, lose ZUL-specific features such as constraints:
<window xmlns:h="http://www.w3.org/1999/xhtml">
<vlayout>
<h:input id="username" />
<h:input id="password" />
</vlayout>
</window>
I strongly recommend the first approach, because ZHTML components are much limited in comparison to ZUL components.Why don't you keep the authentication page as a simple .jsp? :)
Anyway here you may find inspiration: http://books.zkoss.org/wiki/ZK_Developer's_Reference/Testing/Testing_Tips
Gio
As far as I know, Lastpass looks at name attributes of fields. You can set those in ZK InputElements by calling setName or specifying it in ZUL.
However, that might not be enough if Lastpass also expects a form and a submit button.
I tried your suggestion of using the "name" attribute, but no go. I'm convinced that it must be using the generated widget id, based on the following:
Source of login page:
<script class="z-runonce" type="text/javascript">zk.appName='soc-ds-zk';zk.pi=1;zkmx(
[0,'dDBP_',{dt:'z_54a',cu:'/soc-ds-zk',uu:'/soc-ds-zk/zkau',ru:'/index.zul'},[
['zul.utl.Style','dDBP0',{visible:false,src:'assets/css/Customize.css'},[]],
['zul.wnd.Window','dDBP1',{id:'loginWin',$$onSize:false,$$onMaximize:false,$$onOpen:false,$$onMinimize:false,$$onZIndex:false,$onClose:true,$$onMove:false,width:'315px',prolog:'\n',title:'Distributor Services Login',position:'center,center',border:'normal',mode:'overlapped'},[
['zul.box.Vlayout','dDBP2',{prolog:'\n\t'},[
['zul.grid.Grid','dDBP3',{id:'loginForm',$$onRender:true,$$onDataLoading:true,$$onInnerWidth:false,$$onPageSize:true,$$onScrollPos:false,sclass:'gridLayoutNoBorder',_topPad:0,emptyMessage:null,_totalSize:3,_offset:0},[
['zul.grid.Rows','dDBP4',{_offset:0,visibleItemCount:3},[
['zul.grid.Row','dDBP5',{_index:0},[
['zul.wgt.Label','dDBP6',{value:'\n\t\t\t\t\tName:\n\t\t\t\t\t'},[]],
['zul.inp.Textbox','dDBP7',{id:'userId',$$onError:false,$$onChange:false,width:'110px',name:'user',maxlength:10},[]]]],
['zul.grid.Row','dDBP8',{_index:1},[
['zul.wgt.Label','dDBP9',{value:'\n\t\t\t\t\tPassword:\n\t\t\t\t\t'},[]],
['zul.inp.Textbox','dDBPa',{id:'userPwd',$onOK:true,width:'110px',name:'pwd',maxlength:15,constraint:'no empty,/[0-9]+/: Please enter digits only',type:'password'},[]]]],
['zul.grid.Row','dDBPb',{visible:false,_index:2},[
['zul.wgt.Label','dDBPc',{value:'Customer:'},[]],
['zul.inp.Longbox','dDBPd',{id:'customer',$$onError:false,$onOK:true,$$onChange:false,width:'110px',maxlength:6,cols:11},[]]]],
['zul.grid.Row','dDBPe',{_index:3},[
['zul.wgt.Label','dDBPf',{},[]],
['zul.wgt.Button','dDBPg',{id:'loginBtn',$onClick:true,label:'login',image:'assets/images/padlock.png',dir:'reverse'},[],'os']]]]]]],
['zul.wgt.Label','dDBPh',{id:'messageLbl',height:'28px'},[]]]]]]]],0,
['clientInfo','["z_54a"]']);
</script>
When I try to tell LastPass to save the site info, it displays for the user field 'dDBP7' and for the pwd field 'dDBPa, which are the generated values by ZK. It totally ignores my name attribute values.
I could try, as gganassin suggests, but I love a challenge and I have to see if I can't get this to work in my current zul.
Ron
Asked: 2012-09-03 18:19:47 +0800
Seen: 194 times
Last updated: Sep 04 '12