Presentation is loading. Please wait.

Presentation is loading. Please wait.

SE 380 – Mobile Application Development Lecture 8.2: Lab 6 Lecturer: Gazihan Alankuş All rights reserved, cannot be used in any educational institution.

Similar presentations


Presentation on theme: "SE 380 – Mobile Application Development Lecture 8.2: Lab 6 Lecturer: Gazihan Alankuş All rights reserved, cannot be used in any educational institution."— Presentation transcript:

1 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.

2 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

3 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

4 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

5 Preparation: Simple HTTP Request Visit https://obscure-ridge-4542.herokuapp.com/page 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

6 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

7 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

8 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 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 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

9 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 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

10 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

11 Screens 11

12 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


Download ppt "SE 380 – Mobile Application Development Lecture 8.2: Lab 6 Lecturer: Gazihan Alankuş All rights reserved, cannot be used in any educational institution."

Similar presentations


Ads by Google