-
Notifications
You must be signed in to change notification settings - Fork 8
/
ui5_rottentomatoes_app.html
368 lines (295 loc) · 9.33 KB
/
ui5_rottentomatoes_app.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' charset='utf-8' />
<title>SAPUI5 Apps based on Rotten Tomatoes API</title>
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
<script id='sap-ui-bootstrap' type='text/javascript'
src='resources/sap-ui-core.js' data-sap-ui-theme='sap_platinum'
data-sap-ui-libs='sap.ui.commons,sap.ui.table,sap.ui.ux3'></script>
<script>
//Create a matrix layout with 2 columns
var oMatrix = new sap.ui.commons.layout.MatrixLayout({
layoutFixed : true,
width : '300px',
columns : 2
});
oMatrix.setWidths('100px', '200px');
//Create a header
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
colSpan : 3
});
oCell.addContent(new sap.ui.commons.TextView({
text : 'SAPUI5 Apps based on Rotten Tomatoes API',
design : sap.ui.commons.TextViewDesign.H1
}));
oMatrix.createRow(oCell);
var oLabel = new sap.ui.commons.Label({
text : 'Select Type'
});
// Create a ListBox
var oListBox1 = new sap.ui.commons.ListBox("RT", {
items : [ new sap.ui.core.ListItem("RT1", {
text : "box_office",
key : "movies",
additionalText : "Box Office Movies"
}), new sap.ui.core.ListItem("RT2", {
text : "in_theaters",
key : "movies",
additionalText : "In Theaters Movies"
}), new sap.ui.core.ListItem("RT3", {
text : "upcoming",
key : "movies",
additionalText : "Upcoming Movies"
}), new sap.ui.core.ListItem("RT4", {
text : "opening",
key : "movies",
additionalText : "Opening Movies"
}), new sap.ui.core.ListItem("RT5", {
text : "top_rentals",
key : "dvds",
additionalText : "Top Rentals DVDs"
}), new sap.ui.core.ListItem("RT6", {
text : "current_releases",
key : "dvds",
additionalText : "Current Releases DVDs"
}), new sap.ui.core.ListItem("RT7", {
text : "new_releases",
key : "dvds",
additionalText : "New Releases DVDs"
}), new sap.ui.core.ListItem("RT8", {
text : "upcoming",
key : "dvds",
additionalText : "Upcoming DVDs"
}) ]
});
// Create a DropdownBox
var oDropdownBox2 = new sap.ui.commons.DropdownBox("DropdownBox2", {
tooltip : "Select Type",
displaySecondaryValues : true,
"association:listBox" : oListBox1,
value : "box_office"
});
oLabel.setLabelFor(oDropdownBox2);
oMatrix.createRow(oLabel, oDropdownBox2);
oLabel = new sap.ui.commons.Label({
text : 'Number of Movies'
});
oInputMaxRow = new sap.ui.commons.TextField({
value : ''
});
oLabel.setLabelFor(oInputMaxRow);
oMatrix.createRow(oLabel, oInputMaxRow);
//Create a standard divider
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
colSpan : 2
});
oCell.addContent(new sap.ui.commons.HorizontalDivider());
oMatrix.createRow(oCell);
// Attach the layout to the page
oMatrix.placeAt("content");
//Create an instance of the table control - Main Table containing movie related details
var oTable = new sap.ui.table.Table({
//title : "Box Office Movie Details",
visibleRowCount : 5,
selectionMode : sap.ui.table.SelectionMode.Single,
navigationMode : sap.ui.table.NavigationMode.Paginator,
});
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Title"
}),
template : new sap.ui.commons.TextView().bindProperty("text", "title"),
sortProperty : "title",
filterProperty : "title"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Poster"
}),
template : new sap.ui.commons.Image().bindProperty("src",
"posters/profile"),
hAlign : "Center"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Rating"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"mpaa_rating"),
sortProperty : "mpaa_rating",
filterProperty : "mpaa_rating"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Runtime"
}),
template : new sap.ui.commons.TextView()
.bindProperty("text", "runtime"),
sortProperty : "runtime",
filterProperty : "runtime"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Release Date"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"release_dates/theater"),
sortProperty : "release_dates/theater",
filterProperty : "release_dates/theater"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Critics Rating"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"ratings/critics_rating"),
sortProperty : "ratings/critics_rating",
filterProperty : "ratings/critics_rating"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Audience Rating"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"ratings/audience_rating"),
sortProperty : "ratings/audience_rating",
filterProperty : "ratings/audience_rating"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Critics Consensus"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"critics_consensus"),
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Synopsis"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"synopsis"),
}));
//Create an instance of the table control - Cast of the movie table
var oTableCast = new sap.ui.table.Table({
//title : "Cast of the Movie",
selectionMode : sap.ui.table.SelectionMode.Single,
navigationMode : sap.ui.table.NavigationMode.Paginator,
});
oTableCast.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Actor"
}),
template : new sap.ui.commons.TextView().bindProperty("text", "name"),
width : "50px"
}));
oTableCast.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Character"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"characters"),
width : "50px"
}));
//Search Button
var oButtonResetSearch = new sap.ui.commons.Button({
text : "Search",
tooltip : "Search",
press : function() {
oTableCast.setVisible(false);
var ddKey = oDropdownBox2.getSelectedKey();
var ddValue = oDropdownBox2.getValue();
var maxRow = oInputMaxRow.getValue();
// Rotten Tomatoes API's JSON service url
var url = 'http://api.rottentomatoes.com/api/public/v1.0/lists/'
+ ddKey + '/' + ddValue
+ '.json?apikey=<Your_API_Key>&limit=' + maxRow
+ '&callback=getJSON';
//Ajax Call
$.ajax({
url : url,
jsonpCallback : 'getJSON',
contentType : "application/json",
dataType : 'jsonp',
success : function(data, textStatus, jqXHR) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
sap.ui.getCore().setModel(oModel);
//Create a model and bind the table rows to this model
var oModel1 = new sap.ui.model.json.JSONModel();
var aData = oModel.getProperty("/movies");
oModel1.setData({
movies : aData
});
oTable.setVisible(true);
oTable.setModel(oModel1);
oTable.bindRows("/movies");
if (ddKey == 'movies') {
if (ddValue == 'box_office') {
var movieType = 'Box Office';
} else if (ddValue == 'in_theaters') {
var movieType = 'In Theaters';
} else if (ddValue == 'opening') {
var movieType = 'Opening';
} else if (ddValue == 'upcoming') {
var movieType = 'Upcoming';
}
var movieTitle = movieType + ' Movies';
oTable.setTitle(movieTitle);
} else if (ddKey == 'dvds') {
if (ddValue == 'top_rentals') {
var movieType = 'Top Rentals';
} else if (ddValue == 'current_releases') {
var movieType = 'Current Releases';
} else if (ddValue == 'new_releases') {
var movieType = 'New Releases';
} else if (ddValue == 'upcoming') {
var movieType = 'Upcoming';
}
var movieTitle = movieType + ' DVDs';
oTable.setTitle(movieTitle);
}
oTable.placeAt('content');
//Get the row selected
oTable.attachRowSelectionChange(function(oEvent) {
var currentRowContext = oEvent
.getParameter("rowContext");
//Create a model and bind the table rows to this model
var oModel2 = new sap.ui.model.json.JSONModel();
var castPath = currentRowContext + "/abridged_cast";
//Get the abridged_cast array of selected row
var aMovieCast = oModel.getProperty(castPath);
oModel2.setData({
modelData : aMovieCast
});
oTableCast.setVisible(true);
oTableCast.setModel(oModel2);
oTableCast.bindRows("/modelData");
var movieNamePath = currentRowContext + "/title";
var movieName = oModel.getProperty(movieNamePath);
var movieTitle = 'Cast of the Movie: ' + movieName;
oTableCast.setTitle(movieTitle);
oTableCast.placeAt('content');
});
}
});
}
});
oButtonResetSearch.placeAt("content");
//Reset Button. Reset values to earlier stage
oButtonReset = new sap.ui.commons.Button({
text : 'Reset',
press : function() {
oTable.setVisible(false);
oTableCast.setVisible(false);
oInputMaxRow.setValue('');
oDropdownBox2.setValue('box_office');
}
});
oButtonReset.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>