Application Builder

Blog
Application Builder
Monday, November 26, 2018PrintSubscribe
Limit Access For Particular User Name

Let’s say you want to prevent a user with a certain name from being able to access your app pages.

Application framework provides a centralized method of content retrieval, which makes possible creative ways of content production at runtime. You can produce a custom output for the user with the name mark no matter what page he is trying to access.

If the user with the name mark is logged in then he will be presented with the following message on any application page.

Data Aquarium application framework allows dynamic manipulation and substituion of the content returned by the app to the end user.

Create a code file in ~/custom folder of your app.

Custom code file in the app created with Code On Time.

Enter the following definition of partial class ApplicationServices.

using System.Collections.Generic;
using System.Web;

namespace MyCompany.Services
{
    public partial class ApplicationServices 
    {
        public override void LoadContent(HttpRequest request, HttpResponse response, 
            SortedDictionary<string, string> content)
        {
            // Let the framework to load the file from the file system.
            // Typically the content will be retrieved from ~/app/pages folder.
            base.LoadContent(request, response, content);
            if (content.ContainsKey("File"))
            {
                // The framework has located a physical file, let's check the user identity.
                var identity = HttpContext.Current.User.Identity;
                if (identity.IsAuthenticated && identity.Name == "mark")
                {
                    // remove the original file to prevent any default parsing of its contents
                    content.Remove("File");
                    // simulate the result of parsing by providing Title and Content of the page.
                    content["PageTitle"] = "Mark, go away";
                    content["PageContent"] =
                        "<div data-app-role=\"page\">" +
                        "<h1>Mark has no access!</h1>" +
                        "<p>Please log out or close the browser!</p>" +
                        "</div>";
                }
            }
        }
    }
}

An authenticated user with a name other than mark will see the application pages as defined at design time.

A data page in the app created with Code On Time app builder.

Sunday, August 5, 2018PrintSubscribe
Cloud On Time of OSX

Code On Time is pleased to announce Cloud On Time for OSX. Applications created with Code On Time will execute as native apps with optional offline/disconnected mode on Apple Mac family of devices. Cloud On Time for iOS is already available in Apple App Store and works with applications generated with Code On Time 8.7.5.0 and above. Become an expert developer of business apps for Apple platform in no time.

Cloud On Time app downloads the front end of your application directly to the device storage. If you application has Offline Sync Add-On, then the data is downloaded to the device during the front end installation. Cloud On Time app allows connecting multiple applications and provides native experience to the end users.  Application front end is automatically updated when changes are detected.

Application based on Touch UI running in native mode on OSX.Cloud On Time app provides the fastest pathway to native application development with Code On Time. There is no need to go through a lengthy approval process with major the App Stores. There is no need to learn mobile development for each of the platforms. Use Cloud On Time app to test your application in mobile mode or run your entire portfolio of business applications on it!

Soon we will be offering custom branded versions of Cloud On Time that you will be able deploy to the app stores. An account and developer subscription with each App Store will be required. The branded version of Cloud On Time will be wired to work only with your own application backend. The source code of branded app is generated and compiled on our servers. You will be required to submit the binary package to the app store on your own.

A single application created with Code On Time will work on any device with any form factor with optional offline/disconnected mode. Simply install Cloud On Time to your device and connect to the app. The same app will work in any modern web browser. Offline/disconnected mode is available only in Cloud On Time or custom branded apps.

Create complex master-detail forms that work in online and offline mode across a range of mobile devices and in modern web browsers.Cloud On Time app performs management of the front end files of your application on the device. End user can maintain multiple user accounts per application and switch between their accounts in seconds. Application front end files (HTML, JavaScript, CSS, Fonts) are loaded from your device in the native webview. Cloud On Time performs remote HTTP requests to the application backend via native API of the device. It also provides access to the device camera, storage, and more. The responsive nature of the front end will present your app in the best possible way on a tablet, phone, or when you are taking advantage of side-by-side application execution in modern mobile operating systems. Sophisticated data input controls are built-in.

Powerful data input in apps based on Touch UI requires no custom coding and works uniformly on all devices.Cloud On Time for Android is our next target with custom branded versions of Cloud On Time to follow. Stay tuned and subscribe to our newsletter!

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.