14 Replies Latest reply on Sep 20, 2011 10:32 AM by Flex harUI

    Why doesn't everything have the same width

    Jerry62712 Level 1

      I have a component that I'm converting to Flex 4.  It is a header and consists of a VGroup and three Group objects.  All four objects have a width of 100%.  The problem is the middle group (a repeating image) is 100% of the width of the screen and bottom group is not.  As the top group is pretty small I can't tell and can't figure out how to background color the group to see.

       

      Here is the code:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:VGroup 
           xmlns:mx="library://ns.adobe.com/flex/mx"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:fx="http://ns.adobe.com/mxml/2009"
           styleName="bgImage"
           width="100%" gap="0">
      
           <fx:Script>
           <![CDATA[
                import VO.HeaderLabels;
      
                // either Spanish or English values will be assigned to HeaderValues
                protected var txt:HeaderLabels = HeaderLabels.getInstance();
      
                [Bindable] protected var SoIText:String = txt.getSoIText(); 
                [Bindable] protected var DHSText:String = txt.getDHSText(); 
                [Bindable] protected var IDHSText:String = txt.getIDHSText(); 
                [Bindable] protected var SNAPText:String = txt.getSnapText();
      
                public function linkIDHS(url:String):void 
                {
                     navigateToURL(new URLRequest(url));
                }
           ]]>
           </fx:Script>
      
           <s:Group width="100%">
                <mx:Image id="headerDHSImage" 
                     source="images/DHSLogo.gif"
                     toolTip="DHS logo"
                     left="5" top="5"  
                     tabIndex="1"/>
      
                <mx:Label id="headerIDHSLinkText" 
                     text="{SoIText}" 
                     fontFamily="Arial" 
                     fontSize="13"
                     fontWeight="bold"
                     color="black"
                     left="88" top="0" 
                     tabIndex="2"/>
      
                <mx:LinkButton id="headerSectLinkText"
                     label="{DHSText}"
                     fontFamily="Arial"
                     fontSize="11"
                     color="black"
                     left="80" top="14" 
                     click="linkIDHS('http://www.dhs.state.il.us')"
                     toolTip="Illinois DHS Web page Link"
                     tabIndex="3"/>
           </s:Group>
      
           <s:Group  width="100%">
                <s:BitmapImage source="@Embed(source='images/TabBarBackground.gif')" 
                     width="100%" height="30"
                     fillMode="repeat"/>
           </s:Group>
      
           <s:Group width="100%" height="100">
                <s:BorderContainer id="headerBottomBox" 
                     x="0"
                     skinClass="skins.HeaderBackground"
                     width="100%" height="100" y="0">
      
                     <mx:Image id="headerImageRight"
                          right="0" 
                          source="images/banner.jpg" 
                          height="100" width="38.5%"/>
      
                     <mx:VBox id="headerTextVBox"
                          x="6" y="40"
                          width="50%">
                          <mx:Text id="headerSNAPText"
                               color="#ffffff" 
                               styleName="pageHeading" tabIndex="4" text="{SNAPText}"/>
      
                          <mx:Text id="headerIDHSText"
                               text="{IDHSText}"
                               fontSize="18"
                               color="#ffffff" 
                               tabIndex="5"/>
                     </mx:VBox>
                </s:BorderContainer>
           </s:Group>
      </s:VGroup>
      
        • 1. Re: Why doesn't everything have the same width
          Jerry62712 Level 1

          I can't believe this is too hard for THIS group.FlexUneven.GIF

          • 2. Re: Why doesn't everything have the same width
            drkstr_1 Level 4

            Why are you mixing spark and halo layout containers? This could possibly lead to unexpected results.

             

            *edit*

             

            Also, I don't know if this is not aloud, or just standard practice, but I see you are using percent widths in a container that does not have a layout. Usually (at least from what I've seen), you would want to use absolute positions, or top,left,right,bottom, constraints in these cases. What would happen if I were to, say, set x="20" with="100%"? Which one would get precedence? Best not to code against assumptions whenever possible...

            • 3. Re: Why doesn't everything have the same width
              Jerry62712 Level 1

              I changed the one mx container to spark and it didn't make any difference.  I also tried putting in outrageous values (1000 for example) to make the container blow past the browser and it had no effect at all.  I also tried this with every container in the component and it made no difference.

               

              Flex 3.5 never had these problems.  And you didn't have to add a hundred line skin to get a background when two lines of CSS did the job then.

              [off the soapbox <g>]

              • 4. Re: Why doesn't everything have the same width
                Flex harUI Adobe Employee

                Can you post the images so we can run it and see what is going on?  Looks

                like we need banner.jpg, tabbarbackgroundimage.gif, dhslogo.jpg.

                 

                You might want to post a main app that uses this component so we know how it

                is being sized.

                 

                -Alex

                • 5. Re: Why doesn't everything have the same width
                  Jerry62712 Level 1

                  Thanks for the reply.  For some reason, and I'm never going to understand it, after adjusting a label on a different component, the image on the right went to the right edge.  Naturally, the skin had to be adjusted then as the background image was then too short.

                   

                  That was a pretty crummy picture I put here.  It looked better on my machine and in Paint (I don't have photoshop here at work) where I converted it to a gif so it wouldn't take as much space.  I'll try jpg next time.

                   

                  Did you happen to notice the URL was "File..." and not something from the server?  Any idea why that would be?  I started a thread on it as it is possible that others are as ignorant as I am and want to remedy that situation.

                  • 6. Re: Why doesn't everything have the same width
                    Flex harUI Adobe Employee

                    FlashBuilder defaults to running your applications locally.  Change your

                    Run/Debug settings to launch from http.

                    • 7. Re: Why doesn't everything have the same width
                      Jerry62712 Level 1

                      I looked in both the project properties and in the (Flash) Preferences.  Both have a "Run/Debug" option, but I couldn't find a "local" v. "http" option under either.

                      • 8. Re: Why doesn't everything have the same width
                        Jerry62712 Level 1

                        Could you tell me where these are located?

                        • 9. Re: Why doesn't everything have the same width
                          Flex harUI Adobe Employee

                          I go to project properties.  In Run/Debug settings, I edit the default

                          settings and there is an option for "URL or path to launch"

                          • 10. Re: Why doesn't everything have the same width
                            Jerry62712 Level 1

                            I though I had responded, but I don't see it now.  Our systems have been flaky today.

                             

                            I tried this:

                            http://localhost:8700/FSCalc/Flex/FSCalc

                            and

                            http://localhost:8080/FSCalc/Flex/FSCalc

                             

                            When I did, the entry under "Servers" didn't have the application attached to it.  Neither deleting and readding nor right clicking and "Add and Remove resouces" showed the application.

                             

                            Further, with the server [Started, Synchronized] I went to a browser and tried to get to Tomcat:

                            http://localhost:8080/

                            and that failed with a 404.

                             

                             

                            If it weren't for bad I wouldn't have any luck at all.

                            • 11. Re: Why doesn't everything have the same width
                              Flex harUI Adobe Employee

                              First you need to get Tomcat running and showing a non-Flex web page.  Maybe some kinds folks here can help you, but you might try the Tomcat forums.

                              • 12. Re: Why doesn't everything have the same width
                                Ansury Level 3

                                Flex 3.5 never had these problems.  And you didn't have to add a hundred line skin to get a background when two lines of CSS did the job then.

                                 

                                 

                                Finally, someone repeats an opinion I've had for (years? months?)!  Tell me about it - Spark was not ready for prime time (not to mention it's ugly as hell if you don't put out the effort to create a 'skin', which corporate/enterprise customers don't give a rats *** about).  Is Spark any better w/4.5 SDK? (I doubt it)

                                 

                                I still use the Halo component set exclusively, with SDK 4.1 (two way bindings are just too awesome to stick with 3.5).  In FB 5 I'm fully expecting the "Halo" component set option to go away entirely, but I hope it doesn't.  It's not an inferior component set and design, just different.

                                 

                                And - a 404 error has nothing to do with Flex at all, Tomcat, web.xml stuff generally.

                                • 13. Re: Why doesn't everything have the same width
                                  Jerry62712 Level 1

                                  I can't imagine why they disabled important pieces of CSS to force eveyone to add new classes and complicate projects.  If they wanted to separate presentation from behaviors I would think they could have come up with a way that didn't involve removing or crippling one of the most basic tools of web design.

                                   

                                  I'm fighing management to keep Flex and fighting Flex to do simple things.  I've been doing this stuff since the mid-70s (PL/1, Cobol, MarkIV, SAS) and I'm getting a little tired of fighting.  When PCs came in I had to move on to VB, Paradox, and Delphi.  When Gore and Congress finally got the internet public we had to move on to html then dhtml, css and server side stuff.  Others already did it, but I then went into java and flex.  And most times I had to convince management (who was still thinking in terms of SPF being the bomb and 3033 disk packs as more than adequite and how we had to run an Amdal V8 to emulate a 1401 for check processing) to join the current world.

                                   

                                  [off the soapbox]

                                  • 14. Re: Why doesn't everything have the same width
                                    Flex harUI Adobe Employee

                                    See my explanation here in your other thread about Singletons: View the full discussion

                                     

                                    The workflow we wanted to take advantage of is to let designers use their favorite tools (Photoshop, Illustrator, etc) to create artwork that would be converted to the skin.  CSS is not a feature of those products nor is it guaranteed to be a skill of those using the tool.

                                     

                                    You can still create a skin that uses CSS styles.  We’ve put a few styles in the Spark skins for popular things folks want to tweak.