Blog: Posts from May, 2014

Posts from May, 2014
Thursday, May 29, 2014PrintSubscribe
Introducing Map View Style in Touch UI

Code On Time announces a new view style that will become available in June 2014 release.

The multi-tier application framework of apps produced with our code generator implements separation of business logic and user interface presentation. This allows creating alternative data presentation styles without a need for custom programming.

The new “Map” view style is based on Google Maps. Any data set that contains at least “Address” and “City” fields is presentable on an interactive map. Map view will automatically geocode addresses or use latitude and longitude field values when available.

This new view style is supported in apps configured to use Touch UI. Exactly the same capabilities are available in responsive pages on both mobile and desktop devices.

These screen shots show a map view on iPhone 5 in full-screen demo. There is no need to perform any special configuration of your app if a typical set of fields that allows locating an address is available. The map view can be selected from the context menu in view options.

Fullscreen mobile app shows Map view style. This app has been created with Code On Time app generator.  Touch UI offers end-users options that allows switch view style of data presentation.

The map view style can be configured to be displayed by default. Data view and data fields can be individually tagged when necessary.

End user taps a marker on a map to bring up an item data card. If you have configured a responsive list presentation for your data, then there is nothing else to do. The same responsive configuration will be used when the “Map” view style is activated.

User can tap on the item card to activate the first action available in the context menu. Typically this will display the data item in “View” or “Edit” mode.

If you are performing a data lookup, then the item will be selected when the data card is tapped. This introduces an amazing ability of performing a geo-lookup by application end users.

Item data card is derived from the "List" view configuration of the app created with Code On Time.  Tapping on the item data card will cause the first available context menu action to execute. Typically this will be Select or Edit. Lookup data views allow geo-lookup of data.

Item data card displays “Menu”, “Zoom In/Out”, “Driving Directions”, “Next” and “Previous” buttons.

Users can instantly pan to the marked location on the map by tapping “Zoom In”.

Item data card offers Menu, Zoom In/Out, Driving Directions, Next and Previous buttons in the apps created with Code On Time.  A single click will pan the map to the stree-level with the marker in the middle in the Map presentation of data.

Dragging the “street level” marker to the location will switch the map to the street view.

Dragging the Street View figure with touch gestures or mouse to the desired location will activate the street view.  Item data card is displayed next to the marker when map is switched to Street View.

Geo-coded addresses are cached in the client browser to speed up positioning of markers when users interact with the map.

Progressive geo-coding is preformed whenever the data set is changed. The map will automatically update markers in response.

Larger screens allow instant switching between available view style. The corresponding buttons are displayed on the sidebar.

Next screen shot shows IE 11 with customers presented on a map. Sidebar displays “Grid” and “List” presentation styles that can be chosen as alternative.

Map view style is activated in the app with Touch UI created with Code On Time app generator.

The same data set is displayed in a responsive grid in Safari. The sidebar shows “List” and “Map” view styles as available alternatives.

Responsive Grid view style is activated in the app with Touch UI created with Code On Time app generator.

This screen shots shows the data set presented in responsive “List’' style in Chrome. “Grid” and “Map” styles are only a click away.

Responsive List view style is activated in the app with Touch UI created with Code On Time app generator.

We are completing implementation of three more presentation styles that will be released during Summer of 2014:

  1. “Chart” view will allow presenting a single date set as a chart. New tags will allow mapping multiple chart views for the same data set. We are considering implementing automatic tagging of lookup and aggregate fields to enable instant visualization.
  2. “Calendar” view will present any dataset with dates on a touch-enabled calendar. The data interactions will be similar to “Map” view style. Developers will tag the predefined “date” fields for use in the calendar. End users will be able to switch the “date” fields at will.
  3. “Data Sheet” view will present data in a fashion similar to the responsive grid shown above. The responsive grid automatically hides and shows columns while trying to fit without scrolling the fields defined on the item data card. The data sheet view will show all fields by enabling horizontal scrolling of data columns. Touch-enabled devices will allow editing data in a single input control displayed at the top of the screen similar to typical spreadsheet applications. Touch UI will also allow in-place editing in data cells in “desktop” browsers.

All view types will offer configuration options to the end users with the ability to memorize “named” presentation styles along with sort order and filters.

Wednesday, May 7, 2014PrintSubscribe
Display Density in Touch UI Apps

A size of user interface elements is an important consideration for any application. Touch UI provides a user-configurable setting Display Density that allows changing the density of text to satisfy personal preferences.

Application automatically selects Comfortable display density on mobile devices to provide a touch-friendly user interface.

Display density is set to Compact on desktop devices that do not have a touch-enabled screens.

Choose option Menu / Settings / Display Density / Compact to change the display density to Compact.

The screen shots show Comfortable and Compact lists of products side-by-side on iPhone 5.

A list of products displayed in 'Comfortable' density in an app with Touch UI on iPhone 5. A list of products displayed in 'Compact' density in an app with Touch UI on iPhone 5.

These screen shots compare Comfortable and Condensed lists of products.

A list of products displayed in 'Comfortable' density in an app with Touch UI on iPhone 5. A list of products displayed in 'Condensed' density in an app with Touch UI on iPhone 5.

This is a screen shot of the same product list on Surface 2 displayed with Compact density.

A list of products displayed on Surface 2 tablet in 'Compact' density in an app with Touch UI.

Condensed display density works best on desktop computers. Mouse pointer makes it easier to hit smaller user interface elements.  This display density must be explicitly selected by a user.

Next screen shot shows a “condensed” list of products on a desktop computer displayed in IE 11 on Windows 7.

A list of products displayed with 'Condensed' density on a desktop computer in IE11.

This is a “condensed’' rendering of products shown in “Grid” style in IE 11 on Windows 7.

A list of products displayed with 'Condensed' density and 'Grid' style on a desktop computer in IE11.

Wednesday, May 7, 2014PrintSubscribe
Changing Settings of a Touch UI App

Touch UI offers several settings configurable by application end users. The settings allow changing various aspects of user interface, such as display density and presentation theme.

Users tap or click “menu” button on the toolbar to activate a context menu. Option “Settings” is the last in the list of available choices.

 Activating a context menu in an app with Touch UI produced with Code On Time app generator.  Standard 'Settings' context menu option is always available to end users of apps with Touch UI.

Only a few taps or clicks are required to modify the default settings. The top level choices in the “Settings” menu show the default value for the each configurable parameter.

A value of each configurable parameter in displayed under its name in the top level optons of 'Settings' menu.  Select a parameter value to have it changed.

Changed configuration parameters will remain persisted on the device.

Users can tap “Back” button, tap outside, or swipe to the right to close the current set of choices.

The list of options available in the “Settings” menu depends on the device and the features of application.