Creating a Full Featured HTML5 Application in Less than 10 Minutes

• Download Visual Studio Extension
• Download Sample Database

Introduction

Building data-centric applications that provide a rich user experience often requires developers to write tons of code spanning multiple tiers; a far from simple, tedious and a time consuming work. What if you could build a complete application that takes care of all this plumbing for you while providing an out of the box rich user interface that is consistent across all platforms and runs on virtually any device?

In this article, we will show you how you can do all of this in less than 10 minutes using the latest version of Vidyano, a full featured development platform with the flexibility for creating small to enterprise scale data-centric web applications. As this article will demonstrate, Vidyano is fast and easy to learn, making it perfect for developers of all experience levels to create powerful applications!

Please note that this article only scratches the surface of Vidyano’s capabilities. For a full list of all the features, visit http://go.2sky.be/v4f

Getting Vidyano

To get started, you will need the Vidyano extension for Visual Studio. You can get this extension either by downloading it directly from the Visual Studio Gallery or from within Visual Studio through the Extensions and Updates dialog box.

Getting Vidyano through the Visual Studio Gallery

• Download the Vidyano extension on the Visual Studio Gallery: (http://go.2sky.be/v4cp) (This will download a .vsix file that you can run if you’ve installed Visual Studio.)

• Click Install and launch Visual Studio

Getting Vidyano through Visual Studio

• From the Visual Studio Tools menu, open Extensions and Updates…
• On the left side, click Online
• On the top right side, click Search Visual Studio Gallery and enter Vidyano
• Click Download, Install and Restart Now

Also note that you will need IIS Express 7.5 or later on your machine. Internet Information Services (IIS) Express is a free, simple and self-contained version of IIS that is optimized for developers. You can download the latest version of IIS Express (currently 8.0) from the following URL:

http://www.microsoft.com/en-us/download/details.aspx?id=34679

Step 1 – Creating a new Vidyano Application

If you would like to follow the steps below and see the application come to live on your own machine, you will need to download and install the sample database used in this article from the following URL: http://go.2sky.be/v4cpdb

• Launch Visual Studio if you have not already done so
• From the Visual Studio File menu, click New and Project…
• On the left side, click Vidyano
• Enter a new Name for your application, MyCRM
• Click Ok

A Vidyano dialog wizard will guide you through the initial steps of your new application.

• Change the title of the application to My CRM
• Enter and confirm an Administrative Password for your new application
• Click Next

The next wizard screen will require you to select the target database holding your CRM data. If you’ve deployed the sample database provided earlier you can now select it.

• Click the … button next to Connection String
• Select your database server, in this case a local SQL Server Express
• Select or enter the database containing the CRM data
• Click OK

There are more options on this wizard screen that we can ignore for now. Notice the schema name as we will refer back to it later. Just leave the default suggested values.

• Click Next

Vidyano will create a couple of extra tables on your database that will hold the metadata for your application. Although Vidyano makes no changes to your existing tables, you can optionally select a different database if you feel so.

• Click Next
• Click Go!

Vidyano will now create your application project.

Step 2 – Launching and using the new application

Let’s launch our newly created application.

• Hit the CTRL-F5 buttons on your keyboard to launch the application

You will be prompted for a user and a password.

• Enter admin as username
• Enter the Administrative Password you provided earlier in Step 1
• Hit Enter or click Sign In

Now that you are signed in as an administrator, you can start building the application. Let’s begin by adding a menu item to view the customers in our sample CRM database.

• On the top left, below HOME, click the + sign
• Click the Customers query from the available Queries dialog box

• Click the newly created customers menu item

You will now be presented with a grid view of all the customers in the sample database. Let’s create a new customer.

• Click the New action button at the bottom left on the actions bar
• Notice that "First name", "Last name" and "Is active" are required fields. This is indicated by the * next to the label.
• Enter your first and last name
• Optional: try entering an invalid email address. Upon hitting save, you will be notified that the email address is invalid, requiring you to change the value.
• Click the Save action on the actions bar to save yourself as a new customer

You can now search for yourself using the search box.

You can also apply filtering to your data. This is best illustrated with another table in the database. As before, we are going to create a new menu item, this time for the Products query.

• On the menu, next to customers, click the + sign
• Select the Products query by clicking it
• Click the products menu item

As with the customers page earlier, you will be able to perform a wide range of operations on this list of products. Let’s filter the data.

• On the far right side of the search box, click the button with the filter icon
• Select New Filter…

This will add a filtering bar above the data grid.

• On the filter bar, click the Add Filter Column icon and select Product Category

• From the list of available product categories, click Mountain Bikes
• Add another Filter Column by clicking the Add Filter Column icon and select List Price
• In the List Price filter column block, type < 1000

The list of products now only shows Mountain Bikes that are cheaper than a 1000.

"A thousand whats?" We hear you asking? Dollars! Let’s fix the view to show the currency.

• On the right side on the actions bar, click the Configure action
• From the popup menu, select Query Persistent Object

Step 3 – Managing the metadata

The view that was just presented to you displays the metadata for the Product entity. The building blocks for metadata in a Vidyano application are Persistent Objects. Persistent Objects are extremely powerful and allow you to implement advanced scenarios while maintaining a consistent, high level overview of the application that simplifies maintenance and enforces a unified programming model.

Upon creating your application in step 1, Vidyano automatically generated an Entity Framework model from your target database (in this case, our small CRM database). During the initial run, Vidyano then created a new Persistent Object metadata entry in the repository tables for every entity in your model. A Persistent Object doesn’t necessarily require a corresponding .NET object in your application, but that is beyond the scope of this article.

On the right half of your screen are all the Persistent Object Attributes that were inferred from the available properties on the corresponding Product .NET object. You can see their label, type, business rules, visibility, and so on.

Now that we’ve explained a bit what you are seeing, let’s continue were we left off: "Dollars".

• Click List Price attribute

• Click the Edit action on the actions toolbar

• In the Type Hints field, enter DisplayFormat=${0:N2}

• Click the Save action on the actions toolbar

• Click the products menu item on the top

You will now see that List Price is shown to you in dollars. In fact, whenever a product’s List Price is displayed, anywhere in the application, it will now use this display format.

Step 4 – Adding Business Rules

If you take a look at the product numbers, you will notice that they all start with two letters, a dash and a series of numbers. Let’s say that we want to make sure that whenever a product is created or updated, we want to make sure it has a valid number.

• Click the Management menu

• Click the Service menu item and then select business rules

You can already see a list of all business rules that Vidyano added to your application. There are two ways for writing business rules in a Vidyano application: Native or JavaScript. In this case let’s add a JavaScript business rule.

• Click the New action at the left side on the actions toolbar

• In the Name field, type ValidProductCode

• Change the code to be as follow:

function rule(args, value /*, parameters*/) {
  if(!/^[A-Z]{2}-./.exec(value))
    return "{0} contains an invalid product code.";
  
  return null;
}

It is important to notice that this code is being executed on the service side and not on the end users browser as this would allow them to see and/or bypass business logic. The JavaScript above will be compiled into CLR code at runtime before it gets executed. There are a wide range of .NET libraries that you can call from this JavaScript code and you can supply your own. This will allow you to make changes at runtime and reduces the amount of times you need to deploy.

• Click the Save action on the actions toolbar

Now that we have our new business rule, we can apply it to any number of attributes. Let’s apply it to the Product’s Number.

• Click the crm menu item (crm is the name of the schema at the beginning)

This will provide you with a list of all Persistent Objects in the application

• Click Product

• Click the Number attribute

• Click the Edit action on the actions toolbar (or press F2)

• On the Rules field, add ;ValidProductCode (note, rules are separated by semicolons)

• Click the Save action on the actions toolbar (or press CTRL-S)

• Click the Home menu

• Click the Products menu item

• Click the New action on the actions toolbar

• Try entering anything in the Number field and click Save

You will notice that you need to start with two uppercase characters, followed by a dash and any other character, as determined by our business rule.

Step 5 – Overriding default behavior

As a final customization, we are going to override some default behavior. For this example, the end user will be prohibited to physically DELETE customers from our database. The customer will instead get flagged as inactive.

• Click the customers menu item (notice the Is Active column)
• Click the Configure action on the right side of the actions toolbar
• Click Query Persistent Object
• On the right half of the page you will see the different tabs, select the actions tab
• Click the OnDelete action

Again, we could’ve written this code in C# but in this example we are going to focus on JavaScript code.

function (parent, entities, query, selectedItems) {
  entities.run(function(e) { e.isActive = false; });
  context.saveChanges();
}

• Click the Save action on the actions toolbar

• Click the customers menu item
• Select one or more customers by clicking on the front left of the grid line
• Click the Delete action on the actions toolbar (or press DEL)
• Click Delete 

Notice how your selected customers are not deleted, but instead flagged as inactive. To finish up, let’s make sure that the customers query only shows active customers.

• Click the Configure action on the actions toolbar
• This time, select Query from the menu popup
• Click the Edit action on the actions toolbar
• In the Where field, enter it.IsActive

Note: this statement will be passed to the underlying Entity Framework as an extra Where clause

• Click the Save action on the actions toolbar
• Go back to the Customers view by clicking the browser’s back button

Notice how inactive customers no longer appear in the list. The delete action feels the same, but its behavior is quite different.

Step 6 – Publishing and accessing your application

• Close the browser and go back to Visual Studio

The Vidyano project you have currently open in Visual Studio is based on a plain ASP.NET project. This means that you can publish it using the same mechanisms as any other ASP.NET application.

In fact, if you migrate the database to SQL Database on Windows Azure, you can even one-click Publish this project to Windows Azure Websites.

Once your application is hosted on a public domain, you can access it from virtually any device without changing a single line of code. The application’s user interface will automatically scale to the device’s capabilities.

For more information on publishing; check out the Vidyano documentation.

Step 7 – Get Vidyano and start developing

Now that you know how to create a Vidyano application, why not give it a try yourself. Select your own database and let Vidyano create an application for you.

• Download Vidyano for free from this link: http://go.2sky.be/v4cp