ActiveWidgets is a powerful javascript component library which makes web development easier and more productive.
It is designed for the applications requiring rich and responsive user interface while running in a standard web browser.
ActiveWidgets includes a set of common visual elements (like datagrid, tabs, tree, combo) with a professional look, rich functionality and simple programming model.
ActiveWidgets library has been available since 2003 and used by thousands of developers worldwide.
ActiveWidgets code runs on the client-side, inside the web browser. It does not depend on the web server and can work with any server-side environment (ASP/ASP.NET, JSP, PHP etc.) or even static html pages.
Most web applications generate html on the server and then send it to the browser for display. When any part of the application screen needs updating - the browser contacts the web server and the html page gets re-created by the server script and sent back to the browser.
ActiveWidgets library is designed to eliminate server roundtrips by generating html dynamically inside the browser. Instead of sending static html - the server adds data structures and javascript code for the dynamic components into the <script>
tags. During the page load the browser runs the scripts creating ActiveWidgets components, configures them and then inserts the html string generated by each component into the proper place on the page.
From this point the javascript component code is connected to the html fragment on the page. The component manages end-user interactions, updates the html according to the data changes and provides simple API to manipulate its content, behavior and visual style.
All this happens on the client side without contacting the web server. In this model the server would be mostly involved in managing the application data while visual interface and user interactions become responsibility of the client-side script.
ActiveWidgets contains static javascript and css files and does not require any installation on the client machine or on the web server. Just copy the ActiveWidgets files into your web application folder and that should be enough to get going.
Lets start with simple 'Hello World!' application. This is how it might look using static html
<button onclick="this.innerHTML = 'Hello World!'">
Click me
</button>
Strictly speaking this is a dynamic html example. The truly static one would involve adding <form>
tag, submitting form to the server, making server code which re-builds the page with the new text and sends it back :-(
Now the same thing using ActiveWidgets library
<script>
// create ActiveWidgets component
var obj = new AW.UI.Button;
// set the display text
obj.setControlText("Click me");
// assign click event handler
obj.onControlClicked = function(){
this.setControlText("Hello World!");
};
// add component to the page
document.write(obj);
</script>
It does the same thing but the code looks more readable and we can easily use variables instead of hardcoded strings.
If this is not convincing - imagine you have to build a data grid display with sorting, resizing, keyboard navigation, cell editing etc. Writing such component from scratch would be a huge task, while using the ActiveWidgets code gets the job done relatively quickly -
var myCells = [
["MSFT","Microsoft Corporation", "314,571.156"],
["ORCL", "Oracle Corporation", "62,615.266"]
];
var myHeaders = ["Ticker", "Company Name", "Market Cap."];
// create grid object
var obj = new AW.UI.Grid;
// assign cells and headers text
obj.setCellText(myCells);
obj.setHeaderText(myHeaders);
// set number of columns/rows
obj.setColumnCount(3);
obj.setRowCount(2);
// write grid to the page
document.write(obj);
To make this code working on your page you just need two additional files - aw.js
and aw.css