Application Factory

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
Application Factory
Sunday, October 20, 2013PrintSubscribe
Allowing Access to Data Controller Views on Public Pages

The client library of apps created with Code On Time allows only authenticated users to interact with data. If a user is not authenticated by the app then a request to retrieve data will be denied. There are scenarios when anonymous users must be allowed to interact with application data.

Let’s create a public Customer Sign Up Form in the Northwind sample to illustrate this situation.

Select the project on the start page of the app generator and activate Project Designer. Create a new page with the following properties:

Property Value
Name SignUpForm
Roles ?

Value “?” specified in Roles will allow anonymous users to access page with signing in.

Right-click Customers data controller on Controllers tab and choose Copy in the menu.

Copying data controller reference to the clipboard.

Switch back to Pages tab, right-click Sign Up Form and choose Paste in the context menu.

Pasting a data controller reference on page of an app.

A data view view1 in container c101 will be created under the page node Sign Up Form.

A data view on the page on app created with Code On Time app generator.

Configure the data view as follows.

Section Property Value
Startup Action Command Name New
Startup Action Command Argument createForm1

Click Generate on the Project Designer toolbar.

Annonymous users are not authorized to access application data by default in Code On Time apps in Mobile and Desktop client.

The exception at the top of the page indicates that the view createForm1 is private. The anonymous user is not authorized to access data.

If you click Login and sign in as user / user123%, then an empty New Customers form will be displayed.

If we want to allow anonymous users to create new customer records using createForm1, then the view must be configured for Public access. Also the standard actions of the data controller Customers need to be adjusted to work in a perpetual “new customers” loop. The user will be prompted to create a new customer after a successful entry of a new record instead of displaying a list of existing customers.

Select the view Sign Up Form / c101 / view1 (Customers) in Project Explorer.

A data controller view selected on page in Project Explorer of Code On Time app generator.

Change the Access property of the view.

Property Value
Access Public

Now configure the action state machine of the data controller.

Create a new action in action group Sign Up Form / c101 / view (Customers) / Actions / ag2 (Form) with these properties:

Property Value
Command Name New
Command Argument createForm1
When Last Command Name Insert
When HRef (Regex) SignUpForm

The action Sign Up Form / c101 / Actions / ag2 (Form) / a100 will be activated only when the page Sign Up Form is loaded in a web browser. The action will display createForm1 in New mode every time a new record is created.

Then select each of the actions ag2 (Form) / a8, ag6 (ActionBar) – New / a3, and  ag6 (ActionBar) – New / a4 shown in the picture to configure them to be inactive on the page SignUpForm.

Property Value
Whe HRef (Regex) false:SignUpForm

Data controller actions that must be deactivated when SignUpForm is displayed to the user.

Property When HRef (Regex) is a regular expression evaluated against the current URL loaded in the address bar of the browser. If there is match then the action is active and taken into consideration by the action state machine. Otherwise the action is considered to be inactive. Placing “false:” in front of the property value will make an action inactive if the regex following after “false:” is matched to address bar URL.

Browse the app without signing in and confirm that new customers can be entered on Sign Up Form by anonymous users.

Customer 'Sign Up Form' in action.

The form will remain in “New” mode after a new customer is created.

Log in to verify that the record is stored in the database.

Authenticated users can interact with a full list of customers in our sample.

Tuesday, October 15, 2013PrintSubscribe
Announcing Mobile Client, Mobile Factory, Active Directory Membership, and Synchronization Service in Release 8.0.0.0

For the past few months we’ve been busy preparing a collection of exciting features that are included in the Code On Time release 8.0.0.0. Most customers will receive an automatic notification to download the software by the end of this week.

Mobile Client Library

With this release we are turning Code On Time application generator in a mobile app powerhouse. The term “mobile app” is used quite loosely in this day and age. A few HTML pages wrapped in a native shell is what passes as a modern mobile application.

Web applications created with Code On Time are simultaneously supporting desktop and mobile clients. The application framework in the foundation of the generated apps automatically detects the client capabilities and links a corresponding client library to the pages rendered in a web browser on the native device. Exactly the same page will render a different GUI on desktop and mobile devices. If you are building a desktop app, then you have developed a mobile version already!

Navigation menu of a mobile user interace in web app created with Code OnTime app generator A list of products rendered in a mobile client by an app created with Code On Time application generator

We are using jQuery Mobile  to offer touch-enabled user interface in the new mobile client library. The current release is based on jQuery Mobile 1.4.0 Beta.

Applications are rendered uniformly in all popular mobile devices. Desktop users can easily enable the mobile GUI by specifying a switch in the URL of any page.

The key features of the mobile client library:

  • The latest styling found in devices from Apple
  • Touch-enabled user interface elements
  • Progressive loading of data. There are no “next” or “previous” buttons.
  • Tap-and-hold techniques allows selecting multiple items in lists.
  • Unified sliding panel with the navigation links.
  • Unified sliding panel with context actions.

The initial release of mobile client library supports read-only interaction with data.

jQuery Mobile has significantly changed starting with version 1.3.0, which has required a complete re-write of the original implementation of the library. We are not complaining – there are significant performance improvements. New user interface components are integrated throughout the Mobile Client Library.

Users will be to see the mobile client library in action as soon as an app is rebuild with the new release of the app generator. We expect to offer ability to modify data in mobile clients by the middle of November 2013.

Ability to render alternative user interface on desktop and mobile devices is available in Unlimited edition of the app generator.

Mobile Factory

The new project type will be available in the new release. Premium edition users will be able to create mobile-only apps that will render “mobile” user interface on all devices including desktop.

image

Active Directory Authentication and Membership

Integration with Microsoft Active Directory is now available in Unlimited edition. It is now possible to authenticate users by Active Directory domain. Active Directory groups are recognized as user roles.  Read configuration instructions at http://codeontime.com/learn/security/active-directory.

Synchronization Service

It’s been our goal to allow maximum efficiency in team development. We’ve been working diligently on a solution, which is now fully integrated in application generator release 8.0.0.0. Step-by-step tutorials explaining configuration of a project for multiple developers will be published shortly.

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.