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:
/*
This example requires the ActionScript DataValidation Library which is included
on DRK 3 (The same DRK that theTab View component is included).
*/
#include "com/macromedia/validation/DataValidation.as"
tab_tbv.removeAll();
//sets our custom tab symbol
tab_tbv.setItemSymbol("MyCustomTabSymbol");
//sets the listener for changed tabs
tab_tbv.addListener(this);
//hide the initial screens
date_mc._visible = false;
//styles
tab_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 changes
number_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 event
function onSelect(oldIndex, newIndex){
tab_tbv.getItemAt(oldIndex).data.pane_mc._visible = false;
tab_tbv.getItemAt(newIndex).data.pane_mc._visible = true;
}
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 ;( )
paddy
24 Apr 03 at 7:37 am
Well hopefully you won’t have to hack it :) You can create your own “tab symbol” so its easy to extend the tab component.
Greg Burch
24 Apr 03 at 9:33 am
Greg, shouldn’t the tab switch on ‘press’ rather than on ‘release’?
Ralf Siegel
24 Apr 03 at 9:48 am
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.
Greg Burch
24 Apr 03 at 1:24 pm
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 ?
Anonymous
25 Apr 03 at 4:06 pm
Sorry – the last comment was by me.
Raymond Camden
25 Apr 03 at 4:06 pm
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 :).
Greg Burch
25 Apr 03 at 4:12 pm
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
Phillip Kerman
30 Apr 03 at 12:34 am
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
Jodi Cramer
1 May 03 at 5:45 pm
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?
Jayesh
17 May 03 at 12:04 am
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!
Seb
4 Jun 03 at 6:55 am
http://www.markme.com/mesh/archives/002351.cfm
just rotate the tabs in the IDE.
mike chambers
mesh@macromedia.com
mike chambers
4 Jun 03 at 10:15 am
Can we have access to the .fla file?
Raymond Sassine
19 Jun 03 at 3:06 pm
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.
Amy Nelson
8 Sep 03 at 5:19 pm
oops.. I meant.. from horizontal to vertical.
sorry about that.
[I even previewed.. my bad!!]
Amy
8 Sep 03 at 5:21 pm
fgf
fgdfg
10 Jan 04 at 3:03 am
When the backspace button is pressed inside any textbox in the flash screen using datavalidation component, the browser hangs.
diego
20 Aug 04 at 12:29 pm
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.
Help
27 Jan 07 at 3:52 pm