Mobile Application Screen Flow with Transitions

tangent's Avatar

tangent

10 Oct, 2013 12:40 AM

I am creating a mobile application which involves some screens, but with little experience, I run into some architectural difficulties orchestrating loosely decoupled components to perform a contiguous user experience.

Let's say I have a service layer which has a few generic CRUD methods in an ASYNC fashion, in other words, a single method (for example UpdateEntity) in the service layer may have multiple entry points.

So let's say from Home screen user can click an entity, which leads them to Edit screen. Upon completion of edit, data will be sent to service. When service has finished performing the update, the "Edit" screen would animate back to "Home" screen, and the home screen will show a jazzy animation on the edited item with the new values.

On the other hand, let's say there is another screen B which would also allow user to perform edit on the same entity, but it does not require any transition and animations.

I wonder what would be a clean way to achieve this. I am currently on RL 1.5.2, but I wonder if RL 2 would address this nicely in a more straight forward fashion; I also read a bit on Finite State Machine by Joel Hooks, but I lack some samples to dive deeper to understand it.

Any input would be greatly appreciated!

  1. Support Staff 1 Posted by Ondina D.F. on 11 Oct, 2013 08:01 AM

    Ondina D.F.'s Avatar

    Hey tangent,

    I also read a bit on Finite State Machine by Joel Hooks, but I lack some samples to dive deeper to understand it.

    The FSM is meant to manage application's states. Transitions /effects are view's states and thus the logic to handle them belongs to the views.

    The Home view could enable or disable the transitions depending on some conditions.

    When service has finished performing the update, the "Edit" screen would animate back to "Home" screen, and the home screen will show a jazzy animation on the edited item with the new values.

    I guess that you're dispatching an event (from a model or from view's mediator) when the update has finished.
    If the Home view holding the navigator would be mediated, HomeMediator could listen for that event and pass the event payload to view's API, which will perform the transition with or without effects.
    Where you store that information (transitionsEnabled true or false) depends on your setup. It could be a Model or it could be each individual view (through their mediators) dispatching an event with the flag set to true or false.

    Does that make sense to you?

    Ondina

  2. 2 Posted by tangent on 20 Oct, 2013 06:25 PM

    tangent's Avatar

    Thanks for your advice, I am just having trouble to decide where the "transition" logic resides, as well as animation orchestration (let's say it is a sequence of animation that starts from DetailView, then ViewNavigator, then HomeView).

    On one hand that can be put in model, but the model would then have certain logic to decide under what circumstance animation should happen; another place to put it would be Mediator, but it is against the simplicity nature of Mediator where "if"/"switch" should stay away from.

    I wonder if there would be a good practice to have this kind of conditional view-transition workflow implemented as the moving parts are quite loosely coupled.

  3. Support Staff 3 Posted by Ondina D.F. on 21 Oct, 2013 03:48 PM

    Ondina D.F.'s Avatar

    There are 2 aspects to your problem. One is the navigation, and the other is the animation.

    How are you managing the navigation? Do you have some buttons in a navigationContent?
    Or a list with the views' names? Or should the navigation be triggered by some other action, like you said in your first post, after the 'service has finished performing the update'?

    In my previous post, I said that the Home View would contain the navigation, but if I understand correctly, you have a view that you call ViewNavigator that's responsible for navigating between different Views: HomeView, DetailsView, OtherView...
    So, this ViewNavigator will have to decide which view to push next. But, I don't know exactly how you want the navigation to happen, i.e. based on user interaction or depending on the state of some data. Would it be always the same flow, from Details to Home, from Home to OtherView, or you could go from Details to any other view? You mentioned the FSM. Maybe it would make sense to use it, if navigating between different views would somehow reflect the application's states.
    There is also Neil's state machine:
    https://github.com/AS3StateMachine/StateMachine

    Now, the animation/transition effects. It is not clear to me who is performing the animation. I thought you'd let the ViewNavigator apply some effects when pushing a new view, but it seems that each view has its own animations?

    On one hand that can be put in model, but the model would then have certain logic to decide under what circumstance animation should happen;

    A NavigationModel could contain a mapping of view classes to animations/effects - a collection of VOs or simply:

    [{"index":0, "view":SomeView, "withEffects ":true}, 
    {"index":1, "view":AnotherView, "withEffects ":false}, 
    {"index":2, "view":OtherView, "withEffects ":true}]
    

    Or a mapping of "fromView", "toView", "withEffects". As I said in my first post, when the service is done, it could dispatch an event with "fromView" as a payload , a command would access the model and another event (from model or command) would let ViewNavigatorMediator know which data to pass on to its view.
    I'm imagining this flow:
    user is editing EditView->update button clicked->event with the view name as payload->mediator re-dispatches event->command->service performs update, then dispatches event->command accesses NavigationModel ->event with VO containing "toView", "withEffects"->ViewNavigatorMediator passes the VO on to ViewNavigator's API -> navigation w/o effects.

    The Model doesn't have to decide anything and for sure it shouldn't be in charge of the animation. How you use the Model depends on your use case.

    Maybe it would suffice to pass the array collection on to the view in charge of the navigation, say as a data provider for a list. The user would select an item from the list and in the handler you'd know if there is a need for effects or not.

    another place to put it would be Mediator, but it is against the simplicity nature of Mediator where "if"/"switch" should stay away from.

    Exactly! A Mediator shouldn't have to do such work :)

    There is also a utility for robotlegs 1: https://github.com/epologee/navigator-as3/tree/master/source/com/ep...
    No idea if it's what you need, because I've never used it.

  4. Ondina D.F. closed this discussion on 15 Nov, 2013 11:44 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac