Blog | Forms, Reports, Apps. Build and deploy rapidly. Use offline, online, on-premises.

Blog

Friday, January 23, 2015Print Subscribe

What is Touch UI?

Touch UI is the new user interface of single page apps (SPA) created with Code On Time database application generator. This responsive user interface is based on jQuery Mobile and adapted to work on both mobile and desktop devices with any screen size. It also integrates popular Bootstrap framework to simplify content creation and content oriented SPAs.

Choose Project Type

Touch UI is available in applications created as Azure Factory, Mobile Factory, Web App Factory, or Web Site Factory project.

End users of your application will not be able to tell its project type.

Developers will notice that Mobile Factory and Web Site Factory project files are grouped in folders, which allows Microsoft ASP.NET to compile the code dynamically. Web App Factory project has a more complex folder structure and uses a solution file to keep track of the project components. It must be compiled in Visual Studio explicitly. These three project types can be deployed to any physical or hosted Windows Sever.

Azure Factory project type is similar to Web App Factory. It is designed specifically for deployment and hosting in Microsoft Azure as a cloud service.

The most versatile and simplest to maintain project type is Web Site Factory.

Start the app generator and create a new application by choosing the desired project type.

Framework and User Interface

Make sure that application framework is set to .NET Framework 4.5 or higher. Also select Touch UI as the user interface default option.

If you are creating your project with Unlimited edition of the app generator, then your application will support both Touch UI and Desktop UI. The secondary user interface will work with browsers that are not compatible with HTML5. Your app will automatically downgrade to desktop user interface as needed. If you choose Desktop UI as a default user interface option then Touch UI will only be activated on mobile devices.

Note that dual user interface is not supported in other product editions.

Click Next until your reach a page that allows configuring a database connection for your project.

Configuring Data Provider

Code On Time allows creating apps straight from your database or from external data sources such as web services or file system.

The default data provider for the app is Microsoft SQL Server. A variety of other database engines is also supported.

If you are not planning to use a database engine as a source of data then choose Custom Data Provider option in the drop down.

Click on the button with three dots next to Connection String input to configure the connection string for the selected provider.

Setting Up a Sample Data Set

If you are creating a project for Microsoft SQL Server or Microsoft SQL Server Express then you can configure a sample database that is used in the tutorials.

First make sure to specify your server address. If you have Microsoft SQL Express installed on your computer then make sure to enter “.\sqlexpress” without double quotes in the Server input field.

Enter Northwind in the Database input and click Create button. A confirmation will be displayed when an empty database has been created.

Select Northwind in the drop down under Sample Tables. Click Install to create a sample data set. Wait for the confirmation to be displayed.

Add a security system to your project by clicking Add button under Membership section.

The new database with sample data is configured and you can click OK to save settings and see the application connection string parameters.

Controllers, Pages, or Empty Project

Now it is time to decide if you want the app generator to create sample data controllers and pages (single page apps) from the contents of your database.

If you are planning to build a collection of single page apps using jQuery Mobile or Bootstrap then choose only Data Controllers to generate. Consider taking advantage of the automatically created SPAs and choose Data Controllers and Pages. If the pages are not matching your needs then you can always delete them later in Project Designer.

If your plan to define data controllers later then choose Empty Project instead.

Choosing Database Tables

The app generator can created data controllers and SPAs for every table and view found in the database. This will be the case if you proceed to the Next step.

For the purpose of the tutorials click Change next to “All database tables and views are included in this project” and choose tables listed at the bottom of the next screenshot.

New database tables and views can be added to a project later.

Press Next until your arrive to Reporting configuration section of your project.

Reporting

Application framework creates dynamical reports in PDF, Word, Excel, and TIFF format. Complex master-detail custom reports can also be created.

We recommend enabling reports even if you are creating SPAs with jQuery Mobile or Bootstrap without relying on data presentation capabilities of Touch UI. Reports can be defined on the server and invoked with minimal JavaScript code via custom user interface.

Generating Application

Continue pressing Next and you will reach a page with a summary of data controllers that will be created in your project. The summary will be blank if you are creating a project with a custom data provider.

Click Generate button and wait for the web browser window to open.

Application generator will create the source code of your project, compile it, launch IIS Express, and start the web browser with the home page address of your app loaded.

Exploring App with Touch UI

Touch UI application is a collection of pages (single page apps) that provide access to content or data. A unified navigation system allows switching between single page apps. The default application will have a single SPA called home with several virtual pages.

Click on Site Map or Instructions to transition to the corresponding virtual page of the SPA. The default transition on Android devices is “fade”. Other mobile devices and desktop computers will use “slide” transition animation.

Proceed to Instructions and click or touch Login button. Enter admin/admin123% as user identity and hit Enter key.

SPA Home will reload and three options will be displayed in the sitemap.

Option Membership allows administrators to access user and role manager built into the app.

If you have an app created with Data Controller and Pages then the navigation menu will have numerous SPA options.

Application SPAs will provide access to data stored in database tables and views. This particular single page app allows managing employees stored in the sample database in Employees table.

Changing App Settings

Click or touch Menu button on the left side of the application toolbar. Select Settings option in the menu and change the application theme to Dark.

This is how the Membership Manager will look in Dark theme. There are 37 themes to choose from.

Touch or click Menu button again and select Logout in the slide-out drawer panel. The current SPA will reload.

The original application theme will be displayed. You are now an anonymous user and the default theme will be activated.

If the last SPA has required authorization than that application page will not be loaded. Instead user will be transitioned to the home SPA accessible to anonymous users and asked to log in.

Many application settings and features are user-configurable and stored in the local database of your browser.

Configuring Default Settings of Touch UI

You can specify default settings of Touch UI for your project such as global display density or label alignments in data-enabled SPAs.

For example, if you notice that transition animations between virtual pages are not smooth enough on the hardware of your end users than consider changing default settings for transitions. Select your project on the start page of the app generator and choose Features in the project settings.

Select Touch UI section and set Transitions to None. This will disable transitions between virtual pages of SPAs by default.

Application end users can still choose their preference for transitions on their own.

Developers can remove various settings from the user interface with a few lines of JavaScript.

Labels: Application Builder, Application Factory, Data Sources, Touch UI

Friday, January 23, 2015Print Subscribe

Responsive Grids, Lists, and Cards

A challenge of figuring the best presentation style for your data on a variety of devices is non-existent in apps created with Code On Time. Data views always provide at least three responsive view styles to end users. Application automatically elects the best presentation style if developers do not provide a default option. Mobile devices will present data as responsive lists while desktop devices will switch to responsive grids. If “image” or multi-line text fields are detected, then desktop presentation will be switched to “responsive list” instead.

Responsive List

The screen shot demonstrates a responsive list in action. Every data field is visible. The data fields and their content overflow to the next line as needed. Multi-line text fields start a new paragraph in the list item.

This presentation style is perfect when large amounts of information needs to be displayed.

A wider screen will fit more items, since data fields are redistributed along the entire available width.

Responsive Cards

An alternative responsive compact presentation of list items is called “Cards”. Only a subset of data fields is included in a card by default. Fields that do not fit will become invisible. The content of a field does not overflow to the next line.

List items are “cards” of the same height. Wider screen will break the flow of cards into two or three columns if possible.

This presentation style maximizes the amount of information available to the user without scrolling.

Responsive Grid

The spreadsheet style presentation of data is convenient when field values require comparison. Responsive grid displays field values aligned horizontally in each row. Better yet, the grid will dynamically measure the available width, relative width of individual fields, and their importance. Then it will hide the “less important” fields to provide the best presentation possible given the width of the device.

Wider screen will reveal more data columns.

Developers can control how individuals data fields are displayed in each view style through tags using Project Designer.

Application users switch between view styles either by choosing the desired option on the sidebar or through the context menu options. Sidebar may not be available for some screen orientations and sizes.

Context menu is available on all devices. User activates context menu by touching or clicking on the context menu button. Next user selects the very first option in panel that shows the name of the current view.

Available presentation styles will be displayed. User touches or clicks on the options and the view style will change after the panel has closed.

Developers can tag the data view on a page to display a specific view style by default using Project Designer.

Labels: Application Builder, Application Factory, BYOD, Touch UI, User Interface, Web 2.0, Web Application Generator, Web Form Builder

Thursday, January 15, 2015Print Subscribe

Brand New Advanced Search, Deep Search, Right-Click to Filter

Code On Time release 8.0.12.0 introduces a collection of new features designed to improve productivity of end users.

The highlights of this release are:

Brand New Advanced Search implementation in Touch UI. Users can search for data by entering groups of conditions. Each group uses one of the four matching methods – “Match All”, “Match Any”, “Do Not Match All”, “Do Not Match Any”. Unlimited number of groups can be created. Data views will keep track of up to 30 recent searches. End users can execute and edit previous searches.
Deep Search is a new capability available in Touch UI. It is now possible to find master records via the content of the details. For example, users can find customers that have orders placed by employee Fuller and shipped to London. Application automatically detects master-detail relationships on the pages and allows specifying detail fields in advanced search groups or in the scope of quick find.
Right-Click to Filter is now supported in lists and grids of Touch UI applications. Users can right-click any visible value and immediately apply “Equal”, “Does Not Equal” and several other filtering options. This feature is supported by Touch UI applications on desktop computers equipped with a mouse.
Empty/Not Empty and dedicated Less/Greater Than and Less/Greater Than Or Equal are now supported in Desktop UI and Touch UI. The first two new filters allow located records that match the corresponding criteria. Previous implementations supported only the last variation of typical comparisons.
Data Pivoting is now integrated in the application framework. The new implementation includes support for a high performance universal server-side data pivoting driven by tags. This feature is the foundation of the upcoming brand new charting support that will be introduced first in Touch UI. The same pivoting capability will also be used for sidebar filtering options similar to those found on popular shopping web sites. This pivoting capability will also be used in the Calendar view style that will become available first in the Touch UI.

Take a look at the screen shots of the new user interface features.

The search button on the toolbar now activates either Quick Find search box or Advanced Search screen. The default option is Quick Find. If a data view is configured to “Search on Start” than Advanced Search is always engaged when a data page is loaded.

The new Quick Find box has a drop down arrow next to the search icon on the left and advanced search button on the right.

The drop down arrow activates a list of child data views on the page that are directly connected to the data view in focus. User has expanded the scope of search to include master data view Customers and child data views Orders and Order Details. Inclusion of child data views will engage deep search capability.

If a user clicks on the button on the right side of the Quick Find search box on the toolbar than advanced search screen slides down from the top of the browser window.

Four data matching methods are supported.

Groups can be deleted and duplicated as needed.

Right-click on the data values will display a context menu.

An example of “deep search” conditions.

The result of the “deep search”.

The history of searches on Advanced Search screen.

Searching from recent history on Advanced Search page.

The complete list of enhancements and bug fixes is presented below:

A new implementation of advanced search for Touch UI with multiple matching groups, history of recent searches and favorite searches.
Deep search is supported in Touch UI.
Right-click to filter is now available in Touch UI.
Data Pivoting is supported in GetPage method.
Ensured that SQL Server database with one custom schema and the rest of the tables in "dbo" will generate a correct initial menu.
Renamed __resultset to resultset__ to ensure wider compatibility with database engines.
Fixed DateTime UTC formatting issue when printing reports.
Method $app.find first tries to find a data view by ID and then tries to find it by controller name.
User-level properties are now application and user-specific in Touch UI apps.
Implemented InitBusinessRules to enable IDataEninge.ExecuteReader to work with business rules.
Data type TimeStamp will not break applications.

We are finally ready to publish various new tutorials that were in work for the past few months. This year you will see tutorials demonstrating development of single page apps with jQuery Mobile and Bootstrap. A new tutorial will explain how to build the Order Form sample with Touch UI.

In about two weeks we will release another with supported for data visualization in Touch UI and numerous other enhancements including BLOB uploading in Touch UI.

Labels: Application Builder, Release Notes, User Interface, Web Application Generator