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…
—————————————————————-
SkinnableDataNavigator
You can think of this much like a SkinnableDataGroup, with 3 exceptions…
—————————————————————-
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
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!
On there way mate, along with some other bits and bobs.
[...] « Spark: DataNavigators [...]
[...] Spark: DataNavigators Spark: DataNavigators – Elements instead of ItemRenderers [...]
Great, is there any way to implement the ‘creationPolicy’ for this thing ?
Hi mico
Due to this extending
spark.components.DataGroupit doesn’t support creationPolicy, if you require that you should take a look at ourNavigatororNavigatorGroupcontainers.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
Hi Chris
They should be included in the Flex 4 spark SWC
http://code.google.com/p/tink/downloads/detail?name=tink_flex4_spark.swc&can=2&q=
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?
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.
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!
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.
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.
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
Thanks mate, so the Group is the just the navigator equivalent of a DataGroup and DataNavigator just its skinnable counter part?
Thats correct. The groups are low level containers/controls and the ones without the word ‘Group’ at the end are the skinnable ones.
Thanks Tink, waiting for the dynamic stuff
Updated and committed, I haven’t rolled out a new SWC though.
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
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 .
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!
You should get a CollectionEvent.COLLECTION_CHANGE event.
Can you mock up a simple example and enable view source?
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
Prem you need to check out the source. The SWC doesn’t have the fixed code in it.
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 ?
Also tried CollectionEvent.COLLECTION_Change , updated the example
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.
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.
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
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?
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.
Still not having any luck with this , help ?
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.
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.
Scratch that question re itemRendererFunctions, a bit of debugging exposed an unrelated bug and its working fine now. Cheers for really useful components!
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.-
Hey Matias
Are you using a StackLayout, and what kind of effect are your trying to achieve?