February 22, 2008

Implementing Section 508

One fellow programmer raised this question in jGuru forum; "if a user logs-in to my web application written in PHP in Firefox, Java Script should simulate doing 'Ctrl+' so that the screen size increases". For me it sounded like implementing one of the points mentioned in Section 508. Section 508 was an amend to US congress which says electronic and information technology should be accessible to people with disabilities. Many sites like BBC have implemented this. Let have a look how we can implement one of the point in Section 508.

Here we will implement in a very small way. The solution I have provided is not complete, but you need to take it forward and modify if you need to use it in blogs or sites. For experiencing a good implementation of Section 508 check out this.

The Requirement:
As a simple statement: Provide keyboard shortcuts to increase and decrease font size in a browser. Usually sites will have button where users can select the size, font and even colour of the page’s text. In this work, we will focus on to provide button to increase and decrease font size and also provide keyboard shortcut.

Why Keyboard shortcut?
Until recently, web application never supported keyboard shortcuts. They have become famous through Gmail and Google Reader and it has been success ever since. Providing shortcuts to you web applications and web pages can improve the productivity of the user. It can also help in quick navigation. But the problem is providing a “standard” set of shortcuts which will work on all browsers. For example, you can increase the font size in Firefox with “Ctrl + Plus”, but this is not applicable in IE.

Our implementation:
We will have a non-standard keyboard shortcut to increase and decrease the font in our implementation. :( (I can’t help it!). To handle keyboard events through javascript you will find many libraries available on web. I will be using the openjs library and the reason? It’s a simple, single file library. To keep your implementation simple and easy to handle we will have the styles, script and HTML in one file.

To start with, we will be using CSS to apply style to all content in your page. Let say we have many styles, but what we need is the list of CSS class which needs to be updated when user request to increase or decrease font size. We will update all these CSS styles through JavaScript when user click on the appropriate button or hit the keyboard shortcut. To handle keyboard, we will initialize listeners in an init method.
shortcut.add("Ctrl+Shift+A",increment);
shortcut.add("Ctrl+Shift+Z",decrement);
This method will be called on onLoad event of the web page. We will track Ctrl+Shift+A and Ctrl+Shift+Z keystrokes and the appropriate methods will be called (increment and decrement).

To modify the font attributes, we need to search through styleSheets object list of a document. I have created my own method to do so.

function getStyleByName(styleName) {
for (i=0; i<document.styleSheets.length; i++) {
if (document.styleSheets[i].cssRules) {
for (j=0;j<document.styleSheets[i].cssRules.length; j++) {
if (document.styleSheets[i].cssRules[j].selectorText == styleName) {
return document.styleSheets[i].cssRules[j].style;
}
}
} else {
for (j=0;j<document.styleSheets[i].rules.length; j++) {
if (document.styleSheets[i].rules[j].selectorText == styleName) {
return document.styleSheets[i].rules[j].style;
}
}
}
}
}
Given a CSS class name, the method traverse through the styleSheets objects and return the style object. In this example we will modify only one style, but if you need to modify multiple CSS styles, you will have to stores these names in an array.

Now have a look at the complete code:
<html>
<head>
<style>
.divStyle {
color: red;
}
.newStyle {
font-weight: bold;
}
</style>
<script type="text/javascript" src="shortcuts.js"></script>
<script type="text/javascript">
//<![CDATA[
function getStyleByName(styleName) {
for (i=0; i<document.styleSheets.length; i++) {
if (document.styleSheets[i].cssRules) {
for (j=0;j<document.styleSheets[i].cssRules.length; j++) {
if (document.styleSheets[i].cssRules[j].selectorText == styleName) {
return document.styleSheets[i].cssRules[j].style;
}
}
} else {
for (j=0;j<document.styleSheets[i].rules.length; j++) {
if (document.styleSheets[i].rules[j].selectorText == styleName) {
return document.styleSheets[i].rules[j].style;
}
}
}
}
}

function testStyleSheet() {
var styleObj = getStyleByName(".divStyle");
if(styleObj) {
alert('style.font-size: ' + styleObj.fontSize);
} else {
alert('style not found.');
}
}

function increment() {
var styleObj = getStyleByName(".divStyle");
if(styleObj) {
styleObj.fontSize = "20px";
} else {
alert('style not found.');
}
}

function decrement() {
var styleObj = getStyleByName(".divStyle");
if(styleObj) {
styleObj.fontSize = "10px";
} else {
alert('style not found.');
}
}

function init() {
shortcut.add("Ctrl+Shift+A",increment);
shortcut.add("Ctrl+Shift+Z",decrement);
}
//]]>
</script>
</head>
<body onLoad="init()">
<input type="submit" onclick="increment()" value="Increment Size"/>
<input type="submit" onclick="decrement()" value="Decrement Size"/>
<input type="submit" onclick="testStyleSheet()" value="Test StyleSheet"/>
<hr/>
<div class="divStyle">A sample text</div>
<div> Without the disStyle class attched to the DIV tag. the fonts will not increment and decrement. The big trouble is the key combination in mozilla.
http://www.openjs.com/scripts/events/keyboard_shortcuts/
</div>
<div class="divStyle newStyle"> This is a test </div>
</body>
</html>
So, there you go! Remember, this is NOT complete and you can take it forward.
Keep programming :)

February 10, 2008

All about Ext.Button!

I have already demonstrated the difference of ExtJS1.x and 2.0 with a simple "Hello World" program. Now let’s get deeper and this time it’s about buttons in ExtJS. In this article we will cover creating, handling and manhandling of Ext buttons.

Setting up your programming environment:

There isn’t much to this. If you do not have ExtJS 2.0, you need to download the latest version. All you have to do is unzip the downloaded file, place them in a proper folder structure. I usually have a folder structure as shown:



The js folder has all the JavaScript of the application. Inside this folder I have separate folders for different libraries and I store my custom JavaScript files in appjs. Again this appjs can have subfolders to separate JavaScript files module-wise. This might not be the best folder structure but for now we will stick to this. If you are new to Ext you can have a look at my "Hello World" program.

Ok! Now we are ready for some action. Let’s start with creating a simple button.

Creating a Button:

Ext has Button class implement in the base package ie, Ext. To create a button all you have to do is create an instance of this class and specify the attributes. The Button class has a parameterized constructor with one parameter, the button’s configuration!
Here is the code to create a simple button:
buttonObject = new Ext.Button({applyTo:'button-div',text:'Simple Button'});
You will see that we have used two configuration parameters. applyTo is used to specify which HTML element is going to become the button. The HTML element can be DIV, P or SPAN tag. Remember that applyTo should be passed for the button to render. The next parameter is the text of the button itself. Now another way to specify the holding element for button can be done my calling the public method applyToMarkup. The method takes a parameter which is the id of HTML element to which the button will be rendered.

Attaching handlers to button:


There are basically three ways to attach event to the button you created. One is to use the constructor to specify a callback when the button is clicked and the other is to use addListner method. This method is more generic because you can specify action for any type of events on a button.

The first method is by using the constructor you specify the call back function that needs to invoke when the button is clicked. Remember: It’s only for handling button clicks. Have a look at the example below:
buttonObject = new Ext.Button({applyTo:'button-div',text:'Testing',handler:buttonHandler});
buttonHandler is a method defined in our application class as private method. Here is the complete application code:
app = function() {

var buttonObject;

var buttonHandler = function(button,event) {
alert('You clicked the button!');
};

return {

init:function() {
buttonObject = new Ext.Button({applyTo:'button-div',         text:'Testing',
handler:buttonHandler});

} 
};
}();
The second method is to use the setHandler method to set the call back method for click event. The method has only one argument and it’s the call back method.

The third method to attach an action is to use the public method addListener. Through this you will be able to define actions for events like clicking, mouse over, mouse out etc. Take a look at this example
buttonNext = new Ext.Button({text:'Touch me'});
buttonNext.applyToMarkup('nxt-button');
buttonNext.addListener('mouseover',mouseHandler);
The addListener method has four parameters out of which last two are optional. Thus in our above example, we have made use of just the feature of assigning action to certain events. The third argument specifies the scope in which the handler method should be executed and the last argument specifies the object containing handler configuration properties. These properties can be scope, delay etc.

Before we close, there is one more way to attach event handler to button. This can be done by calling on method. This method has the same number of parameters as the addListener method.


Firing and removing handlers:


ExtJS provides a good set of APIs to manipulate events and actions for any component. As its possible for developers to create and attach actions for button, its also possible to manually fire, stop and remove these event and action.

Situations arise wherein you need to fire an event or series of events when one components event is fired. To fire an event manually we have fireEvent method.
This method has variable length argument of which the first argument is the event name that needs to be fired and the rest is the parameters passed to the handler if any.Have a look at the example below:
app = function() {

var buttonObject;
var buttonNext;

var buttonHandler = function(button,event) {
alert('You clicked the button!');
buttonNext.fireEvent('mouseover');
};

var mouseHandler = function(button,event) {
alert('Mouse on me!');
};

return {
init:function() {
buttonObject = new Ext.Button({applyTo:'button-div',
text:'Click me',
handler:buttonHandler});

buttonNext = new Ext.Button({text:'Touch me'});
buttonNext.applyToMarkup('nxt-button');
buttonNext.addListener('mouseover',mouseHandler);
} 
};
}();
Here we manually fire the ‘mouseover’ event for buttonNext when user clicks on the first button. Thus inturn, the mouseHandler of buttonNext is called.

Now, let’s remove handlers attached to the buttons. ExtJS provides two methods to remove a specific handler from an event. Developer as either use removeListener or un method (addListener and on for adding). And finally to remove all the handlers attached, you may call purgeListeners method.

Suspending and Resuming Events:

Adding, firing and removing is not all that. At times you may need to suspend the events so that the handlers are not fired. You can use suspendEvents and resumeEvents method to enable and disable the event firing for a component. For example:
buttonNext.suspendEvents();
This would suspend all event fired by buttonNext object.

Other Methods:


I am not explaining each function explicitly. But I am just covering the major once that a developer needs to know. For complete list of methods refer the Ext API Documentation.

Winding Up:

For a Ext beginner, I hope this will greatly helpful. Please let me know of any mistakes in this tutorial. You can download the final source code from here.

Read other articles and tutorials on ExtJS!

February 08, 2008

jQuery introduces UI and Special effects

jQuery is one of the simplest JavaScript library available for handling events, performing animations, and add Ajax web pages. jQuery team has announced the alpha release of two new JavaScript libraries: jQuery UI and jQuery Ehchant! These two libraries add UI and special effects to existing jQuery library.

Like any other JavaScript library, jQuery UI provides a set of themable widgets on top of the jQuery core library. The (Alpha) library provides widgets like Accordion, Dialog boxes, Tabbed content panes, Tables etc. And the team still working on widgets like Menu, Toolbars, Tree, Splitter, Rich Text Editor etc. for a demo on the existing widgets try the URL : http://ui.jquery.com/1.5a/demos/.

On the other side, jQuery Ehchant is meant for special effects. You can see dome cool examples of this library here! To use these, you will need the jQuery core library. So download jQuery 1.2.3! this new release includes support for Adobe AIR, Namespacing and of course, jQuery UI. You can download these libraries at:

jQuery UI: http://jqueryjs.googlecode.com/files/jquery.ui-1.5a.zip
jQuery Enchant: http://jqueryjs.googlecode.com/files/jquery.enchant-1.0a.zip

You can also access all the documentations here. Happy jQuerying!