lookserver 10 enhancements for HTML 5

Posted by Nick Hampson on Oct 18, 2013 11:00:00 AM

   

HTML 5It has been a while since I have talked specifically about product stuff but some of the new features in lookserver 10, supported in developer 10, are items I've been advocating so I thought it best to give some reasons why…..

The first item is custom CSS class. This property enables developers to add a custom CSS class to any element on the screen. It's worth noting that this property is not a required property, nor do you need HTML, CSS or JavaScript skills to use lookserver, but the addition of this functionality allows developers to add fine-grain control if they wish. lookserver builds the UI automatically based on rules defined in the recognition engine. CSS then takes over and controls styling and general layout. But what if you want a different effect on a specific screen or wish to target one control in a different way? Well in the past, if you couldn't make the required changes in the IDE, you had to rely on custom JavaScript to target an element. In reality, because the IDE provides enormous control, you didn't need this very often but when you did, it added to effort and complexity….which we don't like. So the CSS class property has been added to enable you to control individual elements as you wish, should you need to.

For the desktop/browser world the benefits might extend to some extra nice styling for specific items, but on mobile devices it can be particularly useful, as some of the green paradigms don't translate automatically in the mobile space. This little property offers simple features which enhance usability greatly for mobile users.

In HTML the property appears as follows:

class="look-unknownentrycapable look-textbox myclass"

In the IDE the property looks like this:

cssclass

The second item is input type. Another useful HTML 5 feature; this new property allows you to specify an input type appropriate to the control. Again, this is particularly handy for mobile devices where the on-screen keyboard dynamically changes to optimize for the specified input. Some of the common input types are 'telephone', which generates a numeric keypad, 'number' which defaults to the standard keypad already set to numeric mode, and 'email' which brings up a keypad optimized for email address entry, with @ and . at you fingertips. There are other input types which are useful for desktop users too but the major win here is for mobile users. The end result means that developers can now simply select an input type from the list, where required, and the extra code is injected into the HTML. The code is very simple on the HTML side so don't let anyone fool you into thinking that this is something specific to their technology. Wink, wink.

Check out W3C schools for more info on input types

Sample HTML code showing the inserted input type property

Telephone: <input type="tel" name="usrtel">

In the IDE the property looks like this;

inputtype

Last, but by no means least, is placeholder text. The idea here is to provide a brief instruction or sample string within the entry field itself, which helps users understand what the field requires. It's useful on the desktop but even more so for mobile devices where space is constrained and training is rare.

Previously, placeholder text was implemented using JavaScript, but it was clunky and not always reliable. With HTML 5 it has become a native feature, making it easy to use, fast, and reliable. It's a great usability feature which can aid the quality of data input and assist learning.

In HTML, this property inserts a placeholder attribute to the INPUT tag;

<input type="text" name="fname" placeholder="First name">

In the IDE the property looks like this;

placeholder text

For more information refer to the W3C schools link on placeholder text .

You may have noticed that all of these properties have a small orange dot against them, this is to show developers which properties are HTML only, there are some smartclient-only properties shown with a blue dot as well. Most of what we do works for both but there are a few differences and this is how we ensure they are easily differentiated.

Lets now take a look at how this all comes together.

The generated HTML for a control using these features would look like this:

<input name="TopScreen$_nlctl33" id="MainContent_TopScreen__nlctl33" tabindex="4" class="look-unknownentrycapable look-textbox myclass" onkeyup="TabOutWhenFull(0,this);" placeholder="555 1234" onblur="LostFocus();" onchange="TabOutWhenFull(0,this);" data-control-name="" onfocus="GotFocus(&quot;MainContent_TopScreen__nlctl33&quot;);" type="tel" onkeypress="TabOutWhenFull(0,this);" style="left:76px;width:104px;z-index:4;height:26px;position:absolute;top:185px;margin:1px 0px 1px 0px;padding:0px 2px 0px 2px;border-width:1px;font-size:8.25pt;">


I've made a couple of videos so you can see just what effect this has in use:

First the placeholder text and custom class:


The second video shows mobile keyboard optimization using the input type parameter:



I hope this has been helpful, if anyone is interested in more information on lookserver 10 or CSS stay tuned for my blogs and in-depth info soon or view the on-demand video today.

Nick Hampson
Author
Nick Hampson
UI/UX Expert, looksoftware



View the lookserver on-demand webinar