Application Factory

Application Factory
Thursday, March 2, 2017PrintSubscribe
Native Online and Offline Apps

The new product release is coming out March 3, 2017. See the video tutorials that explain the development process at

The release introduces new Touch UI 2017 and provides the foundation for the future Native Online/Offline Apps. The foundation is provided by the following features:

Batch Import in Touch UI 2017.

Native Online Apps

The next release is expected to go out last week of March. This release will introduce generation of native apps for iOS, Android, and Windows 10.

Here is how you will build a native app with the release

  1. Create an application with SPA page model for a "real" database engine such SQL Server, Oracle, MySql, etc.
  2. Indicate platforms required for native deployment. This will enable CORs support in the app.
  3. Publish an app.
  4. App generator will make special versions of all pages in "Native" deployment folders. All scripts and CSS stylesheets will be copied there as well. Native platform code will be also created.
  5. Deploy the server code of the app to the web server.
  6. Deploy the native code to the app stores.
  7. Install the app and run it on native device.The native code will create a native WebView instance and load local instances of the pages, JavaScript, and CSS. Pages will make remote requests to the server side components. User login and session state is managed through the feature called Identity Manager.

Native Offline Apps

Release is expected to be ready in May of 2017.

The new "Offline" property will be available for application pages.

The data controllers will be generated in ".json" format instead of ".xml". We also need that for both new CoT v.9 and Cloud On Time. The new format of controllers is used by built-in Project Designer.

If at least one page is marked as "Offline", then the following will happen when a native app is running:

  1. Native application will download controllers and data in JSON format from the server.
  2. Only offline pages will be visible/selectable in navigation system of the app if there is no connection.
  3. Any requests for offline data will be executed by the local JavaScript library. Data updates will be executed against the offline copy of the data. The log of requests to update data will be maintained and persisted. There is no need for additional software such as SQLite. We are providing a JavaScript equivalent of the server-side code that will use JSON data controllers on the client to work with data.
  4. "Cloud" icon will be displayed on the application toolbar. There will be several states for the icon:
    • Offline
    • Online + No Local Data Changes
    • Online + Local Changes Require Sync
  5. If the app is "online" then "Cloud" button will be in "Online+" state. If the button is pushed then the following will happen:
    1. The log of updates will be send to the server via the Batch Import API introduced in if data synchronization is required.
    2. Conflict errors will be reconciled by the user when needed
    3. Fresh copies of controllers and data in JSON format will be retrieved from the server replacing the previous offline data set.

Transactional Data Input

Native Online and Web apps will benefit from this new "offline" capability as well. Starting with the release, forms will work in "offline" mode. It will be possible to enter child records when a new record is created. The data will be posted to the server only when the master record is posted. This capability will be available in all product editions.

Sunday, February 5, 2017PrintSubscribe
Page Icons

In Touch UI apps, icons can be assigned to pages in order to convey additional meaning to the users. Up to five page icons will be displayed in the Quick Launch area at the bottom of the sidebar.

Icons displayed in menus and Quick Launch area of the sidebar.

Let’s customize the default Northwind app. Initially, this app does not have any icons assigned to pages. Only “Apps” and “Settings” icons are displayed in the Quick Launch area.

Default Northwind app has no page icons assigned.

Pressing the “Apps” button will reveal a site map with no icons.

The "Apps" menu will display the site map.

Let’s assign some icons to the primary pages in our app to help the user find them quickly.

Start the Project Designer. In the Project Explorer on the right side of the screen, double-click on Customers page node.

The Customers page of the sample Northwind app.

Icons can be defined by specifying the icon library plus the icon name. Replace spaces with dashes.

Let’s assign the “group” icon from the Material Icons library.

Property Value
Icon / Custom Style material-icon-group

Press OK to save the page. Double-click on the “Orders” page, and make the following change.

Property Value
Icon / Custom Style material-icon-shop

Save the change, and double-click on “Products” page to set an icon.

Property Value
Icon / Custom Style material-icon-local-offer

On the toolbar, press Browse. When generation is complete, the app will open in the default browser. Notice that the first three page icons are displayed in Quick Launch. If the “apps” button is disabled or moved to the toolbar, an additional page icon will be displayed. If “Settings” button is disabled, another icon slot will become available.

Notice that some themes will emphasize the Quick Launch area if at least one page icon is defined. Page icons will also be displayed in toolbar menu dropdowns.

Icons have been assigned to pages. Icons are added to the Quick Launch area of the sidebar.

Pushing the hamburger button in the top left corner will expand the sidebar. The Quick Launch area will rotate to fit horizontally.

Expanding the sidebar will rotate the Quick Launch area.

Press the “Apps” button to reveal the site menu. Notice that pages with an assigned icon will be placed in a grid at the top of the menu.

Activating the "Apps" menu will display a grid of icons representing pages.

Pressing “More” will reveal the full site map. Icons will be displayed next to their assigned page.

Pressing "More" from the "Apps" menu will display the site map.

Friday, February 3, 2017PrintSubscribe
Custom Logo and Theme

Universal Business Apps (UBA) created with Code On Time are designed to run on desktop and mobile devices.  UBAs may be packaged as native applications and also work in the web browser in online and offline modes. Each app store dictates certain user interface requirements. The new theme framework of Touch UI 2017 makes it easy to fulfill them.

Native applications are distributed through app stores of the operating system verndors. These app stores have a common requirement not to place your logo directly in the user interface, making it visible at all times. The focus must be on application functionality rather than on company branding.

At the same time, it is important to keep the user aware of your brand. Touch UI makes this easy.

Consider the following logo of a fictitious company:


Let’s incorporate this logo into an application created with Code On Time or Cloud On Time.

Creating a Theme Accent

The default theme of the application is Light with Aquarium accent.


We will choose Social accent as a basis for the customization.


Create a copy of the file ~/touch/ and name it touch-accent.acme.json. Open the new file in your favorite text editor.


Change the “name” to “Acme”. Find and replace the color #3b5999 with #006940 everywhere in the file. Change header.icon.default from #eee to #ee3a43.  Also change the value of properties and to #ee3a43.

Both #006940 and #ee3a43 represent the codes of the main colors used in the log. You can use the standard CSS color names, such as “green” and “red”.

Save the file, switch back to your application, proceed to Themes section under Settings, and select the new theme “Acme”.


The application colors will change to match the branding of our fictitious company. It only took a few minutes to give your app a branded look-and-feel.




image    image

Changing Application Name

The name of the app needs to be changed as well. By default, the name will be derived from the page header text specified in the project settings. If the project’s settings for the header is blank, then the name will read as “Code on Time” or “Cloud On Time”.


There is configuration file in the root of your project, called ~/touch-settings.json. It controls the application behavior and appearance. Open the file and specify appName property to provide a name for the app.


Do not use the brand name there. Instead specify the name that reflects the purpose of the app. Let’s use Inventory Manager for this example. Save the file and refresh the page. The new app name will be visible in the top left corner of the toolbar.


Explicit Branding

The best place to display your branding is the Splash Screen and Account Manager.

The splash screen is displayed briefly when the user starts the app.


The picture on the left side of the screen and the application name can be replaced with alternative images.

Add a new configuration element splash to the file ~/touch-settings.json, as shown in the screenshot below.


Properties logo and background must reference the high-resolution images for the branding of your app. You will need to keep the balance between the quality of the images and their size.

The duration property controls the duration that the splash screen is displayed to users in milliseconds.

Restart the app and see the splash screen displayed.


Your branding is also displayed when the user is automatically logged into the app, or when account manager is activated.


Disabling Themes in Settings

If you do not wish the theme and accent to be changed by the application users, then add settings section to the ~/touch-settings.json with theme option disabled.


Additional settings options can be disabled as needed. The property settings.disabled will prevent the user from modifying any settings.


Further Customization

If your projects requirements call for a prominient display of branding, then you can add a logo to the application toolbar with the help of CSS. Create a file under ~/touch folder with the following rule:


This result of customization is shown next.