Application Builder

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
Application Builder
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.

Wednesday, June 18, 2014PrintSubscribe
Windows Azure Virtual Machines

One quick way of getting your app deployed online is to set up a Windows Azure Virtual Machine (VM). These VMs offer the benefit of a full-fledged Windows Server machine without the hassle of dealing with electricity and cooling costs, storing a computer on-premise, or dealing with network configuration. They also offer the additional benefits of a very fast internet connection and easy scalability. 

Getting a new Azure Virtual Machine

Let’s set up a new Azure VM for a Northwind web app created with Code On Time generator.

Navigate to http://azure.com and click on Portal in the top right corner of the screen. Enter your credentials and log in.

In the bottom left corner of the page, press New. Select Compute | Virtual Machine | Quick Create. Enter the DNS name and select the server image from the dropdown. Make sure to select the correct size as needed, as pricing is different for each one. Finally, enter the administrator credentials and select Create a Virtual Machine.

Creating a new WIndows Azure Virtual Machine.

The virtual machine will be created in a few minutes. You can watch progress by clicking on the Virtual Machines section of the site.

Waiting for the virtual machine to start.

Once the virtual machine is online, click on the VM in the list, and select CONNECT on the bottom action bar.

Downloading the rdp file for the virtual machine.

Confirm to save the downloaded *.rdp file, and open the file to start connecting to your VM using Remote Desktop Connection. Enter the previously specified username and password, and press OK.

Entering credentials for the remote virtual machine.

Confirm that you want to connect to a computer without a certificate, and you will be connected.

The virtual machine desktop accessible using Remote Desktop Connection.

Enabling HTTP Traffic to the Azure VM

In order for your application to be visible on the internet, you must enable HTTP traffic.

Switch back to the Microsoft Azure Portal. Click on the name of the virtual machine to access the properties. At the top of the page, click on ENDPOINTS tab. On the bottom action bar, press ADD.

Adding a new endpoint to the virtual machine.

Select “ADD A STAND-ALONE ENDPOINT” and press the right arrow.

Adding a new endpoint to the virtual machine.

Click on the dropdown in the NAME field and select “HTTP”. Then, press the checkmark to save the endpoint.

Adding an HTTP endpoint - TCP port 80.

You can now deploy your web app to this server.

Tuesday, May 6, 2014PrintSubscribe
Full Screen Mobile Apps, Responsive Grid, etc.

Code On Time release 8.0.5.0 introduces numerous enhancements in Touch UI that brings closer our goal of delivering a new generation of a responsive user interface that works great on both mobile and desktop devices. Your line-of-business web apps will look great, now with an option to display a full screen presentation on mobile devices delivering close-to-native performance.

A web app displayed in full screen mode on iPad Air. The app has been created with Code On Time app generator.

A responsive grid view is now also available providing a responsive “table” presentation of data on any device. Application intelligently hides and reveals grid columns depending on the available screen width. Developers control the logic of field selection by configuring the list presentation of data.

A repsonsive grid in a web app with Touch UI shows a context menu of actions that can be applied to the selected row and entire data set. Application has been created with Code On Time app generator.

End users can switch between grid and list presentation by selecting a corresponding option on the sidebar on in the “view menu” item. Open the context menu of grid or list view to select “view menu” item when sidebar is not visible. It will be the first option displaying the name of the data set and number of records.

Note that future releases will also offer a data sheet view. This type of view will allow viewing all fields defined in the application with ability to scroll data horizontally and modify data in-place.

The following features and enhancements were introduces in this release:

  • Folder “Mobile” has been replace with “touch” in the source code of Web Site Factory, Mobile Factory, Azure Factory, and Web App Factory projects. We recommend deleting “Mobile” folder from the source code of existing apps.
     
  • TimeStamp fields support client-side formatting in the client library. For example, setting Data Format String of a TimeStamp field to hh:mm tt will format time as '03:17 PM'. Auto-complete options are also having a matching format.
     
  • A label of a checkbox field is displayed in a form when editing data, if a "CheckBox" field is marked as read-only or static. Previously only a value was rendered by Desktop UI.
     
  • New colorful themes are now available in Touch UI. The definitions can be found in ~/touch/app-themes.css. End users can select a theme in Settings menu of Touch UI. We are developing additional themes for the next release. 
     
  • Standard logo and icon are created for Touch UI. Follow instructions to replace the standard logo with your own images.
     
  • CSS class app-selected indicates a selected item in list and grid views of Touch UI.
     
  • Web apps can be displayed in full screen on mobile devices after being added to a home screen.
     
  • Items with lookup style “Checkbox” are rendered as “flip switch” in Touch UI.
     
  • Touch UI now supports three display density options: Comfortable, Compact, and Condensed. “Comfortable” display density is selected automatically on mobile devices. “Compact” option is selected automatically on desktop devices. “Condensed” option has been introduced for presentation similar to the current Desktop UI. End users can choose a preferred display density in Settings menu of Touch UI.
     
  • Users can activate Touch UI with “_touch=true” URL parameter. This parameter replaces “_mobile” option, which will be phased out in the future. Note that applications automatically switch to Touch UI on mobile devices. Future releases will likely allow configuring a default UI for generated applications. Legacy apps will default to Desktop UI. New apps will default to Touch UI on all types of devices. Only apps created with Unlimited edition will support simultaneously Touch and Desktop user interface.

We are developing brand new tutorials that explain configuration of Touch UI in details. Several tutorials will be published weekly. Please be patient.

The next release is expected to include simultaneous display of multiple data sets in Touch UI on a single screen. Tabbed data views will be supported to replicate functionality available in Desktop UI.

We are also planning to release all-new Advanced Search and Filter for Touch UI.  End users will be able to save their own filters for future use. Client-side data caching will be supported shortly after advanced search becomes available. Developers will specify caching conditions for improved performance. A set of filtering options will be reduced when client-side caching of data is activated.

Upload/Download will be enabled in Touch UI in the next few weeks. The feature will also be enhanced to allow signature capturing on touch-enabled devices.