hi I also use this really helpfull method, and I found a limit (or flex bug?) with this:
I use it in a "popup" window, that I display as a canvas via a state change. it's a very simple component with my canvas, and Vboxes, labels, etc... wherever I use my repeated background in this component, it displays the background only the first time I call the component. after this, no way to see it back... I choosed a different way to skin, so I don't personnaly need an answer, but if somebody has one for the future, it could be good regards makar --- In flexcoders@yahoogroups.com, "valdhor" <[EMAIL PROTECTED]> wrote: > > This is how I do it: > > I create an empty component named RepeatedBackgroundBox.mxml: > > <?xml version="1.0" encoding="utf-8"?> > <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%" > height="100%"> > > </mx:VBox> > > > Next I create an AS file named RepeatedBackground.as: > > /* > RepeatedBackground > > Use this BorderSkin with backgroundImage > > Embed properties scaleGridTop, scaleGridBottom, scaleGridLeft, and > scaleGridRight do not work. > */ > package > { > import flash.display.Bitmap; > import flash.display.BitmapData; > import flash.display.Graphics; > import flash.display.Loader; > import flash.events.Event; > import flash.events.IOErrorEvent; > import flash.geom.Matrix; > import flash.net.URLRequest; > > import mx.controls.Image; > import mx.core.BitmapAsset; > import mx.graphics.RectangularDropShadow; > import mx.skins.RectangularBorder; > import mx.core.Application; > import mx.core.UIComponent; > > public class RepeatedBackground extends RectangularBorder { > > private var tile:BitmapData; > > private var imgCls:Class; > > override protected function > updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { > super.updateDisplayList(unscaledWidth, unscaledHeight); > > // Use UIComponent to handle any container > > // Check if parent is valid > // In some Application initializaton states this might be > false, I was getting an error > if( this.parent != null ) { > // The backgroundImage on the parent will become "" so > we need to keep the class around > // for every object updateDisplayList > if( imgCls == null ) { > var backgroundImage:Object = UIComponent( > this.parent ).getStyle( "backgroundImage" ); > if( backgroundImage != null && backgroundImage != "" > ) { > imgCls = Class( backgroundImage ); > (this.parent as UIComponent).setStyle( > "backgroundImage", "" ); > } > } > // Do the actually bitmap filling here > if( imgCls != null ) { > try { > // imgCls could be a symbol in a SWF and the > class will not work > var background:BitmapAsset = BitmapAsset(new > imgCls()); > tile = background.bitmapData; > > var transform: Matrix = new Matrix(); > > graphics.clear(); > graphics.beginBitmapFill(tile, transform, true); > graphics.drawRect(0, 0, unscaledWidth, > unscaledHeight); > } catch( e:TypeError ) { > // Throw an custom error if imgCls is not a > valid type > throw new Error( "backgroundImage value is not a > valid image class" ); > } finally { > ;// Catch all just ignore > } > } > } > } > } > } > > Now, a CSS file with the RepeatedBackgroundBox definition: > > RepeatedBackgroundBox > { > paddingRight: 10; > paddingLeft: 10; > paddingTop: 5; > borderSkin: ClassReference("RepeatedBackground"); > background-image: Embed("/assets/images/bg.gif"); > } > > Now all I have to do to use it is: > > <custom:RepeatedBackgroundBox> > Other components here > </custom:RepeatedBackgroundBox> > > > --- In flexcoders@yahoogroups.com, "xaero" <xaero@> wrote: > > > > And then How can I set the page's background like in the HTML Css? > > That is: > > background-repeat: repeat-x; > > background-PositionX: left; > > background-PositionY: bottom; > > > > --- In flexcoders@yahoogroups.com, "Michael Schmalle" > > teoti.graphix@ wrote: > > > > > > No, you can't do this. > > > > > > Flex CSS is not 'real' css and does not conform to WC3. > > > > > > Mike > > > > > >
