Wednesday, May 15, 2013

Flex SkinnableViewStack Component

The SkinnableViewStack is nearly identical to my ViewStack component except that it extends SkinnableContainer, rather than my DeferredContentGroup, to support skins.

My use-case for a skinnable version of the ViewStack is when defining views or components that need to have ViewStack-like functionality, but also include chrome (think of a wizard component). One could simply define a SkinnableComponent with a ViewStack as a skin part, but the component user wouldn’t have access to the ViewStack API outside the SkinnableComponent.

This SkinnableViewStack implementation replaces the Group-based contentGroup skin part with my Spark ViewStack component and then proxies the ViewStack API to the contentGroup.

I’ll post some example uses of this component soon.

Source  code located at: https://www.assembla.com/code/shinynet/subversion/nodes

7 comments:

  1. Hi Devlin,
    Im just chicking out your lib and ran into some problems with the examples given.

    When I try to run the SkinnableViewStack.mxml with Apache Flex 4.9.1 I get the following Error:
    [CODE]
    TypeError: Error #1034: Type Coercion failed: cannot convert spark.components::Group@9dba0a1 to mx.core.ISelectableList.
    at com.shinynet.shinylib.components::SkinnableViewStack/get length()[/Users/myName/myFolder/Workspaces/myWorkspace/ShinyLib/src/com/shinynet/shinylib/components/SkinnableViewStack.as:151]
    at spark.components.supportClasses::ListBase/commitProperties()[/Users/justinmclean/Documents/ApacheFlexSDK/frameworks/projects/spark/src/spark/components/supportClasses/ListBase.as:907]
    at spark.components.supportClasses::ButtonBarBase/commitProperties()[/Users/justinmclean/Documents/ApacheFlexSDK/frameworks/projects/spark/src/spark/components/supportClasses/ButtonBarBase.as:396]
    at mx.core::UIComponent/validateProperties()[/Users/justinmclean/Documents/ApacheFlexSDK/frameworks/projects/framework/src/mx/core/UIComponent.as:8227]
    at mx.managers::LayoutManager/validateProperties()[/Users/justinmclean/Documents/ApacheFlexSDK/frameworks/projects/framework/src/mx/managers/LayoutManager.as:605]
    at mx.managers::LayoutManager/doPhasedInstantiation()[/Users/justinmclean/Documents/ApacheFlexSDK/frameworks/projects/framework/src/mx/managers/LayoutManager.as:791]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[/Users/justinmclean/Documents/ApacheFlexSDK/frameworks/projects/framework/src/mx/managers/LayoutManager.as:1188]
    [/CODE]

    Any suggestions I might do wrong?

    Thnaks in advance,

    Timm

    ReplyDelete
    Replies
    1. Hi Timm,
      I just happened to upgrade the project to SDK 4.9.1 (from 4.6) over the weekend. I ran a handful of the samples (don't remember which, but not all) and it seemed fine, so I certainly may have missed something. I'll troubleshoot this and see what I can find out.

      Delete
    2. Timm, it appears to work fine on my end. The contentGroup in the SkinnableViewStack's default skin is an instance of my custom (non skinnable) ViewStack which extends Group and implements ISelectableList.

      Which IDE are you using? Along with upgrading it to SDK 4.9.1, I also converted the project to IntelliJ, so if you're using FlashBuilder or something else, you may need to configure some settings manually, most notably, make sure the defaults.css in the ShinyLib library project is being compiled into the library (so that the correct skin is used).

      If you want, I can also send you a precompiled swc of the ShinyLib library you can test with to help rule some things out.

      Delete
    3. Hi Devin, sorry I didn't answer earlier, I was a bit busy ...
      I will check back with the defaults.css and report.

      Anyway, a precompiled swc would be nice.

      Thanks for your help!

      Delete
  2. I'm using FlashBuilder and ran in to the same issue as Timm.

    Your hunch was right - the cause was that defaults.css was not being included in the library. I fixed this by moving defaults.css to the src folder and then Properties -> Flex Library Build Path -> Assets -> tick src/defaults.css

    FWIW I also had to change namespaces throughout the library from library://ns.shinynet.com/flex/shinylib to com.shinynet.shinylib.components.*, but maybe I'm missing a trick re setting up shinylib as a library somewhere?

    I've only just got everything running, so haven't put your components through their paces yet, but whatever the case, thanks for sharing the fruits of you labour.

    ReplyDelete
    Replies
    1. Thanks for the feedback Kevin. For the namespace issue, navigate to the library properties and then Flex Library Compiler. Towards the bottom of that screen:

      Namespace URL: library://ns.shinynet.com/flex/shinylib
      Manifest.xml: browse to the manifest.xml (should be a sibling to the 'src' directory).

      Delete
    2. I've added the compiled swc to source control, if that makes things easier. It's in the "release" folder. Or you can just download it from here
      https://www.assembla.com/code/shinynet/subversion/nodes/trunk/ShinyLib/release/ShinyLib.swc?_format=raw&rev=6

      Delete