Best Practices: navigating through content

[Mediamonkey]

Ha lui,

Ik heb onlangs een vraag gesteld op de flexcoders mailinglist omtrent de beste manier om meerdere content-pagina's binnen een ViewStack weer te geven. Het mailtje staat hieronder in het engels. Moet geen probleem zijn toch? Zeker niet voor wie er überhaupt een antwoord op zou kunnen weten. :)

Greetz,
Mediamonkey

--

I'm building an application that will contain a ViewStack with multiple pages. After some experimenting I'm confused about the best practice for using the ViewStack as a content holder. I'd like any advice anyone might have on best practices please.

-- Situation --
I'm loading content via xml: 4 categories with each 50 pages full of content (text, images, mp3's and pre-CS3 swf's). The user should be able to navigate through these categories and each category's pages, using fancy transitional effects, AND be able to use History to go backwards and forwards through the path using a back/next button.

-- Solutions --

1. I could fill the ViewStack each time the categoryIndex changes with the amount of pages it has in the xml. That way I can easily navigate through them. However, when adding an image to each page, the memory begins to clog up. So I bound the source with an additional condition: source="{(visible) ? model.selectedPage : null}"

This works nicely, but now I get the feeling I'm not using the ViewStack's functionalities correctly. Using this method the ViewStack has 49 invisible page-objects without content and one currently visible with the correct content in it. Doesn't feel right for some reason.

2. I could add just one Page object to the stage instead of using a ViewStack and bind model.currentPage to its content. However, this way I can't use Effects to turn the page, nor States for a History functionality. So this isn't really an option.

3. I could build my own PageManager that contains 2 pages. One for the current content and another one to swap with, using an Effect. This manager should also be able to keep track of States and add them to a custom HistoryManager. The problem is that this will probably take up a lot of time, and I'm sure there must be a far easier way using the default components in Flex.


-- Question --
There must be many more examples around but I can't find the right keywords to describe the situation. I hope someone has been working on the same implementation as I am, and is willing to share his (or hers) experience with me / us all.

[TheDutch]

Ik heb de ViewStack ge-extend (als multiton class) en daar extra functionaliteiten aan toegevoegd om dit resultaat te bereiken. Deze subclass houdt een history bij van views die bekeken zijn tijdens zijn instantie en zorgt dat er niet meer dan één instantie van een zelfde component gebruikt kan worden. Wanneer er toch een zelfde component wordt toegevoegd dan negeert hij dit en gebruikt hij die uit de history. Uiteraard kan het history volledig of per component naam leeg gegooid worden. Omdat de ViewStack ge-extend wordt zijn effecten gewoon mogelijk en werkt het samen met de historymanager e.d. zoals je van een ViewStack gewend bent. Het werkt uitstekend! Gebruik het al ruim een half jaar voor meerdere grote projecten :).

Mijn ContentHolder werkt momenteel zo:

MXML

<ContentHolder id="main">
<!-- Eventueel het beginnende component. Niet verplicht! -->
<JouwComponent />
</ContentHolder>

AS

// Hiermee zet je het component als actief en wordt het vorige component
// automatisch een history item binnen de ViewStack omdat er altijd maar
// één zichtbaar kan zijn.
ContentHolder.getInstance("main").content = new JouwAndereComponent();

// In dit geval wil je component neerzetten die reeds in de history bestaat.
// Dit wordt herkent en dus nergeert hij deze nieuwe instantie (GC neemt hem mee)
// en gebruikt de reeds bestaande instantie.
ContentHolder.getInstance("main").content = new JouwComponent();

// In dit geval wordt eerst de eventuele history instantie verwijderd en
// vervolgens de nieuwe instantie toegevoegd. Op die manier reset je het component
// binnen de ContentHolder.
ContentHolder.getInstance("main").clearHistoryByName("JouwComponent");
ContentHolder.getInstance("main").content = new JouwComponent();

// Dit verwijderd alle instanties die in de history staan maar laat de actieve bestaan.
ContentHolder.getInstance("main").clearAllHistoryContent();

// Dit verwijderd alle instanties, zowel de actieve als die in de history.
ContentHolder.getInstance("main").clearAllContent();


Je kan wanneer dat nodig is de history laten checken op zowel component naam als een label wat je er aan meegeeft. Dus i.p.v. dat je de ContentHolder zo gebruikt: "ContentHolder.getInstance().content = componentInstantie", doe je dan dit: "ContentHolder.getInstance().setContent(componentIn stantie,'label')". Dit kan handig zijn wanneer je één component vaak gaat gebruiken met veel verschillende dynamische content. Momenteel zit dat er bij mijn ContentHolder nog niet in, maar binnenkort gaat dat er zeker aan toegevoegd worden. Ik hoop dat dit je geïnspireerd heeft om zelf zoiets te maken om jouw probleem op te lossen :).

[Mediamonkey]

Hey bedankt TheDutch.

Ik weet nog niet of ik 'm werkelijk ga maken, of dat ik het met een simpele SWFLoader oplos (kijken of ik er mee weg kom :P). In ieder geval bedankt voor de moeite om je oplossing te delen.

Groeten,
Mediamonkey