Hi Craig,

as of 4 years ago, CSS selectors were declared safe for normal use: http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/ , although sanity must prevail https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS .

Hank



>Both are horrible solutions
>
>Multiple screens means no DRY. You have to change things all over the place, greatly increasing costs and time.
>CSS Selectors are pretty bad. They have horrible performance in the browser.
>
>Again, rewrite is a better solution. And also again... most developer teams go about rewrite the wrong way which increases costs.
>
>>Hi Thomas,
>>
>>I hope I understand what your mean, not very sure though ... [I understand DRY as "Don't Repeat Yourself"]
>>
>>>That was our take as well. While the introduced changes in the code were easy to understand, they were numerous ***and*** un-DRY, which ***is*** expected from a machine generated process.
>>
>>do you mean that the same adaptation may occur at different places in the application? yes of course
>>
>>>At latest at the point where some of the forms would have to be redesigned for small screened devices, additional code would follow - and then following the trails of machine assisted code droppings would lead to more maintainance due to introduced non-DRY-ness ;-))
>>
>>redesigned for small screened devices: not necessarily - you have several options:
>>
>>1/ you can save a .scx as a class from which you can derive several *.scx for each resolution; as each FiC request comes with browser's viewPortWidth and viewPortHeight as form properties, you can decide which form you'll send to your user:
>>

>>thisForm.wForm(iCase(;
>>  between(thisForm.wViewPortWidth, w1, w2) and between(thisForm.wViewPortHeight, h1, h2),;
>>    'form1.scx',;
>>  between(thisForm.wViewPortWidth, w3, w4) and between(thisForm.wViewPortHeight, h3, h4),;
>>    'form2.scx',;
>>    'form3.scx';
>>), other parameters)
>>

>>
>>Notes:
>>- this solution will work exactly the same in desktop and web mode.
>>- all your code is in the parent form class - NO DRY
>>
>>2/ you can keep a single source form and take advantage of CSS3 @display directive to adapt the layout to the client display (sample CSS distributed with FoxInCloud Application Server):
>>

>>  @media screen  and (orientation: landscape) and (min-width:569px){ /* desktop = iPhone < 5 + 300 */
>>    
>>    #ecran_3_scx {width:780px; }
>>
>>    #ecran_3_scx-myavatar_  {left:665px!important}
>>    #ecran_3_scx-democntbas {left:665px; }
>>    #ecran_3_scx-logoff {left:740px; }
>>
>>    #ecran_3_scx-mycntgrdpage {width:770px; }
>>    #ecran_3_scx-mycntgrdpage-demolbllinespage {left:653px; }
>>    #ecran_3_scx-mycntgrdpage-mycbolinespage {left:704px; }
>>    #ecran_3_scx-mycntgrdpage-mynavq {left:645px; }
>>    #ecran_3_scx-mycntgrdpage .aw-grid-control {width:630px!important; }
>>  }
>>
>>  @media screen  and (orientation: landscape) and (max-width:568px){ /* iPhone 5+ = iPhone < 5 + 88  */
>>    #ecran_3_scx {width:568px; }
>>
>>    #ecran_3_scx-myavatar_  {left:453px!important}
>>    #ecran_3_scx-democntbas {left:453px; }
>>    #ecran_3_scx-logoff {left:518px; }
>>
>>    #ecran_3_scx-mycntgrdpage {width:558px; }
>>    #ecran_3_scx-mycntgrdpage-demolbllinespage {left:441px; }
>>    #ecran_3_scx-mycntgrdpage-mycbolinespage {left:492px; }
>>    #ecran_3_scx-mycntgrdpage-mynavq {left:433px; }
>>    #ecran_3_scx-mycntgrdpage .aw-grid-control {width:420px!important; }
>>  }
>>
>>  @media screen  and (orientation: landscape) and (max-width:480px){ /* iPhone < 5 */
>>    #ecran_3_scx {width:480px; }
>>
>>    #ecran_3_scx-logoff {left:430px; }
>>    #ecran_3_scx-myavatar_  {left:365px!important}
>>    #ecran_3_scx-democntbas {left:365px; }
>>
>>    #ecran_3_scx-mycntgrdpage {width:470px; }
>>    #ecran_3_scx-mycntgrdpage-demolbllinespage {left:353px; }
>>    #ecran_3_scx-mycntgrdpage-mycbolinespage {left:404px; }
>>    #ecran_3_scx-mycntgrdpage-mynavq {left:345px; }
>>    #ecran_3_scx-mycntgrdpage .aw-grid-control {width:333px!important; }
>>  }
>>

>>
>>Notes:
>>- you get the CSS selectors (eg '#ecran_3_scx-logoff {left:518px; }') by a simple copy-paste from the FiC-generated CSS - you just need to adjust the value (eg '518px;') to whatever you need
>>- You can even edit these values in the browser dev tools connected to your handheld device (eg Safari connected to an iPhone/iPad), visually adjust, copy and paste into your CSS file, reload the source CSS, etc.