Most important and useful component in mobile application is List. In this tutorial you will learn how to create Sencha Touch List view with Spring MVC 3 in backend. For this tutorial I am going to create a List of movies with other details using Sencha Touch, it’s very basic and easy tutorial and I am sure you will enjoy.
First of all, create an eclipse project; add Spring MVC and Sencha Touch dependencies. Following is a screenshot of my eclipse project.
I am using Spring MVC with XML free approach. If you are new to Spring MVC and don’t about XML free configuration, please read my previous post on XML free Spring MVC.
Create a simple movie POJO.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
package org.techzoo.touch.vo;
public class Movie {
private int id;
private String title, director;
private int yearOfRelease;
private MovieGenre genre;
public enum MovieGenre {
Action, Comedy, Family, Horror, War;
}
public Movie(){}
public Movie(int id, String title, String director,
int yearOfRelease, MovieGenre genre)
{
super();
this.id = id;
this.title = title;
this.director = director;
this.yearOfRelease = yearOfRelease;
this.genre = genre;
}
//getter, settings method
}
|
Now create a class which has multiple movie objects that we need to populate in a List.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
package org.techzoo.touch.vo;
import static org.techzoo.touch.vo.Movie.MovieGenre.Action;
import static org.techzoo.touch.vo.Movie.MovieGenre.Comedy;
import static org.techzoo.touch.vo.Movie.MovieGenre.Family;
import static org.techzoo.touch.vo.Movie.MovieGenre.Horror;
import static org.techzoo.touch.vo.Movie.MovieGenre.War;
import java.util.ArrayList;
import java.util.List;
public class MoviesDatabase {
private List movies = null;
private static MoviesDatabase _instance = null;
private MoviesDatabase() {
if(null == movies){
initializeMovies();
}
}
public static MoviesDatabase getInstance() {
if(null == _instance){
return new MoviesDatabase();
}
return _instance;
}
public List getMovies() {
return movies;
}
private void initializeMovies() {
movies = new ArrayList();
/** Action **/
movies.add(new Movie(1001, “Ek Tha Tiger”, “Kabir Khan”, 2012, Action));
movies.add(new Movie(1002, “Khiladi”, “Abbas Mastan”, 1992, Action));
movies.add(new Movie(1003, “Kick”, “Sajid Nadiadwala”, 2014, Action));
movies.add(new Movie(1004, “Rowdy Rathore”, “Prabhudheva”, 2012, Action));
/** Horror **/
movies.add(new Movie(1005, “Bhoot”, “Ram Gopal Varma”, 2003, Horror));
movies.add(new Movie(1006, “Raat”, “Ram Gopal Varma”, 1992, Horror));
movies.add(new Movie(1007, “Aatma”, “Deepak Ramsay”, 2013, Horror));
movies.add(new Movie(1008, “Mahal”, “Kamal Amrohi”, 1949, Horror));
/** Comedy **/
movies.add(new Movie(1009, “Gol Maal”, “Hrishikesh Mukherjee”, 1979, Comedy));
movies.add(new Movie(1010, “Jaane bhi do Yaaro”, “Kundan Shah”, 1983, Comedy));
movies.add(new Movie(1011, “Andaz apna apna”, “Rajkumar Santoshi”, 1994, Comedy));
movies.add(new Movie(1012, “3 Idiots”, “Rajkumar Hirani”, 2009, Comedy));
/** Family **/
movies.add(new Movie(1013, “Chakde India”, “Shimit Amin”, 2007, Family));
movies.add(new Movie(1014, “Khichdi”, “Aatish Kapadia”, 2010, Family));
movies.add(new Movie(1015, “Vivah”, “Sooraj Barjatya”, 2006, Family));
movies.add(new Movie(1016, “Beta”, “Indra Kumar”, 1992, Family));
/** War **/
movies.add(new Movie(1017, “Border”, “JP Datta”, 1997, War));
movies.add(new Movie(1018, “LOC Kargil”, “JP Datta”, 2003, War));
movies.add(new Movie(1019, “Lakshya”, “Farhan Akhtar”, 2004, War));
movies.add(new Movie(1020, “Tango Cahrlie”, “Mani Shankar”, 2005, War));
}
}
|
Now create a controller which will load all the movies from server to list.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
package org.techzoo.touch.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.techzoo.touch.vo.Movie;
import org.techzoo.touch.vo.MoviesDatabase;
@Controller
@RequestMapping(“movies”)
public class MovieController {
@RequestMapping(value = “/index”)
public String index()
{
return “index”;
}
@RequestMapping (value = “/load.do”, method = RequestMethod.GET)
public @ResponseBody Map loadMovies()
{
MoviesDatabase mdb = MoviesDatabase.getInstance();
List movies = mdb.getMovies();
Map resp = new HashMap();
resp.put(“moviesList”, movies);
return resp;
}
}
|
Now we are done from backend and lts time to create a Touch ListView and Store.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
Ext.define(‘TechZoo.view.MovieList’, {
extend: ‘Ext.dataview.List’,
alias : ‘widget.movielist’,
config: {
store : ‘Movie’,
grouped: true,
indexBar: true,
itemTpl : ‘{title}’,
listeners : {
itemtap : function(me, index, target, record){
Ext.Msg.alert(‘Movie Detail’,
‘Director: ‘ + record.get(‘director’) +
‘Year of Release : ‘ + record.get(‘yearOfRelease’));
}
},
onItemDisclosure : true
}
});
|
Our List also require store. Store use to load data from server/memory by using proxy.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
Ext.define(‘TechZoo.store.Movie’, {
extend: ‘Ext.data.Store’,
storeId: ‘movieStore’,
config: {
model: ‘TechZoo.model.Movie’,
autoLoad: true,
sorters: ‘genre’,
grouper: {
groupFn: function(record) {
return record.get(‘genre’);
},
sortProperty: ‘genre’
},
proxy: {
type: ‘ajax’,
url: ‘movies/load.do’,
reader: {
type: ‘json’,
rootProperty: ‘moviesList’
}
}
}
});
Ext.create(‘TechZoo.store.Movie’);
|
Ok, so now we are all set. Publish your project and hit the URL in browser (Safari or Chrome) and you will see following result.
Click on any List Item and you will see a PopUp with movie details as below.
Source techzoo.org
