5 Replies Latest reply on Nov 24, 2009 11:53 AM by badgerduke2

    Entirely very new to Flex - Why doesn't this work?

    badgerduke2

      Flex Builder Eclipse 3.0 (build 3.0.2)

      IE 7

      Eclipse 3.4.1

       

       

      Why does the vertical rule not show up when I run the following file?

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:VBox x="10" y="10" width="1004" height="748" verticalGap="0">
              <mx:HBox width="100%" height="70">
                 
              </mx:HBox>
              <mx:Canvas width="100%" height="334">
                  <mx:VRule x="502" y="10" width="0" height="314" themeColor="#000000" strokeWidth="11"/>
              </mx:Canvas>
              <mx:HBox width="100%" height="344">
                 
              </mx:HBox>
          </mx:VBox>
      </mx:Application>

       

       

      Thanks!

      Eric

        • 2. Re: Entirely very new to Flex - Why doesn't this work?
          badgerduke2 Level 1

          Thanks!  The VRule wasn't what I was expecting.  I don't get a solid line of variable thickness but sort of a box with a shadow.  Do I have to import a package to do graphic work?

           

           

          Eric

          • 3. Re: Entirely very new to Flex - Why doesn't this work?
            msakrejda Level 4

            If you're drawing something, it probably makes sense to use the graphics API--take a look at Sprite.graphics (which is part of any component since they're all sprites).

            • 4. Re: Entirely very new to Flex - Why doesn't this work?
              Gregory Lafrance Level 6

              As this code shows, above strokeWidth="2" you get hollow rectangles instead of filled rectangles:

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
                <mx:VRule strokeWidth="1" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="2" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="3" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="4" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="5" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="6" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="7" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="8" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="9" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="10" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
                <mx:VRule strokeWidth="11" strokeColor="0xFFFFFF" shadowColor="0xFFFFFF"/>
              </mx:Application>
              


              This custom component may get you started on a better solution:

               

               

              ----- MainApp.mxml -----
              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="*">
                <mx:Button label="Button"/>
                <comp:ThickLine lineLength="100" lineAlpha=".5" lineColor="0xFF0000" 
                  lineThickness="5" lineStartX="-100" lineEndX="100"/>
                <mx:Button label="Button"/>
              </mx:Application>
              
              ----- ThickLine.mxml -----
              <?xml version="1.0" encoding="utf-8"?>
              <mx:UIComponent xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="init();">
                <mx:Script>
                  <![CDATA[
                    private var _lineStartX:Number = x;
                    private var _lineStartY:Number = y;
                    private var _lineEndX:Number = x;
                    private var _lineEndY:Number = y;
                    private var _lineThickness:uint = 1;
                    private var _lineColor:Number = 0x000000;
                    private var _lineAlpha:Number = 1;
                    private var _lineLength:Number = 100;
                    
                    private function init():void{
                      this.graphics.moveTo(this._lineStartX, this._lineStartY);
                      this.graphics.lineStyle(this._lineThickness, this._lineColor, this._lineAlpha);        
                      this.graphics.lineTo(this._lineEndX, this._lineEndY);          
                    }
                    
                    public function set lineStartX(startX:Number):void{
                      this._lineStartX = startX;
                    }
                    public function set lineStartY(startY:Number):void{
                      this._lineStartY = startY;
                    }
                    public function set lineEndX(endX:Number):void{
                      this._lineEndX = endX;
                    }
                    public function set lineEndY(endY:Number):void{
                      this._lineEndY = endY;
                    }
                    public function set lineThickness(newThickness:uint):void{
                      this._lineThickness = newThickness;
                    }
                    public function set lineColor(newColor:Number):void{
                      this._lineColor = newColor;
                    }
                    public function set lineAlpha(newAlpha:Number):void{
                      this._lineAlpha = newAlpha;
                    }
                    public function set lineLength(newLength:Number):void{
                      this._lineLength = newLength;
                    }
                  ]]>
                </mx:Script>
              </mx:UIComponent>
              
              
              • 5. Re: Entirely very new to Flex - Why doesn't this work?
                badgerduke2 Level 1

                Thank you!  This looks very useful.

                 

                 

                eric