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

Sunday, June 2, 2013PrintSubscribe
Tall And Wide Pages

The picture below shows the standard page layout of a Web Site Factory application. The page features a membership bar at the top, followed by a page header and logo, a bar with application menu system, a page title, and page path. The is also a side bar on the left side of the page.

Employees page with standard page layout.

What if you want to maximize the real estate of the page and eliminate some of the standard page elements?

Using Custom CSS Classes

Start the Project Designer. In the Project Explorer, double-click on the Employees page node. Assign the following value:

Property Value
Custom Style Tall Wide HomePage

On the toolbar, press Browse. Class Tall hides the menu bar at the top of the page, class Wide hides the side bar and class HomePage replaces the yellow background with the standard home page background. These classes can be used in any combination.

Employees page with 'Tall' and 'Wide' custom class stying.

Maximize Real Estate of The Page

If the Tall and Wide custom classes are not small enough for the requirements, the page may be reduced even further with a user control.

In the Project Explorer, right-click on Employees / container1 node, and press New Control.

Adding a new control to 'container1' of Employees page.

Next to the User Control lookup, click on New User Control icon.

Creating a new user control.

Assign the user control a name:

Property Value
Name Maximizer

Press OK to create the user control. Press OK again to instantiate the user control on the Employees page.

On the toolbar, press Browse to generate the user control file. When complete, right-click on Employees / container1 / control1 – Maximizer and press Edit in Visual Studio.

Editing the control in Visual Studio.

The user control file will open in Visual Studio. Replace the existing code with the following:

C#:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Maximizer.ascx.cs" Inherits="Controls_Maximizer" %>
<script type="text/C#" runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        Page.Header.Controls.Add(new LiteralControl(
            "<style type=\"text/css\">" +
            "body {padding:0px!important;}" +
            // hide the membership bar
            "div.MembershipBar, div.MembershipBarPlaceholder {display:none!important;}" +
            // hide the page header and logo
            "div#PageHeader{display:none!important;}" +
            // hide the page title
            "#PageHeaderLeftSide,#PageHeaderContent," +
            "#PageHeaderRightSide{background-image:none!important}" +
            "#PageHeaderContent div.Title {display:none!important;}" +
            // hide the page path
           "#PageHeaderContent .SiteMapPath {display:none!important;}" +
            "</style>"));
    }
</script>

Visual Basic:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Maximizer.ascx.vb" Inherits="Controls_Maximizer" %>
<script type="text/VB" runat="server">
    Protected Shadows Sub OnInit(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
        Page.Header.Controls.Add(New LiteralControl(
            "<style type=""text/css"">" +
            "body {padding:0px!important;}" +
            "div.MembershipBar, div.MembershipBarPlaceholder {display:none!important;}" +
            "div#PageHeader{display:none!important;}" +
            "#PageHeaderLeftSide,#PageHeaderContent," +
            "#PageHeaderRightSide{background-image:none!important}" +
            "#PageHeaderContent div.Title {display:none!important;}" +
           "#PageHeaderContent .SiteMapPath {display:none!important;}" +
            "</style>"))
    End Sub
</script>

Switch back to the browser, and refresh the Employees page. Note that all page elements except the views and any page body styles have been hidden.

Employees page with all page elements hidden except the body.

Thursday, March 22, 2012PrintSubscribe
Searching by First Letter

You would be lost while browsing the old fashion phone book or scrolling through the entries of your modern-day contact list on a smart phone without the alphabetical index of entries. A menu of first letters rendered on data pages provides similar productivity enhancement.

This screen shot shows the Search by First Letter enabled in a data view in a Code On Time web application.

Data view with enabled 'Search by First Letter' feature in a Code On Time web application

If you want to enable Search by First Letter, then select the project name on the start page of the web application generator and click Design. Expand a page node in Project Explorer and select the data view that will have the alphabetize search enabled. Toggle the “Search by First Letter” option and re-generate your application.

Property 'Search by First Letter' enabled in a data view

The “first letter” is a bit of a misnomer. The application will find distinct first characters in the first visible data field of type String. If more than one distinct character is detected then the sorted menu of characters is rendered above the “grid” views of the data controller linked to the data view.

'Search by First Letter' is represented by a menu of first characters in the first searchable string data field of a data view.

If a user clicks on a symbol then the data is automatically filtered according to the selection. The following screen shot show what happens if a user clicks on the latter “A” above the list of products in the Northwind sample. This selection activated “begins with…” filtering option on the first column of the gird view.

'Product Name begins with A' is the result of clicking on the first letter.

Users can accomplish the same end result by a selecting the filtering option from the context menu of the first column.

The alternative method of activating the 'Begins With...' filter

Search by First Letter is sensitive to the current set of user-defined filters. The following screen shot shows exactly the same list of products that belong to “Beverages” and “Seafood” categories. The number of symbols in the Search by First Letter menu is less than the number of symbols available when all categories allowed in the view. All filtering options in Code On Time web applications are adaptive.

Adpative nature of 'Search By First Letter'

Search by First Letter is also displayed on a data view that is configured to have “Search on Start”. This option can be enabled in the data view properties. You will find the check box below the “Search by First Letter” option.

Enabling data view properties 'Search by First Letter' and 'Search on Start' will result in the following presentation when users arrive to the Products page.

Users can remove the filter by clicking on the close button on the right-hand side of the filter description.

Alternatively, users can “mouse” over the filter element in the filter description area and have the filter removed with a single mouse click without affecting any other active filters.

Mouse click on the filter element in the filter details will remove the filter without affecting any other active filters