Building web application with VCL.

JS
What is VCL.JS?
VCL.JS is a free open source typescript based framework for enterprise web application. VCL.JS framework shatter the barrier between high-level, easy-to-use language (Typescript) and low-level bits-and-bytes power tool. All the common parts of the browser user interface, like pages, buttons and lists objects, are included in the framework. Its allows the developer to design the entire web application and quickly implement an event driven code with the click of the mouse. VCL.JS does all of the heavy work that you'd normally have to do by hand. You dont need to know jQuery, Sammy.JS or knockout. You can write enterprise web application more quickly and more easily than was possible ever before.

Main features
Typescript The best way of describing VCL.JS is Typescript visual development environment. VCL.JS environment is based on Typescript, a language for application-scale JavaScript. The typescript compiler produces pure JavaScript. For more information on typescript https://typescript.codeplex.com/ Twitter Bootstrap Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components. VCL.JS uses bootstrap as a css framework for all its components. Component Set In VCL.JS you'll find classes for visual elements such as pages, buttons, etc, and you'll also find classes for custom controls such as gauge, timer and multimedia player, along with non-visual objects such as containers, queries, and collections.

Databases VCL.JS can access many types of databases. By using the TQuery & TQueryRemote components. Though .net back-end that supports most of the databases in the market.

100% Free and open source Yep its completely free and open. For more information https://github.com/vclteam/VCL.JS

Understanding components
Components are essential elements of the VCL.JS environment. It's crucial to understand what components has to offer. Some components are visual components; others are nonvisual components. A visual component, is one that can be seen by the user at run time. Visual components include components such as edit controls, buttons, list boxes, labels, and so on. A nonvisual component is one that cannot be seen by the user at run time (system timers, database components, etc.) Each component has a set of properties such as color, size, position, caption that can be modified in your code, and a collection of events such as a mouse click, key press, or component activation for which you can specify some additional behavior. Container components Besides the page component itself, VCL.JS provides several components-such as the modal, panel and page control that can contain other components. The idea of a container is that all the components will behave as one at design time. For example when you move a container component, the child components move with it. Once you have created container component on the page, make sure that all sub components use the container as an owner.

An example for component creation on a page consist of two file A typescript page class with a button
import V = require("VCL/VCL"); export class PageHome extends V.TPage { constructor() { super();

//create a button component //first parameter: the name of the owner container component //second parameter: the name of the element in the html var btn = new V.TButton(this, "btn") btn.Text = "Click Me"; btn.ButtonSize = V.ButtonSize.Large; //example of event handling btn.onClicked = () => { btn.Text = "Ouch"; } } }

And an HTML file which contain the layout of the page

<div class="row"> <div class="span2"> <div id="btn"/> </div> </div>

Getting started
For starting development you will need: Visual Studio 2012 Typescript 0.9 and above VCL.JS from (http://VCLJS.com)

After installing the software and restarting your system, you will be able to create VCL.JS project in Visual Studio 2012

Creating a project
Create a new project, Select .Net 4(and above) frame work Search for VCL.JS-Project Give the project a name and press ok

Updateing the framework

Before start coding you should get the latest VCL.JS framework from NuGet. NuGet is a package manager for Microsoft development platform. Right click on the solution explorer Select Manage NuGet packages Check for update version for VCL.JS Update your project

Designing a page
In the example application we will build a nice analytics form that run a SQL query and display them on the screen. Pages are consists of two part, the first one is an html that describe the screen layout. By using bootstrap scaffolding we will place the components on the screen. This is a regular html the only different is that you dont need to state the controls, you only need to declare their names.
<div class="row"> <div id="searchInput" class="span3" /> </div> <div class="row"> <div class="span12"> <div id="dbgrid" /> </div> </div> <div class="row"> <div class="span5"> <div id="infoPanel"> <div id="firstName" /> <div id="lastName" /> <div id="phone" />

</div> </div> <div class="span7"> <div id="ProductsPanel"> <div id="barchart" /> </div> </div> </div>

As you can see bootstrap described the screen layout by dividing the screen to 12 parts. Each one is a span. In the first row we will have a input size 3 spans, in the seconds row will have a grid sized 12 spans. The last row dived into to spans the left one with customer information and the right one a nice bar chart. The second part of a page is the class behind it.(This code is only part of the page you can download the full sample from http://www.vcljs.com)
import V = require("VCL/VCL"); export class PageHome extends V.TPage { constructor() { super(); var customerQur = new V.TQuery(this, "select id,firstname,lastName,BirthDate from customers"); customerQur.open(); var topProductsQur = new V.TQuery(this, "select ProductName,sum(SalesAmount) from CustomerProducts "+ "where CustomerID=? group by ProductName "); var grid = new V.TDBGrid(this, "dbgrid"); grid.Dataset = customerQur;//bind the grid to the dataset var col = grid.createColumn("firstname", "First Name"); col.onClicked = () => { var customerID = customerQur.getFieldValue("ID"); topProductsQur.params.clear(); topProductsQur.createParam(customerID); topProductsQur.open(); } grid.createColumn("lastName", "Last Name"); grid.createColumn("BirthDate", "BirthDate"); //set up the panel with the bar inside

var productsPanel = new V.TPanel(this, "ProductsPanel"); productsPanel.HeaderText = "Top Products"; var barchart = new V.TDBChartBar(productsPanel, "barchart"); barchart.Height = 300;//set the height of component in pixels barchart.Dataset = topProductsQur; barchart.LabelField = "ProductName"; barchart.ValueField1 = "SalesAmount"; barchart.FitToWidth = true; //Provide the functionality of search input box var searchInput = new V.TInput(this, "searchInput"); searchInput.LabelText = "Search Customer"; searchInput.onChanged = () => { //text was changed var inputTxt = searchInput.Text.trim().toLocaleLowerCase(); //this method filter the record set of the query dataset customerQur.applyFilter(() => { if (inputTxt == "") return true; var firstname :string = customerQur.getFieldValue("FirstName"); if (firstname.indexOf(searchInput.Text) >= 0) return true; else return false; }); } } }

Some points about this codes The namespace of VCL.JS is V, so all components and method should start with V. All Components start with T (TQuery,TButton,TDBGrid etc) TQuery is a dataset a non visual component. You can run a query and bind it to bindable components. TQuery open method is asynchrony All bindable components start with TDB (TDBGrid,TDBInput etc) and contain a dataset property. Only container components can contain components (TPage,Tpanel)

Conclusion
The idea of this article was to bring you the flavor of VCL.JS development. I hope you will find it useful. Please login the http://vcljs.com to have more information on this evoloving framework