Custom Circle Layout for Flex Spark Components

Have been working with the Flex 4 SDK recently and wanted to make a quick post about how I made a new Layout using the new Flash Builder Beta.

If any of you have tried to make custom layouts in Flex 3.0 or earlier, then the new graphics code is going to be a breath of fresh air.

The basis of it is to start by writing your custom layout component as follows:

package joc
{
  import spark.components.supportClasses.GroupBase;
  import spark.layouts.supportClasses.LayoutBase;
  import spark.primitives.supportClasses.GraphicElement;

  public class CircleLayout extends LayoutBase {
   public const CIRCLE:Number = Math.PI * 2.0;

   private var _startRot:Number = 0.0;
   public function set startRotation( rot:Number ):void {
   _startRot = rot * CIRCLE;
   target.invalidateDisplayList(); // notify the target container that the layout has changed
  }

  public function CircleLayout()
  {
   super();
  }

  public override function updateDisplayList( width:Number, height:Number):void {
   var numItems:int = target.numElements;
   var cx:Number = width/2.0;
   var cy:Number = height/2.0;
   var scale:Number = ((width+height)/2.0)/640;
   for(var i:int = 0; i
    var item:GraphicElement = target.getElementAt(i) as GraphicElement;
    var angle:Number = _startRot + ((CIRCLE / numItems)*i);
    var nx:Number = (Math.cos( angle ) * (width/2.5) ) + cx;
    var ny:Number = (Math.sin( angle ) * (height/2.5) ) + cy;
    item.setLayoutBoundsPosition(nx-50, ny-50 );
    item.width = 100 * scale;
    item.height = 100 * scale;
  }
}

The updateDisplayList method is where the code handles repositioning and sizing of added Elements. My code works by taking each Element one at a time and positioning them around the circumference of a circle. The one slight enhancement that I have included is the 'startRotation' setter which changes the angle at which layout starts and then tells the Component which this layout is placed on to recalculate it Display List.

Example Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo"
  creationComplete="Setup()"
  xmlns:joc="joc.*">
  <fx:Script>
   <![CDATA[
   import spark.primitives.Ellipse;
   import mx.graphics.SolidColor;

   private const NUM:int = 7;

   private function Setup():void {
   for(var i:int = 0;i < NUM; i++) {
    addCircle();
   }

   private function addCircle():void {
    var e:Ellipse = new Ellipse();
    e.width = 100;
    e.height = 100;
    var c:int = Math.random() * 0xFFFFFF;
    e.fill = new SolidColor(0xFF0000 | c);
    circles.addElement( e );
  }

  protected function button1_clickHandler(event:MouseEvent):void
  {
   addCircle();
  }

  ]]>
  </fx:Script>
  <s:Group id="circles" width="100%" height="100%">
   <s:layout>
    <joc:CircleLayout startRotation="{startRot.value}" />
   </s:layout>
  </s:Group>
  <s:Button label="Add Circle"
   click="button1_clickHandler(event)" />
  <s:HSlider id="startRot"
    width="100%"
    minimum="0.0" maximum="1.0"
    stepSize="0.001" valueInterval="0.001"
    liveDragging="true"
  />
</mx:VBox>

Although some of this code may be unfamiliar to Flex 3.0 users, the layout is simply placed within any 'group' of components to start using it. Here you can see my CircleLayout used in a group tag. Then the 'Setup' method is called to 'Ellipses' (also a new tag) and the layout is invoked as needed by the Framework. LiveDragging is enabled on the Slider to allow you to interactively change the start angle from which the Layout calculates places around the ellipse.

p.s. please let me know if the layout of this post has any problems in your browser as the blogging software was fighting me over inserting code samples.

Word toy

Recently happened upon this great word toy from http://www.wordle.net that takes a selection of text and spits out a graphic as shown here: (click to enlarge)

It has a great many options that will change the layout, fonts and colouration.

I used an early page from this blog, so the word range is a bit limited, but I can see a great many uses for this.

So Wolfram Alpha goes live on Friday 15th May.

There has been a lot of speculation about how this is going to be the Google killer and how it is going to be the new search.

Wolfram Alpha will likely be an interesting take on Search but it is unclear yet whether it will be applicable to the general publics needs, on launch, or if it is more likely going to be used as a research tool. The previews have suggested that this new search engine will give us ways to look at data about and from the internet and slice it up into easily digestible reports. They suggest that it will allow us to find and cross reference search results in ways that we just haven't had access to previously.

Recent reports about Google Search suggest that they too are working on similar ways to serve up different aspects of the internet so it will be interesting to the discover the two companies differing approaches.

Although many people use Google with out really thinking too much about what is returned, the industry that has grown up offering ways to get your site at the top of any search results listing, with search engine optimisation ( SEO ), will likely be working themselves into a frenzy over the next few weeks.

Google Search has become a crucial marketing and discovery tool for many businesses and I think that, as Search becomes more sophisticated, the industry that surrounds it will have to develop better ways to connect customers with businesses using these new tools.

If Wolfram Alpha can live up to it's own hype then it could change the way we use the internet. Recently, Twitter and Facebook have opened up new channels of communication. Here's hoping that Wolfram Alpha and Googles new experiments will give us another, richer and more accessible experience on the web.

Hello, World

Testing out the new Double Dare blog, publishing from Adobe Contribute.

Come back soon to see regular posts about the code developments and discoveries we are working on.