SE 380 – Mobile Application
Development
Lecture 8.2: Lab 6
Lecturer: Gazihan Alankuş
All rights reserved, cannot be used in any educational
institution other than Izmir University of Economics.
TODO: Fix dpi of Genymotion!
• If your Genymotion device has 768x1280 resolution,
change its DPI to 320 before running it
– Otherwise it acts like a huge device (768/160~=5 inches
wide!) and icons look tiny.
• This will be fixed permanently in lab computers, soon.
2
Lab 6
• Welcome to this week’s lab
• The following slides have a number of tasks
• For each task you will
– Do what the task tells you to do
– Ask for help from the assistant if you are stuck
– Call the assistant when you are done with the task. Show your work and make
sure he grades you.
• Some basic rules
– DO NOT share code with your friends. Sending each other code is cheating
and will be punished.
– DO NOT read code off of each other’s screens. Copying code from each
other’s screens is cheating and will be punished.
– Talking about the problem and discussing with your friends is OK.
– Using the internet to look up documentation and how-to-do-something is ok.
• However, do not search for the solution directly (e.g., “how can I move a button down
at every click?”). That won’t help you learn. Instead, search for things like “moving UI
elements in Titanium”.
3
Task slides
• The end of each task will be a slide with this pink
background.
• When you arrive at a slide with this color, it’s time
to call the assistant and get graded for what you
have done.
4
Preparation: Simple HTTP Request
• Visit https://obscure-ridge-4542.herokuapp.com/page
– Refresh it a couple of times. You will see that
sometimes it fails.
– You can see that these errors actually have an error
code (500) rather than an ok code (200)
• In Chrome, right click the page and select Inspect element.
Click on the network tab. Refresh the page a couple of times.
• In Titanium, xhr.onerror will be called for these errors
5
Preparation: Simple HTTP Request
• Create a new default Titanium project
• Start with this code:
• Test that it’s running
– Remove the alert afterwards
• The next task should use the
label’s click to work.
6
Task 1: Simple HTTP Request
• Create an HTTP request to the URL that you saw
two slides ago.
• If the HTTP request completes successfully, and
returns string s, do this:
– alert(‘successful: ’ + s);
• If the HTTP request fails with error e, do this:
– alert(‘fail: ’ + e);
7
Task 2: Login and Logout
• Add two buttons to the UI. Their titles should be
‘Login’ and ‘Logout’. Login button should be enabled
and logout button should be disabled (hint: use the
enabled property)
• When login is clicked, go to this URL:
– https://obscure-ridge-4542.herokuapp.com/login
• If it is successful, alert(‘Logged in successfully’), enable the logout
button and disable the login button.
• When logout is clicked, go to this URL:
– https://obscure-ridge-4542.herokuapp.com/logout
• If it is successful, alert(‘Logged out successfully’), enable the login
button and disable the logout button.
• Handle failures just like Task 1.
8
Task 3: List of Items
• Add a button with title: ‘Get item list’
– This button is enabled/disabled just like the logout button (when it’s
enabled, this is also enabled and vice versa)
• Add a TableView under the three buttons.
• When this ‘Get item list’ button is clicked, go to this URL:
– https://obscure-ridge-4542.herokuapp.com/items
• If it is successful, it should return a JSON array with id numbers. Use this array
to populate the TableView, with titles such as ‘Item 1’ that is created as ‘Item ’
+ id. Subsequent clicks to the button should not preserve TableView’s items
from a previous click (so, you should set the .data property of the TableView.)
– Hints (not exactly like this):
» var data = [];
» data.push({title: 1});
» tableView.data = data;
• Hint: Look at week 6’s slides for sample TableView code. Slide 11
is a good example.
• Handle failures just like Task 1.
9
Task 4: Item Details
• When an item in TableView is clicked, make an HTTP request to
get the details of the item.
– Hint: Week 6’s slides show how to handle clicks. Look at slide 15.
– For example, if the item that we clicked had the id 2, you will make the
request to this URL that ends with 2
• https://obscure-ridge-4542.herokuapp.com/item/2
• To remember the ids of each row of the TableView, you will add them as
custom properties to the rows (you can add new properties to any class).
– Hints:
– data.push({title: arr[i], id: arr[i]});
– var clickedItemId = e.rowData.id;
• When the HTTP request is successful, you will receive a JSON object. Get its
data property and alert it.
• When logged out, clear the TableView (no items should be left).
– Hint: tableView.data = [];
• Handle failures just like Task 1.
10
Screens
11
Bonus
• Instead of alerts, use a label on the bottom of the
screen as a status bar.
• There should be no alerts. The status label should
contain the messages instead.
12