1 Reply Latest reply on Jun 16, 2010 10:00 PM by BhaskerChari

    TavNavigator - add a button to a Tab

    Zolotoj Level 3

      Can I add button(s) to a TabNavigator's tab? Any examples?

       

      Thanks

        • 1. Re: TavNavigator - add a button to a Tab
          BhaskerChari Level 4

          Hi Zolotoj,

           

          What do you mean exactly by add buttons to TabNavigators tab...??? Do you want to add icon to Tabs of TabNavigator..If so check out the below code:

           

          Note: Add icons to your project in the code below:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  layout="vertical"
                  verticalAlign="middle"
                  backgroundColor="white">

           

              <mx:XML id="model">
                  <records>
                      <record uuid="1" status="check" name="User 1" data="Data 1" />
                      <record uuid="2" status="warning" name="User 2" data="Data 2" />
                      <record uuid="3" status="warning" name="User 3" data="Data 3" />
                      <record uuid="4" status="critical" name="User 4" data="Data 4" />
                      <record uuid="5" status="check" name="User 5" data="Data 5" />
                      <record uuid="6" status="check" name="User 6" data="Data 6" />
                      <record uuid="7" status="warning" name="User 7" data="Data 7" />
                      <record uuid="8" status="critical" name="User 8" data="Data 8" />
                  </records>
              </mx:XML>

           

              <mx:Script>
                  <![CDATA[
                      [Bindable]
                      [Embed(source="assets/bulletCheck.png")]
                      private var BulletCheck:Class;

           

                      [Bindable]
                      [Embed(source="assets/bulletWarning.png")]
                      private var BulletWarning:Class;

           

                      [Bindable]
                      [Embed(source="assets/bulletCritical.png")]
                      private var BulletCritical:Class;

           

                      private const CHECK:String = "check";
                      private const WARNING:String = "warning";
                      private const CRITICAL:String = "critical";
                  ]]>
              </mx:Script>

           

              <mx:TabNavigator width="400" height="200">
                  <mx:VBox label="Check" icon="{BulletCheck}">
                      <mx:DataGrid id="gridCheck"
                              width="100%"
                              height="100%">
                          <mx:columns>
                              <mx:DataGridColumn dataField="@name" />
                              <mx:DataGridColumn dataField="@data" />
                          </mx:columns>
                          <mx:dataProvider>
                              {model.record.(@status == CHECK)}
                          </mx:dataProvider>
                      </mx:DataGrid>
                  </mx:VBox>

           

                  <mx:VBox label="Warnings" icon="{BulletWarning}">
                      <mx:DataGrid id="gridWarning"
                              width="100%"
                              height="100%">
                          <mx:columns>
                              <mx:DataGridColumn dataField="@name" />
                              <mx:DataGridColumn dataField="@data" />
                          </mx:columns>
                          <mx:dataProvider>
                              {model.record.(@status == WARNING)}
                          </mx:dataProvider>
                      </mx:DataGrid>
                  </mx:VBox>

           

                  <mx:VBox label="Errors" icon="{BulletCritical}">
                      <mx:DataGrid id="gridCritical"
                              width="100%"
                              height="100%">
                          <mx:columns>
                              <mx:DataGridColumn dataField="@name" />
                              <mx:DataGridColumn dataField="@data" />
                          </mx:columns>
                          <mx:dataProvider>
                              {model.record.(@status == CRITICAL)}
                          </mx:dataProvider>
                      </mx:DataGrid>
                  </mx:VBox>
              </mx:TabNavigator>

           

          </mx:Application>

          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari