fle[ks]ray

Adobe Flex is a still young Developer Framework. For that reason there are not so many Open Source Projects out there like for other topics. Anyway, there are a few jewels.

I translated the description of the Adobe Flex Components as good as I could. I am sure there are still mistakes in it. So don’t laugh about it... Ok.. First laugh but then do not hesitate and tell me about it ;-)

This website was started in German. Since more and more visitors from all over the world visiting fleksray.org I started to translate the pages. Other pages which are already translated are:
English weatherfleks page
English Flex theme page

If you know a good and free Flex Component which belongs to this site let me know. info@fleksray.org.

CardLayout PopUp ToolBar Drag and Drop TileList Reflection Manager Button Scrolling Canvas FlexBook, PageFlip Array Tool Auto Complete SuperPanel XML Tree Component Visual Graph ObjectHandles Horizontal Accordion Masked TextInput

Tags: UIComponent Author: Ralf Sczepan View Sample

With the CardLayout you can put any UIComponents on Stack-like order. If you click on one of the items, this card is set to the foreground and a event is triggered. This event contains the whole UIComponent you have clicked. So you can read the Id of the clicked component for example.
You can set the x- and the y offset for the UIComponents. That means you can set the overlap in both directions separately.
The example shows different images and one button in the "carddeck" but you can use an Class in the CardLayout it just has to extend the UIComponent.

offset_x:int	the offset (overlap) between the components in x direction
offset_y:int	the offset (overlap) between the components in y direction
cardOffAlpha:Number	with this attribute you can set the alpha of the non selected cards to a value less then 1
dataProvider: ArrayCollection	the dataProvider contains the UIComponents to show of the CardLayout.
cardClicked(ev:CardEvent)	the eventHandler for the ClickEvent in one of the cards
event:String	the event for the item in the menu which triggers a new PopUp Panel, possible values are: click, doubleClick, mouseOver

Example Code:

 The CardLayout


            <ks:CardLayout id="cl"
            			x="10" y="10"
                      offset_x="15" 
                      offset_y="15"
                      cardOffAlpha="0.7"
                      dataProvider="{dp}"
                      cardClicked="clickCardHandler(event)" />

                 

Tags: UIComponent, Menu, Panel Author: Ralf Sczepan View Sample Download PopUp ToolBar

A click in the the menu opens a new PopUp Panel. This Panel can contain your custom components. You can move, resize, minimize and close this PopUp Panel. You can choose whether your menu appears horizontal or vertical.

In depth

For each item in the menu you need to declare two components.
The first is for the icon in the toolbar, the second is for component which opens up if you click the menu item. For both Items you can use any UIComponent.
It makes sense to use for the icon the mx.controls.Button or the mx.controls.Image widget. For the second component you should use some kind of container like mx.containers.Canvas, HBox or VBox or similar. In this container you can place your own widgets or components.
The PopUp ToolBar contains two custom tags.
The first is the <PopUpToolBar /> component itself. It has the properties:

target:UIComponent	the target container where the PopUp Panel appears. If you leave this property empty, the ToolbarMenu uses its parent as default target.
dataProvider:ArrayCollection	contains the ToolBarMenuItems. A ToolBarMenuItem contains a pair of two UIComponents. The first is the icon for the menu, the second is Container component for the PopUp Panel.
direction:String	the two possible values are: horizontal or vertical

The second is the <ToolBarItem></ToolBarItem>.
All the properties (except: event) of the ToolBarItem effect the behavior of the PopUp Panel. This component has the properties:

title:String	the title of the PopUp Panel
x:Number	the x position of the PopUp Panel relative to the target.
y:Number	the y position of the PopUp Panel relative to the target.
width:Number	the width of the PopUp Panel, the default value is 200 pixel
height:Number	the height of the PopUp Panel, the default value is 200 pixel
event:String	the event for the item in the menu which triggers a new PopUp Panel, possible values are: click, doubleClick, mouseOver

Example Code:

 The Popup ToolBar
            
            <ks:PopUpToolBar id="myMenu" 
                 x="135" y="10" 
                 target="{myCanvas}"
                 paddingLeft="5" paddingTop="5"
                 paddingBottom="5" paddingRight="5"
                 borderStyle="solid" borderThickness="1"
                 borderColor="#CCCCCC"
                 dataProvider="{myDataProvider}"
                 direction="horizontal"/>
                 

 The dataProvider for the ToolBarMenu
            
            <mx:ArrayCollection id="myDataProvider">
                 <ks:ToolBarItem title="Hello World" 
                        x="30" y="40"
                        width="350" height="200"
                        event="doubleClick">

                        <!-- menu icon component -->
                        <mx:Image source="data/icons/world.gif" />

                         <!-- PopUp Panel component -->
                        <mx:Label text="Hello World"  />

                 </ks:ToolBarItem>
                 
                 <ks:ToolBarItem title="BackgroundColor" event="doubleClick">
                 	   <mx:Image source="data/icons/circle.gif" />
                        <mx:DateChooser/>
                 </ks:ToolBarItem>
           </mx:ArrayCollection>      
                

Tags: Text Input, UIComponent Author: Adobe Flex Team Website: http://weblogs.macromedia.com/flexteam/ View Sample

Patterns for text input

Really useful is this Component developed by the Adobe Flex Team, which you can use to mask your Text Input Fields. Using this Flex Component only certain inputs by the user are allowed. So far nothing new. But with the Masked Text Input the expected Input pattern is shown directly in input field. Probably there is no better way to show the user what input do you expect. Appearance and kind of the pattern are easily customized.

Tags: UIComponent, Accordion, horizontal Author: Doug McCune Website: http://dougmccune.com/blog/ View Sample

Turned by 90 °

There is nothing much to say about this Flex Component. The Horizontal Accordion has the same behavior and properties as the standard Adobe Component.

Tags: UIComponent, scaling, drag and drop Author: Marc Hughes Website: http://www.rogue-development.com/objectHandles.xml View Sample

Move it, Turn it, Scale it

This Component developed by Marc Hughes makes it possible the contained Child Components to scale, to turn and to resize. To use the Component include the *.swc file in to the library path. Then This Component developed by Marc Hughes makes it possible the contained Child Components to scale, to turn and to resize. To use the Component include the *.swc file in to the library path. Then wrap the Object which you want to add the new behavior with the Tag <oh:ObjectHandles ...></ObjectHandle>.
Seems the ObjectHandle get problems if you use it for a more complex Component which contains own child's (e.g. a panel with a textArea and buttons). Anyway it's really useful Flex Component.

Tags: UIComponent, graph, data Author: Jason Bellone Website: http://code.google.com/p/flexvizgraphlib View Sample

Visualize complex data structures

The Visual Graph is a Flex Component for visualizing data. The library makes it possible to show complex data structures in visual way. The library uses Interfaces which are easy to adapt for your own needs. You can implement your own algorithms. Choose the layout option "ForceDirected" for moving the notes of the graph with the mouse. All depending knots and leaves moving to their new position like pulled on a rubber band.

Tags: UIComponent, Pageflip, book Author: Ely Greenfield Website: http://quietlyscheming.com/flexbook View Sample

Turn the page

With the FlexBook by Ely Greenfield you can do now anything what is possible with an ordinary book also in the internet... and much more.
There are already a few implementations of this component in the flash world known as PageFlip. Ely Greenfield converted this useful thing into MXML. There is no wish left. You can include anything in the FlexBook not just pictures and text. A page can contain any standard Flex Component even charting components.
Ely Greenfield shows a few examples for using the FlexBook at his website.

Tags: UIComponent, XML, tree, menu Author: Ralf Sczepan Website: http://fleksray.org View Sample

An ordinary tree

At the first sight this Component looks like an ordinary tree and indeed it is. This Tree is actually meant for non programmers. It's easy to configure by two xml files. You can assign web links to the tree leaves and decide whether they open in the same or a new window. It's also easy to change the appearance of the tree. Have a look in the config files for further details. config.xml data.xml.

Tags: UIComponent, drag and drop, panel controls Author: Wietse Veenstra Website: http://www.wietseveenstra.nl/blog View Sample

Desktop Like

A real useful Flex Component is the SuperPanel developed by Wietse Veenstra. With this extension of the Adobe standard Panel the static Flex Panel changes to a Panel like in the Windows OS. You can close, resize, maximize, minimize and move the panel. The use of the SuperPanel is incredible easy. Include the sources of the SuperPanle within your Namespace and use <yournamespace:SuperPanel> instead of <mx:Panel>. That is it. I also used this component in the Fleksristal Theme. For another example look here: Sample 2

Tags: UIComponent, reflection, panel Author: Wietse Veenstra Website: http://www.wietseveenstra.nl/blog View Sample

A view in the mirrow

Another Flex component by Wietse Veenstra.
Actually there is no application out there which does not work without out the ReflectionManager. But honestly isnt it fun to use this thing and give your application something special. So did I and used the Reflection Manager for the BluePlastic theme and the Flekristal theme.

Tags: UIComponent, Tile, TileList, drag and drop Author: Ely Greenfield Website: http://quietlyscheming.com View Sample

Like Picassa

With the extended TileList by Ely Greenfield is it easy move items by Drag and Drop around in a TileList. The surrounding Tiles giving space for the moving item. It is also possible to move items by Drag and Drop from one List to another. In this case the item is also available in the dataProvider of the list where the item moved. Moving the item holding the shift key copies the item in to the new list.

Tags: ActionScript, Array Author: Ruben Schwieringa Website: http://www.rubenswieringa.com View Sample

The Array Tool...

as two two static methodes adjustValues and getValueMatchIndex. The first performes a mathematical operation on each member of the array. Its up to you to implement. The second method returns the index of a choosen array member.

Tags: UIComponent, autocomplete Author: Adobe Flex Team Website: weblogs.macromedia.com/flexteam/ View Sample

Extended text input Field

Since Ajax you can find it everywhere. The text field which suggest you all possible values for a text input field. The more you type the smaller are the choices you can make. The possible suggestions need to be provided in the DataProvider of the Auto Complete Component.

Tags: UIComponent, Canvas, scrolling Author: Doug McCune Website: http://dougmccune.com/blog/ View Sample

Scrolling in every direction

The Canvas Scrolling Component looks at the example page a little rough. It’s not an eye candy. But don’t underestimate this thing. With this Flex Component are you able to implement applications like Google map or Google earth.
If you come close to the edge of the widget with your mouse the content moves in the according direction. It’s perfect to move around in a large map which doesn’t fit in your application.