ASP.NET Code Generator

Blog
ASP.NET Code Generator
Monday, January 2, 2017PrintSubscribe
Authenticating Users with Windows Live

Every application requires a list of user accounts that have been granted (or denied) access to the data. In order to maintain membership consistency, every user needs to be associated with a password. Recommended practices for passwords dictate that every password must be unique, contain a long series of mixed alphanumeric characters, and that users should change their passwords regularly. It is likely that many users do not follow these recommended practices, and tend to reuse simple and easy to remember passwords across various systems. This can lead to a security issue if one of the systems becomes compromised – malicious users can then gain access to all systems that share the same password.

In an attempt to solve solutions to the problems mentioned above, authentication can be delegated to a “higher authority”. Application admins can register their app to accept responses from a federated authentication server. When a new user attempts to sign up to the application, they can choose to register an account using their federated account. They will be redirected to the authentication server’s login page, and grant permission for the app to gain access to their email. This information is then used to automatically create an account in the app and sign them in. Therefore, the user simply has to ensure that their account in the federated system is secure.

Applications created with Code On Time can use OAuth 2.0 to register their users. Simply define a resource under the Content Management System (CMS) that lists your client ID, client secret, and redirect URI. A local redirect URI can be defined for testing purposes.

Registering Your App

The first step to enable Windows Live authentication is to register your app.

Navigate to https://apps.dev.microsoft.com. In the top-right corner, press “Add an App”. Enter a name for your app and press “Create Application”.

Adding an application to Windows Live.

Under the “Application Secrets” section, press “Generate New Password”.

Generating a new password for the application.

Make sure to copy the new secret.

Next, press “Add Platform” under the “Platforms” section. Select “Web”.

Adding a platform for the app.

Enter your application URI, with the path “/appservices/saas/windowslive”. Optionally add a local URI for testing purposes.

Adding redirect URI for the app.

Scroll to the bottom of the page, and press “Save”.

Enabling Windows Live Login in the App

The connection needs to be registered in your application. Navigate to the Site Content page of your app, and create a new record with the following settings:

Property Value
File Name windowslive
Path sys/saas
Text

Client Id:
1234567890

Client Secret:
12345mysecret67890

Redirect Uri:  
https://demo.codeontime.com/appservices/saas/windowslive

Local Redirect Uri:
http://localhost:31733/appservices/saas/windowslive

Make sure to change the Text to the correct values for your app.

Logging In with Windows Live

Log out of your app, and press Login to open the login form. The “LOGIN WITH WINDOWS LIVE” action will now be displayed.

The login form now displays a button to "LOGIN WITH WINDOWS LIVE".

Press “LOGIN WITH WINDOWS LIVE”, and you will be redirected to the Windows Live login screen. Once logged in, a permission request will be displayed.

Windows Live displays a permission request - the app is requesting access to the profile's email.

Press “Yes”, and your browser will be redirected back to the app. The app will attempt to sign in with the account matching the returned email. If no account is found, then an account will be created with the email as the username, and a random GUID assigned to the password and password answer.

Thursday, June 23, 2016PrintSubscribe
Source Code Version Control

Every user of a computer has experienced a situation when they really wish they could wind back time. From hardware failure losing recent work, to changes made to a file that need to be undone, this capability is necessary to ensure productivity is not lost.

Software development is no different. The most common solution to this problem is through the use of source control systems such as Git, Microsoft Team Foundation Services (TFS), or Apache Subversion (SVN). These solutions will monitor a specific set of files, and allow the user to “commit” a version of files to a repository. When necessary, the user can revert to older versions of these files. Even better, it allows the development of software projects among multiple users. 

Code OnTime app generator makes it easy to use source control with your project. When the type of source control is specified, the generator will create requisite files that allow easy exchange of application files and changes made to project configuration.

Getting Started With Source Control

Let’s place our sample Northwind project under source control using Git. On the home page of the app generator, click on the project name. Select “Settings” from the Project Action screen, and then select “Source Code and UI”.

From the Source Control dropdown, select “Git”.

Selecting a source control for the project.

Press the Finish button, and then press “Generate” to generate the application. If the project folder is inspected, two files have been added to the root.

Project with source control now generates sync files.

A default “.gitignore” file is added, based on the standard file created by Visual Studio, with several Code OnTime files listed at the bottom. If TFS source control was selected, a corresponding “.tfignore” file will be added.

The other file will be named “Sync.[Machine Name]-[User Name].xml”. This file holds all transactions made in the Project Designer by the current user and machine. When the application is refreshed, all “Sync.XXX.xml” files at the root of the project will be merged together and sorted by transaction timestamp. The merged file is used to create the “Controllers.Log.xml” and “Application.Log.xml”, which hold transactions that are applied to controllers and application pages, controls, and data views, respectively.

This allows work from multiple machines to be smoothly integrated, without having to deal with manually merging XML files.

Next, let’s push this project to a new repository. This process may differ based on the source control and tool used to initialize the repository.

On the home page of the app generator, select the project name and press Develop to open the project in Visual Studio.

In the Solution Explorer (typically found on the right side of the screen), right-click on the solution node and press “Add Solution to Source Control”.

Adding the solution to source control using Visual Studio.

In the “Choose Source Control” popup that opens, select “Git” and press OK.

Selecting Git for the source control.

If the Visual Studio Git Provider has not been used before, it will require configuring your user name and email address. Click the “Configure” link, visible at the top of the Team Explorer window, set your desired settings, and press Update.

Next, enter a commit message, and press Commit to create the first commit in your local repository. Make sure that the necessary files are included in the commit.

Creating the first commit.

If the commit was successful, a message will appear at the top of the screen, stating that the commit was created. It will also prompt to sync the repository with a server. Click the “Sync” link to sync to a server.

The same screen can be reached by pressing the Home icon from any screen, and selecting “Sync” option.

The first commit was created successfully locally. Time to synchronize online.

Several options will be available. For this example, we will use GitHub. If you have not logged into GitHub on this computer, click the “Login” button, enter your credentials, and press “Login” again.

Logging into your GitHub account.

Select “Get Started” link under the “Publish to Github” section.

Getting started to synchronize your repo with Github.

Select your account, enter a repository name, and add a description (optional). Please note that private repositories require a subscription on GitHub. If the repository is public, then anyone can find the source code on the Internet. Choose accordingly.

Press Publish to push your repo to GitHub.

Selecting project name and description for pushing to Github.

Once the upload process is complete, you will be able to access your repository online.

The online repository on Github.

Synchronizing Changes

Now that the repository is online, you will need to synchronize it. Suppose that several changes have been made to the web app. Pages have been shuffled around, data fields customized, models added, business rules changed. Make sure to generate the application before synchronizing any changes.

Open the project in Visual Studio, open the Team Explorer, and select “Changes”. You can also right-click on the solution and press “Commit”.

Uploading a new commit to Github.

Enter a commit message, and click the dropdown next to “Commit”.

Press the “Commit” button if you wish to create a local commit, but not upload your changes to the server.

Press “Commit and Push” to upload your commit to the server.

Press “Commit and Sync” to upload your commit, and download any changes that may have been pushed to the server previously.

At this point in time, press “Commit and Push”.

Commiting and pushing your commits to the online server.

When the process is complete, a message will be displayed.

Downloading a Web App From Source Control

Suppose a team member has joined your team. You will need to give your teammate access to your repository. Log into your repository server and give your team member’s account access to the repo.

For a GitHub repo, you will need to navigate to the correct webpage on the GitHub website. Select the Settings tab near the top of the screen, and switch to the “Collaborators & Teams” section. Enter your member’s screen name in the Search bar and press “Add collaborator”.

Adding a collaborator to the repo.

On your team member’s computer, start Visual Studio. Press “Open From Source Control…” on the Start Page if visible. Otherwise, press the green Connections icon on the Team Explorer.

Connect pane in Team Explorer.

Select the “Clone” link under GitHub section. Click the repository you shared with the team member, and enter the correct path. In this case, the path is “~/Documents/Code OnTime/Projects/Web Site Factory”.

Selecting a repository to clone.

Restart the app generator. If the repository has been placed in the correct location, a new project will appear in the project list.

Pulling Changes From The Server

Suppose that your team member has made some changes, and you wish to pull these changes down to your computer.

Open the project in Visual Studio. In the Team Explorer, select “Sync” button.

Home page of Team Explorer.

The Synchronization pane offers several options.

The “Fetch” button will download pending commits, but will not integrate changes.

The “Pull” button will download pending commits and perform merge operations if necessary to bring your repository in line with the server.

The “Sync” button will uploading pending commits, downloads commits from the server, and performs merge operations to integrate remote changes with your local changes.

At this time, press “Sync”. The commits made by your coworker will be downloaded and integrated.

One last step is needed. Switch back to Code OnTime app generator. Select the project name, and press “Refresh”. This will integrate synced changes into the current project.

Refreshing the project with Code OnTime app generator to integrate new changes into the project.

Thursday, June 9, 2016PrintSubscribe
8.5.8.0 Has Landed! New Form Rendering Engine, Advanced Lookup Input, Calendar Input, Data View Fields, Tiny Density, Save and New

The long awaited release 8.5.8.0 is here! Originally intended to be released in March of 2016, a shift in strategy has resulted in this release coming out in June. We greatly appreciate everyone’s patience, and hope that we find the result to be rewarding for everyone.

Form Rendering Engine

The biggest change in this release is an overhaul of the Form Rendering Engine. One of our biggest complaints for Touch UI was the lack of customizability of the form. The original implementation of forms provided for limited capability in ordering data fields. Categories were used to group data fields into new rows, columns, and tabs.

In response to these comments,we have added the ability to define HTML templates that allow precise positioning of data fields and custom content into the form. A simple example can be seen below.

Example of custom layout template in Touch UI.

These HTML templates will be placed under the ~/Views folder of your project. When loading a view, the application framework will attempt to find the file “[Controller Name].[View ID].html”. If not found, it will generate a default template.

A snippet from the template can be seen below:

<div data-layout="form">
    <div data-container="column" style="width:50%">
        <div data-container="collapsible" data-header-text="Order Information">
            <div data-container="row">
                <div data-control="description">This is the order information.</div>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="CustomerID">CustomerID</span>
                <span data-control="field" data-field="CustomerID">[CustomerID]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="EmployeeID">EmployeeID</span>
                <span data-control="field" data-field="EmployeeID">[EmployeeID]</span>
            </div>...

The entire template must be wrapped in a data-layout element, and various different data-container elements are available for easy positioning of elements. Rows can be used to automatically position fields. It is always possible to use your own elements and position items manually. More documentation on this feature will be coming soon.

These layouts work perfectly well on mobile devices, too.

Example of custom layout template in Touch UI on a small screen.

In order to make the process of developing form templates easy, a visual Form Designer will be included in future releases.

The engine utilizes our new Universal Input API in order to react to user clicks and key presses. When the user clicks on a label or field, the API will find and build the relevant input control in order to handle that field. When the user leaves the field, all values that show that field value will be updated. The API handles Tab, Shift+Tab, Up, Down, Left, Right, Enter, Shift+Enter keys in order to move between fields.

Lookup 2.0

With the new Form Rendering Engine, we decided to overhaul the lookup input control to allow your users to get their work done easier and faster. The new lookup allows the user to type in their search query, and a suggestion list will automatically be loaded. Use arrow keys to navigate up and down in the list. Press Enter on your keyboard to select an option.

The user can click on the arrow to the right of the field to navigate to the lookup view.

New lookup in Form Rendering Engine animation.

The user can also press Ctrl+Space to activate the list. From there, the user can create a new lookup record, or jump to the lookup view by pressing “See All”.  “Ctrl+Enter” will also activate the lookup view.

Client-side data caching and filtering is employed in order to ensure that performance is top-notch.

Calendar Input

Dates have always been a difficult data type to work with. Every browser implements native input differently, some working better than others. Rather than compromising in order to utilize the native input of every browser, a new Calendar Input has been developed. This input control is an extension of the calendar sidebar filter component, which also includes the upgrades.

New Calendar Input in Form Rendering Engine animation.

The input will be activated when the user focuses on the field. Selecting a day in the month will set that date. The user can drag or use the arrow buttons to move between different months. Clicking on the header will allow the user to select the month or year.

If the data field also renders time, a clock will be rendered. The user can click on an area in the clock to set the time. Clicking on the hour or minute part of the header will allow changing that part of the time. Clicking on AM/PM will toggle the time of day.

The user will continue to be able to manually edit the value in the input control.

If the input is activated on a very small screen or mobile device, the Calendar Input will be displayed in the center of the screen. The user must click “OK” to save the new value, “Cancel” to close the popup, or “Clear” to reset the value.

Calendar Input on small screens will cover input and show OK, Cancel, Clear buttons.

Notice that days that contain data in the month are bold. Hovering over the day will reveal a count of records on that day. The client library makes asynchronous requests to pull the data and caches it on the client. If performance is a concern, this feature can be disabled by tagging the data field “calendar-input-data-none”.

Data View Fields

In the past, Code OnTime users needed to configure pages with multiple data views in order to display lists of data related to the master record. This process led to a disconnect between the data and presentation layers of the application.

Release 8.5.8.0 changes the paradigm. A new field type has been introduced, “DataView”. This will allow users to embed lists of records directly into the forms of master records. This change brings controllers more inline with how users would intuitively understand business objects.

Simply define a field of type “DataView”, point to the correct controller, specify the filter field, and create a data field to bind it to the form. All pages that refer to that form will now reveal relevant child records.

Data View field example.

The traditional method of defining child data views still works. This can be used for child data views that should only be displayed on certain pages (or define another view that excludes the data view field).

Future releases of the app generator will allow users to perform inline editing of child records at the same time that the master record is being modified.

Grid Upgrades

This brings us to the new and improved grid. In previous releases, it was difficult to set the size of grid columns to match up with the intended look and feel. Release 8.5.8.0 has made the grid sizing process more transparent.

The grid will now use the exact size of each data field in columns when allocating space. If there are no columns defined, then the columns will be set to 2/3s of the length of the field, or various preconfigured lengths depending on the type of the field.

In order to make the client library more intelligent and require less involvement of the user, a new feature has been added to the grid – “Fit To Width”. This will automatically shrink the grid columns to fit the screen, down to a certain limit. The space allocated to each column is equal to the proportion of “columns” that field was assigned. This feature is automatically enabled for every grid. If the behavior is undesired, the data view can be tagged “grid-fit-none” to disable the functionality.

The width of the grid may surpass the width of the page – the user will then be able to drag the grid left and right to bring different columns into view. Touch input is now supported for dragging.

If a column is too small or big to see the data, the user can click and drag the divider between columns in order to resize.

Animation of grid dragging and column resizing.

Future releases will offer the ability to reorder the columns on the client.

“Tiny” Density

Touch UI applications offer several different display densities in order to fit the needs of every user. The smallest size, Condensed, was still larger than Desktop UI. Therefore, we are introducing “Tiny” display density, which uses the same font and font size of the desktop.

The picture below compares “Comfortable” and “Tiny” display densities.

Orders form with 'Comfortable' display density.    Orders form with 'Tiny' display density.

Business Object Model and Data Access Objects

Code business rules in previous releases of Code OnTime app generator would list each field in the parameters of the method. Controllers with over a hundred fields would result in sprawling and ungainly method signatures. To update a data field for the client, it was necessary to call the UpdateFieldValue() method. See an example of legacy code below.

using System;
using System.Data;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class OrderDetailsBusinessRules : MyCompany.Data.BusinessRules
    {
        [Rule("r100")]
        public void r100Implementation(int? orderID,
            string orderCustomerID,
            string orderCustomerCompanyName,
            string orderEmployeeLastName,
            string orderShipViaCompanyName,
            FieldValue productID,
            string productProductName,
            string productCategoryCategoryName,
            string productSupplierCompanyName,
            FieldValue unitPrice,
            short? quantity,
            float? discount)
        {
            UpdateFieldValue("Quantity", 1);
        }
    }
}

Release 8.5.8.0 will now generate data model objects for each controller that has a code business rule, and will pass this object as a parameter to the method. The setters for each property of the data model object will update the corresponding field on the client side.

using System.Data;
using MyCompany.Data;
using MyCompany.Models;

namespace MyCompany.Rules
{
    public partial class OrderDetailsBusinessRules : MyCompany.Data.BusinessRules
    {
        [Rule("r100")]
        public void r100Implementation(OrderDetailsModel instance)
        {
            instance.Quantity = 1;
        }
    }
}

The new business rule format is vastly easier to read and understand, even for non-professional C# or Visual Basic developers.

Legacy business rules will continue to function as they did before.

Release 8.5.8.0 no longer offers a way to enable data access objects globally. The developer will need to enable data access objects on each controller by enabling the “Generate Data Access Objects” checkbox. These objects will extend the business object models. Models and data access objects will now be stored under ~/App_Code/Models folder.

Miscellaneous

These are just some of the new features in release 8.5.8.0. A more comprehensive list can be seen below:

  • Fields now have the option to be set as “Virtual”. These fields will never be included in Insert or Update queries, but are still editable by the user and can be read and manipulated in business rules. Developers no longer need to mark fields as “not modified” in rules in order to use custom fields.
  • Controllers can now be generated with “Save” and “Save and New” in create forms. By default, new applications will have this enabled by default. It can be toggled with the “Use ‘Save’ and ‘Save and New’ in forms” checkbox in the Features page of the Project Wizard.
  • Vast performance enhancements in page loading, button clicking, form opening, grid rendering and dragging, calendar rendering and dragging. HTTP requests are now smaller and data is cached when possible.
  • Re-selecting a record in the form after creating a record will no longer go back to the grid before loading the edit form. This results in significantly faster workflow when inserting multiple records.
  • Support for Report Viewer 2015.
  • Touch gesture support for Drag & Drop API – tested with Surface Pro 4, iPhone 6 Plus, iPad Pro, Nexus 5x, S7 Edge. This API is used in calendar, grid, calendar input, and panels.
  • Model Builder Tooltip API has been ported to Touch UI.
  • “Borrowed” fields defined in data models will be copied when the lookup value is changed. These fields will now be included as read-only in the create form.
  • Changing namespace of application in Web App Factory will move data model files to correct location.
  • A grey overlay will cover the screen if the user attempts to “double” click an action while another action is executing.
  • Custom scrollbar ensures a uniform user experience across browsers and themes.
  • View templates can exclusively contain the file name of another template. The application framework will load the file with that file name.
  • The text “Loading” will be displayed when the page is loading.
  • Blob Adapters no longer require the user to be logged in when there is no membership enabled.
  • Data Text Field and Data Value Field are initialized correctly if a model exists for the lookup controller.
  • Virtual lookup fields are now correctly created when defined in the data model.
  • Removed installer dependency to .NET 3.5.
  • The web.config file will not be overwritten unless necessary to avoid the “AppDomain Unloaded” message in Visual Studio.
  • Many other minor bug fixes.

We were not able to finalize some of the features that we desired to include in this release, due to time constraints. Expect to see these features in future releases:

  • Modal forms in Touch UI.
  • Grid inline editing (Data Sheet mode).
  • Use of HTML templates to define Grid/List/Card layouts.
  • Swipe left/right action group. Actions placed in this action group will be revealed when user performs the relevant gesture in the grid.
  • Promoted action group. Actions placed in this action group will be revealed when user clicks on the floating promo button at the bottom of the screen.
  • Sidebar will be rendered in the left menu panel when the screen is small or sidebar is disabled.
  • Revealing mini calendar under Calendar mode selector when sidebar is not visible.
  • Reordering of grid columns via drag & drop. The order will be saved in the browser cache.
  • Support for Azure 2.9.
  • “Bucket” lookup will allow selecting multiple items from the lookup view.
  • Rich Text Editor in Touch UI.
  • Visual Form Designer.
  • Multi-day events in Calendar.