:: Documentation >>

Welcome

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.

How it works

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.

Installation

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.

Getting started

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

Comments

Horizontal scroll should move only on mouse events Baby (1)
where is the AW.JSON.Table ????? Alivop (1)
How can i change automatically from next cell after pressing enter? Jorge (2)
Safari Victor (2)
Horizontal scroll bar for searchable grid AJIT (1)
How to change the background color of the Selector cell based on data condition Joerg Litchin (0)
How to identify the rows selected through checkboxes? Varun (1)
How to get the data of selected rows in the grid? Varun (1)
IE8 bug - 2nd digit gets truncated Max (1)
need to make combobox disabled APP (3)
xml grid is not working puneet vyas (1)
Web Application Folder Fanny (0)
coloring the columns and rows Diggs (2)
Ejemplo con JSP Tomas (0)
Mozilla bug 379191 Biju (1)
How to let serverside application know the selected sublist? Rulin (1)
How to make a coloumn auto stretch ? sheetal ganeshgudi (1)
filter facility on the header of the grid ? sheetal ganeshgudi (2)
javascript grid control looks terrible at large font sizes web browser (1)
Zip file contains multiple files with same name Rob Higgins <webmaster@oasections.com> (2)
Sorting Grid when it contains input boxes Lucky (0)
how to validate a combobox Reuben Osemeke a java programmer/developer (0)
From 2.0.1 to 2.5 Massimiliano Moscati, Genua (Italy) (0)
Installing ActiveWidgets in Apache Tomcat 5.5 Veeresh Karnik (0)
Help on freeversion of ActiveWidgets Masud (0)
fetch data from oracle database eng.muneer (0)
with jsp Trilok (1)
Reload DIV Nino Garbin (2)
White spaces in AW.HTML.TEXTAREA content George Leonard (3)
Mr. Alex. pl. clarify Urgently - Standard Edition & Professional Suresh, Mumbai (4)
Difference between Standard & Professional Version (3)
How to return dataset from grid Satyendra Kumar Panasa (1)
Set Combo selected item by other control George Leonard (2)
how can i display database values in grid by using jsp p chandra shaker (0)
How can i connect to Oracle database and display the values in grid p chandra shaker (0)
How can i create the user calander somasekaran.M.C (1)
Clear grid to original state Jay J (1)
how do I dynamically insert a grid into a div Andy (4)
next previous new view edit modify save functionality hiral (0)
how to connect with function ora nina (0)
How to create AW.UI.Gride object Mitesh jain (1)
dyanmically load data in table murali (0)
How to achive Oracle Apps forms functionality Ravi (0)
[no subject] Ravi Chunduru (0)
Resizing window reflect as empty space in grid component Bert (1)
picture in tooltip Jacob (1)
record move up in list box sumit (0)
Scroll render timer for grid? Bert (0)
How to get the value of a check box which is inserted in a grid Suraj (0)
Problem while using a control inside a grid Suraj (1)
multiple controls in one cell kiran (0)
Fill an ActiveWidgetGrid from MS Visual Web Developer GridView Max Johnen (2)
how to use define row event when selected a row Kyle Jiang (0)
Sample code to edit grid data and send to sever Biju (1)
HOw to embeded to classic ASP John (6)
How to Implement in JSP Noorul Ameen.P (4)
Header problem Hari Krishna (4)
Displaying the full text as a tool tip from selectbox Sanjay Sharma (1)
resising cell width in grid view anu (1)
Re: Dynamic Grid Amit Rathod (0)
create grid out of HTML table ProgFreak (0)
get a data from grid nacer183 (0)
Lost in version 2 Steve K. (3)
Scrolling in 2.0.1 Grid Atul Telang (1)
IS There any Proper documentation how to implement Active Widget Shyam Miyatra (1)
validation for combobox kiran (1)
How fine! Saidur Rahman (0)
How do I get the row number when a checkbox in that row is selected (1)
activewidgets and IntraWeb Shalom7 (0)
my sorting is not working sunilchai (0)
Button does not appear Deepak (1)
how to embed this in jsp siva (2)
Displaying of more than 5000 records (2)
move rows up or down Ravi (2)
get id activewidget from JSP alex (1)
Can't even get the elementary hello world button to work anom (1)
Active Widge Expanding Menu - Style Sheet wondering (0)
Why the extra column? aw-newbie (5)
how to embed this in html sushma (4)
Moderator of this site.plz help.AW not defined error sushma (0)
kindly help me in installation sushma (0)
Widget features.. (0)
Regarding Asp.NET with ActiveWidgets Ashish (1)
[no subject] oxking (1)
default sort column (0)
good introduction saurabh gandhi (0)

Documentation:

Recent changes:

2.6.4
2.6.3
2.6.2
2.6.1
2.6.1
2.6.0
2.5.0 - 2.5.6
2.5.6
2.5.0 - 2.5.5
2.5.5