Tutorials

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
Tutorials
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.

Sunday, July 13, 2014PrintSubscribe
Changing the Theme in TouchUI

Code On Time apps with TouchUI allow the user to switch between over 35 themes.

Examples of Touch UI themes across various devices.

The user’s selection is saved in the cache of the browser and will be remembered until the browser cache is cleared.

To switch the theme, click on the context menu button in the top-right corner.

Clicking on the context menu in TouchUI.

Then, click on the Settings button at the bottom of the menu.

Activating the Settings menu from the context menu.

Click on the Theme option.

Activating the Theme option from the Settings menu.

A full list of themes is available for the user to choose from.

Viewing the list of available themes in TouchUI.

Click on any of the options to change the theme. The theme will be applied instantly. “Dark” theme was used in the picture below.

The application theme has been changed to "Dark".

Wednesday, June 18, 2014PrintSubscribe
Deployment: Overview

The application generator launches a web browser when the app is generated and when developers select the Browse button in the Project Designer. Simultaneously, an instance of IIS Express is started with instructions to serve requests to the folder with the source code of the generated app. The launched browser is navigating to the URL served by that instance of IIS Express.

Web app with Touch UI served by IIS Express in Internet Explorer on the development machine.

IIS Express is the development version of Internet Information Services (IIS), a component of Microsoft Windows operating system designed to host web sites and applications.

If you want to try your app on other computers or mobile devices, then you will have to deploy the app to a production version of IIS. IIS Express does not allow serving remote requests from external devices.

IIS is a built-in component of Microsoft Windows 7, 8, and Microsoft Windows Server 2008, 2012.

This is how your app will look on remote devices once you have deployed it to IIS.

Map view of an app with Touch UI rendered in iPhone 5S.     Context menu of an app with Touch UI rendered in iPhone 5S.

Responsive grid view of an app with Touch UI rendered in iPad Air.

Complex master-detail page of an app with Touch UI rendered in iPad Air.

In order to prepare a machine for web hosting, a full installation of IIS must be performed. In addition, the host must have the correct version of ASP.NET (and optionally Report Viewer) installed, HTTP firewall port must be opened, and the web app must be configured as an IIS application.

Local Deployment

The easiest way to deploy your app is on your own development machine which typically runs Windows 7 or 8. This will allow you to test the app on mobile devices and allow coworkers on the same network to see it as well. You can also do this at home, in a café, or an airplane if you enable a Wi-Fi Hotspot on your laptop.

Steps:

  1. Install Prerequisites for Windows 7 / Windows 8
  2. Copy App to Server
  3. Install Report Viewer 2012 (Optional)
  4. Configuring App in IIS
  5. Opening Firewall Ports
  6. Accessing the Web App

Dedicated Server Deployment

The traditional method of app deployment requires a dedicated web server. You can purchase your own server or acquire a hosted virtual machine. The examples used for the next few articles will be using Microsoft Azure Virtual Machines (VMs) hosted in Microsoft data centers around the world. Anyone in the world will have access to your production app, provided that they know the URL.

Steps:

  1. Acquire a server (such as Windows Azure VM)
  2. Install Prerequisites for Windows Server 2008 / Windows Server 2012
  3. Copy App to Server
  4. Install Report Viewer 2012 (Optional)
  5. Configuring App in IIS
  6. Accessing the Web App

App Service Deployment

Microsoft Azure offers a convenient way to package and publish apps without configuration of dedicated servers called an App Service. Code On Time web apps can be deployed as an app service directly from Visual Studio.