PDA

View Full Version : MVC Sample App



ingo.hefti
2 May 2013, 1:08 AM
As there are a lot of questions in this forum about basic MVC stuff, I built a little sample app (using the WebStorm IDE) that should help to understand of few of the concepts:

https://dl.dropboxusercontent.com/u/8085058/SenchaForum/testmvc-2013-11-04.zip

This is a full runable project made with ST2.3.0. and CMD4. Just expand it into your local web directory and launch it with 'localhost/testmvc'. It should be quite self explaining when you look at the code. Almost every view has a controller with the same name that does the logic.

The app handles the following:
- the main part of the app is a TabBar with 3 tabs
- the Guests tab is a NavigationView with a list of guests
- the list can be filtered
- a tap on a item shows the detail (form)
- it shows how you can handle buttons in a view or form
- it shows how you can handle buttons on a navigation bar
- the Settings tab is just a list with the countries
- its controller shows how to load it with a programmatically built array of data
- the country list is used for the selectfield in the guest detail form

Open the devtools (F12) console to see some logging when you interact with it.

Disclaimer: this is just one way of doings things. There may be other and even better ways (and there might be some bugs as well). But this is as most of my apps currently work.

Comments and additional requirements/wishes welcome!

466794668046681

TButton
2 May 2013, 2:39 AM
I really like the way you used "action" in config. Thanks for sharing.

_stant_
15 Sep 2013, 9:16 AM
Hi, thanks for sharing:)

There is something I don't understand in your sample app; as you are not using routes, how do you switch from one controller to another ?

Like in GuestList.js in the onGuestListItemTap, you push the detail view in the navigationview, but when is the GuestDetail controller loaded (and refs assigned etc...) ?

thx

pravnviji
18 Sep 2013, 10:17 PM
Thanks for sharing. Really its help me to understand the flow of MVC. =D>

ingo.hefti
18 Sep 2013, 11:41 PM
There is something I don't understand in your sample app; as you are not using routes, how do you switch from one controller to another ? Like in GuestList.js in the onGuestListItemTap, you push the detail view in the navigationview, but when is the GuestDetail controller loaded (and refs assigned etc...) ?
All controllers are loaded when the app is launched. Have a look at the controller section in app.js. Does that answer your question?

_stant_
19 Sep 2013, 12:35 AM
Yep, actually I figured this out in the meantime, I understand that it is a pertinent design in a desktop browser window, but damn, that seems like a very inefficient design for mobile app development.

Anyway, I guess that's just a matter of taste, but it seems quite shocking for a native app developer.

Thx again, your post was clearly helpful to me.

ingo.hefti
4 Nov 2013, 1:07 AM
I have updated the sample with the latest version of the tools: Sencha Touch 2.3.0 and CMD4. See the first post in this thread for more details.

stevwinata
19 Nov 2013, 8:33 AM
thanks for share this pattern, and please help me, how to pass value of a textfield to the controller ?

ingo.hefti
19 Nov 2013, 8:57 AM
thanks for share this pattern, and please help me, how to pass value of a textfield to the controller ?
sure - can you give a short description of the workflow you would like to realize?

stevwinata
19 Nov 2013, 5:30 PM
onGuestListSearch: function(element, e) {
// do the search here - f.e. an AJAX call to your server, etc.
var searchPattern = this.getGuestListSearchField().getValue();
}


above code show me how to get value from a component.
that's right?
i tried on a textfield (any textfield in view) and give me error "cannot found method".
if it can, how doing it right in your pattern?

ingo.hefti
21 Nov 2013, 7:33 AM
onGuestListSearch: function(element, e) {
// do the search here - f.e. an AJAX call to your server, etc.
var searchPattern = this.getGuestListSearchField().getValue();
}


above code show me how to get value from a component. that's right? i tried on a textfield (any textfield in view) and give me error "cannot found method". if it can, how doing it right in your pattern?
the method getGuestListSearchField() is created by Touch based on the ref(erence) "guestListSearchField" at the start of the controller (in the refs section).

When you need to access other fields you will have to write a reference to that field. F.e. if you have a textfield in your form that has the property name: 'guestName' then you could write:


refs: {
...
guestListSearchField: 'guestlist searchfield',
guestFormGuestNameField: 'guestform textfield[name=guestName]',
...
},

This will let Touch to create a getter (and a setter) for you. So when you need to access the field you could write


var name = this.getGuestFormGuestNameField().getValue();

This is ok to access single fields. But when it is about to access a whole form you better use something like this


var formValues = this.getGuestForm().getValues();

This will retrieve all NAMED field values (=fields that have the attribute NAME set).

cosmos93
24 Mar 2014, 12:07 AM
Thank you For sharing....

dconde
20 Apr 2014, 12:04 PM
The updated example can be found at https://dl.dropboxusercontent.com/u/8085058/SenchaForum/testmvc-2013-11-04.zip. The original post has the name of the new version but links to the old version.

ingo.hefti
3 May 2014, 1:09 PM
The updated example can be found at https://dl.dropboxusercontent.com/u/8085058/SenchaForum/testmvc-2013-11-04.zip. The original post has the name of the new version but links to the old version.

fixed! thanks for bringing this up!!

nusrath.sulthana
26 Aug 2014, 9:48 AM
Hi Hefti, This example is really useful, thanks a lot for such a nice example