How to deal with litle components with mvc+s?

maciekrei's Avatar

maciekrei

04 Nov, 2011 02:37 PM

Hello,
I'm a bit new in using robotlegs. I had to learn it for the sake of app, that I'm writing in my job. I've read Joel's 3-step tutorials about mvc+s in robotlegs and Im in the half of book about this framework.

My problem is about simple, little components, like buttons. In my case, I use buttons in my mxml form. In first Joels tutorial (about HelloWrold app), there was mediator and view just for one, single button. Does it mean, I have to make mediators and view for every single component in may app (list, button, etc)? It would result in hundreds of mediator and view classes when, if I made advanced application, so I doubt it's the right assumption.

Here are I my Main.mxml view file and MainMediator.as class in which I whanted to avoid defining 2 new views and mediators for back and next buttons and made it a bit different way. Could you please tell,if it is the right with mvc way or what made I wrong? I would appreciate it.

Main.mxml:

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           xmlns:view="pl.soppo.ucwizard.view.*"
           xmlns:local="pl.soppo.ucwizard.*"
           width="640" height="480" backgroundColor="#E8E8E8"
           >

<fx:Declarations>
    <local:MainContext contextView="{this}" />
</fx:Declarations>

<fx:Script>
    <![CDATA[
    import flash.events.MouseEvent;
    import pl.soppo.ucwizard.events.ChangedMenuEvent;
    import pl.soppo.ucwizard.model.FormViewModel;
    import spark.components.Button;
    import spark.components.Form;

    public function changeFormView(formNumber:int, formViewModel:FormViewModel):void
    {
        if ( formNumber >= 0 && formNumber < formViewModel.formViews.length)
        {
            var numElem:int = this.MenuForm.numElements;
            for (var i:int = 0; i < numElem; i++)
                if ( this.MenuForm.getElementAt(0) != null )
                    this.MenuForm.removeElementAt(0);

            formViewModel.formViews[formNumber].x = -12;
            formViewModel.formViews[formNumber].y = -12;
            this.MenuForm.addElement(formViewModel.formViews[formNumber]);

            if ( formNumber == 0 ) this.btnBack.enabled = false;
            else this.btnBack.enabled = true;

            if ( formNumber >= formViewModel.formViews.length-1 ) this.btnNext.enabled = false;
            else this.btnNext.enabled = true;

            formViewModel.currentForm = formNumber;
        }
    }

    public function setupButtons(handleNextClick:Function, handleBackClick:Function):void
    {
        this.btnNext.addEventListener(MouseEvent.CLICK, handleNextClick);
        this.btnBack.addEventListener(MouseEvent.CLICK, handleBackClick);
    }

    ]]>
</fx:Script>

<view:MainMenuView id="MainMenu" x="14" y="11" height="439"/>
<s:Form id="MenuForm" x="132" y="10" width="498" height="392">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <!--<view:StartFormView x="-12" y="-12"/>-->
</s:Form>
<s:Button id="btnNext" x="535" y="429" width="85" label="Next" />
<s:Button id="btnBack" x="445" y="429" width="85" label="Back" />

<mx:VRule x="122" y="10" height="440"/>

 </s:Application>

MainMediator.as:

public class MainMediator extends Mediator 
{
    [Inject]
    public var view:Main;

    [Inject]
    public var formViewModel:FormViewModel;

    override public function onRegister():void
    {
        view.setupButtons(handleNextClick, handleBackClick);
        addContextListener(ChangedMenuEvent.CHANGED, handleMenuChanged);
    }

    private function handleMenuChanged(e:ChangedMenuEvent):void 
    {
        view.changeFormView(e.menuNumber, formViewModel);
    }

    private function handleBackClick(e:MouseEvent):void 
    {
        dispatch( new ChangedMenuEvent(ChangedMenuEvent.CHANGED, formViewModel.currentForm - 1));
    }

    private function handleNextClick(e:MouseEvent):void 
    {
        dispatch( new ChangedMenuEvent(ChangedMenuEvent.CHANGED, formViewModel.currentForm + 1));
    }
}
  1. Support Staff 1 Posted by Till Schneidere... on 04 Nov, 2011 04:34 PM

    Till Schneidereit's Avatar

    The general approach is to mediate views that represent some
    functionality on a higher level in your application.

    In some cases, that means mediating just one button if that button is
    of high importance in your application and isn't very tightly
    connected to other parts of the display.

    In other cases, it can mean that you mediate a view consisting of an
    entire form with lots of input fields, to give just one example.

    So, really, it's all about looking at your views and deciding which
    parts of it are closely related enough to represent some atomic part
    of functionality on a higher level.

    hope that helps,
    till

  2. 2 Posted by maciekrei on 08 Nov, 2011 10:18 AM

    maciekrei's Avatar

    Thanks, that explained well my problem.

  3. Till Schneidereit closed this discussion on 08 Nov, 2011 10:23 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