List links on Responsive Design

I was asked the other day if knew of any peer-review studies on Responsive Design. Here are 5 links that are top referred article and/or Google hits:

Posted in Responsive Design | Leave a comment

GXT TabPanel ActiveWidget & TabItemConfig

For those of you GXT Devs, selecting tabs are not always easy.

Here is a method to set the active tab using a TabItemConfig.

    /**
     * Sets the active widget using TabItemConfig.
     *
     * @param config the TabItemConfig
     * @param container the TabPanel
     */
    public void setActiveWidget(TabPanel tabGroup, TabItemConfig config){
    	int len = tabGroup.getWidgetCount();
    	for ( int i = 0; i < len; i++ ) {
    		Widget panel = tabGroup.getWidget(i);
    		TabItemConfig panelConfig = tabGroup.getConfig(panel);

    		if(panelConfig.equals(config)){
    			tabGroup.setActiveWidget(panelConfig);
    			break;
    		}
    	}
    }

Also, this method gets the TabItemConfig of the active tab.

    /**
     * Gets the TabItemConfig or Null of the active widget.
     *
     * @param container the TabPanel
     */
    public TabItemConfig getActiveWidgetTabItemConfig(TabPanel tabGroup){
    	Widget activeWidget = tabGroup.getActiveWidget();
    	return tabGroup.getConfig(activeWidget);
    }
Posted in GXT | Leave a comment

JavaScript Arrays and HTML Collections

So for the longest time, I’ve always been told that JavaScript only has one array type: the Array Object.

// Generally, these are all the same
var arrVehicleTypes=new Array();
arrVehicleTypes[0]="Economy";
arrVehicleTypes[1]="Compact";
arrVehicleTypes[2]="Luxury";
arrVehicleTypes[3]="Sports";
arrVehicleTypes[4]="Van";

var arrVehicleTypes=new Array('Economy', 'Compact', 'Luxury', 'Sports', 'Van');

var arrVehicleTypes=['Economy', 'Compact', 'Luxury', 'Sports', 'Van'];

Using our knowledge of the Object Class, which the Array is based on, we can even fake an Associative Array.

var arrColors=new Array();
arrColors['red']='#F00';
arrColors['blue']='#00F';
arrColors['green']='#0F0';
arrColors['yellow']='#FF0';

Other languages have many types of arrays, sometimes known as collections:

  • Java has an Array, ArrayList, HashSet, LinkedList, HashMap, and TreeMap. Maps can be thought of as Associative Arrays.
  • C#.NET and VB.NET have an Array and various collections of objects, such as lists, queues, bit arrays, hash tables and dictionaries. Hash tables and Dictionaries can be thought of as Associative Arrays.
  • PHP only has two types of Arrays the Numeric Array and the Associative Array.

The JS Array Object and PHP Arrays have no problem with multi-dimensions or an array of arrays. Also they don’t require the declaration data type or class like Java and C#; meaning you may put any type of object in the array you want.

// For example, you can put an object, an array, a string, and a number all in the same array.
var arr=new Array(Object(), Array(), 'a string',1234);

To My Surprise!

So the other day I was writing some js code and I was using the document.getElementsByTagName method which returns all the tags of the type declared.

var arrLIs=document.getElementsByTagName('li');

I ran my variable (arrLIs) through a function that gets the object type. I was surprised when it didn’t return to me a type of Array!!! Upon farther review I discovered that the getElementsByTagName and getElementsByName methods as well as the anchors, forms, images, and links collections do not return an Object of type Array…they do in fact return an Object of type HTML Collection.

Hurray! Generally speaking, in other languages collections are more powerful then the array; sadly, the HTML Collection is very limited compared to the JavaScript Array Object. The Array has methods like the push, pop, shift, and reverse, just to name a few.

Below is a reference of the HTML Collection and the HTML Options Collection containing a list of its properties, methods, and a very unique feature…it is LIVE! (Which is its most redeeming quality.)

HTML Collection & HTML Options Collection

An HTML Collection and HTML Options Collection are lists of nodes. An individual node may be accessed by either ordinal index or the node’s name or id attributes.
Dreamweaver refers to these objects as a NodeList. HTML Options Collection is the same as the HTML Collection except just for Options.

HTML Collection Properties
Property Description
length returns the number of elements in the collection
HTML Collection Methods

*** Note the HTML Collection inherent toString method does not show the items like the Array Object. In other words, if you try and see the items of collection you will have to use a loop. (see example)

Method Description
item This method retrieves a node specified by ordinal index. Nodes are numbered in tree order (depth-first traversal order). The index origin is 0.
namedItem This method retrieves a Node using a name. With [HTML 4.01] documents, it first searches for a Node with a matching id attribute. If it doesn’t find one, it then searches for a Node with a matching name attribute, but only on those elements that are allowed a name attribute. With [XHTML 1.0] documents, this method only searches for Nodes with a matching id attribute. This method is case insensitive in HTML documents and case sensitive in XHTML documents. Upon failure (e.g., no node with this name exists), returns null.
HTML Collection Unique Feature

Collections in the HTML DOM are live meaning that they are automatically updated when the underlying document is changed.

Example

In this example we are showing two HTML Collections: the document.links and the document.getElementsByTagName(‘a’).

var colLinks=document.links;
var colByTagName=document.getElementsByTagName('a');

These two do behave differently!

The document.links lists all nodes with an href attribute which is really just a tags and map areas.
If an href does not exist (<a>like this; no declared href</a>) then it not be included.
The document.getElementsByTagName(‘a’) will list all a tags and anchors regardless of the populate of an href attribute.

e.g.

This a tag is included in both document.links and document.getElementsByTagName(‘a’):

<a href="http://google.com">Google</a>

Google

This a tag is included in both document.links and document.getElementsByTagName(‘a’):

<a href="">a tag with empty ("") href</a>

a tag with empty (“”) href

This anchor is included in only document.getElementsByTagName(‘a’):

<a name="example">anchor tag has no href</a>

anchor tag has no href

These map areas are only included in document.links:

<img src="/assets/baby_cake_w_map.jpg" width="200" height="200" border="0" usemap="#cake" />
<map name="cake" id="cake">
    <area shape="rect" coords="65,27,115,53" href="#eyes" />
    <area shape="rect" coords="48,152,125,195" href="#cake" />
    <area shape="rect" coords="79,121,134,152" href="#elmo" />
</map>

Here is a count of the elements in our two collections:

document.links will always be higher then document.getElementsByTagName(‘a’) by two…why…this page has 3 areas minus 1 anchor which nets +2

To demonstrate that HTML Collections are live, click ‘Add Link’. Each time you click a new link will be appended below.

As you add or really append a new element to this document, both document.links and document.getElementsByTagName(‘a’) are automatically updated. Add a few more links and then click ‘See Collections’.

Please note, as elements are updated in the collections the indexes change. For example, note the w3.org links indexes keep getting larger.

Posted in JavaScript | Leave a comment

IsTypeOf Function

The IsTypeOf function is design to allow you to type identify any object.


/*
/////////////////////////////////////////////////////////////////////////////////////////////////////
//  IsTypeOf                                                                             IsTypeOf  //
/////////////////////////////////////////////////////////////////////////////////////////////////////
*/
IsTypeOf=function(obj,_strict) {
  if(obj==null||obj===undefined){return null;}
  if(typeof(obj) == 'object'){
    switch(obj.constructor){
      case Array:   rtn='Array';   break;
      case Boolean: rtn='Boolean'; break;
      case Date:    rtn='Date';    break;
      case Error:   rtn='Error';   break;
      case Number:  rtn='Number';  break;
      case RegExp:  rtn='RegExp';  break;
      case String:  rtn='String';  break;
      case Object:  rtn='Object';  break;
      default:
        if(obj.constructor!==undefined){
          rtn=String(obj.constructor).substring(String(obj.constructor).search(' '), String(obj.constructor).search('{')-3);
        }else if(obj.item!==undefined){
          rtn='HTMLCollection';
        }else{
          rtn='object';
        }
    }
    return _strict===undefined||!_strict ? rtn.toLowerCase() : rtn;
  }else{
    return typeof(obj);
  }
}
Posted in JavaScript | Tagged | Leave a comment