DRK 3 : Tab Component Example 1

Here is another example of one of the DevNet Resource Kit (DRK) 3 components. This one is an advanced usage of the Tab component, which shows how to specify custom tabs (in this case to add icons to the tabs). It also uses the TextField Component.

Basically, each tab represents the type of input for its associated text field. Icons will appear indicating the status of its text field. This example is included on the DRK (one of the 66 total component sample files).

You can view the online docs for the TextField component here.

You can find more information about the Flash UI Component Set 5 (which includes the TextField and Tab components) here.

You can find more information about DRK 3 here.

Here is the code:

[code]/*This example requires the ActionScript DataValidation Library which is includedon DRK 3 (The same DRK that theTab View component is included).*/#include “com/macromedia/validation/DataValidation.as”tab_tbv.removeAll();//sets our custom tab symboltab_tbv.setItemSymbol(“MyCustomTabSymbol”);//sets the listener for changed tabstab_tbv.addListener(this);//hide the initial screensdate_mc._visible = false;//stylestab_tbv.setStyleProperty(“activeHighlight3d”,0xEEEEE6);tab_tbv.setStyleProperty(“highlight3d”,0xCECDBF);tab_tbv.setStyleProperty(“activeDarkShadow”,0xFFFFFF);tab_tbv.setStyleProperty(“darkShadow”,0x888878);tab_tbv.setStyleProperty(“seperator”,0xFFFFFF);//our custom tab uses the icon field in the data object.//we also pass in pane_mc in the data object so we can easily//control the visibility of the correct panes.tab_tbv.addItem(“Numbers”,{icon: “warningIcon”, pane_mc: number_mc});tab_tbv.addItem(“Letters”,{icon: “warningIcon”, pane_mc: letter_mc});tab_tbv.addItem(“Date”,{icon: “warningIcon”, pane_mc: date_mc});//below are all the callbacks that are called when the text changesnumber_mc.onChanged = function(){var item = tab_tbv.getItemAt(0);if(this.text == “”){item.data.icon = “warningIcon”;}else if(isNaN(this.text)){item.data.icon = “errorIcon”;}else{delete item.data.icon;}tab_tbv.replaceItemAt(0, item);}date_mc.setValidationFunction(“isDate”, DataValidation);date_mc.onChanged = function(){var item = tab_tbv.getItemAt(2);var valid = this.isValid();if(this.text == “”){item.data.icon = “warningIcon”;}else if(!valid){item.data.icon = “errorIcon”;}else{delete item.data.icon;}tab_tbv.replaceItemAt(2, item);}letter_mc.onChanged = function(){var item = tab_tbv.getItemAt(1);if(this.text == “”){item.data.icon = “warningIcon”;}else if(!DataValidation.hasValidChars(this.text, “abcdefghijklmnopqrstuvwxyz”)){item.data.icon = “errorIcon”;}else{delete item.data.icon;}tab_tbv.replaceItemAt(1, item);}//tab eventfunction onSelect(oldIndex, newIndex){tab_tbv.getItemAt(oldIndex).data.pane_mc._visible = false;tab_tbv.getItemAt(newIndex).data.pane_mc._visible = true;}[/code]