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
Tuesday, May 6, 2014PrintSubscribe
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.

A standard logo is displayed on the left side of the tool bar next to the Home button in web apps with Touch UI.

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

A standard logo is displayed on the left side of the tool bar next to the Home button in web apps with Touch UI on iPad Air.

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

A standard logo is displayed on the left side of the tool bar next to the Home button in web apps with Touch UI in a desktop browser.

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

A standard shortcut icon of web app with Touch UI on 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.

The standard logo files in a Mobile Factory web app with Touch UI created by Code On time app generator.

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.

An example of a custom application logo for a web app with Touch UI created by Code On Time app generator.

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

An example of a custom application logo in a live web app with Touch UI created by Code On Time app generator.

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.

Custom stylesheet placed in the 'touch' folder of Mobile Factory project.

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.

An example of an enlarged custom application logo in a live web app with Touch UI created by Code On Time app generator.

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

Custom shortcut icon in a full screen web app with Touch UI created by Code On Time line-of-business app generator.

Saturday, May 3, 2014PrintSubscribe
Full Screen Mobile Web Apps with Native Performance

Web Apps created with Code On Time have a fluid, native-like performance on both desktop and mobile devices. Mobile end users are accessing web apps through a web browser integrated into operating system of their device. Modern mobile browsers allow adding a web app shortcut to home screen of the device. If a web app is started from home screen, then the browser will hide the address bar and navigation controls taking advantage of the entire real estate of the screen.

Compare the screen shots of a web app created with Code On Time displayed on iPhone 5. Both screen shots show exactly the same web app. The former was started from the home screen of the phone. The latter was started directly in mobile Safari. Web app “installed” to home screen clearly provides access to more information and has a “native” look and feel. A thin black bar at the top of the screen provides a user with vital device status information when interacting with “installed” web app.

Full screen web app created with Code On Time on iPhone 5.  Web app created with Code On Time displayed in Safari web browser on iPhone 5.

The same benefits are obvious if device orientation is changed to landscape.

Full screen web app created with Code On Time on iPhone 5 with landscape orientation.

Web app created with Code On Time displayed in Safari web browser on iPhone 5 with landscape orientation.

It is very easy to install a web app to home screen of a mobile operating system.

Consider the process of installing a web app created with Code On Time on iPad Air.

First, open mobile Safari and navigate to http://demo.codeontime.com.

Tap “Share” button and select “Add to Home Screen” option in the popup window.

Select 'Share|Add to Home Screen' option to add web app created with Code On Time to home screen of iOS device.

Change the name of the link as needed and tap “Add”.

Adjust the icon title and web address of Web App created with Code On Time when installing a home screen shotcut on iOS device such as iPad Air.

An icon with a chosen title will be added to the home screen. This concludes the installation process.

A shortcut icon for a mobile app created with Code On Time on iPad Air home screen.

Note that it is easy to provide a custom application icon and logo for a web app created with Code On Time.

Start your web app to enjoy the full screen experience on iPad Air.

A web app created with Code On Time is displayed full screen on iPad Air.

Here is the installation process for Google Nexus 7.

Enter the address of the web app created with Code On Time and tap “menu” button on the browser toolbar. Select “Add to homescreen” option, change the title as necessary, and tap “Add” .

Context menu in Google Chome provides access to 'Add to homescreen' option on Android devices.Changing the icon title of a web app created with Code On Time when added the app to the homescreen of Android device.

The web app is now installed.

Tap the icon to access the web app created with Code On Time for a full screen experience.

Tap the icon to access the web app for a full screen experience.

Web app with Touch UI on Google Nexus 7 displayed in full screen mode when started from the homescreen.

Web apps created with Code On Time allow changing various settings such as theme and page transition effects. Note that those settings will not be inherited by installed app. Web apps added to home screen maintain their own settings on the device.

Wednesday, April 16, 2014PrintSubscribe
Touch UI, Firebird Database, Azure SDK 2.3

Code On Time release 8.0.4.0 introduces a new user interface concept Touch UI and support for Firebird Database Server.

Touch UI (former Mobile Client) is the next generation of the client library. Mobile Client has been introduced in December of 2013. The main objective was to offer a close-to-native mobile experience when using web applications created with Code On Time. We have come to realize that intuitive navigation and new presentation style can benefit greatly users working with desktop computers. During the past two months we have reworked the Mobile Client and turned into a universal touch-enabled presentation system.

The purpose of the new UI is to enable development of a single app that displays equally well on end-user devices of any type. The new enterprise computing concept BYOD (bring your own device) becomes a reality with Code On Time. If you are building an app with Code On Time, then you have already accommodated users of smart phones, tablets, and desktop computers.

Try an app with Touch UI right now!

An app with Touch UI displayed in iPad Air. The app has been created with Code On Time app generator.

An app with Touch UI is displayed in iPhone 5s. The app has been created with Code On Time app builder.

An app with Touch UI is displayed in IE 11. The app has been produced with Code On Time generator.

Touch UI uses the same code base and the same set of business rules. If you are a building a line-of-business app for desktop users then you have already created a mobile version of it. If you are only looking forward and trying to please your mobile user base, then you are also offering a first class experience on the desktop (even if you don’t want to).

Firebird database server is now supported by Code On Time app generator. This is another highlight of the release. Download Firebird and build powerful line-of-business applications with a lightweight database server.

The following enhancements are also included in the release:

  • Touch UI is based on jQuery Mobile 1.4.2.
     
  • Client library provides an enhanced progress indicator.
     
  • Mandatory input fields display “Required” watermark if a custom watermark is not provided.
     
  • Batch Update commands correctly work with modal forms in Desktop UI.
     
  • Azure SDK 2.3 support is integrated in the app generator.
     
  • App generator uses “All CPU” parameter when building projects with MSBuild.
     
  • URL Hashing allows _mobile switch in the browser address bar to enable testing Touch UI on desktop computers.
     
  • Method ControllerNodeSet.CreateBusinessRuleFilter correctly works with data controller virtualization rules.
     
  • Tools for Excel recognizes Watermark property of data fields.

What’s Next?

Touch UI is not completely replacing the current desktop presentation. We will continue supporting desktop and will enhance the client library with further improvements in SharePoint Factory and DotNetNuke Factory.

The desktop presentation in the other project types will eventually become a secondary “fall-back” option for browsers that do not support HTML 5. We will introduce built-in CMS (Content Management System) in the code base of these project types. This may become an attractive alternative to SharePoint and DNN if your application requires custom user-generated dynamic content.

Touch UI is the user interface of the upcoming http://cloudontime.com hosted service.

See the list of upcoming features that we are working on in the Roadmap 2014.