Blog

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Thursday, July 24, 2014PrintSubscribe
Touch UI for Any Data, Anywhere (Stored Procedures, Web Services, etc.)

Code On Time release 8.0.7.0 introduces ability to generate custom data controllers directly from Project Designer. The source of data is up to you – the app generator will handle any data anywhere! Create amazing Touch and Desktop UI for data returned from stored procedures, web services, file system, etc.  The release also introduces a collection of important bug fixes and performance improvements. Continue reading for the full list.

Generating Controllers from Project Explorer

Create a new data controller, right-click the corresponding node in Project Explorer and choose Generate from SQL option to create a data controller based on a free-form SELECT statement , stored procedure, or any other SQL script .

'Generate from SQL' and 'Generate from Fields' options in Code On Time app generator.

“Command Text”  Controller

If the script is an arbitrary SELECT statement, then indicate that the script defines a command text. This option will configure a custom command for the data controller and ensure the maximum efficiency at runtime. You can also specify an optional “base” table name if you want the controller to support Update, Insert, and Delete.

Configuring a data controller based on arbitrary SELECT statement in Code On Time app generator.

Verify the script and click OK. Copy and paste the new controller on any page.

An app with Touch UI created with Code On Time.

“Business Rule” Controller

If you want to configure a data controller based on a stored procedure, then you will need to indicate that the script defines a business rule.

Configuring a data controller based on a stored procedure in Code On Time.

The controller will be enhanced with a collection of business rules. There will be no command.

Rule enableResultSet will instruct application framework to use the custom result set.

set @BusinessRules_EnableResultSet = 1
-- Enable caching of the result set. Duration is specified in seconds.
-- set @BusinessRules_ResultSetCacheDuration = 30 

Rule getData will produce the result set.

EXEC    [dbo].[Employee Sales by Country]
        @Beginning_Date = N'1/1/1980',
        @Ending_Date = N'1/1/2014'

Note that Update, Insert, and Delete are prevented by default.

set @BusinessRules_PreventDefault = 1
-- implement insert here

Implement your own business logic in the corresponding SQL or “Code” business rules. The output of the stored procedure will be stored in an instance of DataTable class. Developers can specify optional cache duration to improve performance of controllers based on “slow” stored procedures.

Business rules of a data controller based on a stored procedure displayed in Project Explorer of Code On Time app generator for desktop and mobile devices.

Drop the controller on a page to see it in action.

A data controller based on a stored procedure displayed in Touch UI application created with Code On Time.

“Thin Air” Controller

If you data is not coming from the database, then use another approach. Define a collection of fields for the new data controller. Right-click the data controller and choose Generate from Fields option. This will create a collection of “Code” business rules that produce an empty DataTable class instance with the columns matching the data controller fields.

A custom data controller produces data from 'thin' air in an app created with Code On Time.

Implement the code to populate the DataTable instance in the file that contains GetData business rule.

Imports MyCompany.Data
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq
Imports System.Text.RegularExpressions
Imports System.Web
Imports System.Web.Security

Namespace MyCompany.Rules

    Partial Public Class CustomDataSource3BusinessRules
        Inherits MyCompany.Data.BusinessRules

        ''' <summary>
        ''' This method will execute in any view before an action
        ''' with a command name that matches "Select".
        ''' </summary>
        <Rule("GetData")> _
        Public Sub GetDataImplementation()
            ResultSet = CreateCustomDataSource3DataTable()
        End Sub

        Private Function CreateCustomDataSource3DataTable() As DataTable
            Dim dt As DataTable = New DataTable()
            dt.Columns.Add("Title", GetType([String]))
            dt.Columns.Add("Published", GetType(DateTime))
            dt.Columns.Add("Reviewed", GetType(DateTime))
            '
            ' Populate rows of table "dt" with data from any 
' source (web service, file system, database, etc.) '
Dim r As DataRow = dt.NewRow() r("Title") = "Building modern applications with Code On Time" r("Published") = New DateTime(2014, 12, 15) dt.Rows.Add(r) Return dt End Function End Class End Namespace

Note that Update, Insert, and Delete commands are prevented by default. You can implement your own routines when needed. Also make sure that you have specified the primary key fields to allow selection of data .

Here is the data controller in a live application.

A data from 'thin' air displayed in an app with Touch UI created with Code On Time app generator.

This feature is available in all product editions. Detailed tutorials with step-by-step instructions will be published later this week.

Bug Fixes and Enhancements

The release includes an important fix for Unlimited edition users. Generated applications were failing previously if the browser was not supplying Accept Encoding header in HTTP requests, which resulted in a non-function page displayed to the end users in both Desktop and Touch UI. The web server was reporting HTTP error 400 (Bad request).

Application framework will also not execute custom business rules twice. The bug was introduced in the previous release.

Business rules are not executed for the selected and unchecked row when multiple selection is enabled in Desktop UI.

This is the list of other enhancements and bug fixes included in the release:

  • Non-IE desktop browsers will not report “Invalid date” message in Touch UI.
  • Touch UI updates all visible summary views in Touch UI when a page is resized.
  • Filter information and "Clear" option are displayed correctly in master and detail context menus in Touch UI.
  • Summary views in Touch UI do not wrap "See All" option on the next line.
  • Touch UI displays "Showing N items." message in the view description.
  • Item styles RadioButtonList, ListBox and CheckBoxList are now supported in Touch UI. The latter enables many-to-many fields.
  • Method $app.mobile.activeLink will not strip "focus" from the active tab on touch-enabled devices.
  • Touch UI now uses action header text, command name, and command argument to eliminate duplicate actions from the context menu. Previous implementation has relied on command name and argument only, which have resulted in “lost” context menu options.
  • Fixed the bug in Quick Find that was causing incorrect search results when fields "shorter" than the search sample are present in a grid/list view.
  • Navigating to a "hashed" url of a protected page will not cause a duplicate history event in webkit browsers.
  • Page title is displayed inline when sidebar is visible to allow more space for toolbar buttons.
  • Taphold on field value in a grid column will display a popup with a complete text of the field value if the value is partially hidden.
  • Touch UI allows static text selection with a mouse in desktop browsers.
  • Fixed page height decrease caused by a refresh of a summary view in Touch UI.
  • Removed "keyup" and "keydown" events causing appscrolling  event in wrappers in Touch UI applications.
  • Taphold can be done with Ctrl+Click when using a mouse in Touch UI applications. The other option is to press the mouse button down and holding it at least 750 milliseconds before release.
  • Fixed ResetSkipCount method to ensure that a correct page is loaded from Result Set under all conditions.
  • User and Role manager have been improved for a consistent behavior in Desktop and Touch UI apps.
  • Sync of selected key value is performed by application framework if the number of submitted key values matches the number of primary key fields.
  • Focus on an input field in Touch UI will also select the field value.
  • Blob key field is converted to a string when a check for "null" BLOB field is performed in Touch UI.
  • Removed icons-png folder from the ~/touch/images folder of generated apps. The complete set of SVG icons available in Touch UI are now listed in ~/touch/icons.html file includes in every project.
  • Fixed Export exception when server rules are null.
  • Ensured EnableMinifiedCss is generated for all users.

The next release will be out in early August of 2014. We expect to include further enhancements to the Touch UI and a new server-side Reporting API that will produce binary reports on the server. The feature will also be extended to Email Business Rules to enable reports as attachments.

Monday, July 14, 2014PrintSubscribe
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”.
Sunday, July 13, 2014PrintSubscribe
Assigning a Theme to a Page

Code On Time apps with Touch UI allow the user to pick from over 35 themes. However, the developer may wish to define a specific theme on a particular page to enforce branding or associate a color with functionality. Taking a Northwind sample app as an example, you may wish to have the Membership page display “Dark” theme, have Products page use “Plastic” theme, and have Customers page use “Summer” theme.

The Membership, Customrs, and Products pages using the themes Dark, Summer, and Plastic, respectively.

To assign default themes to each page, first start the Project Designer. In the Project Explorer, double-click on Customers page.

Selecting the Customers page from the Project Explorer.

Change the following. Note that the name of the theme must be capitalized correctly.

Property Value
Custom Style page-theme-Summer

Press OK to save changes.

Next, double-click on the Products page in the Project Explorer.

Selecting the Products page from the Project Explorer.

Change the following and press OK to save.

Property Value
Custom Style page-theme-Plastic

Finally, double-click on the Membership page.

Selecting the Membership page from the Project Explorer.

Change the custom style of the page.

Property Value
Custom Style page-theme-Dark

On the toolbar, press Browse, and navigate to the Products page. Note that the theme is changed to “Plastic”.

The products page is now using Plastic theme.

The Theme option will not be present in the Settings panel, preventing the user from changing the theme.

"Theme" option in the Settings panel is not present.