Code On Time: Web Form Builder

Blog

Web Form Builder

Monday, July 14, 2014Print Subscribe

Map View, Master-Detail Pages, Custom Result Sets, Client-Side APIs

Code On Time release 8.0.6.0 introduces countless enhancements to Touch UI - the unified user interface of mobile and desktop applications created with our app generator. Developers can now select a default user interface model for the apps in all product editions. The two options are Touch UI and Desktop. Applications created with Unlimited edition support both user interface models simultaneously.

Notable enhancements include:

Support for exact and negative search in Quick Find. For example, “USA” –“ak” will yield a list of customers from the United Stated with the exception of those located in Alaska.
Map view is now available in Touch UI.
Complex Master-detail pages are now supported in Touch UI.
Custom result sets based on arbitrary SQL queries, stored procedures, and web services with automatic support for filtering and sorting can now be utilized in applications. The tutorials are coming up.
Client-side API has been extended with the method $app.execute. This method allows easy selection of data on the client and execution of arbitrary commands. The tutorials will become available shortly. This method is the core of the custom GUI development in http://cloudontime.com. It performs a function similar to REST API, but works in all product editions. REST API does not require client libraries of apps created with Code On Time. The new method $app.execute works only within application and cannot be used independently.
Client-side API has been extended with the method Web.DataView.search. This method allows activating search in a data view on the page with filter and sort expressions defined by a developer.

Touch UI apps created with Code On Time work on all devices with an optional ability to degrade user interface in Inernet Explorer 6-9.

Touch UI automatically creates complex layouts with tabs and any number of levels of master-detail relationships.

Touch UI supports complex tabbed layout in apps created with Code On Time

Map view works on all types of devices:

Map view is a core automatic feature of Touch UI applications created with Code On Time.

The following features and enhancements are included in this release:

Developers can choose user interface for Azure Factory, Web App Factory, and Web Site Factory projects in the Settings /Namespace, Framework and UI section.
All settings of Touch UI applications can be configured in the Settings / Features / Touch UI section of application configuration.
Map view style is now available in Touch UI applications.
End users can choose Form Label Alignment in an app.
End users can choose Position of List Labels in an app as.
Touch UI applications offer 38 built-in themes.
Developers can now specify default themes for pages.
End users can control Display Density of application pages.
End users can choose page transitions in apps with Touch UI.
Fixed the bug causing SQL business rules not being executed on each row when multi-select is enabled.
Data controller "Execute" method has been refactored for improved processing of multiple selected rows submitted from the client.
Fixed the incorrect multi-value adaptive filtering of lookup fields in Desktop UI.
Touch UI now uses minified CSS stylesheets.
JQuery Mobile 1.4.3 framework is the core of the Touch UI applications.
Methods $app.execute and Web.DataView.search are now supported.
The first allows server-side requests to SELECT/UPDATE/INSERT/DELETE data on the server. The second method allows passing "sortExpresson" and "filter" to a data view to sync data. Method $app.execute also supports "Report" action.
Quick Find filter now uses a system name "_quickfind_" parameter to enable filtering operations on the first field in the view.
User controls generated "First Time Only" now include a standard template for Touch UI.
EASE configuration will not assign "mailto" if the field already has a HyperlinkFormatString.
Added fix in Controller.Filter for fields that are shorter than the search query.
Added Quick Find support for "exact matches" and -negative results.
Fixed charts not rendering in reports due to view access not being validated.
Data views can be tagged as display-style-grid, display-style-list, display-style-listonecolumn, and display-style-map to force a specific presentation style on all devices.
Renamed “Device” property of pages to "User Interface". The valid values are "Touch UI" and “Desktop”.

Labels: Application Factory, BYOD, Data Aquarium Framework, EASE, Email, JavaScript, Release Notes, Reports, Touch UI, User Interface, Web 2.0, Web Application Generator, Web Form Builder, Workflow

Friday, June 13, 2014Print Subscribe

Complex Page Layouts on Mobile and Desktop Devices

The next release of Code On Time will include extended support for tabbed page layouts in apps with Touch UI.

If a data controller exposes multiple views of data, then each view will have a dedicated tab at the top of a page.

The view selector is also available in the context menu of the view.

The data presentation style options are available on the sidebar and in the context menu. The current options include List, Grid, and Map. Data Sheet, Chart and Calendar will become available soon.

The future releases will allow creating user-defined views of data with a dedicated style (List, Grid, Map, etc.), visible columns, sort expression, and filters. Custom views will also be accessible via tab bar alongside the application defined views.

Master-detail pages will display child data views below the form views. If tab activators are specified, then a tab strip is also rendered to provide quick access to a subset of data starting with the first data row. View-specific “menu” button provides access to context menu options. Button “See All” allows working with an entire set of records.

If multiple tabbed master data views are defined on a page, then a dedicated tab-strip is rendered.

Touch UI works exactly in the same way on both mobile and desktop devices.

Here is a complex layout of a page with multiple master data views.

The release is expected to go out in June of 2014.

Labels: Data Aquarium Framework, Mobile, Touch UI, User Interface, Web App Generator, Web Application Generator, Web Form Builder

Tuesday, May 6, 2014Print Subscribe

Configuring a Custom Logo in Touch UI Apps

A web app with Touch UI displays a small logo on the left side of the tool bar next to the Home button. The logo is also displayed in the same spot on tablets and desktop devices.The color of the logo depends on the user interface theme. A separate “icon” logo is displayed by mobile devices on the home screen if a web app has been installed to run in a full screen mode.

The screenshot shows a standard colorful logo of a web app displayed on full screen of iPod Touch.

Next screenshot shows a black logo in a web app displayed on full screen of iPad Air.

This screenshot shows an application with Touch UI on a desktop computer. The logo is white.

This is an icon of installed web app as displayed by iPad Air.

The standard logo files can be found in the ~/touch folder of Web Site Factory and Mobile Factory applications.

The same files are found in ~/WebApp/touch folder of Web App Factory projects.

Azure Factory applications keep the logo files in ~/WebRole1/touch folder.

Replace the files with your own images for a customized look.

Create logo-black.png, logo-color.png, and logo-white.png images with the size 120 x 54 and copy them over the standard files to replace the logo on the toolbar.

Create logo-icon.png with the size 196 x 196 and replace the corresponding file for a custom application icon.

Here is an example of a custom logo that we are using to modify the standard toolbar images. Our file has a transparent background. We have used exactly the same image for all three logos displayed on the toolbar.

This is how the new logo looks in a live application.

If the the standard size of the logo is tool small, then consider creating a custom CSS stylesheet in the ~/touch folder and placing a CSS rule that will replace the standard positioning and sizing of the logo.

Custom file StyleSheet.css is placed in the touch folder of a Mobile Factory app in this screen shot.

This is the rule that changes the position of the background and its size. We recommend experimenting with actual values to accomplish the best fit for you needs.

@media (min-width: 20em) {
    .ui-header.ui-header-fixed:not(.app-tabs) {
        background-position:1.75em 0;
        background-size:100px;
    }
}

The logo in the next screen shot takes the entire height of the toolbar.

The larger file logo-icon.png provides a custom application icon on a home screen of iOS device.

Labels: Application Builder, ASP.NET Code Generator, Mobile, Tips and Tricks, Touch UI, Web Application Generator, Web Form Builder