9 Replies Latest reply on Jul 29, 2006 6:16 PM by refugeo

    Custom Component Border (Annoying)

    takak
      I have an application calling some custom components. The Application uses a viewstack and the custom components are the children of the viewstack, i.e. Canvases. The annoying thing is is that this annoying border keeps showing up around the custom components. I have tried using stylesheets (and even editing the tags themselves adding borderThickness="0" borderStyle="none", etc., but to no avail).

      When I take it out of the component and put it straight into my main file, it works like a charm, without a border. Any pointers?
        • 1. Re: Custom Component Border (Annoying)
          peterent Level 2
          A Canvas, by default, does not have a border so none should be showing up. Can you post a bit of one of your custom components?
          • 2. Re: Custom Component Border (Annoying)
            peterent Level 2
            I created a sample application (see below) that does not show any borders. Try it out and see if works for you. If your custom components extend Canvas and you don't have any global styles which might add borders, then this should work.

            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

            <mx:ViewStack x="10" y="51" id="viewstack1" width="511" height="342">
            <mx:Canvas label="View 1" width="100%" height="100%">
            <mx:Label x="32" y="42" text="This is the first child of the ViewStack"/>
            <mx:Button x="416" y="310" label="Next Page" click="viewstack1.selectedIndex=1"/>
            </mx:Canvas>
            <mx:Canvas label="View 2" width="100%" height="100%">
            <mx:Label x="108" y="34" text="This is the second child or page of the ViewStack"/>
            <mx:Button x="416" y="310" label="Next Page" id="np2" click="viewstack1.selectedIndex=2"/>
            </mx:Canvas>
            <mx:Canvas label="View 3" width="100%" height="100%">
            <mx:Label x="243" y="32" text="This is the 3rd and last child of the ViewStack" textAlign="right"/>
            <mx:Button x="417" y="310" label="First Page" click="viewstack1.selectedIndex=0"/>
            </mx:Canvas>
            </mx:ViewStack>

            </mx:Application>
            • 3. Custom Component Border (Annoying)
              takak Level 1
              Dear Peter,

              Thanks a lot for the response. I know, it's a bit weird, but it works totally fine if you don't have it in a customComponent which extends Canvas.

              Your code works fine. However, if I take that and I take any one of those canvases and put them into a custom component, it gives me a border (and no matter what you set borderThickness, borderStyle, etc. to it doesn't go away.)

              Here's what the test.mxml file looks like.

              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns="components.*">
              <mx:ViewStack x="10" y="51" id="viewstack1" width="511" height="342">

              <!-- HERE's THE CUSTOM COMPONENT!-->
              <testCanvas/>

              <mx:Canvas label="View 2" width="100%" height="100%">
              <mx:Label x="108" y="34" text="This is the second child or page of the ViewStack"/>
              <mx:Button x="416" y="310" label="Next Page" id="np2" click="viewstack1.selectedIndex=2"/>
              </mx:Canvas>

              <mx:Canvas label="View 3" width="100%" height="100%">
              <mx:Label x="243" y="32" text="This is the 3rd and last child of the ViewStack" textAlign="right"/>
              <mx:Button x="417" y="310" label="First Page" click="viewstack1.selectedIndex=0"/>
              </mx:Canvas>

              </mx:ViewStack>
              </mx:Application>

              Then, my components/testCanvas.mxml file looks like this:

              <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" label="View 1" width="100%" height="100%">
              <mx:Label x="32" y="42" text="This is the first child of the ViewStack"/>
              <mx:Button x="416" y="310"/>
              </mx:Canvas>

              Is this just a bug?

              The result is this: http://able.org/dev/screenshot.jpg (I posted a screenshot so you can see)

              Thanks!
              • 4. Re: Custom Component Border (Annoying)
                takak Level 1
                Has anybody else run into this or is it just me?
                • 5. Re: Custom Component Border (Annoying)
                  peterent Level 2
                  I'm sorry, but this is not happening to me. I modified by Application to match yours more closely. Which version of Flex 2 are you used (eg, Beta 3 vs. Final Release)? Are you using Flex Builder 2 or the SDK?

                  Main.mxml:
                  -----------------------
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

                  <mx:ViewStack x="10" y="51" id="viewstack1" width="511" height="342">
                  <local:TestCanvas label="View 1" content="This is the first Page"
                  nextPage="viewstack1.selectedIndex=1" />
                  <local:TestCanvas label="View 2" content="This is the second child (or page) of the ViewStack"
                  nextPage="viewstack1.selectedIndex=2" />
                  <local:TestCanvas label="View 3" content="This is the last page of the ViewStack"
                  nextPage="viewstack1.selectedIndex=0" />
                  </mx:ViewStack>

                  </mx:Application>
                  --------------------------

                  TestCanvas.mxml:
                  -------------------------
                  <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%">

                  <mx:Metadata>
                  [Event("nextPage")]
                  </mx:Metadata>

                  <mx:Script>
                  <![CDATA[

                  [Bindable] public var content:String;

                  ]]>
                  </mx:Script>
                  <mx:Text left="10" right="10" y="42" text="{content}"/>
                  <mx:Button x="416" y="310" label="Next Page" click="dispatchEvent(new Event('nextPage'))"/>

                  </mx:Canvas>
                  • 6. Re: Custom Component Border (Annoying)
                    takak Level 1
                    Dear Peter,

                    Thanks for the response. Hmm... I am using Beta 3, and it sounds like this is probably the problem. I will download and install the trial version for the final release and see if that handles it (sounds like it should).

                    Then, of course, I will purchase the actual product (very soon).

                    - Taka
                    • 7. Re: Custom Component Border (Annoying)
                      takak Level 1
                      All of that wasted effort -- those brain cells now lost from the heavy banging of the head against the table...

                      That was a Beta 3 issue -- now, with the release version installed, everything works perfectly.
                      • 8. Re: Custom Component Border (Annoying)
                        takak Level 1
                        Just a beta3 issue, release version works fine.