Code On Time: User Interface

Blog

User Interface

Tuesday, October 15, 2013Print Subscribe

Announcing Mobile Client, Mobile Factory, Active Directory Membership, and Synchronization Service in Release 8.0.0.0

For the past few months we’ve been busy preparing a collection of exciting features that are included in the Code On Time release 8.0.0.0. Most customers will receive an automatic notification to download the software by the end of this week.

Mobile Client Library

With this release we are turning Code On Time application generator in a mobile app powerhouse. The term “mobile app” is used quite loosely in this day and age. A few HTML pages wrapped in a native shell is what passes as a modern mobile application.

Web applications created with Code On Time are simultaneously supporting desktop and mobile clients. The application framework in the foundation of the generated apps automatically detects the client capabilities and links a corresponding client library to the pages rendered in a web browser on the native device. Exactly the same page will render a different GUI on desktop and mobile devices. If you are building a desktop app, then you have developed a mobile version already!

We are using jQuery Mobile to offer touch-enabled user interface in the new mobile client library. The current release is based on jQuery Mobile 1.4.0 Beta.

Applications are rendered uniformly in all popular mobile devices. Desktop users can easily enable the mobile GUI by specifying a switch in the URL of any page.

The key features of the mobile client library:

The latest styling found in devices from Apple
Touch-enabled user interface elements
Progressive loading of data. There are no “next” or “previous” buttons.
Tap-and-hold techniques allows selecting multiple items in lists.
Unified sliding panel with the navigation links.
Unified sliding panel with context actions.

The initial release of mobile client library supports read-only interaction with data.

jQuery Mobile has significantly changed starting with version 1.3.0, which has required a complete re-write of the original implementation of the library. We are not complaining – there are significant performance improvements. New user interface components are integrated throughout the Mobile Client Library.

Users will be to see the mobile client library in action as soon as an app is rebuild with the new release of the app generator. We expect to offer ability to modify data in mobile clients by the middle of November 2013.

Ability to render alternative user interface on desktop and mobile devices is available in Unlimited edition of the app generator.

Mobile Factory

The new project type will be available in the new release. Premium edition users will be able to create mobile-only apps that will render “mobile” user interface on all devices including desktop.

Active Directory Authentication and Membership

Integration with Microsoft Active Directory is now available in Unlimited edition. It is now possible to authenticate users by Active Directory domain. Active Directory groups are recognized as user roles. Read configuration instructions at http://codeontime.com/learn/security/active-directory.

Synchronization Service

It’s been our goal to allow maximum efficiency in team development. We’ve been working diligently on a solution, which is now fully integrated in application generator release 8.0.0.0. Step-by-step tutorials explaining configuration of a project for multiple developers will be published shortly.

Labels: Application Builder, Application Factory, COT Tools for Excel, Features, Mobile, News, Teamwork, User Interface, Web Application Generator

Sunday, July 14, 2013Print Subscribe

Watermark Property

A common practice when developing web applications is to display placeholder text in a field to indicate the expected input to the user. Let’s implement a watermark on the Order Details create form of a sample Northwind web app.

Start the Project Designer. In the Project Explorer, double-click on Customers / Order Details / container1 / view1 (OrderDetails, grid1) / createForm1 / c1 – New Order Details / UnitPrice data field node.

Make the following change:

Property	Value
Columns	30
Watermark	Please enter a price per unit for this order.

Save the field. On the toolbar, press Browse.

Navigate to the Order Details page, and create a new record. Note that the watermark is displayed in the Unit Price field.

When a user starts entering a value in the field, the watermark text disappears.

Labels: ASP.NET Membership, Tutorials, User Interface, Web Application Generator

Monday, June 17, 2013Print Subscribe

How to Configure CKEditor

Client library uses HTMLEditorExtender control to provide rich text editing capabilities. The rich text editor can be enabled for a data field using the Text Mode property. The picture below shows rich text editor enabled on the Description field of Categories controller.

The popular open source WYSIWYG text editor CKEditor can be enabled as a replacement.

First, download a copy of CKEditor. There are multiple versions with different features and licensing terms that can be downloaded at http://ckeditor.com/download. Every download package contains “ckeditor” folder. Extract the folder to the root of your project output.

Deployment with Web App and Azure Projects

Note that for Web App Factory projects, the folder must be copied to WebApp folder. Azure Factory projects must have the folder placed in WebRole1 folder.

In addition, Web App and Azure Factory projects must have the folder included in the solution to ensure that ckeditor is published along with the application files. The following instructions explain the process.

Click on the project name on the home screen of the generator and press Develop to start Visual Studio.

At the top of Solution Explorer, click on Show All Files.

Right-click on the ckeditor folder that appeared and press Include In Project.

On the menu, press File | Save All to save changes.

Regenerating the Project

Switch back to the app generator. Proceed to regenerate the web application. The generator will detect the presence of the ckeditor folder and automatically reconfigure the code to link ~/ckeditor/ckeditor.js to the pages. The client library will use CKEditor for rich text fields when the corresponding JavaScript type is available.

Navigate to the Categories page, and start editing a record. CKEditor will now be used instead. The example below shows CKEditor 4.1.2 Standard.

Note that if you are trying multiple versions of CKEditor to preview its capabilities, make sure to clear the browser cache every time the files are replaced.

Labels: Application Builder, Tutorials, User Interface, Web Application Generator