Mobile

Blog
Mobile
Wednesday, June 20, 2018PrintSubscribe
Cloud On Time for iOS

We are putting final touches on Cloud On Time for iOS and will bring native apps based on Touch UI to your mobile devices made by Apple. The expected availability is end of June 2018.

Code On Time apps are running natively on mobile devices made by Apple.

Presently you can run your apps created with Code On Time in native mode on Windows 10 and Windows 7. Just install Cloud On Time from Microsoft App Store or from our own web site. Connect and start using your app in native mode right away. Soon you will be able to install Cloud On Time app from Apple App Store.

This screenshot shows Cloud On Time for iOS running in emulator with two apps connected. The frontends of the connected apps are installed on your mobile device and interact with the online backend to read/write data. Apps with Offline Sync Add-On will also download the data of offline pages and work in always disconnected mode. Offline data changes are synchronized with the online backend upon explicit user request.

The home of Cloud On Time app.

Responsive nature of Touch UI makes the same app display correctly on a device with any screen size. The same app will run on the phones and tablets without a single change.

Responsive nature of Touch UI makes the same app display correctly on a device with any screen size. One apps will run on the phones and tablets without a single change.

Your app created with Code On Time will feel “at home” on a native device from any maker.

The standard menu of app pages is displayed on the app home.    Page icons are presented as navigation tabs in Touch UI apps created with Code On Time.

Powerful input controls make it very easy to input data with the virtual and physical keyboards.

Sophisticated auto-complete data input in a built-in feature of apps created with Code On Time.

About Cloud On Time

Cloud On Time is the free app for iOS and Windows that will soon become available on OSX and Android platforms. One app allows connecting multiple custom online applications. The front end of each app runs locally on the device while sending requests to read/write data to its online backend.

Apps with Offline Sync Add-On will download their data as soon as the front end is installed. The front end works with the local data while creating a full log of change requests. Each request is “simulated” locally – the data is inserted, updated, and deleted from the end user prospective. Next synchronization will send the change log to the server and have it committed in the transaction scope to the database.

Use Cloud On Time to test the native mode of your app or run it in production mode to avoid the lengthy and slow approval cycles of app stores. Cloud On Time automatically detects the changes to the custom app front-end and installs the fresh components when the custom app is launched from the start page. Front end of offline/disconnected apps is automatically updated when the end user requests synchronization.

Custom Native Apps

Cloud On Time delivers a consistent native behavior across all major desktop and mobile operating systems on devices with the touch screens and those with the mouse pointers.

In July / August of 2018 the app generator will provide an option to download a custom native app for all major platforms.  App Store option becomes available as soon the app is published to the file system, FTP server, or major hosting provider. Custom Native App is a special version of Cloud On Time app capable of connecting to a single online backend only.

Developer will request a custom native app to be produced by providing the appropriate signing certificate and branding information. App generator will submit the request to our server. The server will generate a custom version of the Cloud On Time source code for the selected native platform and have it compiled. Developer will retrieve the binary package of the native app and submit it to the corresponding app store for approval.

App Store option allow requesting a custom branded version of the native app for the major platforms.

Custom Native App “knows” the URL of the published online version of the app created with Code On Time. In fact, this URL is baked into the app itself.

The app reads and writes data by making requests to the online backend. If Offline Sync Add-On is installed, then the native app will also work in offline/disconnected mode.

Developer can also choose to run their Code On Time application with “Custom App” client to test its behavior. The app generator will invoke the Windows version of the custom app on the development machine.

Code On Time developers can run the custom native app front end as the client during the development process.

See our roadmap for details.

Tuesday, June 12, 2018PrintSubscribe
Many-To-Many, Project Locations and Groups

Release 8.7.3.0 introduces support for user-defined projct locations and project groups. There is also a set of improvements in many-to-many field handling in forms and inline editing mode. The application framework has been refactored to support addons. For example, release 8.8.0.0 will support Offline Sync Add-On.

Many-to-Many Fields

Inline editing of many-to-many fields is fully supported in the release on mobile and desktop devices.

Inline editing of a many-to-many field in a Touch UI app.

The application generator now handles the following implementations of many-to-many tables. Tables EmployeeTerritories, EmployeeTerritories2, and EmloyeeTerritories use compound, identity-based, and GUID –based primary keys.
Various configurations of primary keys for many-to-many field implementation supported in Code On Time and Touch UI.

Here is an exampl of Check Box List presentation of the field. The previous screen shot shows “basket” implementation with Auto Complete.

image

Project Locations and Groups

New Project screen of the app generator has changed and allows specifying an arbitrary project name and project location. Developers can change the display name and group directly on the Namespace & Framework page of the Project Wizard. The start of the app generator will group projects and have them displayed alphabetically within a group. There is also a “top 5” or rather “last changed” projects rendered in a dedicated group at the top of the start page. If the number of projects is less than 10 then “top 5” are not presented.

The start page of Code On Time displays groups of projects.

This is the new version of the New Project screen. Note that if the Visual Studio is installed on your development machine then the Location is automatically set to [User Profile]\Source\Repos folder. The new app will also be configured to use Git for source control.

New Project screen in Code On Time app generator of mobile and online apps.

Cloud On Time

The application framework has been changed to support Cloud Identity, the upcoming membership system based on claims.

If you are using Cloud On Time app for development then make sure to install the latest version. If the app is re-generated then it will become incompatible with the prior releases of Cloud On Time.

Summary of the Release

See release details below:

  • Many-To-Many fields are now compatible with inline editing.
  • Many-to-many fields based on tables with identity, guid-based, and comp0und primary keys now work uniformly correctly.
  • Action with command name Navigate and Result.NavigateUrl will now load in iframe embedded in the virtual Touch UI page if URL starts with “http” . Can force behavior with “_internal:” target, or use "_self" to load current tab, or "_blank" for separate tab.
  • Touch hyperlinks will now open in internal iframe if target = "_internal".
  • Touch UI - Read-only checkbox does not overlap the text of the field footer.
  • Classic UI – Data View property  AutoHighlightFirstRow works correctly with hidden child data views.
  • Classic and Touch UI - Corrected processing of NewValue and OldValue in _findKeyValue method, which was previously causing error when uploading binary data.
  • Project Wizard now captures Display Name and Group on the "Namespace and Framework" page. The same page also provides a link to open the project location.
  • The installer now includes folder ~/Library/_Explorer/Images. This folder was missing from the last release.
  • Cloud Identity request handler is now a part of the framework. Learn about this upcoming feature at http://codeontime.com/roadmap.
  • Framework now implements support for addons. This feature makes possible for us to introduce the first new product called Offline Sync Add-on. The upcoming  Code On Time v9 will be delivered as an add-on.
  • Important fixes to NewValue and OldValue processing are delivered in this release.  Value of the read-only fields is calculated as OldValue if not Modified and as NewValue when Modifed property has been assigned explicitly. Otherwise the OldValue is returned for ReadOnly fields. This addresses numerous issues on the forum in the past week.

Saturday, May 19, 2018PrintSubscribe
Home Page and Toolbar

Let’s explore a few customization ideas for the home page and toolbar of your app.

The default home page displays a table of contents. The toolbar has “hamburger” button (“bars” icon) of the left side and content menu button (“more” icon) on the right sidebar. The illustration is presented in Light theme with Modern accent.

The default home page of app based on Touch UI features a table of contents.

A customized home of an app based on Touch UI may display marketing and informative content to the end users instead of a default table of contents. Let’s remove the table of contents from the home page and replace it with a marketing message for the end users of the app.

A customized home of an app based on Touch UI may display marketing and informative content to the end users instead of a default table of contents.

Have you noticed that the new design does not have the Menu and More buttons on the toolbar?

By default the data pages of the app do display both buttons just like the default home page with the table contents.

The standard features of the toolbar in apps based on Touch UI are Menu and Context buttons.

Let’s hide the Menu and More buttons on the toolbar on the data pages as well.

The toolbar of a Touch UI app without Menu and Context button.

This is how the data pages will look when the left sidebar is expanded.

Customized toolbar of a Touch UI with the sidebar expanded.

Select the project name on the start page of the app generator and locate “Home” page in the Project Explorer on the right hand side of the Project Designer.

Hierarchy of pages in Project Explorer of Code On Time app builder.

Right-click and delete both containers on the page.  This will remove the table of contents displayed to the authenticated users and the welcome message displayed to anonymous users.

Double-click the home page, select Jumbotron as the Template, save changes, and generate the app. Inspect the home page. It will look similar to the one in the picture. Try other templates to find the best fit for your app.

Sample customization of the home page in an app based on Touch UI.

Lock the page from being overwritten during the code generation before making any changes to the content of the template. Double-click the home page in the Project Explorer and specify First Time Only in the Generate property. Save the changes. The home page icon will display with the “lock” indicating that any changes to the app will be preserved if the page exists already.

Locked icon of a page in Project Explorer indicates that the page will not be ovewritten.

Click Develop on the toolbar of the Project Designer and add a new stylesheet with the name of choosing under ~/app/css/ folder.

Custom stylesheet in an app based on Touch UI created with Code On Time app generator.

Enter the following CSS rules in the file app/css/StyleSheet.css.

/* 1. Hide "hamburger" button when the toolbar does not have the "Back' button  */

.app-bar-toolbar:not(.app-has-back) #app-btn-menu {
    visibility: hidden;
}

/* 2. Hide the context button with "more" icon*/

.app-bar-toolbar #app-btn-context {
    visibility: hidden;
}

/* 3. Align the logo area of the page with the content when there is no sidebar on the left side */

body:not(.app-has-sidebar-left) .app-bar-toolbar .app-logo {
    left: 16px;
}

/* 4. Shift the logo text more to the left in the expanded sidebar */

body.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-bar-toolbar .app-logo {
    left: 20px;
}

/* 5. Move the "icon" buttons of the toolbar to the right */

.app-bar-toolbar .app-btn-cluster-right .app-btn {
    margin-right: -28px;
}

The comments provided next to the CSS rules explain their effect on the User Interface of the app.

Rules (1) and (2) are hiding Menu and More buttons on the toolbar. Rule (3) shifts the text in the Logo area to the left when the sidebar is not visible.

Customized home page of an app based on Touch UI presented on a narrow device.

The same rules also apply to data pages. A data page of an app based on Touch UI with customized toolbar on a narrow screen is shown next.

A data page of an app based on Touch UI with customized toolbar on a narrow screen.

If the screen of the device is narrow then modal pages will be automatically replaced with fullscreen pages. In that case rule (1) does not apply and the Back is visible next to the name of the previous view.

A fullscreen page in an app based on Touch UI.

In this screenshot the user continues to drill into data and views the Category information of a product. Button Back remains visible and button More is not displayed. Rule (4) shifts context actions to the right of the toolbar.

A fullscreen page in an app based on Touch UI with the image preview in the page header.

Here is how the same changes will look in Dark theme with Construction accent.

This is the home page without Menu and More buttons on the toolbar.

A customized toolbar and home of an app based on Touch UI created with Code On Time app generator.

This is the data page with the expanded sidebar.

Expanded siderbar on app based on Touch UI.

This is the data page with the collapsed sidebar in inline editing mode.

Inline Editing mode of a data row in an app based on Touch UI created with Code On Time app builder.

This is the same app on a small device without More button in the toolbar. A fullscreen page of an app created with Code On Time application generator presented on a narrow screen.

A fullscreen page of an app created with Code On Time application generator presented on a narrow screen.

Touch UI is entirely CSS-driven and allows customization of various aspects of user interface.