Pimp your Flex app using WSBackgroundPixelSkin

July 6th, 2007

UPDATE 07/10/07: The source code has been updated. Check out the “WSPatternStyleGenerator” to simplify the creation of its CSS patterns, too.

WSBackgroundPixelSkin is a free Flex component for creating patterns within Flex containers such as Application, Canvas, HBox, VBox, Form etc. It based on pure CSS and ActionScript without any images. It creates pretty patterns using the powerful BitmapData classes of Flex.

For determining complex patterns I’ve written a small Flex app, which loads images reading colors based on its pixels and prints this pattern as CSS code. Let me know if there anyone out there who is interested in this app. Then I’ll publish it including source, too.

Note: Programmatic skins used to extends mx.skins.Border or mx.skins.ProgrammaticSkin classes, but in this case WSBackgroundPixelSkin needs the addChild() method for adding instances of DisplayObjects and therefore it extends the UIComponent.

Screen shot


Instructions

Code snippets for using WSBackgroundPixelSkin

  1. //
  2. //  [1] Define the style properties of your pattern as follow:
  3. //  This example describes a simple pattern based
  4. //  on blue and white columns
  5. <mx:Style>
  6.     .bg
  7.     {
  8.         // point WSBackgroundPixelSkin as a borderSkin
  9.         borderSkin: ClassReference("skins.WSBackgroundPixelSkin");
  10.         // define a pixelbased pattern
  11.         // which uses the indexes of the bgColors array below
  12.         bgPattern:  "001010001",
  13.                     "001010001";
  14.         // bgColors defines color using by its pattern definition
  15.         bgColors: #3399CC, #FFF;
  16.         // measure of all pixels,
  17.         // the default value is 1
  18.         bgPixelMeasure: 12;
  19.         //
  20.         background-color: #3399CC;
  21.     }
  22. </mx:Style>
  23. //
  24. //  [2] Point the pixel based style to a container, e.g. Canvas:
  25. <mx:Canvas id="standardCanvas"
  26.     styleName="bg" />
  27. // 
  28. //  That’s all ;)    

Example (incl. source code)

Have a look on these examples including the source code. Feel free to use it, WSBackgroundPixelSkin is open source licensed under the Mozilla Public License 1.1.

Have fun! ;-)

Related Articles

Posted by sectore Filed in Flex, Open Source
14 Comments »

14 Responses to “Pimp your Flex app using WSBackgroundPixelSkin”

  1. Brett Walker Says:
    July 6th, 2007 at 9:23 pm

    That’s dope! Unfortunately, it suffers from serious window resizing draw slowness. Perhaps it can be optimized though. Thanks or making it open source.

  2. Stefan Richter Says:
    July 7th, 2007 at 9:10 am

    I can’t work out how I would go about creating my own patterns – the CSS looks scary! :-)
    Could you explain the process of creating a pattern?
    Nice work.

  3. sectore Says:
    July 7th, 2007 at 7:04 pm

    @Brett: The core class named “WSBackgroundPixelSkin” has been optimized. Check it out ;-)

    @Stefan, it looks too scary for me, too :-)
    But don’t worry about these patterns. I’ve created a Flex based tool, which loads pixel based wallpaper images (e.g. from http://www.k10k.net/pixelpatterns/) and creates patterns in well formatted CSS for using WSBackgroundPixelSkin. I’m going to publish this tool as soon as possible (incl. source) ;-)

    -sectore

  4. WSBackgroundPixelSkin - Source Code Released « Flash Enabled - Get Ready With Flash… Says:
    July 9th, 2007 at 12:25 pm

    [...] Check the full post and download the source code here. [...]

  5. Aubrey Says:
    July 9th, 2007 at 6:09 pm

    Sector,
    Very nice…I’ll certainly want to take a look at your tool when it it’s ready. Thanks!

  6. jharbs.com » Patterned Background Class Says:
    July 9th, 2007 at 8:20 pm

    [...] WSBackgroundPixelSkin is a Flex Component for creating repeating background patterns using CSS and [...]

  7. MadeInFlex » Blog Archive » Fondos para componentes con ActionScript3 y CSS Says:
    July 11th, 2007 at 9:34 am

    [...] para skin de borders –> WSDoubleBorderSkin – Componente para backgrounds de componentes –> WSBackgroundPixelSkin – Componente para generar el patrón basado en una imágen que luego usará –> [...]

  8. Actionscript Classes » WSBackgroundPixelSkin Says:
    August 2nd, 2007 at 2:16 am

    [...] http://www.websector.de/blog/2007/07/06/pimp-your-flex-app-using-wsbackgroundpixelskin/ [...]

  9. Ievgen Tiutiunnyk » Blog Archive » Pimp your Flex app using flex-pattern-background Says:
    October 17th, 2007 at 7:15 pm

    [...] SDK class and use images without any CSS patterns like seen in WSBackgroundPixelSkin component. It creates pretty patterns using the powerful BitmapData classes of [...]

  10. tearaway_Tea Says:
    October 17th, 2007 at 7:40 pm

    What do you think about this solution http://tearaway-tea.com/blog/2007/10/17/pimp-your-flex-app-using-flex-pattern-background/ ?

  11. ????????? flex-pattern-background | Go!Verla Flex Blog Says:
    March 31st, 2008 at 9:12 pm

    [...] ????????? flex-pattern-background ???????????? ??? ?????????? ???? ????? ??????????? ??? Application, Canvas, HBox, VBox, Form ? ??. ?? ??????? ?? mx.skins.RectangularBorder ? BitmapData ??????? ?? Flex 2 SDK ? ???????? ?? ????? ????????????? ???????? ??? CSS ??????? WSBackgroundPixelSkin ??????????. [...]

  12. WSBackgroundPixelSkin | flex???? Says:
    September 29th, 2008 at 12:28 pm

    [...] Jens Krause???????Flex????????????VBox??????????????????????????CSS ActionScript??????????? ?? [...]

  13. 13 Excellent FREE Flex Skins | BLOGNA.org Says:
    March 8th, 2009 at 6:38 am

    [...] Preview Download Source [...]

  14. Flex Skins una ayuda…. « Blog de Tecnologia RIA…. Hola Mundo….. Says:
    February 2nd, 2010 at 3:39 pm

    [...] Visualizar [...]

Leave a Reply

Follow sectore on Twitter