Data Aquarium Framework

Labels
AJAX(112) App Studio(9) 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(178) 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(184) 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(3) 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
Data Aquarium Framework
Thursday, May 29, 2014PrintSubscribe
Introducing Map View Style in Touch UI

Code On Time announces a new view style that will become available in June 2014 release.

The multi-tier application framework of apps produced with our code generator implements separation of business logic and user interface presentation. This allows creating alternative data presentation styles without a need for custom programming.

The new “Map” view style is based on Google Maps. Any data set that contains at least “Address” and “City” fields is presentable on an interactive map. Map view will automatically geocode addresses or use latitude and longitude field values when available.

This new view style is supported in apps configured to use Touch UI. Exactly the same capabilities are available in responsive pages on both mobile and desktop devices.

These screen shots show a map view on iPhone 5 in full-screen demo. There is no need to perform any special configuration of your app if a typical set of fields that allows locating an address is available. The map view can be selected from the context menu in view options.

Fullscreen mobile app shows Map view style. This app has been created with Code On Time app generator.  Touch UI offers end-users options that allows switch view style of data presentation.

The map view style can be configured to be displayed by default. Data view and data fields can be individually tagged when necessary.

End user taps a marker on a map to bring up an item data card. If you have configured a responsive list presentation for your data, then there is nothing else to do. The same responsive configuration will be used when the “Map” view style is activated.

User can tap on the item card to activate the first action available in the context menu. Typically this will display the data item in “View” or “Edit” mode.

If you are performing a data lookup, then the item will be selected when the data card is tapped. This introduces an amazing ability of performing a geo-lookup by application end users.

Item data card is derived from the "List" view configuration of the app created with Code On Time.  Tapping on the item data card will cause the first available context menu action to execute. Typically this will be Select or Edit. Lookup data views allow geo-lookup of data.

Item data card displays “Menu”, “Zoom In/Out”, “Driving Directions”, “Next” and “Previous” buttons.

Users can instantly pan to the marked location on the map by tapping “Zoom In”.

Item data card offers Menu, Zoom In/Out, Driving Directions, Next and Previous buttons in the apps created with Code On Time.  A single click will pan the map to the stree-level with the marker in the middle in the Map presentation of data.

Dragging the “street level” marker to the location will switch the map to the street view.

Dragging the Street View figure with touch gestures or mouse to the desired location will activate the street view.  Item data card is displayed next to the marker when map is switched to Street View.

Geo-coded addresses are cached in the client browser to speed up positioning of markers when users interact with the map.

Progressive geo-coding is preformed whenever the data set is changed. The map will automatically update markers in response.

Larger screens allow instant switching between available view style. The corresponding buttons are displayed on the sidebar.

Next screen shot shows IE 11 with customers presented on a map. Sidebar displays “Grid” and “List” presentation styles that can be chosen as alternative.

Map view style is activated in the app with Touch UI created with Code On Time app generator.

The same data set is displayed in a responsive grid in Safari. The sidebar shows “List” and “Map” view styles as available alternatives.

Responsive Grid view style is activated in the app with Touch UI created with Code On Time app generator.

This screen shots shows the data set presented in responsive “List’' style in Chrome. “Grid” and “Map” styles are only a click away.

Responsive List view style is activated in the app with Touch UI created with Code On Time app generator.

We are completing implementation of three more presentation styles that will be released during Summer of 2014:

  1. “Chart” view will allow presenting a single date set as a chart. New tags will allow mapping multiple chart views for the same data set. We are considering implementing automatic tagging of lookup and aggregate fields to enable instant visualization.
  2. “Calendar” view will present any dataset with dates on a touch-enabled calendar. The data interactions will be similar to “Map” view style. Developers will tag the predefined “date” fields for use in the calendar. End users will be able to switch the “date” fields at will.
  3. “Data Sheet” view will present data in a fashion similar to the responsive grid shown above. The responsive grid automatically hides and shows columns while trying to fit without scrolling the fields defined on the item data card. The data sheet view will show all fields by enabling horizontal scrolling of data columns. Touch-enabled devices will allow editing data in a single input control displayed at the top of the screen similar to typical spreadsheet applications. Touch UI will also allow in-place editing in data cells in “desktop” browsers.

All view types will offer configuration options to the end users with the ability to memorize “named” presentation styles along with sort order and filters.

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.

Sunday, June 2, 2013PrintSubscribe
Globalization and Localization

Globalization is the process of designing and developing applications that function for multiple cultures. Localization is the process of customizing your application for a given culture and locale. The topics in this section describe how to create ASP.NET web applications that can be adapted to different languages and cultures.

Learn more about globalization and localization of ASP.NET web applications at http://msdn.microsoft.com/en-us/library/c6zyy3s9.aspx.

Globalization

Code On Time web app generator allows explicit definition of globalization options in the Project Wizard.

Globalization and Localization page of Project Wizard.

Each application has a default culture. Unlimited edition of Code On Time allows specifying additional cultures. The browser culture will be detected and used, if available. The user may also manually specify the culture using the Language selector dropdown in the top right corner of the web app.

Localization

At run-time, the client library automatically replaces text elements wrapped in “localization tokens” when the culture is different from the default. The translations are stored as text constants in resource files. The client library matches the culture to the end of the text file name. For example, when the culture is changed to Canadian English, the client library will find translations in files that end with “en-CA.txt”.

For example, let’s examine the standard Welcome user control that is present in every web app. Notice that each text block is wrapped in a descriptive word surrounded by the carat (^) character.

<div style="padding-left: 8px">
    <div class="ParaInfo">
        ^SignInInstruction^Sign in to access the protected site content.^SignInInstruction^
    </div>
    <div class="ParaHeader">
        ^SignInHeader^Instructions^SignInHeader^
    </div>
    <div class="ParaText">
        ^SignInPara1^Two standard user accounts are automatically created when application is initialized if membership option has been selected for this application.^SignInPara1^
    </div>

    <div class="ParaText">
        ^SignInPara2^The administrative account <b>admin</b> is authorized to access all areas of the web site and membership manager. The standard <b>user</b> account is allowed to access all areas of the web site with the exception of membership manager.^SignInPara2^
    </div>

    <div class="ParaText">
        ^SignInPara3^Move the mouse pointer over the link <i>Login to this web site</i> on the right-hand side at the top of the page and sign in with one of the accounts listed below.^SignInPara3^
    </div>

    <div class="ParaText">
        <div style="border: solid 1px black; background-color: InfoBackground; padding: 8px; float: left;">
            ^AdminDesc^Administrative account^AdminDesc^:<br />
            <b title="User Name">admin</b> / <b title="Password">admin123%</b>
            <br />
            <br />
            ^UserDesc^Standard user account^UserDesc^:<br />
            <b title="User Name">user</b> / <b title="Password">user123%</b>
        </div>
        <div style="clear: both; margin-bottom: 8px"></div>
    </div>
</div>

Let’s provide our own translations for the “en-CA” culture that will replace the text wrapped in tags.

Customizing Localization

Start the web app generator and click on the project name. Select Settings, and then click on Globalization and Localization. In the Supported Culture Sets text box, enter the following:

Property Value
Supported Culture Sets en-US; en-CA;

Press Finish and regenerate the web app. When complete, click on the project name and press Open to open the project folder. In the search box, type in “en-CA.txt”. This will reveal all translation files for the “en-CA” culture.

All localization files for 'en-CA' culture.

Open the file “Welcome.ascx.en-CA.txt”. Notice that each element is wrapped in named tags surrounded by the carat (^) symbol. The client library will match the tags with those in the Welcome user control and replace the text at run-time.

Make the highlighted changes:

*******************************************************************************
Your application uses this file to locate resource strings defined
in Welcome.ascx project item.

Replace the text between localization brackets as needed.
*******************************************************************************

^AdminDesc^This is the Canadian Administrative account^AdminDesc^

^SignInHeader^Canadian Instructions^SignInHeader^

^SignInInstruction^Sign in to access the protected site content.^SignInInstruction^

^SignInPara1^Two standard user accounts are automatically created when application is initialized
    if membership option has been selected for this application.^SignInPara1^

^SignInPara2^The administrative account <b>admin</b> is authorized to access all areas of the
    web site and membership manager. The standard <b>user</b> account is allowed to
    access all areas of the web site with the exception of membership manager.^SignInPara2^

^SignInPara3^Move the mouse pointer over the link <i>Login to this web site</i> on the right-hand side
    at the top of the page and sign in with one of the accounts listed below.^SignInPara3^

^UserDesc^Standard user account^UserDesc^

Save the file, and switch to the application open in the browser. Refresh the Home page. Use the Language dropdown in the top-right corner to change to English (Canada). Note that the changes made previously have been applied to the text in the Welcome control on the right side of the page.

Custom translations are applied for the Welcome user control.

In addition to any text translations, any money or date formatting for the culture will be used as well. If the culture supports right-to-left, the website will be formatted accordingly.

Preserving Localization Between Code Generation Library Updates

Code generation library updates automatically replace the previous versions of the code generation files. A backup of the web app can be restored from [My Documents]\Code OnTime\Backup when it happens. You can create a copy of your localizations and restore them after each update.

You can also submit the completed localization file sets to Code On Time for inclusion in the general distribution of the code generation library. The localization file sets will be shared with the community and will get installed automatically with each update. If you have localizations to contribute, please zip up the files and submit a ticket.

Continue to Tall And Wide Pages