Mobile

Blog
Mobile
Friday, August 26, 2016PrintSubscribe
Converting Mobile and Azure Factory Projects

As of Release 8.5.10.0, Mobile Factory and Azure Factory project types have been retired.

Both Web Site and Web App Factory projects offer the ability to use Touch UI as well as deploy to Azure. In addition, Azure Factory was built around the “Cloud Service” Azure resource type, which has been marked as “Classic” at the time of this writing.

It will not be possible to create new projects of these types. The app generator will continue to provide support for existing projects created with these project types. However, it is strongly recommended to migrate away from these project types in order to gain access to new features in future releases.

Migrating a Mobile Factory Project to Web Site Factory

Mobile Factory projects were originally based on Web Site Factory, with “Desktop” user interface disabled. Therefore, it is quite easy to migrate a project to Web Site Factory.

Open the app generator. In your list of projects, click on the project name, and press Open.

Opening the project folder for a mobile factory project.

This will open the project folder in File Explorer. Click on the “Up” arrow on the navigation bar to move to the parent directory.

Moving to the parent directory.

Right-click on the project and press “Cut”, or check the box next to the project folder and press “Cut” button on the ribbon.

Cutting the project folder.

Click on the “Up” arrow to navigate to the parent directory “Projects”. If a “Web Site Factory” folder does not exist, create the folder now.

Right-click on the “Web Site Factory” folder, and press Paste, or click once on the folder and press the “Paste” button on the ribbon.

Pasting the project folder into Web Site Factory folder.

Switch back to the list of projects in the app generator. Press “F5” to refresh the page. Notice that the project is now of type “Web Site Factory”.

The Mobile Factory has been converted to a Web Site Factory project.

Proceed to generate the application.

Converting Azure Factory to Web Site Factory

Azure Factory projects are more complicated than Mobile Factory projects. In order to convert these types of projects, multiple files and folders will need to be moved. Follow the table below in order to properly convert your project to Web Site Factory:

Source Destination
~/Azure Factory/[Project]/Application.Log.xml ~/Web Site Factory/[Project]/Application.Log.xml
~/Azure Factory/[Project]/Controllers.Log.xml ~/Web Site Factory/[Project]/Controllers.Log.xml
~/Azure Factory/[Project]/DataAquarium.Project.xml ~/Web Site Factory/[Project]/DataAquarium.Project.xml
~/Azure Factory/[Project]/DataAquarium.Version.xml ~/Web Site Factory/[Project]/DataAquarium.Version.xml
~/Azure Factory/[Project]/DataAquarium.Log.xml ~/Web Site Factory/[Project]/DataAquarium.Log.xml
~/Azure Factory/[Project]/[Namespace]/Controllers ~/Web Site Factory/[Project]/WebSite/Controllers
~/Azure Factory/[Project]/[Namespace]/Views ~/Web Site Factory/[Project]/WebSite/Views
~/Azure Factory/[Project]/[Namespace]/Rules ~/Web Site Factory/[Project]/WebSite/App_Code/Rules
~/Azure Factory/[Project]/WebRole1/Controls ~/Web Site Factory/[Project]/WebSite/Controls
~/Azure Factory/[Project]/WebRole1/Pages ~/Web Site Factory/[Project]/WebSite/Pages

In addition, any other custom files such as classes and stylesheets will need to be moved to the corresponding location in the destination folder. It may be necessary to link these files to the solution after generation.

Once all files have been moved, switch back to the app generator and press F5 to refresh the list of projects. Click on the project name and press “Refresh”. Proceed to generate the application.

Thursday, June 9, 2016PrintSubscribe
8.5.8.0 Has Landed! New Form Rendering Engine, Advanced Lookup Input, Calendar Input, Data View Fields, Tiny Density, Save and New

The long awaited release 8.5.8.0 is here! Originally intended to be released in March of 2016, a shift in strategy has resulted in this release coming out in June. We greatly appreciate everyone’s patience, and hope that we find the result to be rewarding for everyone.

Form Rendering Engine

The biggest change in this release is an overhaul of the Form Rendering Engine. One of our biggest complaints for Touch UI was the lack of customizability of the form. The original implementation of forms provided for limited capability in ordering data fields. Categories were used to group data fields into new rows, columns, and tabs.

In response to these comments,we have added the ability to define HTML templates that allow precise positioning of data fields and custom content into the form. A simple example can be seen below.

Example of custom layout template in Touch UI.

These HTML templates will be placed under the ~/Views folder of your project. When loading a view, the application framework will attempt to find the file “[Controller Name].[View ID].html”. If not found, it will generate a default template.

A snippet from the template can be seen below:

<div data-layout="form">
    <div data-container="column" style="width:50%">
        <div data-container="collapsible" data-header-text="Order Information">
            <div data-container="row">
                <div data-control="description">This is the order information.</div>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="CustomerID">CustomerID</span>
                <span data-control="field" data-field="CustomerID">[CustomerID]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="EmployeeID">EmployeeID</span>
                <span data-control="field" data-field="EmployeeID">[EmployeeID]</span>
            </div>...

The entire template must be wrapped in a data-layout element, and various different data-container elements are available for easy positioning of elements. Rows can be used to automatically position fields. It is always possible to use your own elements and position items manually. More documentation on this feature will be coming soon.

These layouts work perfectly well on mobile devices, too.

Example of custom layout template in Touch UI on a small screen.

In order to make the process of developing form templates easy, a visual Form Designer will be included in future releases.

The engine utilizes our new Universal Input API in order to react to user clicks and key presses. When the user clicks on a label or field, the API will find and build the relevant input control in order to handle that field. When the user leaves the field, all values that show that field value will be updated. The API handles Tab, Shift+Tab, Up, Down, Left, Right, Enter, Shift+Enter keys in order to move between fields.

Lookup 2.0

With the new Form Rendering Engine, we decided to overhaul the lookup input control to allow your users to get their work done easier and faster. The new lookup allows the user to type in their search query, and a suggestion list will automatically be loaded. Use arrow keys to navigate up and down in the list. Press Enter on your keyboard to select an option.

The user can click on the arrow to the right of the field to navigate to the lookup view.

New lookup in Form Rendering Engine animation.

The user can also press Ctrl+Space to activate the list. From there, the user can create a new lookup record, or jump to the lookup view by pressing “See All”.  “Ctrl+Enter” will also activate the lookup view.

Client-side data caching and filtering is employed in order to ensure that performance is top-notch.

Calendar Input

Dates have always been a difficult data type to work with. Every browser implements native input differently, some working better than others. Rather than compromising in order to utilize the native input of every browser, a new Calendar Input has been developed. This input control is an extension of the calendar sidebar filter component, which also includes the upgrades.

New Calendar Input in Form Rendering Engine animation.

The input will be activated when the user focuses on the field. Selecting a day in the month will set that date. The user can drag or use the arrow buttons to move between different months. Clicking on the header will allow the user to select the month or year.

If the data field also renders time, a clock will be rendered. The user can click on an area in the clock to set the time. Clicking on the hour or minute part of the header will allow changing that part of the time. Clicking on AM/PM will toggle the time of day.

The user will continue to be able to manually edit the value in the input control.

If the input is activated on a very small screen or mobile device, the Calendar Input will be displayed in the center of the screen. The user must click “OK” to save the new value, “Cancel” to close the popup, or “Clear” to reset the value.

Calendar Input on small screens will cover input and show OK, Cancel, Clear buttons.

Notice that days that contain data in the month are bold. Hovering over the day will reveal a count of records on that day. The client library makes asynchronous requests to pull the data and caches it on the client. If performance is a concern, this feature can be disabled by tagging the data field “calendar-input-data-none”.

Data View Fields

In the past, Code OnTime users needed to configure pages with multiple data views in order to display lists of data related to the master record. This process led to a disconnect between the data and presentation layers of the application.

Release 8.5.8.0 changes the paradigm. A new field type has been introduced, “DataView”. This will allow users to embed lists of records directly into the forms of master records. This change brings controllers more inline with how users would intuitively understand business objects.

Simply define a field of type “DataView”, point to the correct controller, specify the filter field, and create a data field to bind it to the form. All pages that refer to that form will now reveal relevant child records.

Data View field example.

The traditional method of defining child data views still works. This can be used for child data views that should only be displayed on certain pages (or define another view that excludes the data view field).

Future releases of the app generator will allow users to perform inline editing of child records at the same time that the master record is being modified.

Grid Upgrades

This brings us to the new and improved grid. In previous releases, it was difficult to set the size of grid columns to match up with the intended look and feel. Release 8.5.8.0 has made the grid sizing process more transparent.

The grid will now use the exact size of each data field in columns when allocating space. If there are no columns defined, then the columns will be set to 2/3s of the length of the field, or various preconfigured lengths depending on the type of the field.

In order to make the client library more intelligent and require less involvement of the user, a new feature has been added to the grid – “Fit To Width”. This will automatically shrink the grid columns to fit the screen, down to a certain limit. The space allocated to each column is equal to the proportion of “columns” that field was assigned. This feature is automatically enabled for every grid. If the behavior is undesired, the data view can be tagged “grid-fit-none” to disable the functionality.

The width of the grid may surpass the width of the page – the user will then be able to drag the grid left and right to bring different columns into view. Touch input is now supported for dragging.

If a column is too small or big to see the data, the user can click and drag the divider between columns in order to resize.

Animation of grid dragging and column resizing.

Future releases will offer the ability to reorder the columns on the client.

“Tiny” Density

Touch UI applications offer several different display densities in order to fit the needs of every user. The smallest size, Condensed, was still larger than Desktop UI. Therefore, we are introducing “Tiny” display density, which uses the same font and font size of the desktop.

The picture below compares “Comfortable” and “Tiny” display densities.

Orders form with 'Comfortable' display density.    Orders form with 'Tiny' display density.

Business Object Model and Data Access Objects

Code business rules in previous releases of Code OnTime app generator would list each field in the parameters of the method. Controllers with over a hundred fields would result in sprawling and ungainly method signatures. To update a data field for the client, it was necessary to call the UpdateFieldValue() method. See an example of legacy code below.

using System;
using System.Data;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class OrderDetailsBusinessRules : MyCompany.Data.BusinessRules
    {
        [Rule("r100")]
        public void r100Implementation(int? orderID,
            string orderCustomerID,
            string orderCustomerCompanyName,
            string orderEmployeeLastName,
            string orderShipViaCompanyName,
            FieldValue productID,
            string productProductName,
            string productCategoryCategoryName,
            string productSupplierCompanyName,
            FieldValue unitPrice,
            short? quantity,
            float? discount)
        {
            UpdateFieldValue("Quantity", 1);
        }
    }
}

Release 8.5.8.0 will now generate data model objects for each controller that has a code business rule, and will pass this object as a parameter to the method. The setters for each property of the data model object will update the corresponding field on the client side.

using System.Data;
using MyCompany.Data;
using MyCompany.Models;

namespace MyCompany.Rules
{
    public partial class OrderDetailsBusinessRules : MyCompany.Data.BusinessRules
    {
        [Rule("r100")]
        public void r100Implementation(OrderDetailsModel instance)
        {
            instance.Quantity = 1;
        }
    }
}

The new business rule format is vastly easier to read and understand, even for non-professional C# or Visual Basic developers.

Legacy business rules will continue to function as they did before.

Release 8.5.8.0 no longer offers a way to enable data access objects globally. The developer will need to enable data access objects on each controller by enabling the “Generate Data Access Objects” checkbox. These objects will extend the business object models. Models and data access objects will now be stored under ~/App_Code/Models folder.

Miscellaneous

These are just some of the new features in release 8.5.8.0. A more comprehensive list can be seen below:

  • Fields now have the option to be set as “Virtual”. These fields will never be included in Insert or Update queries, but are still editable by the user and can be read and manipulated in business rules. Developers no longer need to mark fields as “not modified” in rules in order to use custom fields.
  • Controllers can now be generated with “Save” and “Save and New” in create forms. By default, new applications will have this enabled by default. It can be toggled with the “Use ‘Save’ and ‘Save and New’ in forms” checkbox in the Features page of the Project Wizard.
  • Vast performance enhancements in page loading, button clicking, form opening, grid rendering and dragging, calendar rendering and dragging. HTTP requests are now smaller and data is cached when possible.
  • Re-selecting a record in the form after creating a record will no longer go back to the grid before loading the edit form. This results in significantly faster workflow when inserting multiple records.
  • Support for Report Viewer 2015.
  • Touch gesture support for Drag & Drop API – tested with Surface Pro 4, iPhone 6 Plus, iPad Pro, Nexus 5x, S7 Edge. This API is used in calendar, grid, calendar input, and panels.
  • Model Builder Tooltip API has been ported to Touch UI.
  • “Borrowed” fields defined in data models will be copied when the lookup value is changed. These fields will now be included as read-only in the create form.
  • Changing namespace of application in Web App Factory will move data model files to correct location.
  • A grey overlay will cover the screen if the user attempts to “double” click an action while another action is executing.
  • Custom scrollbar ensures a uniform user experience across browsers and themes.
  • View templates can exclusively contain the file name of another template. The application framework will load the file with that file name.
  • The text “Loading” will be displayed when the page is loading.
  • Blob Adapters no longer require the user to be logged in when there is no membership enabled.
  • Data Text Field and Data Value Field are initialized correctly if a model exists for the lookup controller.
  • Virtual lookup fields are now correctly created when defined in the data model.
  • Removed installer dependency to .NET 3.5.
  • The web.config file will not be overwritten unless necessary to avoid the “AppDomain Unloaded” message in Visual Studio.
  • Many other minor bug fixes.

We were not able to finalize some of the features that we desired to include in this release, due to time constraints. Expect to see these features in future releases:

  • Modal forms in Touch UI.
  • Grid inline editing (Data Sheet mode).
  • Use of HTML templates to define Grid/List/Card layouts.
  • Swipe left/right action group. Actions placed in this action group will be revealed when user performs the relevant gesture in the grid.
  • Promoted action group. Actions placed in this action group will be revealed when user clicks on the floating promo button at the bottom of the screen.
  • Sidebar will be rendered in the left menu panel when the screen is small or sidebar is disabled.
  • Revealing mini calendar under Calendar mode selector when sidebar is not visible.
  • Reordering of grid columns via drag & drop. The order will be saved in the browser cache.
  • Support for Azure 2.9.
  • “Bucket” lookup will allow selecting multiple items from the lookup view.
  • Rich Text Editor in Touch UI.
  • Visual Form Designer.
  • Multi-day events in Calendar.
Saturday, May 16, 2015PrintSubscribe
“Hello World” Single Page App with jQuery Mobile

jQuery Mobile is the foundation of apps created with Code On TimeTouch UI is the primary user interface of generated apps. It relies on capabilities of jQuery Mobile to partition an HTML page into multiple virtual pages. Touch UI also takes advantage of the navigation architecture implemented in  jQuery Mobile framework. Navigation between virtual pages happens without reloading of the physical page container even when Back and Forward buttons of a web browser are pressed. Transitions between virtual pages are animated by jQuery Mobile, which provide “native” feeling to the apps. Virtualization of mouse and touch events of modern web browsers is another core feature of jQuery Mobile, that enables handling of user interactions in line-of-business applications with Touch UI.

Let’s create a line-of-business app that showcases the single page application model and the above-mentioned jQuery Mobile features.

A single page app created with Code On Time application generator is based on jQuery Mobile.

Creating Page Template

First,  download application generator and configure a sample Web Site Factory project for Northwind database.  Choose an option to generate only the data controllers when you are stepping through pages of Project Wizard.

Configuring a sample project without pages in Code On Time app generator.

This is how the app will look when it is started in a web browser.

A line-of-business app with Touch UI created with Code On Time app builder. Application uses jQuery Mobile framework for enhanced mobile-friendly user interface.

Follow instructions and login as admin/admin123%.  Instructions will disappear from the home page and you will see an additional menu item that allows managing user accounts and roles.

Site content in a line-of-business app created with Code On Time.

User and role management screen in a line-of-business app created with Code On Time.

Let’s add a new page to our project. Activate project designer and create a new page.

Creating a new SPA page in Project Designer of Code On Time.

Enter SinglePageApp as the page Name, select “(blank)” for Template, set Generate property to “First Time Only”, and click OK button. The icon of the page will have a lock image displayed on it to indicate that it is safe to modify the page in any text editor after it has been generated.

SPA page that can be customized in any external editor without loosing changes during code generation iterations.

Drag the page to the desired location in the navigation system of the app. Right-click the page and choose “View in Browser” option to preview the page. App generator will create a file for the page, start IIS Express development web server and launch the default web browser. This is our new page.

SPA page based on blank template in an app created with Code On Time.

Right-click the page once more and choose Edit in Visual Studio option.

Activating Visual Studio to modify the page of an app created with Code On Time application generator.

This is the HTML markup of the page defined in ~/Pages/SinglePageApp.html file.

<!DOCTYPE HTML>
<html>
<head>
    <title>Single Page App</title>
</head>
<body data-authorize-roles="*">
    <!--The contents of this page will be overwritten by app generator.
        Set page property "Generate" to "First Time Only"
        to preserve changes.-->
    <div data-app-role="page" data-activator="Button|Single Page App">
        This is the content of <i>SinglePageApp</i> page.
    </div>
</body>
</html>

The default empty page specifies a single virtual page container element with data-app-role attribute set to “page”. You may know that jQuery Mobile uses data-role attribute for the same purposes. Touch UI framework relies on APIs available in jQuery Mobile to correctly initialize the page container as a virtual page. Only authenticated users are authorized to see the virtual page of this SPA.

Multiple Virtual Pages in a Single SPA Page

Let’s replace the default virtual page with the three virtual pages instead.

<!DOCTYPE html>
<html>
<head>
    <title>SPA1</title>
</head>
<body data-authorize-roles="*">
    <div id="spa1" data-app-role="page" data-activator="Button|Supplier List">
        <ul id="supplier-list" data-role="listview" data-inset="true"
            data-filter="true" data-autodividers="true"></ul>
    </div>
    <div id="spa2" data-app-role="page" data-activator="Button|jQuery">
        <p>
            Learn about jQuery:
        </p>
        <a href="http://jquery.com" class="ui-btn ui-btn-icon-left 
           ui-corner-all ui-icon-arrow-r ui-btn-inline">jQuery</a>
    </div>
    <div id="spa3" data-app-role="page" data-activator="Button|jQuery Mobile">
        <p>
            Learn about jQuery Mobile:
        </p>
        <a href="http://jquerymobile.com" class="ui-btn ui-btn-icon-left 
           ui-corner-all ui-icon-arrow-r ui-btn-inline">
            jQuery Mobile</a>
    </div>
    <script src="~/Scripts/Suppliers.js"></script>
</body>
</html>

Virtual pages spa1, spa2, and spa3 are div elements with data-app-role attribute set to “page”. Data activators are assigned to each page. Refresh ~/pages/single-page-app page in the web browser and you will see a list of activators.

The menu of virtual pages in an SPA app created with Code On Time line-of-business application generator.

Select the first activator and jQuery Mobile framework will activate the page, which will be indicated by the hash value #spa1 in the address bar of the browser.  The page header displays the text specified in the page activator and there is a also an empty list view with a filter. There is no code connected to the list view in the current implementation so there will be no data even if you enter sample text in the search box.

jQuery Mobile filterable listview widget in the SPA app created with Code On Time app builder.

Return back and try one of the other virtual pages. Notice that the physical page does not reload in the browser as you navigate between virtual pages. jQuery Mobile handles changes of the history state in the app with Touch UI.

Simple content page uses jQuery Mobile CSS classes to style a link to an external page.

Click on a link and the application framework will execute an off-band HTTP request to download the content . If other virtual pages are found in the downloaded page then the framework will inject them in the physical page and transition user to the first downloaded virtual page. If the content is not compatible with the application framework then the app will create a virtual page with iframe element configured to display the linked content as shown in the next screenshot.

External website displayed in an SPA app created with Code On Time.

Making Database Request

The primary purpose of Code On Time application generator is to accelerate development of database apps. This application already includes a collection of data controller that can handle interactions with the Northwind database. This picture shows configuration of Suppliers data controller displayed in Project Designer. The data controller has been created by app generator straight from the schema of the database.

The stucture of Suppliers controller displayed in Project Explorer of Code On Time app generator.

Add new JavaScript file ~/Scripts/Suppliers.js to the project in Visual Studio and enter the following code:

(function () {
    var supplierList = $('#supplier-list');
    $('#spa1').on('navigating.app', function () {
        $app.execute({
            controller: 'Suppliers',
            sort: 'CompanyName',
            success: function (result) {
                $(result.Suppliers).each(function () {
                    var supplier = this;
                    var li = $('<li/>').appendTo(supplierList);
                    var a = $('<a class="ui-btn"/>').appendTo(li);
                    $('<h3/>').appendTo(a).text(supplier.CompanyName);
                    $('<p class="ui-li-aside"/>').appendTo(a).text(supplier.Phone);
                    $('<p/>').appendTo(a).text(supplier.ContactName + ' | ' +
                        supplier.Address + ', ' +
                        supplier.City + ', ' +
                        (supplier.Region || '') + ' ' + supplier.PostalCode + ', ' +
                        supplier.Country);
                });
                supplierList.listview('refresh');
                $app.touch.navigate('spa1');
            }
        });
        return false;
    });
})();

The script is designed to work specifically with this single page app. It will make a request to obtain a list of suppliers whenever a user is activating the virtual page Supplier List.

Application framework supports asynchronous pre-loading of data in virtual pages. Developer can fill a page with data before the page is displayed to the end user.  The majority of database apps based on HTML fail to do so and display empty pages that are filled with data after being presented to the user. Event navigating.app is triggered on the virtual page when the framework detects a request to display a virtual page. If the event handler returns false then the navigation is postponed indefinitely.

The script does just that. The handler of navigating.app event is making a request to the server-side components of the app by calling $app.execute method asking for a list of suppliers sorted by CompanyName column. This method is executed asynchronously. Immediately the handler tells application framework to stop navigation without waiting for a list of suppliers to come back from the server.

The second phase of client-side processing happens when a response is received from the server. The callback method success iterates through the suppliers in the response and creates corresponding list items marked with CSS classes ui-btn and ui-li-aside available in jQuery Mobile framework. The final step refreshes the list view supplier-list and resumes navigation to the virtual page spa1 by calling $app.touch.navigate method.

The script needs to be hooked to the page ~/Pages/SinglePageApp.html. Place the script reference just before the closing body tag in the page markup to accomplish that. Note that symbol “~” indicates that the path to the script must be resolved from the root of the site instead of being a relative reference. That enables the page to be moved in the project structure without the need for changes in the script reference.

. . . . . . . . . . . . . . . . .  . . . . .  . . 
<script src="~/Scripts/Suppliers.js"></script> </body> </html>

Refresh the page in the browser and navigate to Supplier List. Notice that there is a little pause and then the page with data  appears. This is the result of data preloading and delayed navigation. If download of data is taking longer than three quarters of a second then a progress indicator will be displayed at the top of the page and “back” button will start spinning.

Listview widget of jQuery Mobile displays a list of suppliers in SPA app created with Code On Time.

Filtering in the list happens without interactions with the server as a filter value is typed. Filterable widget from jQuery Mobile makes this possible.

Filterable widget of jQuery Mobile in action in an app created with Code On Time.

Note that this application is capable of displaying data with different display densities on various screen sizes in a responsive fashion. For example, click on the menu button and choose Settings.

jQuery Mobile menu drawer/panel  opened in an SPA app created with Code On Time.

Change display density of application to Comfortable and application theme to Dark. Reduce the width of the window and the sidebar will disappear. The page will look close to how it is presented to users of modern touch-enabled smartphones.

jQuery Mobile responsive design shines through in the app created with Code On Time.

Under The Hood

Those of you with the curious minds may be already asking themselves how this seemingly minimalistic HTML page and lean JavaScript code are getting the job done. There are no references to jQuery or jQuery Mobile library or any other components.

Select View Source option in the menu of your browser or press Ctrl+U on the keyboard. The source of a live page will be displayed. This is what it may look like.

<!DOCTYPE HTML>
<html xml:lang=en-US lang="en-US">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <meta name="application-name" content="Hello World SPA" />
    <link id="MyCompanyTheme" href="/appservices/stylesheet-8.5.3.0.min.css" type="text/css" rel="stylesheet" />
    <title>SPA1</title>
</head>
<body>
    <script src="/appservices/combined-8.5.3.0.en-us.js?_spa"></script>
<
div id="PageContent" style="display:none"> <div id="spa1" data-app-role="page" data-activator="Button|Supplier List"> <ul id="supplier-list" data-role="listview" data-inset="true" data-filter="true" data-autodividers="true"></ul> </div> <div id="spa2" data-app-role="page" data-activator="Button|jQuery"> <p> Learn about jQuery: </p> <a href="http://jquery.com">jQuery</a> </div> <div id="spa3" data-app-role="page" data-activator="Button|jQuery Mobile"> <p> Learn about jQuery Mobile: </p> <a href="http://jquerymobile.com">jQuery Mobile</a> </div> <script src="/Scripts/Suppliers.js"></script> </div><footer style="display:none"><small>&copy; 2015 MyCompany. All rights reserved.</small></footer> <script> var __targetFramework="4.5",__tf=4.0;__servicePath="../_invoke";__baseUrl="../";var __settings={appInfo:"HelloWorldSPA|admin",mobileDisplayDensity:"Auto",desktopDisplayDensity:"Condensed",mapApiIdentifier:"", labelsInList:"DisplayedBelow",labelsInForm:"AlignedLeft",initialListMode:"SeeAll",buttonShapes:"true", sidebar:"Landscape",promoteActions:"true",transitions:"",theme:"Azure",maxPivotRowCount: 250000, help:true,ui:"TouchUI"};Web.Menu.Nodes.Menu1=[{title:"Home",url:"/pages/home",description:"Application home page",cssClass:"Wide"},{title:"Membership",url:"/pages/membership",description:"User and role manager"},{title:"Single Page App",url:"/pages/single-page-app",selected:true}];Sys.Application.add_init(function() { $create(Web.Membership, {"displayHelp":true,"displayLogin":true,"displayMyAccount":true,"displayPasswordRecovery":true, "displayRememberMe":true,"displaySignUp":true,"enableHistory":false,"enablePermalinks":false, "id":"mb_b","rememberMeSet":false,"user":"admin"}, null, null, null); }); </script> </body> </html>

You will find a reference to a minifies CSS  file that contains user interface definitions for jQuery Mobile and Touch UI. There is also a link to a combined JavaScript library that includes jQuery, jQuery Mobile, Data Aquarium, and Touch UI frameworks. Container element PageContent is hidden by default.

Application framework will instantiate and initialize virtual pages spa1, spa2, and spa3 when the document is loaded and ready for processing. The static script variables at the bottom of the page provide the default application settings and navigation menu.

Element PageContent incorporates the content of ~/Pages/SinglePageApp.html. Arguably more complex than the original version, the physical page served to web browsers on desktop and mobile devices is still very lean. Code On Time applications will be equipped with ability to work entirely “offline” by the end of 2015. The page structure is perfect for storing directly in the offline browser cache.

The dynamic component of this single page app is the virtual page with the list suppliers. As you can see, the source code of the physical page does not have supplier data in it. Application requests data from the server by calling $app.execute method as explained above.

This is the JSON request sent to the server components of the app by $app.execute method.

JSON request to retrieve a list of suppliers displayed in IE11 development tools.

{"controller":"Suppliers","view":"grid1","request":{"PageIndex":-1,"PageSize":100,"PageOffset":0,"SortExpression":"CompanyName","Filter":[],"ContextKey":"","Cookie":"undefinedcookie","FilterIsExternal":false,"LookupContextFieldName":null, "LookupContextController":null,"LookupContextView":null,"LookupContext":null,"Inserting":false, "LastCommandName":null,"ExternalFilter":[],"DoesNotRequireData":false,"LastView":null,"RequiresFirstLetters":false,"SupportsCaching":true, "SystemFilter":null,"RequiresRowCount":false,"RequiresPivot":false, "PivotDefinitions":null,"RequiresMetaData":true}}        

The response is returned as compressed JSON string. Method $app.execute makes the response available for processing in success callback function. This how the list of suppliers looks when inspected in Visual Studio while debugging the app.

Inspecting JSON response returned from the server components of the SPA app created with Code On Time.

Method $app.execute can be used to select, pivot, insert, update, and delete data. Custom actions can also be invoked and processed by server-side business rules written in SQL or C#/Visual Basic. Email business rules are automatically executed in response to actions when specified.

Project Structure And Deployment

Solution Explorer of Visual Studio will show the location of the SinglePageApp.html page in the project hierarchy. There are no binary files in the project, the entire source code is included. Files with the names Application.*.xml, Controllers.*.xml, and DataAquarium.*.xml are used by application generator at design time only.

Components of jQuery, Data Aquarium, and Touch UI frameworks are located in ~/scripts folder. Files from jQuery Mobile library are located in ~/touch  folder.

The structure of the application created with Code On Time displayed in Solution Explorer of Visual Studo.

Publish the project to produce a set of files that are ready for deployment to a production web server.

Code On Time deployment folder with published application.

Window Explorer will show up with the  published files. The binary folder ~/bin contains compiled application DLLs. Files specific to application generator are not included.

The structure of the published application created with Code On Time line-of-business application generator displayed in Windows Explorer.

Using App Generator to Create Data Pages

Touch UI application framework provides sophisticated data access user interface components based on jQuery Mobile. For example, you can easy create a master-detail page displaying suppliers and linked products with full support for search, sorting, filtering, and editing of data with just a few clicks of a mouse.

Create a new page in Project Designer and call it Suppliers. Activate Controllers tab in Project Explorer and Ctrl-click Supplies and Products  data controllers. Right-click Products controller and choose Copy in the context menu.

Copying two data controllers to clipboard in Project Explorer of Code On Time app builder.

Activate Pages tab in Project Explorer, right-click the new page Suppliers, and choose Paste.

Pasting data controllers on a page in Project Explorer of Code On Time.

Drag data field Suppliers / c102 / view2 (Products) / grid1 / SupplierID onto Suppliers / c101 / view1 (Suppliers) node in the hierarchy of pages.

Establishing a master-detail relationship between the list of suppliers and the list of products in SPA page of an app created with Code On Time.

This will configure the data view of products to be filtered by the primary key of a record selected in the data view of suppliers.

A master-detail configuration of two data views on single page of SPA.

Right-click Suppliers page and select View in Browser. A grid of suppliers will be displayed.

A responsive grid of suppliers in the app created with Code On Time.

Select a supplier to see the linked products.

Master-detail view of a supplier and linked products in the applicaiton created with Code On Time line-of-business app generator.

This responsive data page can be displayed comfortably in a mobile or desktop browser on a screen of any size and resolution. It allows searching, filtering, sorting, and editing of data. The data can presented as grids, lists, cards, charts, maps, and calendars.

List view of suppliers in the app created with Code On Time.

Map view of suppliers in the app created with Code On Time.

The markup of the page is so simple that it is hard to believe.

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Suppliers</title>
  </head>
  <body data-authorize-roles="*">
    <div data-flow="row">
      <div id="view1" data-controller="Suppliers"> </div>
    </div>
    <div data-flow="row" style="padding-top:8px">
      <div class="DataViewHeader">Products</div>
      <div id="view2" data-controller="Products" data-view="grid1" data-filter-source="view1" 
           data-filter-fields="SupplierID" data-page-size="5" 
           data-auto-hide="container" data-show-modal-forms="true"> </div>
    </div>
  </body>
</html>

Attribute data-controller causes application framework to create virtual pages for each of the data views. Single page app Suppliers automatically zooms into virtual page view1 to display a master list of suppliers. Virtual page view2 is available when a supplier is selected in the user interface. Additional virtual pages are created by application framework in response to various user actions.

Creating Content Pages

Wait, there is more. Touch UI application framework combines jQuery Mobile and popular content framework Bootstrap. This enables creation of content pages with a simple and effective presentation. Add one more page to your project and configure it to use Jumbotron template. Preview the page in a browser and you will see the following:

A bootstrap content page in the app created with Code On Time. Touch UI application framework combines together jQuery Mobile and Bootstrap.

This will surely give you a few ideas about enhancing your line-of-business database application with a few public facing pages to promote the application capabilities. These content pages will look great on mobile and desktop devices.

Integrated Content Management System

We are still not done here. This line-of-business application can be further enhanced with an integrated content management system. Built-in CMS allows creating dynamic multimedia content in a live application without the need for re-deployment. Data and content pages can be stored directly in the application database thanks to their lean HTML-based structure.

Content management system also allows creating custom navigation menus, uploading of modified data controllers, definition of Dynamic Controller Customization rules, and custom security through Dynamic Access Control List.

Learn how to create a directory of suppliers shown at the top of the article in a live application without re-deployment or access to the server file system.

Conclusion

If you are looking to take a full advantage of jQuery Mobile framework then you must take it for a spin with Code On Time line-of-business application generator. Create premium database apps for mobile and desktop devices with Code On Time now!