Application Builder

Labels
AJAX(112) App Studio(6) 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(178) 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) 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)
Archive
Blog
Application Builder
Wednesday, December 27, 2017PrintSubscribe
Light and Dark

Long dark winter nights are calling for a different kind of GUI. Here comes the “Dark” theme.

New 'Dark' theme in an app build with Touch UI and Code On Time app generator.

Place the following in ~/touch-settings.json to lock-in the Dark theme with the Bitter Sweet accent.  This configuration will also disable “Settings” option in the GUI.

{
  "ui": {
    "theme": {
      "name": "Dark",
      "accent": "BitterSweet"
    },
    "transitions": { "style": "slide" }
  },
  "settings": { "enabled": true }
}

This is the “Light” version of the same app. It works best if you use the device in the bright light.

The 'Light' theme in an app build with Touch UI and Code On Time app generator.

Light and Dark theme are provided to give developers more options to express themselves and to allow upcoming native apps to have day and night time versions of the GUI, while still enabling rich customization with accents.

Accents do look more dramatic with the “Dark” theme. Try building your own theme accent now!

Dark theme with Construct accent in the app created with Code On Time.

Dark theme with Construct accent in the app created with Code On Time.

Dark theme with Construct accent in the app created with Code On Time. The context menu is open.

Dark theme with Construct accent in the app created with Code On Time. The context menu is open.

Dark theme with Construct accent in the app created with Code On Time. The sidebar is hidden and the tab bar is displays icons for frequently used app pages.

Dark theme with Construct accent in the app created with Code On Time. The sidebar is hidden and the tab bar is displays icons for frequently used app pages.

Dark theme with Aquarium accent in the app created with Code On Time.

Dark theme with Aquarium accent in the app created with Code On Time.  The form is open and context menu of the form is also visible.

Dark theme with Aquarium accent in the app created with Code On Time.  The form is open and context menu of the form is also visible.

Dark theme with Aquarium accent in the app created with Code On Time.  The form view is open and the "Data View" field is visible in the form.

Dark theme with Aquarium accent in the app created with Code On Time.  The form view is open and the Data View field is visible in the form.

Dark theme with Verdant accent in the app created with Code On Time.  The sidebar is expanded.

Dark theme with Verdant accent in the app created with Code On Time.  The sidebar is expanded.

Dark theme with Modern Rose accent in the app created with Code On Time.  The app is displayed in a small form factor.

Dark theme with Modern Rose accent in the app created with Code On Time.  The app is displayed in a small form factor. 

Dark theme with Modern Rose accent in the app created with Code On Time.  The navigation menu is open.

Dark theme with Modern Rose accent in the app created with Code On Time.  The navigation menu is open.

If Settings option is enabled, then users can access the themes and accents at runtime.

Settings panel of app built with Touch UI and Code On Time.

Theme and accent selection panel of app built with Touch UI and Code On Time.

Tuesday, December 5, 2017PrintSubscribe
Tab Bar

Page of an application built with Touch UI represents an individual mini-app, also known as Single Page App or SPA. Shared navigation system of application links together multiple SPAs.

Developers can assign icons to individual pages to signify their purpose. Icons are displays at the bottom of the sidebar on the left side of the page and in the drop down menus at the top of the page.

Sidebar displays page icons when specified in apps created with Touch UI.   Page icons are visible in the dropdown navigation menus in apps created with Touch UI and Code On Time app generator.

The sidebar provides easy access to the first three or four pages with icons, which works great on larger screens. The sidebar is not visible on the smaller devices. Touch UI introduces a new method of providing quick access to important pages called Tab Bar.

Tab Bar is automatically displayed at the bottom of the screen whenever the sidebar is not visible

Tab Bar is displayed at the bottom of the screen if at least two icons are defined in the menu of the app created with Code On Time.

Tab Bar disappears as soon as the sidebar becomes visible, which may happen if device orientation has changed or when the app window is resized.

Tab Bar is hidden when the sidebar is visible to the user in apps based on Touch UI.

The width of tabs will automatically increase on large screens.

Tab Bar appears as soon as the sidebar stops being visible in the app based on Touch UI.

Tabs automatically expand and collapse. Some tabs may be shifted off-screen when the minimal tab width is reached. The invisible tabs are replaced with “More” button if there is not enough space to fit all of them at the bottom of the screen. Invisible tab icons are displayed when “More” button is activated on the Tab Bar.

'More' button is displayed when some of the tabs are not able to fit on screen in application based on Touch UI.  Invisible tab icons are displayed when 'More' button is activated on the Tab Bar in app created with Code On Time.

If you do prefer not to have the Tab Bar then turn if “off” by entering the following configuration property in ~/touch-settings.json file:

{
  "ui": {
    "menu": {
      "tabbar": false
    }
  }
}

If you love the Tab Bar, then consider enabling this feature on any screen size by settings ui.menu.tabbar to true.

{
  "ui": {
    "menu": {
      "tabbar": true
    }
  }
}

This setting will remove icons from the sidebar and transfer them to the permanently visible Tab Bar at the bottom of the screen.

Set 'ui.menu.tabbar' property in touch-settings.json to 'true' to permanently enable the Tab Bar in app created with Code On Time.

Page icons will be visible on a screen of any size.

Tab Bar displays icons of important pages in app based on Touch UI.

Notifications displayed in the app will move the Tab Bar and the “promo” button upwards.

Notifications displayed in the app will move the Tab Bar and the “promo” button upwards in apps based on Touch UI, created with Code On Time.

The tab bar will slide down to the bottom of the screen when the notification is dismissed.

Wednesday, November 8, 2017PrintSubscribe
Announcing Custom Native Apps and Offline Sync Add-on

Code On Time release 8.8.0.0 is expected to be available December 22, 2017. See our current roadmap at https://codeontime.com/roadmap.

With this release, will make it possible to download custom Windows 7 native client for your app based on embedded Chromium browser. The second option is a custom Universal Windows App for distribution via Microsoft Store. Both options will be available directly in the Publish screen of the app generator. We are also introducing a new product to enable “always offline” mode in those apps!

In a world where apps are everywhere, it makes sense to package your application in a native shell on all platforms, be it Windows, iOS, or Android. Such shell must not merely provide a custom online browser. The shell must host a local set of client-side application files while using the server components of the app to read and write data. This will not only increase speed of page loading (all required files are already on the device), but will also enable access to the device equipment and make it possible to work in a disconnected mode.

Custom Native Apps

Presently, the app generator offers a number of Publish options for deployment to a web server. After an application is published for the first time, an “App Store” option is displayed. The option is not implemented in the current release.

Generator will display “App Store” option on the Publish screen as soon as you publish your application to any of the supported targets (Azure, File System, FTP, etc). Deployed application is available on internet and native apps can access services provided by the server components of the app.

image

The Publish / App Store option will be expanded to allow getting access to the native implementation of the app for each supported mobile platform. The initial implementation will offer two options:

  • Mobile App for Windows - this is a customized version of the Universal Mobile App based on embedded Chromium browser (CMA-W7). Developers will be able to download the installation package for the app directly. Unlimited Edition users will have an option to download the source code as well

  • Universal Windows App - this is a customized version of the Universal Mobile App for Windows 10 and 10S (CMA-10). Developers will be able to download the installation package for Windows App Store. Unlimited Edition users will be able to download the source code as well.

Follow up releases will make available similar options for Apple iOS, Google Android, and Apple MacOS. We are hoping to complete support of the other mobile platforms by the end of March 2018. See the roadmap for details.

    Offline Sync Add-on

    Offline Sync Add-on makes its appearance in this release. The add-on will be available for purchase at https://codeontime.com/buy. The purchase will be delivered to you as a zip file with the name “addon.OfflineSync.YOURCOMPANY.zip”. Copy the zip file to ~/Documents/Code OnTime/Addons folder. The application generator will automatically expand the contents of the file when the app is generated.

    Installed addon will enable “always offline” mode in your application. Any pages marked for offline will magically become fully autonomous. The relevant data will be downloaded when application is installed on the native device. Any data modifications will be executed locally while requests to change data are logged and saved. User interface will expose Sync option in the menu. If synchronization is requested, then the log of changes will be submitted to the application server and requests will be executed as a single transaction. If there were no errors, then the transaction is committed. Otherwise, the user will have the option to reconcile issues for each individual error and attempt to resubmit the entire change log.

    Here is a screenshot on app with Offline Sync Add-On installed. The tablet-sized screen will display synchronization status icon as a cloud in different states. In this case, all data is downloaded and there are no pending changes.

    image

    User can access “Sync” option in the context menu of their app shown next. This option is always present in the app enhanced with Offline Sync Add-On. It provides additional settings such as automatic synchronization.

    image

    See the roadmap for more details about offline features.