Touch UI

AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(179) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Touch UI
Thursday, June 24, 2021PrintSubscribe
Responsive Width of Grid Columns

The new exciting feature of Touch UI is the ability to express the width of the responsive grid columns in pixels. The new tag column-width-(tn|xxs|xs|sm|md\lg\xl|xxl)_NNN makes it possible to provide the multiple values for the grid column width that will be applied conditionally in the visual containers of the specific size. We have developed this new mechanism for grid column sizing while working on the Live Designer for applications built with Code On Time. 

The Sizing Problem

HTML tables are commonly used to present data in the grid format. The browsers will automatically evaluate the text in the table cells and set the width of each table column for the best fit. This works great for the standalone tables with the known number of rows. 

If your grids are designed for infinite scrolling or consistent paging of a large number of rows, then a different mechanism must be put in place. Only the small subset of rows is rendered initially and therefore it is not possible to figure the best column width based on the text in the cells of the leading rows. Touch UI framework takes advantage of the Columns property of the data fields in the Grid views. Column values of the fields in the data controller views are derived from the size of the database table columns. The framework figures the total width of the columns by iterating through the visible data fields in the view. This allows us to determine the relative width of each individual column in the grid. Next the framework calculates the width of the grid column in pixels by multiplying the physical width of the visual container by the relative width of the column. The framework also applies constraints to ensure that the columns are never too narrow and remain usable.

The screenshot demonstrates the grid of orders and the selected order in the reading pane wizard form. The latter shows the grid of the order details.

The framework has calculated the width of individual columns to provide the best fit for the data. Scrolling, filtering, and sorting will not change the column width in both grids to ensure a consistent presentation. 

Developers can increase the value of the Columns property of individual data fields to provide them with the larger possible real estate. Unfortunately it makes it difficult to achieve the desired width without much trial and error.

The Sizing Solution

The app in the screenshot above is running in the live preview mode and matches the size of the iPad Pro. The framework has assigned the logical width md (medium) to the master list and xs (extra small) to the reading pane.

The individual logical width abbreviations supported in Touch UI are matched with the physical width of the visual containers as follows:

tn0 - 319
xxs320 - 479
xs480 - 575
sm576 - 767
md768 - 991
xxl1366 - . . .

The second column in the master grid of Orders is Customer Company Name. It represents the alias of the CustomerID. Add explicitly the “alias” data field to grid1 and tag it as 

column-width-tn-200 column-width-md-400

This will instruct the framework to set the column width to be 200 pixels if the visual container of the grid is at least tn (tiny). The “tiny” range starts from 0 and therefore the first tag will set the width of Customer Company Name to be always equal to 200 pixels. The second tag instructs the framework to set the width of the grid column to 400 pixels in the visual containers that are at least 768 pixels wide.

This is the effect of the tags on the presentation. The customer name is now 400 pixels wide since the visual container size is md.

Tap the hamburger menu in the top left corner to expand the sidebar. The visual container of the master grid will reduce to sm (small) size. This will also reduce the width of the Customer Company Name to 200 pixels.

Apply the tag column-width-tn-NNN to each data field in the grid to set the pixel-perfect presentation whatever the size of the visual container. 

You can selectively apply the tag to the specific columns to ensure the predictability and responsiveness of the presentation. The “fit to width'' mechanism of Touch UI will take care of the remaining columns in the grid. Alternatively apply the column-width- tag to every data field in the grid1 view of the data controller to override the grid column width decisions made by the framework.

Visual Designer and Grids

End users can resize the grid columns by dragging the divider in the grid header. The new width is memorized in the user storage of the browser

Dragging of the grid columns in the “preview” mode by the developer will cause the data fields to be automatically tagged accordingly with the column-width-tn- tags and will make it simple the task of grid configuration. The designer will automatically add the “aliased” fields of the lookup data fields to the grid views when the “alias” column is resized. 

Friday, April 16, 2021PrintSubscribe
Say Goodbye to Glyphicons

 Touch UI has a long history. The framework was introduced in December of 2013. It was built on top of jQuery Mobile and represented our attempt to provide a “mobile” presentation style for apps created with Code On Time.

Here is the sample screenshot from that time:

The graphics of jQuery Mobile were based on a small subset of Glyphicons that was contributed by the namesake company in the SVG format. The extended set of 250 icons found their way into Bootstrap 3.0. We have integrated Bootstrap to provide the means of creating the content pages in Touch UI and promptly upgraded the framework to use the corresponding web font.

Glyphicons continued to be a part of Touch UI framework up until now.

Touch UI of today gets its looks from the Material Icons library and can be extended with an additional icon set when needed. The new framework works equally well on the devices driven by mouse and touch. It supports modern web browsers on any screen size. It can operate in native mode and as a part of a Progressive Web App.

Starting with the release the glyphicons are not the standard component of Touch UI. New projects will not have these icons included. The legacy apps will retain the font in the ~/app/fonts folder but will require one of the following after being re-generated with the new release:

  • Replacing the references to the glyphicons with their  counterparts found in the Material Icons library.
  • Copying of the single CSS file from the code generation library into your own project.

The replacement of icons is simple. Here is how we did that for a few icons found in the current iteration of

Either keep the span element of the icon definition or have it replaced with i tag. Replace the CSS classes in the icon definition with a single class material-icon. Enter the icon name between the opening and closing tag.

If you prefer to continue using the glyphicons, then copy and paste the glyphicons.css  file from the code generation library in [Code OnTime]/Library/Legacy/glyphicons folder into ~/app/css folder of your application. Run the app generator and click the “Locate” link below the list of projects to go straight to the library folder.

If you want to start using the glyphicons in the new projects then copy the other two files in the same folder and paste into the ~/app/fonts folder of your application.

Glyphicons are not widely used in the apps created with Code On Time. You may find the references to the icons in the dedicated login page of the app or in the content pages based on the bootstrap. The new code generation library is now referencing the material icons instead. This reduces significantly the size of the framework CSS files and provides a faster first paint in the browsers and web views.

The content pages of the near future will be based on Display Flow technology. The new presentation technology is shared with the Kiosk UI and will have its own Live Visual Designer. You will see it in action in the new community forum and in the support help desk. Materials Icons are integrated in the Display Flow and provide an excellent replacement for the Glyphicons.

Saturday, March 6, 2021PrintSubscribe
Virtual Keyboards

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 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