Blog: Posts from March, 2021

Blog

Posts from March, 2021

Saturday, March 6, 2021Print Subscribe

Numbers, numbers, numbers

Hybrid mobile apps are built with HTML and JavaScript hosted in the native webview. Form input controls make possible a comfortable and speedy text input on mobile devices.

The numeric input is a different story. HTML 5 standard requires numbers to be presented visually as the sequence of 0-9 characters with the optional single decimal separator expressed as the "period" character. For example, the currency value of $1,234.56 must be entered in the form field as 1234.56. The end users in many countries will expect to enter the "comma" character as the decimal separator. The native "number" input element in HTML forms will not allow that! Yet this input type is relied upon by web and hybrid app developers since it will activate the native numeric keyboard on a mobile device.

Embedded Unified Keyboards for “number” and “tel”

Touch UI activates its own virtual keyboard through the Universal Input when a numeric value or a telephone number is expected to be entered on a mobile device. Developers can create custom keyboards of their own to enhance the app.

The virtual keyboard in the screenshot does not change the presentation of the number value and retains the currency formatting. Characters “comma” and “period” are automatically derived from the current culture of the user interface.

The keyboard slides up from the bottom of the touch screen and will not be displayed if the app is operated with the mouse pointer. The keyboard will float next to the input field on the tablet-size touch screen.

Placement of the compact numeric keyboard next to the input field makes it easier to enter the numbers on a touch screen. The native virtual numeric keyboards have many more additional characters and are placed at the bottom of the screen. Apple devices will push the entire screen upwards and try to center the numeric input vertically, which is quite aggravating if you enter many numeric values in the form.

The virtual keyboard of the Touch UI does not cause the screen to resize, does not push the screen in any direction, and allows scrolling the entire contents up and down.

Touch UI virtual keyboard will accept numeric input from the physical keyboard attached to the device giving the user the flexibility of using both physical and virtual keys as needed.

The numeric virtual keyboard can be activated for any data field tagged as kbd-number.

Touch UI will activate the virtual keyboard for the data fields that have“phone” of “fax” in the name or tagged as kbd-tel.

If the virtual keyboard is not desired for a particular “number” or “tel” field, then have it tagged as kbd-none. The native keyboard of the operating system will be displayed instead.

You can also disable the virtual keyboard of Touch UI globally by making the following change in the touch-settings.json configuration file of the app.

Touch UI supports two standard virtual keyboards and each of them needs to be disabled separately through ui.keyboard.number.enabled and ui.keyboard.tel.enabled configuration properties.

Developers can make the floating keyboard appear wider or narrower by setting up the ui.keyboard.number.width property to a number greater or less than 360. The sliding keyboard will display on the smaller screen and will match its width.

If the property ui.keyboard.touchOnly is set to false, then the keyboard will be displayed when the app is controlled with the mouse pointer. This can be useful when debugging the app.

You can also enable the virtual keyboard to be always visible on focus for a particular data field if you have it tagged as kbd-number-auto or kbd-tel-auto. This tag will make the framework ignore the ui.keyboard.touchOnly setting.

Custom Virtual Keyboards

Developers can define their own virtual keyboards to enhance the input speed and comfort.

For example, consider the list of home cities for the employees of the Northwind sample data set. Kirkland, London, Redmon, Seattle, and Tacoma are the only values. It is likely that the new employees will be hired there.

Let’s create a virtual keyboard that makes it possible to enter a city with a single keystroke or touch.

Begin by creating a JavaScript file with the arbitrary name in ~/app/js folder of your app. Define the contents of the file as follows:

The code will register the city keyboard that will be activated on any data field tagged as kbd-city or kbd-city-auto. Try the latter on the City data field in editForm1 and createForm1 of the Employees data controllers. This is what you will see when the City field gains the focus.

Touch or click the keyboard button or press K, L, R, S, or T on the physical keyboard to enter the name of the city.

The following code in the same JavaScript file will define a custom keyboard for the Extension field in the same form to allow only the numeric values to be entered for the phone extension of the employee.

Here is what it looks like if the Extension data field is tagged as kbd-extension-auto.

Tag the data field Home Phone as kbd-tel-auto and the telephone virtual keyboard will be displayed for the field and server as the filter of acceptable characters on any type of screen.

Note that the “*#” key will activate the alternative “tel” keyboard that looks like the one shown below. The user will press “123” to switch to the numeric keypad of the “tel” keyboard. Developers can define their own alternative keyboards in a similar fashion.

Custom virtual keyboards provide a simple and consistent mechanism for enhanced data input across all operating systems and devices.

You can redefine the standard “number” and “tel” keyboards as well. Find their definitions in the ~/app/js/daf/touch-input.js file. Extract and place them in your own file with the desired changes when needed.

Number Auto Format

Numeric virtual keyboard also supports the awesome auto-format feature. Set the value of ui.keyboard.number.format option to true to turn it on globally for the entire app.

This configuration will enable auto-format of numbers on touch screens. Run the app and enter 1234567 in a currency field. The number will be formatted as $12,345.67 if you are located in the United States.

The number fields without a data format string will not be affected. The auto-format will determine the number of decimal places and apply the formatting to the value accordingly. Set ui.keyboard.touchOnly to false and the same auto-formatting with the virtual keyboard will be performed on any device.

Users can enter the whole numbers by pressing the “decimal separator” key when the number auto-formatting is enabled.

Labels: Low Code, Touch UI

Friday, March 5, 2021Print Subscribe

Universal Input and Focus Highlighting

Universal Input is the major technological advantage of apps based on Touch UI. The forms do not contain the physical HTML input elements. The values are rendered as text, which is perfect for reading. If the user clicks on the value, then the framework will create a native HTML text input control and place it over the value. It may also open a built-in virtual keyboard to make it easier to type on mobile devices.

This approach makes the forms look natural since the values are not embedded in the restrictive text boxes and flow naturally on the page. It also improves performance making possible responsive data-driven surveys with hundreds of inputs.

The active input control may have one of the three styles of focus that help the user to see the active input.

Underline

The default highlighting for input focus in Touch UI is the line going below the entire length of the field value. The line matches the color of the accent.

Outline Focus

The second alternative is to outline the entire value. The City name is outlined in the modal form in the screenshot.

You will need to change the configuration file ~/app/touch-settings.json as follows to replace the default “underline” style with the “outline”.

Minimalist Focus

There is also a minimalist variation of the focus for a clean uncluttered look. The City name shows up as a selected text ready to be changed or replaced on focus in this screenshot. Set the style to “none” for a minimalist input focus.

Label Color Accent

You have another option to make the input focus more obvious if you prefer. Set up the label property of the focus to true in touch-settings.json.

The input label will get a touch of accent color when the focus is acquired.

Initial Text Selection

The framework makes another important configuration of the input on focus. It will either select the entire text value or place the cursor of the text input control at the end of the value. The former is done when the end user is operating the app with the mouse pointer and the latter is taking on touch screens.

You can override the default behavior like this:

This will result in the direct opposite of the default configuration with the cursor placed right after the last word of the Contact Title in the screenshot:

Labels: Features, Rapid Application Development, Touch UI

Thursday, March 4, 2021Print Subscribe

Light or Dark? Automatic Theme Detection.

If you had a pleasure of setting up a new device recently, then you might remember the challenge of choosing between the Light and Dark themes for the user interface. The modern operating systems also have an optional automatic transition between the two based on the time of the day.

Touch UI does have two major theme variations called Light and Dark with multiple accents that make possible bringing a splash of color to each theme. Your app will automatically detect the theme of the device and switch the theme for you.

Here is an example of iPad Mini with the online app in Dark theme.

The color accent of the app will not change when the switch of the theme occurs. If you have designed your own brand accent or prefer a particular standard accent, then your customization choice will remain in place.

If you are a Windows user willing to experiment with the automatic theme detection, then search for Theme in the Start menu, load up your app in the browser and try switching the dark and light app modes in the Colors settings.

Choose the dark colors and observe the instant change from Light to Dark: The browsers will go “dark” and so is the app.

Flick the switch and bring the light back. The user interface of the operating system changes and so does the application built with Code On Time. The screen shot shows Chrome, Edge, and FireFox respond in exactly the same way.

Your application will also detect that the theme has changed when it loads up.

If you prefer to force the particular theme for the application, then disable the theme detection in ~/touch-settings.json like this:

The dark mode of the operating system will be ignored.

Our recommendation is to keep the theme detection in the enabled state. Light color on the dark display or the dark panels on the light background may cause an unintended distress to the end users of your app.

If you have designed your own “brand-name” accent, then make sure that it supports both themes of Touch UI or make the specific adjustments as we do in the configuration of the Vantage accent found at ~\app\css\themes\touch-accent.vantage.json:

Labels: Features, Touch UI