The Mobile/Touch Application Style

Web Framework Overview
The Drilldown Interface

The DataFlex Web Framework supports two styles of web applications: Desktop and Mobile/Touch. The mobile/touch style extends the web framework to allow a single web application to work well on a range of browser devices from mobile phones to tablets and up to desktop browsers. The framework extension encompasses the following:

• A mobile style menu system. The same capabilities of the standard menu system have been incorporated into a mobile-friendly menu, which appears as a single button in the upper left corner of your application.

• An action menu system. Action menus are represented as menu-bar icons and menu items that appear at the top right corner of your application. The content of these items is controlled by the currently active view.

• A breadcrumb control and a header bar control. The header control provides a header bar along the top of your application. The breadcrumb control lets you see the context of how a view was selected. These controls change appearances based on your screen space, making them work well on devices of all sizes.

• A Mobile/Touch Web Application project template that contains all of these main application components.

• Mobile/Touch friendly lists. cWebList lists:

• Support multi-line rows
• Support single touch selection actions

• Provide momentum scrolling (i.e., iOS style list scrolling)

• Optimized on-screen keyboard support. Working with on-screen keyboards requires a different type of focus mechanism, which is built into the framework.

• Responsive technology in Views. An API allows you to define how views and controls should appear on different sized devices. Special commands (see WebSetResponsive) allow this to be supported directly on the client.

• A mobile/touch optimized theme. The DF_FLAT_TOUCH theme is ideally suited for mobile applications. This uses the flat look that is popular with mobile devices and contains a library of great-looking, scalable icons. All of this will make your application fit right in.

• Drill down style view support. The cWebView class and all of the web classes support drill down/breadcrumb style navigation.

You use Data Dictionaries, Data Entry Objects, and views. Some DEO behaviors are different when using this new style instead of the desktop style, but the unique combination of DEOs working through DDOs makes this mostly automatic.

Use the new mobile templates and wizards to get the new mobile/touch features. Some application style differences require further explanation and are documented here. You are encouraged to review this information carefully as the mobile/touch style introduces some powerful concepts and features.

We strongly recommend you read this entire book from start to finish. Once you have reached the bottom of each page, there are handy Next and Previous Topic links to make navigating the book easy.

Contents

• The Drilldown Interface
• Understanding the Drilldown Interface
• Terminology
• View Type Property
• View Navigation Properties
• View Navigation Options
• Application Interfaces - Desktop vs. Drilldown
• Summary
• The cWebView Class
• Saves
• Deletes
• Clear/New
• Closing a Changed View
• Changing the Edit Mode of a View
• Understanding Navigation
• The tWebNavigateData Struct
• The Forward Navigation Process
• The Back Navigation Process
• Working with Action Menus
• Multi-Line Row Support in Lists and Grids
• Responsive Applications
• Working with CSS Styles
• Dashboard Tile Objects
• Extended CSS Class Styles
• Font Icon CSS Class Styles

Previous Topic: Web Framework Overview
Next Topic: The Drilldown Interface

See Also

Developing Web Applications