7 Replies Latest reply on Oct 13, 2009 9:30 PM by RedOctober57

    TabNavigator tabs collapsed

    RedOctober57 Level 1

      I am using data binding to populate a canvas label in a TabNavigator.  The actual number returned is correct, however the non-selected tabs do not show the text that they are set to, because the tab label is only about 20 pixels wide.  If I click on the tab that is too narrow, it repaints itself, displaying all text at the proper with.  How can I tell the Canvas to keep it's label wide enough to see all the text therein, at all times?   (The canvas.label.length property is read only, and there is no repaint, refresh method)

       

      <mx:TabNavigator x="6" y="77" width="366" height="487">
             <mx:Canvas label="Subjects: {grdSBJs.dataProvider.length}"

        • 1. Re: TabNavigator tabs collapsed
          RedOctober57 Level 1

          Hmmm.. this is really infuriating.  To try to force the text and the initial zero to appear, I've tried going the data binding at runtime... too complex and I gave up. Besides, initially it would be binding to an object that hasn't been initialized, so, the result would probably be the same. This seems like a bug in Flash player 10.  The correct behavior is to draw the text that the programmer has entered and just show a zero or no text for the data binding part that may be coming from an unititialized object.  The behavior I'm suggesting is in fact the way it works in the FB4 textInput control... as shown in one of the videos in the "Flex in a week" series.

           

          I used my "Record count in the tab caption" for all my previous prducts.  People who use my new products built in FB4 are going to be looking for the same behavior.. same look, same feel.  If they see collapsed tabs, they're going to think it looks amaturish and unpolished.

           

          Anyone got a work around?

          • 2. Re: TabNavigator tabs collapsed
            Flex harUI Adobe Employee

            Post a small test case

             

            Alex Harui

            Flex SDK Developer

            Adobe Systems Inc.

            Blog: http://blogs.adobe.com/aharui

            1 person found this helpful
            • 3. Re: TabNavigator tabs collapsed
              RedOctober57 Level 1

              I've attached a small demo of this behavior.  I hope that the .mxml file is all you need.

              • 4. Re: TabNavigator tabs collapsed
                RedOctober57 Level 1

                Adobe server is preventing upload of a .zip file.  Here's another try.

                • 5. Re: TabNavigator tabs collapsed
                  Flex harUI Adobe Employee

                  I don't know why the forums do this.  Cut and paste the code.

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  1 person found this helpful
                  • 6. Re: TabNavigator tabs collapsed
                    RedOctober57 Level 1

                    Hi Alex, the code is contained in the .zip attached to the previoius message.  However, here it is, pasted into this message body.

                     

                    --------------  START OF CODE LISTING --------------------

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
                        <mx:TabNavigator x="469" y="216" width="318" height="200">
                            <mx:Canvas label="Subjects {grd1.dataProvider.length}" width="100%" height="100%">
                                <mx:DataGrid x="12" y="17" width="277" height="124" id="grd1">
                                    <mx:columns>
                                        <mx:DataGridColumn headerText="Tab 1 Col 1" dataField="col1"/>
                                        <mx:DataGridColumn headerText="Tab 1 Col 2" dataField="col2"/>
                                        <mx:DataGridColumn headerText="Tab 1 Col 3" dataField="col3"/>
                                    </mx:columns>
                                </mx:DataGrid>
                            </mx:Canvas>
                            <mx:Canvas label="Sessions {grd2.dataProvider.length}" width="100%" height="100%">
                                <mx:DataGrid x="13" y="5" width="279" height="148" id="grd2">
                                    <mx:columns>
                                        <mx:DataGridColumn headerText="Tab 2 Col 1" dataField="col1"/>
                                        <mx:DataGridColumn headerText="Tab 2 Col 2" dataField="col2"/>
                                        <mx:DataGridColumn headerText="Tab 2 Col 3" dataField="col3"/>
                                    </mx:columns>
                                </mx:DataGrid>
                            </mx:Canvas>
                            <mx:Canvas label="Images {grd3.dataProvider.length}" width="100%" height="100%">
                                <mx:Label x="9" y="9" text="I'm on Tab 3"/>
                                <mx:DataGrid x="13" y="13" width="282" id="grd3">
                                    <mx:columns>
                                        <mx:DataGridColumn headerText="Tab 3 Col 1" dataField="col1"/>
                                        <mx:DataGridColumn headerText="Tab 3 Col 2" dataField="col2"/>
                                        <mx:DataGridColumn headerText="Tab 3 Col 3" dataField="col3"/>
                                    </mx:columns>
                                </mx:DataGrid>
                            </mx:Canvas>
                        </mx:TabNavigator>
                        <s:TextArea x="96" y="31" height="106" width="500">
                            <s:text><![CDATA[Notice, in the src code and the TabNav in design mode, the tabs contain some text, and are visible (wide).  However, at runtime, the tabs are narrow, and contain no text.  The tabs should show the text that I entered in the source code "Subjects", "Sessions" and "Images" followed by either nothing, or zero.]]></s:text>
                        </s:TextArea>
                        <mx:Label x="158" y="218" text="Look here at the TabNav, not the column headers. ----&gt;" width="308"/>
                    </s:Application>

                     

                    --------------  END OF CODE LISTING --------------------

                    • 7. Re: TabNavigator tabs collapsed
                      RedOctober57 Level 1

                      Hi Alex,

                       

                      Where you able to determine if this is a bug in the TabNavigator data binding?  Since I am planning to make a major investment into a FlashBuilder 4 project, and it will be almost 100% tabs with a bit of text + a record count, I'd like to know if this will be fixed in the next release or if there is a work around.  I tried doing the binding "late" in ActionScript in the Application Initialize as described in video and in some examples.

                       

                      http://www.adobe.com/devnet/flex/quickstart/using_data_binding/

                       

                      Always, either the binding doesn't work at all and the text is static, or, as in the original case, all tabs that are not in the forground (unselected) the tab is collapsed so you can't see what the text is, nor the record count, even though the count is correct.  You have to click on the tab, then, it will repaint itself correctly, and then you can see the text and the associated record count.