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]

18 Responses to DRK 3 : Tab Component Example 1

  1. paddy says:

    looks great!Can u get the tab compontent to have multi lined text and hence taller? or will I have to hack it? (still waiting for delivery of DRK3 ;( )

  2. Greg Burch says:

    Well hopefully you won’t have to hack it 🙂 You can create your own “tab symbol” so its easy to extend the tab component.

  3. Ralf Siegel says:

    Greg, shouldn’t the tab switch on ‘press’ rather than on ‘release’?

  4. Greg Burch says:

    I guess its a matter of opinion, windows does it on press. You can change this by either extending the tab item or just changing it to setSelectedIndex onPress (of extending it is the safer way)Since the tabs control when they take focus you could make a tab class that did it on rollover if you really wanted to.

  5. Anonymous says:

    The date checker seems a bit strict. It allowed 4/1/2003, but not April 1, 2003. Does it only allow M/D/Y ? Also – would it allow for D/M/Y ?

  6. Sorry – the last comment was by me.

  7. Greg Burch says:

    Yea I guess you could call the date validation strict. I tried to follow Netscapes path on this type of validation since there are so many ways you could validate dates. In your case if you want to check against April 1, 2003 it won’t be as elegant but you can keep an array and convert that month into a number (doing it this way makes for a ton less bulkier code because we would have to provide for a lot of languages if we supported this)Yes D/M/Y is supported but is in a seperate validation function isWorldDate, this is because almost any date would validate if the same function validated both.Hope I was clear If not I can continue to blabber :).

  8. Phillip Kerman says:

    I have to agree that, in this case, it should be onPress… simply because there’s no down-state. I suppose–ultimately–it is a matter of opinion.By the way, where are the docs on the validation scripts?Thanks,Phillip

  9. Jodi Cramer says:

    The ability to create a custom tab is very exciting. Can the same be done with the new accordion pane component? Sure hope so…Thank you,Jodi

  10. Jayesh says:

    When i assing tabIndex to the text field component, it does not tab out to the next tabIndex field. And Automatic tab ordering for my application is just not feasible.Any idea, on how to get the tabIndex work?

  11. Seb says:

    Hi,I would like to see a working example of the tab component on a website. Does anyone use it where I can point my browser to?And also, is it possible to rotate the tab component to make it appear vertical instead of horizontal?Cheers, Seb!

  12. Raymond Sassine says:

    Can we have access to the .fla file?

  13. Amy Nelson says:

    You mentioned rotating the tabs in the IDE, from horizontal instead of vertical.. but then the text disappears.Is there a way to do this, where the text still appears correctly?thanks.

  14. Amy says:

    oops.. I meant.. from horizontal to vertical.sorry about that.[I even previewed.. my bad!!]

  15. diego says:

    When the backspace button is pressed inside any textbox in the flash screen using datavalidation component, the browser hangs.

  16. Help says:

    The tabs won’t work in MX2004. If I publish in 6 it works. It may have something to do with “this.broadcastMessage(“onSelect”,oldIndex, index, this);” ??? Flash does not complain of any errors.