 GhostWire TabView - Usage
Using the TabView component
Drag an instance of the TabView from the Components Panel to the Stage. Give this instance a name, example "myTabView". Position the component where you want it to be and resize it using the transform tool (or directly enter its width and height in its properties panel). Next, look at the component parameters. You will find that it is preconfigured with three tabs, with labels "Tab1", "Tab2", and "Tab3". You should now configure the component to your liking.
---
How do I specify the labels of the tabs during authoring?
In the component parameters panel, you can specify the tab labels. The labels specified in the component parameters panel are for the tabs appearing from left to right (ie, the first 'label' property on the list is for the tab on the leftmost of the tabview component).
---
How do I specify the contents of the tabs during authoring?
The contents are loaded into each tab according to the 'data' property assigned to the respective tabs. The 'data' property should be a string specifying either a symbol identifier or the path to an external movieclip file (or jpeg image). Note that by default, the tabview component will try to load an external file. If the 'data' property is meant to point to a symbol identifier, make sure that the symbol is exported and the 'type' property of the tab is specified as '1' (specify this under Load Types in the component parameters panel). The 'data' specified in the component parameters panel are for the tabs appearing from left to right (ie, the first 'data' property on the list is for the tab on the leftmost of the tabview component). Likewise for the 'type' (Load Types) parameter.
---
How do I use the setDataProvider method to populate the component during runtime?
The setDataProvider() method takes in one parameter. This parameter should be an array; each element in the array should be an object containing the properties ('data', 'label', 'icon', 'type') for the respective tabs. Therefore, an example of the array would be:
var myData = [{label:"Tab1",data:"Overview",type:1},
{label:"Tab2",data:"buttons.swf",icon:"buttonicon_mc"},
{label:"Tab3",data:"photo.jpg",icon:"photoicon_mc"}];
If we pass the above array into the setDataProvider method of a tabview component, the tabview will have three tabs - the first tab (on the left) will have the label "Tab1" with content loaded from the "Overview" symbol in the library; the second tab will have the label "Tab2" and an icon "buttonicon_mc" next to the label and with content loaded from an external file "buttons.swf". The third tab will have external file "photo.jpg" loaded in as content.
---
What happens if there are more tabs than the width of the component can fit in?
Usually in an application, the size of a tabview should be predetermined during authoring time. It is a design decision to not autosize the tabview. Therefore, if there are more tabs than the width of the tabview can fit in, the extra tabs won't be created. You should use the setSize() method to resize the tab during runtime before calling setDataProvider if you know you need the tabview to be bigger.
---
How do I change the contents of a tab during runtime?
You can use either
GWTabView.setTabContent(symbolID,tabID);
or
GWTabView.loadTabContent(url,tabID);
If you use setTabContent, the content will be loaded from a symbol from the library (symbolID specifies the identifier of the symbol to load). If you use loadTabContent, the content will be loaded from an external file. The tabID refers to the tab - note that we count from left to right, 1being the first tab.
---
How do I use the onSelect event?
The onSelect event is triggered whenever the user changes the active tab (ie clicking on a tabTitle). If the user clicks on an already active tab, this event is not triggered. The event allows you to code customized procedures to execute when a tab is selected. To use the onSelect event, make sure your tabview instance is named, eg. myTabView and enter the following actionscript on the actions frame:
myTabView.onSelect = function(newID, oldID)
{
// receives two parameters
// newID is the id of the tab that just received focus
// oldID is the id of the tab that just lost focus
}
Flash Components
Button
:: CheckBox
:: CollapsibleMenu
:: CollapsiblePane :: ColorPicker :: ComboBox
:: ContextMenu
:: DialogBox
:: InputField
:: ListBox :: Loader :: Menu
:: SlideMenu
:: NumericBox
:: Panel :: ProgressBar :: RadioButton
:: ScrollBar
:: ScrollPane
:: SlidePane
:: Slider
:: TabView
:: TextArea
:: TreeView
:: Window
See also
Documentation :: FAQs :: Testimonials
|
