0

Overriding widget id's [closed]

asked 2012-09-03 18:19:47 +0800

rdgrimes gravatar image rdgrimes
735 7

updated 2012-09-03 18:20:37 +0800

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

delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by rdgrimes
close date 2013-01-26 03:26:35

5 Replies

Sort by ยป oldest newest

answered 2012-09-04 15:47:10 +0800

gekkio gravatar image gekkio flag of Finland
899 1
http://gekkio.fi/blog

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.

link publish delete flag offensive edit

answered 2012-09-04 08:17:19 +0800

gganassin gravatar image gganassin flag of Luxembourg
540 6
http://www.hybris.com/

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

link publish delete flag offensive edit

answered 2012-09-04 12:28:26 +0800

gekkio gravatar image gekkio flag of Finland
899 1
http://gekkio.fi/blog

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.

link publish delete flag offensive edit

answered 2012-09-04 15:14:17 +0800

rdgrimes gravatar image rdgrimes
735 7

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

link publish delete flag offensive edit

answered 2012-09-04 18:06:51 +0800

rdgrimes gravatar image rdgrimes
735 7

Excellent! I tried method 1 and it worked. Not sure why the form wrapper made the difference, but it did.

Thanks,

Ron

link publish delete flag offensive edit

Question tools

Follow

RSS

Stats

Asked: 2012-09-03 18:19:47 +0800

Seen: 192 times

Last updated: Sep 04 '12

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