Spark: DataNavigators

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:

    (right click for source).

    The source for the code can be downloaded from our Google Code repository and includes

  • ws.tink.spark.components.DataNavigator
  • ws.tink.spark.components.SkinnableDataNavigator
  • ws.tink.spark.components.BorderDataNavigator
  • ws.tink.spark.skins.SkinnableDataNavigatorSkin
  • ws.tink.spark.skins.BorderDataNavigatorSkin
  • ws.tink.spark.layouts.supportClasses.INavigatorLayout
  • ws.tink.spark.layouts.supportClasses.NavigatorLayoutBase
  • ws.tink.spark.layouts.StackLayout
  • 41 Responses to “Spark: DataNavigators”

    1. James says:

      Useful stuff! I’ve just started the move from Flex 3 to Flex 4 & the shift in mentality about Viewstacks / Navigators got me good.

      Now we just need the awesome Efflex for Flex 4! ;)

    2. [...] Spark: DataNavigators Spark: DataNavigators – Elements instead of ItemRenderers [...]

    3. mico says:

      Great, is there any way to implement the ‘creationPolicy’ for this thing ?

    4. Tink says:

      Hi mico

      Due to this extending spark.components.DataGroup it doesn’t support creationPolicy, if you require that you should take a look at our Navigator or NavigatorGroup containers.

    5. Chris Ellem says:

      Hey Tink,

      These look great…

      Anyway of putting the swc in the source for us…or updating to the latest swc implementation..

      These examples point to an old swc that I couldnt find on google code.

      Please contact off list if possible

      Thanks

    6. Kevin says:

      I can’t seem to get this component to work in conjunction with the spark TabBar when using dynamic dataProviders. For example, if the TabBar dataProvider is bound to the id of the DataNavigator (such as in the examples) and the dataProvider of the DataNavigator is updated dynamically, the TabBar does not update and then errors are thrown when tabs are clicked. Has anyone else run into this and if so is there a better solution that just unlinking the DataNavigator and TabBar and then manually calling the state changes?

    7. Tink says:

      Hi Kevin

      This is a bug with the current public version. It is fixed I just need to get round to committing it, which I’ll try and do at the beginning of next week.

      • Kevin says:

        OK… Good to know I am not crazy. I’ll look forward to the update. I am using this component on a current project and it would really help me to not have to work around it. Thanks!

        • Tink says:

          Just wanted to give you an update Kevin.

          I’ve now fixed this issue for Navigator and NavigatorGroup, I’ll get the Data counterparts sorted this week I promise.

    8. Prem says:

      Hi,
      This is a really awesome for folks like me transitioning to Spark. Great work.
      I cant seem to locate the SkinnableDataNavigator in the source code or the published swc. Has this not been released yet? or am I missing it? Also noticed that the example is using ws.tink.spark.components. namespace but the source is ws.tink.spark.controls. namespace . I just wanted to make sure I am on the correct version of the source / swc. I am also waiting for the release that includes the bug fix with dynamic dataproviders as well. Thank you much.

    9. Tink says:

      Sorry for the confusion Prem. I re-package and renamed these components.

      The group is now

      ws.tink.spark.controls.DataNavigatorGroup

      and the skinnable one is

      ws.tink.spark.controls.DataNavigator

    10. Tink says:

      Updated and committed, I haven’t rolled out a new SWC though.

      • Prem says:

        Thank you mate. Any idea when a new swc will be out, I tried building it but had some issues checking out the project and building my own swc

    11. Prem says:

      Sorry to bug you mate, got a question When you update a dataprovider for the DataNavigatorGroup which event fires? I tried listening to the RendererExistenceEvent.RENDERER_ADD and doesnt seem like that one is firing.
      Does this have to do with the same issue as before? Would you kind enough to roll out a new swc for the updates please?
      Thank you very much , I am kinda stuck on this for some work and will have to go back to viewstack which I would hate to do .

      • Prem says:

        I guess I didnt quite make that clear, I have a ArrayList bound to a DataNavigatorGroup’s dataProvider and its updated dynamically, items are removed and added to it based on interaction. There are two of them in a skin , one visible at a time with two different Renderers. I have a LinkBar bound to each one as well.
        Basically when the ArrayList is updated and it looks like whichever one is visible on the screen at the time does not get the LinkBar updated, but now if I switch views to the other one , the LinkBar is updated but clicking on the LinkBar does not bring up the corresponding item in the DataNavigatorGroup.
        Thanks again, I hope this explanation is a bit better. The reason why I was trying to listen to the RENDERER_ADD event is to try and change the selectedIndex of the DataNavigatorGroup programatically whenever a new item is added to the ArrayList but that doest seem to be working either. Please help!

        • Tink says:

          You should get a CollectionEvent.COLLECTION_CHANGE event.

          Can you mock up a simple example and enable view source?

          • Prem says:

            Thank you for looking into this mate. Here is a real simple example of what I am trying to do. What I want is to be able to add / remove items to the resultsArrayList and have them show up in both the states, also be able to listen to events for when items have been added / removed and if the index is changed using the link bar. Thanks again for your time.

            http://64.72.142.162/prem/DataNavigatorGroupInSkinPart/DataNavigatorGroupInSkinPart.html

            • Tink says:

              Prem you need to check out the source. The SWC doesn’t have the fixed code in it.

            • Prem says:

              One step closer , I updated the app at the same url with the source this time instead of the swc

              http://64.72.142.162/prem/DataNavigatorGroupInSkinPart/DataNavigatorGroupInSkinPart.html

              Now I do get the links in the link bar but I do not get the corresponding views when I click on the links.

              PS: Do you have an amazon wish list ? :)

            • Prem says:

              Also tried CollectionEvent.COLLECTION_Change , updated the example

            • Tink says:

              You never adding any listeners to the DataNavigators as they never get ran through partAdded().

              This is because you have the skinParts defined with these id’s in your AS…

              resultListDataNavigator
              resultGridDataNavigator

              but the instances are named like so in the skin…

              resultsListDataNavigator
              resultsGridDataNavigator

              One of the dangers of having un-required skinParts. If you have these as required your code editor should give you an error. As a rule I always have my skinParts as required, unless I have a really good reason for them not to be.

              The view doesn’t get updated when you click on the mx:LinkBar as the LinkBar is an old MX component and it will only update the view if the view is a mx:ViewStack. The new s:Button bar s:TabBar etc apply these changes to ISelectableList, which the navigator classes implement. Always try to avoid using the old mx classes unless you have a really good reason too as well.

            • Prem says:

              Thanks for catching that, totally missed it . Thanks so much for your help, Il chance the LinkBar to a TabBar or some other spark component. Never did catch that , also I will start practicing the skinpart required true from now on. I am still getting used to this whole spark concept.

    12. Prem says:

      Was away from this project for some time. I am now able to get everything working except for programmatically setting the selectedIndex of the DataNavigator. There are no exceptions but setting the index doesnt seem to do anything. The spark Tabbar works fine and fires appropriate Index change events. The CollectionChange event fires and I set the selectedIndex but nothing happens. I also tried doing it in the Renderer Add event with the same result. The event is firing and there are no errors but setting the selected Index has no effect.
      http://64.72.142.162/prem/DataNavigatorGroupInSkinPart/DataNavigatorGroupInSkinPart.html

      • Tink says:

        Can you clarify what you actually want to do.

        The fact that the view changes when clicking on a button in the TabBar means programmatically changing the index works.

        You want to show a new view by default once it has been added?

        • Prem says:

          Yeah what I want to do is be able to set selectedIndex for the DataNavigator in code. Whenever a new view is added I want to show it by default, also when an existing view is changed and the user is in a different view than that, I want to be able to change it to the view thats changed, I am using a key value pair to keep track of what is being added to the views in the original code.

    13. Prem says:

      Still not having any luck with this , help ?

      • Tink says:

        I haven’t tested this but its most probably due to the component being in a validation cycle when it dispatches the event. Try waiting a frame before setting the index.

    14. danv says:

      Has anybody had any luck with using the itemRendererFunction with this DataNavigator. I’ve got a function hooked up but it doesn’t seem to get called.

    15. danv says:

      Scratch that question re itemRendererFunctions, a bit of debugging exposed an unrelated bug and its working fine now. Cheers for really useful components!

    16. Matias says:

      Hey Tink!

      I’ve been trying to apply some show and hideEffects to the renderers so that I have a little animation when I change the selectedIndex property but I can’t seem to get it to work.

      I also tried with the rendererAdd and rendererRemove events but still no luck.

      Could you point me in the right direction?

      Thanks in advance.
      Matias.-

    17. Shannara says:

      When googling for a Flex 4 version of ViewStack, I keep getting links to this blog post. However, I have not found any mentioning of a Flex 4 version of Viewstack anywhere …

      I wonder why Google’s search engine is showing that.

      Needless to say, hopefully one day, Adobe will release a complete/full version of Flex 4 :(

      • Tink says:

        Hi Shannara

        The Navigator, NavigatorGroup, DataNavigator and DataNavigatorGroup are all Spark replacements for the mx ViewStack, so Google is sending you to the right place. You would choose which works best for you and use them with a StackLayout.

    18. Tim John says:

      Hey Tink,

      I’ve noticed a lot of your classes are being integrated into the Apache Flex SDK (or at least there are a lot of new classes that share the same name) that currently appear in the ‘experimental’ namespace. Are you involved in this? Do you still Flex?

      Cheers,

      Tim

      • Tink says:

        Hi Tim

        Yep i still doing Flex. TBH I’ve not really been following the list. If you have any links etc that would be great, but I will also have a look into them as I did but some stuff ages ago in my whiteboard, but nothing really came of it back then.

    Leave a Reply