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