Archive for the ‘Flex 4.0’ Category

« Older Entries

Primitives

Wednesday, June 30th, 2010

I know its been very quiet here of late, but I’ve been pretty active on our Google Code.

A couple of weeks go someone who’d checked out the source left a post asking what Rect was for and how it differed from the Rect found in FXG. I thought it was about time I wrote a post to cover it.

I was building a dashboard component for a client a couple of weeks back, much like the one found on the main BBC homepage, or iGoogle, where you can add/removed and rearrange the position of the items shown. Much like those I wanted to show the user where the new item would be dropped with a rectangle that had a dashed stroke, and I wanted to be able to defined this in my skin, in MXML using a dropIndicator, to keep things nice and readable.

The problem is that Flash doesn’t support different stroke types, just different weights, and Adobe’s implementation of FXG also doesn’t allow for different stroke types. It’s true I could have drawn it with a complex Path, but then it wouldn’t have scaled correctly.

So I set about getting some primitive classes together where I could specify custom stoke types the result of which are below. You can also specify custom fill types, although I’m not sure they’ll be as useful as we already have BitmapFill. Using a the lineBitmapStyle() method for the stroke just didn’t cut it as the BitmapData needs to change depending on the direction of the stroke.

I’ve covered the primitives that are included in FXG, but the code is by no means complete and still needs some work to support missing drawing methods, and to fully implement some of the methods that are included.

I’ve also added 2 types of stroke, SolidColorDash (probably the most useful), and SolidColorHatch.

The classes Dash and Hatch can also be used in pure AS if required (props to Senocular where the basis for these classes was lifted).

(more…)

Posted in ActionScript, ActionScript 3.0, Flex 4.0 | 4 Comments »

SemiCarouselLayout

Friday, May 21st, 2010

So it’s about time I punted out some layouts that I have hanging around, most of which are all based upon NavigatorLayoutBase.

NavigatorLayoutBase can be considered a base layout class for use with our navigators (NavigatorGroup, Navigator, DataNavigatorGroup, DataNavigator, BorderDataNavigator), but can also be used with the standard Flex 4 containers/controls. I published an example of StackLayout some time ago which lays a container out as a ViewStack (i.e. a single child at a time), which is the default layout class for our navigators.

SemiCarouselLayout has a couple of classes in between NavigatorLayoutBase.

  • EasedNavigatorLayoutBase – eases the layout from state to state.
  • PerspectiveNavigatorLayoutBase – allows customization of the PerspectiveProjection applied to the layout target.

    • SemiCarouselLayout lays the children out as if they in the front half of a carousel. Means its not a complete carousel it means the number of items can be infinite without affecting the number of visible items. There’s a few options for the layout which are easiest to describe with an example, so I’ve implement the layout with a couple of components below… (drag and drop is still to be implemented)

    (more…)

    Posted in ActionScript 3.0, Flex 4.0 | 7 Comments »

    Flex 4: ExcludeSelectionList

    Friday, May 14th, 2010

    This component was in part inspired by some work Steven Shongrunden had done and a task that we had on a job.

    We didn’t want to have to change our data objects to hold a hard coded value to check whether the item should be selectable or not as in Steve’s version so I came up with this.

    There’s 3 ways you can specify to exclude an item from being is selectable.

  • You can add a type to exclude using excludeType, or a lost of types to exclude using excludeTypes.
  • You can add a index to exclude using excludeIndex, or a list of indices to exclude using excludeIndices.
  • You can specify a function that returns true or false on whether the item should be selectable using excludeFunction. The function takes 2 paremeters, the first an int which is the index of the item, and the second an Object which is the item itself.

    • The example below shows each of these being used, but you could also use a combination of the 3 methods above to exclude items.

    (more…)

    Posted in ActionScript 3.0, Flex 4.0 | 1 Comment »

    Flex 4: Modules

    Wednesday, April 7th, 2010

    If you’ve switch over to Flex 4 or in the process of switching you’ll notice Modules are missing from spark.

    We didn’t want to be stuck with the old ModuleLoader and Module based on VBox and LayoutContainer, so here’s our new versions based on Group.

    They should work pretty much the same as the mx versions with one change, there is now an additional loadPolicy property.

    You can use this property to specify when the ModuleLoader should load its content. This was added to solve a problem I’d ran into a few times with the mx version. I’d have multiple ModuleLoaders in a ViewStack but they would all load immediately and at the same time. It didn’t make sense to load a Module unless the user actually wanted to view it.

    ModuleLoader.loadPolicy has 4 valid values

  • ModuleLoadPolicy.ADDED – load when the ModuleLoader is added to a displayList
  • ModuleLoadPolicy.ADDED_TO_STAGE- load when the ModuleLoader is added to the stage
  • ModuleLoadPolicy.IMMEDIATE- load immediately (the same as the mx ModuleLoader)
  • ModuleLoadPolicy.NONE- do not automatically load. ModuleLoader.loadModule() must be manually invoked to load the module

    • (more…)

    Posted in ActionScript 3.0, Flex 4.0 | 11 Comments »

    Flex 4: UIComponent.depth

    Wednesday, March 31st, 2010

    Do you remember using MovieClip.getDepth() & MovieClip.swapDepths(target:Object) in AS 1.0 and 2.0. This was how we used to work with the z-sorting of MovieClips. Oh the joy!

    With the release of AS 3.0 depths went out the window and the display list was introduced, the index of the child denoting the z-sorting of the DisplayObjects. This works fine but can be tricky to manage if the z-sorting is changing as you don’t have a continous way of accessing the same DisplayObject via an index, unless you push all the children in another Array to use as this reference.

    Flex 3 also uses the index of items in the display list for layout purposes. For instance a VBox will render the child at the lowest index at the top, and the child at the highest index at the bottom. If for instance you had a negative verticalGap, you were constrained to the index with a higher index in the display list overlapping those at a lower index. If you change the index of a child to bring it to the front, its position in the VBox was also change.

    Flex 4 re-introduced depths.

    (more…)

    Posted in ActionScript 3.0, Flex 4.0 | 7 Comments »

    Non-embedded Assets & Spark BitmapImage

    Monday, March 22nd, 2010

    Steven Shongrunden of Adobe made a post on this subject last week which I commented on, but I was unable to post the MXML code in the comments.

    I thought it would be worth posting it here, to show an MXML only version.

    (more…)

    Posted in Flex 4.0 | No Comments »

    Spark: Alert

    Thursday, March 18th, 2010

    Spark doesn’t include an s:Alert control and I’d put one together previously as a bit of test so I thought I’d push it out there.

    It differs in its use from the mx:Alert in that you can add whatever buttons you want instead of being limited to a single set of predetermined flags (you can create you own predetermined flags as constants in a class as used in the example).

    The component supports the following SkinParts (all are optional)

  • messageDisplay : TextBase
    - defines the appearance of the message text
  • buttonGroup : Group
    - defines the appearance of the button area
  • iconGroup : Group
    - defines the appearance of the icon display

    • and the following inherited from spark.components.Panel…

  • controlBarGroup : Group
    - defines the appearance of the control bar area
  • titleDisplay : TextBase
    - defines the appearance of the title text

    • The inherits the styles from Panel and adds the following:

  • buttonStyleName
  • messageStyleName
  • titleStyleName

    • On clicking a button the Alert removed itself and dipatches a CloseEvent specifying the index of the button click in CloseEvent.detail.

    (more…)

    Posted in ActionScript 3.0, Flex 4.0 | 4 Comments »

    Spark: DataNavigators – Elements instead of ItemRenderers

    Friday, March 12th, 2010

    In the previous post I gave an example of our DataNavigators in action as you would expect them to be used, with a dataProvider and ItemRenderer but you may well be asking…

    I want navigators where all the elements can be different, not driven by data all using the same ItemRenderer.

    This is the obvious usage of navigators as we know them (ViewStack, TabNavigator).

    Well DataGroup has a sneaky little secret. It isn’t just capable or reusing ItemRenderers, its also capable of achieving deferred instantiation on elements defined inside it (thanks to Ryan Frishberg for this info).

    To do this you set the itemRenderer property to null, the add your elements inside an ArrayList. Using this method its only when the element is required to be displayed that it is created.

    Unfortunately this isn’t a complete solution as it isn’t capable of handling FXG as an element, it has to be wrapped inside another container.

    I developed a DeferredGroup class to get over this limitation, but its success is dependent on changes to the SDK. I have 2 items in the Flex Bugbase referring to this, so if you would like to DeferredGroup (a Group that supports deferred instantiation and FXG), please go and vote on them…

  • Make it easier to extend Group
  • Don’t not hard code GraphicElement to Group

    • The components used in the following example are the same as the example in the previous post, but instead of using an ItemRenderer and setting a dataProvider the elements that need to be displayed are specified (check the numElements count, compared to the previous examples numRenderers count):

    (more…)

    Posted in Flex 4.0 | 9 Comments »

    Spark: DataNavigators

    Tuesday, March 9th, 2010

    At the last LFPUG I did a presentation on Flex 4 where I went through what I thought were the fundamental changes, and they showed some custom stuff I’d been working on. The plan was to then do a post on each slide explaining in a little more detail (which is still the plan), but there’s a few posts that talk about Navigators in Flex 4, and for anyone who visits this blog often you’ll be well aware of how much I use navigators.

    With this in mind I thought I start posting some examples and open sourcing the code I’ve been working on, so today I thought I’d start with DataNavigators.

    There are 3 components to talk about here. They all support virtualLayouts as long as the layout supports it. In building these I’ve ask a lot or questions of what others expected and try to implement the re-usability that is inherent in the spark framework.

    —————————————————————-

    DataNavigator

    You can think of this to much like a DataGroup with 2 exceptions…

  • the layout must implement INavigatorLayout (a custom interface I’ll cover another day).
  • it implements ISelectableList

    • —————————————————————-

    SkinnableDataNavigator

    You can think of this much like a SkinnableDataGroup, with 3 exceptions…

  • the layout must implement INavigatorLayout (a custom interface I’ll cover another day).
  • it implements ISelectableList
  • the SkinPart it uses for displaying content has to be a DataNavigator

    • —————————————————————-

    BorderDataNavigator

    BorderDataNavigator extends SkinnableDataNavigator adding a border, in the same way as BorderContainer extends SkinnableContainer.

    —————————————————————-

    Here’s an example of the 3 of them in action using itemRenderers:

    (more…)

    Posted in Flex 4.0 | 6 Comments »

    AnimateTransitionShader

    Monday, January 11th, 2010

    A couple of days ago Corey Lucier posted a couple of nice examples of the new Flex 4 AnimateTransitionShader.

    Like Flex 3, the new effects don’t handle being interrupted well. They jump abruptly to the end of the current IEffectInstance, then start a new one. The abruptness is what your trying to get away from when you decide implement an effect, opting for a smooth transition.

    With a bit of tweaking about it was fairly easy to hack around this. Here’s what i changed

  • When an effect instance is interrupted it takes a snapshot of the view, and passes this a a bit of other info to the effect factory.
  • The effect instance then stops the final value being applied.
  • When creating an effect instance the effect factory looks inside itself for any interrupted effects that have the same target. If it finds one it passes the data through to the instance.
  • The effect instance then uses the snapshot to transition from.

    • In the examples below I’ve added a couple of more states and a ButtonBar to navigate. I’ve also removed the easing to make it a little simpler to see. If you click around a bit you should see the difference.

    (more…)

    Posted in ActionScript 3.0, Flex 4.0 | 6 Comments »

    « Older Entries