PDA

View Full Version : MVC correct approach communicating with view



tf.alves
20 Oct 2011, 7:01 AM
Hello everyone, I am having quite a doubt about the communication between view and controller.

This is my code:

Login View

App.views.Login = Ext.extend(Ext.form.FormPanel, {

fullscreen: true,

initComponent:function(){

var bottomDock, loginButton, fields;

loginButton = {
id: 'loginButton',
text: 'Entrar',
ui: 'confirm',
scope:this,
handler:this.onLoginAction
};

bottomDock = {
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'spacer'
},
loginButton
]
};



fields = {
xtype: 'fieldset',
cls: 'loginFieldSet',
title: 'Dados do utilizador',
instructions: 'Por favor insira os seus dados de utilizador',
defaults:{
required: true,
labelAlign: 'left',
labelWidth: '40%',
useClearIcon: true
},
items:[{
xtype:'textfield',
name: 'name',
label: 'Utilizador',
},{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
}]
};

Ext.apply(this, {
scroll:'vertical',
dockedItems:[bottomDock],
items: [fields]
});

App.views.Login.superclass.initComponent.apply(this);

},

onLoginAction: function(){


this.setLoading(true);

},

invalidateFields: function(){
this.setLoading(false);
}

});
Ext.reg('Login', App.views.Login);



Login Controller:

Ext.regController('Login', {


/// index action
index: function(options)
{

if ( ! this.loginView)
{

this.loginView = this.render({
xtype: 'Login'
});

}

this.application.viewport.setActiveItem(this.loginView, options.animation);


},

validate: function(params){




}

});


What I want to achieve is: The user presses the login button on the view, the view masks itself with a loading message, at the same time it calls the 'validate' action on the controller. In it's turn, the 'validate' action should do it's own stuff, and then trigger the invalidateFields on the view.

My problem is, I've seen many people doing this message passing between view and controller in several different ways... Can anyone please tell me which way should this be done?

By the way, I was calling the action on the controller using this:

Ext.dispatch({
controller: 'Login',
action: 'validate',
data:this.getValues()
});


I don't know if it's the correct manner or not, but it seems the most logical to me. I just don't if it is the best way. Also, I have no idea how should I call the 'invalidateFields' on the view.

Thank you all for the patience in helping me with this :)

el_chief
7 Nov 2011, 10:10 PM
There's no easy answer.

I would read martin fowler's thoughts on MVC:

http://martinfowler.com/eaaDev/uiArchs.html

s (http://martinfowler.com/eaaDev/uiArchs.html)ome options to consider:

Passive View: zero logic in the view (other than maybe template formatting). Controller handles all clicks etc, and writes to and reads from the model, and updates the view when need be. easy testability

Supervising Controller: allow some simple data binding in the view, but the controller handles anything complicated. marginally harder testability but a bit less work

HTH

tf.alves
8 Nov 2011, 3:00 AM
Thanks for the explanation on the MVC pattern, although it was not my question :)
I have a complete understanding of how this pattern works, what I'd like to know is how should I do the calls between View and Controller.