Mobile Development - Lab 2

Transcription

1 Mobile Development - Lab 2 Objectives Illustrate the delegation mechanism through examples Use a simple Web service Show how to simply make a hybrid app Display data with a grid layout Delegation pattern implemented in Swift Delegation is a design pattern that allows cooperation between two objects A and B. When an event intercepted by A occurs, the object A can send a delegation message to B, and then delegate the treatment to the object B. B is said the delegate of A. Several ingredients are necessary for the delegation to take place: we must specify which object is the delegate and what methods can be delegated. All of these methods form the delegation protocol. B must conform to the delegation protocol and thus implements the delegate methods. We'll see how the delegation mechanism is implemented in Swift. - Create a new project in Xcode, select the "Single View Application" template and fill in the required fields. - From Main.storyboard, add an UITextField object to the view ; create a variable nametextfield in the controller and bind it to the object UITextField. In the simulator, select the textfield: the keyboard appears (as an input component has just taken the focus) Like many other graphical components of the UIKit framework, a UITextField delegates some processings to another object: usually, the controller which handles the view. In our case, the class ViewController will be in charge of it. Hence, ViewController should be the delegate of nametextfield and must conforms to the corresponding protocol, here UITextFieldDelegate. - Add this protocol to the controller in the declaration of the ViewController class: // The list of protocols is placed inheritated classes class ViewController: UIViewController, UITextFieldDelegate - In order to establish the association between nametextfield and the controller, add this statement at the end of viewdidload: // The delegate of textfield is the controller itself nametextfield.delegate = self

2 The operation of associating an object to a delegate can also be done on the StoryBoard via drag&drop (similarly to connect IBActions) from the component (ie: UITextField object) to the round-yellow-icon that designates the controller. It remains to implement the Protocol s functions that interest us. For example, in ViewController.swift add: //Called just before the textfield becomes active func textfieldshouldbeginediting(_ textfield: UITextField) -> Bool { print("textfieldshouldbeginediting") // textfield becomes yellow when entering in edition textfield.backgroundcolor = UIColor.yellow return true func textfielddidbeginediting(_ textfield: UITextField) { print("textfielddidbeginediting") func textfieldshouldendediting(_ textfield: UITextField) -> Bool { print("textfieldshouldendediting") // textfield backs to white when ending edition textfield.backgroundcolor = UIColor.white return true func textfielddidendediting(_ textfield: UITextField) { print("textfielddidendediting") Another interesting function of UITextFieldDelegate tracks the event when "Enter" key is pressed. This event can be interpreted as a text validation at the end of editing; or as a need to create a new line. The following delegate method is called: func textfieldshouldreturn(_ textfield: UITextField) -> Bool { // resign textfield's focus textfield.resignfirstresponder() print("textfield resignfirstresponder") return true Note: in delegated methods above, the textfield argument is a reference to the UITextField instance that triggered the call to this method. In our case, it is the same as adressetextfield. Great, you now know how to use delegation in Swift and UIKit!

3 A first project We will now make a mobile application that go further in delegation concepts and that uses a simple web service. The service receives a string (a name), stores it, and returns a list of strings (names) that it previously received. The application will then consist in enter a name, submit it, and display the list of names returned by the web service. We will design this app in the context of a (kindergarden) class, for taking roll. We will suppose every participant own a mobile phone and enter their name The teacher can then easily see who s here. Of course, for a more realistic scenario, we should make more controls (on location, time, ). We will use the 3 following web services, incrementally: 1. This service receives a name then returns a simple (formatted) web page. This page will be displayed in a UIWebView object This service receives a name then returns a structured json list of names. We will display the names in a UICollectionView object This service receives a name and an associated emoji then returns a structured json list of both names and emojis. At submission, the app will randomly draw an emoji. When received, both names and emojis will be displayed in the UICollectionView object.

4 Setting Xcode to access external URL We first must tell Xcode to allow our app to access an external URL. On Apple platforms, a networking security feature called App Transport Security (ATS) controls the access to external URL. Here, we turn on any loads, see on documentation for finer restrictions. - At the navigation area, select Info.plist - Switch to the Version Editor view to see XML contents - Add the following key (anywhere between existing keys): <key>nsapptransportsecurity</key> <dict> <key>nsallowsarbitraryloads</key> <true/> </dict> Setting the ViewController for a first web service We will continue with the same project with started this lab session. The assets used above can be downloaded at the URL below. Add the images (drag&drop) in Xcode, either at the root of the project or in Assets.xcassets (you will then need to create the corresponding items). - From the StoryBoard, add a UIImageView (in which display titleimage.png) and a UIWebView. - In ViewController.swift, declare a IBOutlet variable nameswebview to link with the UIWebView object. Make the connection. - Add a function submittoservice(name:) that will submit a name to our service web: func submittoservice(name:string) { // we use a default argument label - As we want the app to submit a name when nametextfield has been validate, let s add a call to this function in textfieldshouldreturn(): func textfieldshouldreturn(_ textfield: UITextField) -> Bool { // resign textfield's focus textfield.resignfirstresponder() // call submittoservice(name:) only if textfield.text is not nil if let text = textfield.text { submittoservice(name:text) return true Construction of URL request and display the web page We now need to implement the function submittoservice(name:), the two steps will consists submitting a request to the service, and then, receiving a web page and display it. This behavior is typically the heart of an hybrid mobile application.

5 - Browse the documentation or header files to find which function our UIWebView will need to make a new request: to access the documentation from the code, press alt+click on any Type ; to access an header file, press cmd+click. Right, the answer is loadrequest(), which need an argument of type URLRequest. An URLRequest can be initialized with a URL instance, which is initialized from a String - Get the string entered in nametextfield and make a new string stringurl corresponding to the first web service s URL: let stringurl = " - Encode this string to handle spaces and special characters for URL request: let encodedstringurl = stringurl.addingpercentencoding(withallowedcharacters:.urlqueryallowed) - The function addingpercentencoding(withallowedcharacters:) returns an optional String. The variable encodedstringurl must then be unwrapped to be used as a String: let myurl = URL(string: encodedstringurl!) //unwrapp simply consists in a! - This URL initializer also returns an optional variable let request = URLRequest(url:myurl!) - We can finally call loadrequest() with an URLRequest instance: nameswebview.loadrequest(request) Great! Eachtime we submit a name, the web page is updated. Let s add a timer and few controls to reload the page automatically. Various solutions are possible to schedule a task in an app. Here we ll use a Timer object that we ll fire right after a new submission. - Add a property of type (optional) Timer to the class ViewController, and initialize it with nil value: var timer:timer! = nil - Create a new function refresh() which only call submittoservice(name: "") - At the end of our function submittoservice(name:), add the following statements: // stops (invalidate) current timer if (timer!= nil) {timer.invalidate() // fire new timer in 10 seconds timer = Timer.scheduledTimer(timeInterval:10, target:self, selector:#selector(refresh), userinfo:nil, repeats:false) Note: as you see here, scheduledtimer( ) is a static function of the class Timer, which takes a target and a selector as arguments. A selector corresponds (more or less) to a function that will be dynamically called at runtime, and a target corresponds to the instance that will call the selector This target/selector mechanism was common in Objective-C and is now replaced by closures in Swift 3. We will use closures in next lab work ;) - Still at the same place, change the status of nametextfield:

6 if (name!= "") { // empty uitextfield, nametextfield.text = "" // might want to unable it to prevent multi registration (even if web service takes care of duplicates) nametextfield.isenabled = false // true? nametextfield.placeholder = "You already put your name" Nice! Everything looks good, but still missing UICollectionView In the following, we will replace the UIWebView with a UICollectionView and change few lines of code. You may like to make a copy of you project, or duplicate functions or classes to keep a trace of this first section. Setting the ViewController with UICollectionView Consider a UICollectionView as a graphic component dedicated to display the content of an array. But instead of displaying the array in one dimension, line by line, a UICollectionView displays the array s items with a grid layout, and each element is a UICollectionViewCell. An other similar UI component is UITableView that behaves very closely. Both use delegation to be rendered. An other labwork will focus on UITableView to better understand how it works, here we ll go fast on it. Adding the UICollectionView - First, we have to remove the UIWebView. You can either comment the corresponding lines of codes, or simply hide it. - In ViewController.swift declare a IBOutlet variable collectionnames of type UICollectionView - In the storyboard, add a UICollectionView to the view and connect it to collectionnames. Note that our UICollectionView seems to already contains a cell: keep it, we ll come back on it later. - Read the first section of the UICollectionView reference and browse its header file. - You might understood that a UICollectionView works through several protocols, but one is really mandatory: UICollectionViewDataSource. Change ViewController.swift to specify that the class will conform this protocol - Connect the delegates, either from the StoryBoard or programmatically in the method viewdidload() in ViewController.swift: collectionnames.datasource = self - Xcode may now complain because some mandataroy functions defined on the added protocol must be implement in order to be conform. Let s wait before fixing it - Browse the documentation (or header) of UICollectionViewDataSource and search for useful functions to implement. Some are mandatory and others optional.

7 A UICollectionView (as UITableView) can have multiple sections, each containing several cells. The cells are indexed by a IndexPath (a class that contains two properties row and section). By default, a UICollectionView has only one section, and behaves like a table, rendered as a grid. The main delegate functions we need are: func collectionview(_ collectionview: UICollectionView, numberofitemsinsection section: Int) -> Int func collectionview(_ collectionview: UICollectionView, cellforitemat indexpath: IndexPath) -> UICollectionViewCell These functions are automatically called by the delegate whenever necessary. Thus, collectionview(:numberofitemsinsection:) is called when the controller try to display a section (whose index is passed in second argument). If the function numberofsections() is not implemented (it returns 1 by default), collectionview(:numberofitemsinsection:) will be called only once (in fact, every time reloaddata() is called). The function collectionview(:cellforitemat:) returns a UICollectionViewCell, which define the rendering of a cell, this function is called when the controller try to display a particular cell. Furthermore, UICollectionView (as UITableView) is only in charge to present some data items, usually stored in an array or any collection type. - In ViewController.swift, let s declare an Array of String as a class property: var namesarray = [String]() - Let s now add and implement the first UICollectionView delegate function. This function only need to return a Int, simply return namesarray.count. - The second delegate s function is supposed to return a UICollectionViewCell Let s first go back to the Storyboard. Select the default UICollectionViewCell, then at utilities area, fourth tab, enter an identifier s name: CollectionCell_Id. We can now implement the delegate s function: func collectionview(_ collectionview: UICollectionView, cellforitemat indexpath: IndexPath) -> UICollectionViewCell { let collectionviewcell = collectionview.dequeuereusablecell(withreuseidentifier: "CollectionCell_Id", for: indexpath) return collectionviewcell The Reusable UICollectionViewCell allows us to design a unique template for every cell in our UICollectionView. We could have various templates if needed. The reusable stuff is also a mechanism to reuse some unecessary duplicates of memory: typically, when scrolling, some cells will no more be at displayed but new ones will have to be display. Instanciate a new object for each new cell is not efficient, reuse unused instanciated objects is much more efficient! Let s configure our reusable cell: in Storyboard, add on it one UIImageView and two UILabel. Adjust the cell s size and objects s position to match the screenshot above. We can set an image from the storyboard since it won t vary at all, but we have the two UILabel which have to be dynamically modified One simple solution would be to use the tag properties of both UILabel but it is not a recommended way. A more instructive way consists in: - Adding a new file to the project, select Cocoa Touch Class, then subclass of UICollectionViewCell, call it MyCollectionViewCell. - In MyCollectionViewCell.swift, add the two needed var namelabel: var emojilabel: UILabel!

8 - In Storyboard, change the class of the Reusable Cell: at third tab in utilities area, change UICollectionViewCell to MyCollectionViewCell. You can now make outlets connections (may need to use sixth tabs ). - We can now complete the delegate s function implementation by incorporing both MyCollectionViewCell and namesarray: func collectionview(_ collectionview: UICollectionView, cellforitemat indexpath: IndexPath) -> UICollectionViewCell { let collectionviewcell = collectionview.dequeuereusablecell(withreuseidentifier: "CollectionCell_Id", for: indexpath) as! MyCollectionViewCell // Type down-casting if let namelabel = collectionviewcell.namelabel { //unwrap namelabel due to type downcasting if (namesarray.count > indexpath.row) { namelabel.text = namesarray[indexpath.row] return collectionviewcell Great! But actually nothing appears in the UICollectionView? Of course, sure! It s because we never told collectionnames, our UICollectionView to refresh its content. In function submittoservice(name:), at the location where we asked our previous UIWebView to request an URL, call collectionnames.reloaddata(). Hum, still nothing appears in the UICollectionView Of course, sure! It s because namesarray is still empty. For testing, add few items before refreshing to make appear few cells. In next section, we will fill in the array, using JSON response Great! Now you should have few cells displayed. Let s manage JSON data Manage JSON response In this section, we will replace the web service URL, download JSON data, and parse JSON dictionary. Some of the functions here might throw Exceptions: we will handle it with a do-catch statement. - Modify the URL to [ ]/servicejson.py - Instead of instanciating a URLRequest and use UIWebView, we will get the text returned by our service web using the String initializer String(contentsOf:). As this function is declared to throw an exception, we must call it inside a do-catch statement and prefix it with try: do { // [...] // download json content let jsonstring = try String(contentsOf: myurl!) // recall myurl must be unwrapped // [...] catch { print("error getting url content") - In order to process JSON data, we will have to transform our String object to a JSONSerialization object. The easier way consists in instancing a Data from String, then using the JSONSerialization s class function jsonobject(with:,options:) : // convert to data and parse json let jsondata = jsonstring.data(using:.utf8)

9 let jsonjson = try JSONSerialization.jsonObject(with: jsondata!, options: []) - Finally, parsing JSON dictionary is a bit tricky due to the safety of Swift In the following, when JSON s parser retrieved the object associated to the key names, we got an array of String that we copy to namesarray. And, as characters were escape-encoded to be submited as URL, we need here to convert them back: if let dictionary = jsonjson as? [String: Any] { // access individual value in dictionary if let retrieved = dictionary["names"] as? [Any] { // get users namesarray = retrieved as! [String] // replace escaped characters for (i, name) in namesarray.enumerated() { namesarray[i] = name.removingpercentencoding! - Once namesarray is updated, we can ask our UICollectionView to refresh. For this, use reloaddata() Great! At this stage, everything is becoming good. But it s still missing emojis L This is your part, follow these instructions: - Make a function to get a random emoji. Tip: pick a random character in a string of emojis - Display emojis in your UICollectionView - Manage to prevent duplicates emoji - Switch to the web service at [ ]/servicejson2.py - Arrange everything Things can be better by handling multiple threads. We ll see later with Grand Central Dispatch.