User Tools

Site Tools


ios-labs-s14:class-01

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
ios-labs-s14:class-01 [2014/01/27 11:31]
mbarboi
ios-labs-s14:class-01 [2014/02/03 12:42] (current)
mbarboi
Line 7: Line 7:
   *Xcode   *Xcode
   *HelloWorld   *HelloWorld
-  ​**UWMadInstagram+  *UWMadInstagram
   ​   ​
 In these three lectures you will be making a sample application called "​UWMadInstagram."​ This app will use UW Madison'​s Instagram feed, providing users with an interface to view images and comments. This app will be pretty unimpressive in its functionality,​ but it will show you how to complete a lot of basic tasks. In these three lectures you will be making a sample application called "​UWMadInstagram."​ This app will use UW Madison'​s Instagram feed, providing users with an interface to view images and comments. This app will be pretty unimpressive in its functionality,​ but it will show you how to complete a lot of basic tasks.
  
 +You may notice as you make progress through the tutorial that your IDE colors do not match those from the screenshots. That's my fault: I can't stand a white background on my IDE's, so my Xcode color scheme is set to "​Dusk."​ If you'd like to change yours to match, instructions are included below.
 +
 +===Changing IDE Colors===
 +  -Go to Xcode > Preferences > Colors
 +  -Select "​Dusk"​
 +{{ ios-labs-s14:​2_1.png }}
 ===== Development Environment ===== ===== Development Environment =====
 Xcode is the IDE used for all iOS development. Although 3rd party IDE's exist, you should learn and appreciate Xcode, its fast, slick, and optimized for iOS. Because Apple has vertical control over their products (i.e. they have control over their products from hardware to operating system to application) Xcode can make a lot of menial tasks very easy and integrates well into the development cycle. Xcode is the IDE used for all iOS development. Although 3rd party IDE's exist, you should learn and appreciate Xcode, its fast, slick, and optimized for iOS. Because Apple has vertical control over their products (i.e. they have control over their products from hardware to operating system to application) Xcode can make a lot of menial tasks very easy and integrates well into the development cycle.
Line 16: Line 22:
 ===Creating a New Project=== ===Creating a New Project===
   -Open the program to begin. We will start by creating a new project through File > New   -Open the program to begin. We will start by creating a new project through File > New
-  -Enter a name for your new project. Make sure "​iPhone"​ is selected under the "​Devices"​ dropdown. +  -Enter a name for your new project. Make sure "​iPhone"​ is selected under the "​Devices"​ dropdown. ​Enter a name for the Company Identifier (contents don't matter right now) 
-  -The next panel provides some preconfigurations for your new project. Don't worry about them for now-- make sure the highlighted options are selected ​and hit next+  -The next panel provides some preconfigurations for your new project. Don't worry about them for now-- make sure the highlighted options are selected ​ 
  
 {{ ios-labs-s14:​5.png }} {{ ios-labs-s14:​5.png }}
Line 25: Line 32:
 Xcode'​s main view may seem a little overwhelming right now, but a lot of the options are not needed at this point. The two circles on the image below show everything you need to pay attention to now. Xcode'​s main view may seem a little overwhelming right now, but a lot of the options are not needed at this point. The two circles on the image below show everything you need to pay attention to now.
 On the top left you'll see a play button. This runs your application in the Simulator. On the top left you'll see a play button. This runs your application in the Simulator.
-Top right contains six buttons. The three on the left represent panes currently open in Xcode. The three buttons on the right allow you to change editor types. Don't worry too much about them now!+Top right contains six buttons. The three on the left represent panes currently open in Xcode. The three buttons on the right allow you to change editor types. Don't worry too much about them now!  
 + 
 +Click on the //​Main.Storyboard//​ file in the project navigator in the left pane so your screen looks like the screenshot below. This is a storyboard, which lays out the interface of your application.
  
 {{ ios-labs-s14:​6.png }} {{ ios-labs-s14:​6.png }}
  
 +Run your application to make sure everything works. If the simulator does not start you get an error, go back to the iOS home page and follow the instructions under the //Lab Simulator Fix// section.
 =====InterfaceBuilder===== =====InterfaceBuilder=====
-InterfaceBuilder (commonly abbreviated as IB) is Xcode'​s integrated ​view-building tool. It is a WYSIWYG (what-you-see-is-what-you-get) editor that allows you to drag and drop UIViews ​onto the screen easily. One of the nicest features of Xcode, InterfaceBuilder allows you to deal with the View creation process without ever having to write a single line of code.+**InterfaceBuilder** (commonly abbreviated as IB) is Xcode'​s integrated ​interface-building tool. It is a WYSIWYG (what-you-see-is-what-you-get) editor that allows you to drag and drop Views onto the screen easily. One of the nicest features of Xcode, InterfaceBuilder allows you to deal with the View creation process without ever having to write a single line of code. The file that InterfaceBuilder operates on is called the **storyboard.**
  
 IB can look a little complicated,​ but there are only a two broad kinds of items that appear on the screen. IB can look a little complicated,​ but there are only a two broad kinds of items that appear on the screen.
Line 36: Line 46:
 {{ ios-labs-s14:​1.png }} {{ ios-labs-s14:​1.png }}
  
-  -ViewControllers- every long rectangle on the screen represents a ViewController. These rectangles are the only things that can "​float"​ in IB's main window +  -View Controllers- every long rectangle on the screen represents a ViewController. These rectangles are the only things that can "​float"​ in IB's main window 
-  - and 3. Arrows- arrows in IB represent relationships between ViewControllers. The arrow on the left of the image above identifies the first ViewController to appear when the app launches. Arrows between ViewControllers are called segues and represent a transition between ViewControllers+  - and 3.  Arrows- arrows in IB represent relationships between ViewControllers. The arrow on the left of the image above identifies the first ViewController to appear when the app launches. Arrows between ViewControllers are called segues and represent a transition between ViewControllers
  
-====ViewControllers==== +That's all fine and dandy, but you haven'​t ​actually learned ​what Views and Controllers actually ​are. One of the ways in which iOS is structured is called **MVC**which stands for Model, View, ControllerThis is just way of thinking of different objects in code and keeping them separate
-You learned that Controllers were objects responsible for managing views and models in the MVC sections, but we didn'​t ​discuss ​what a ViewController really was. In iOS, ViewControllers ​are objects that are tasked with managing one "​scene"​ in an application ("​scene"​ is in quotes because the deliniation between ViewControllers is not always distinct.) Each ViewController typically gets the whole screen and a task; a SettingsViewController may be responsible for the settings page while a LoginViewController may authenticate the user. +
-ViewControllers do not inherently have any knowledge ​of the structure of the app-- they don't know which ViewControllers came before them or started the application. To make managing many ViewControllers simplerwe use a custom ViewController called a UINavigationControllerNavigation Controllers implement ​stack for keeping track of ViewControllers. As a developer, you can push and pop Controllers onto the Nav Stack. The first ViewController in the Navigation Controller'​s stack is reffered to as the root view controller.+
  
 +  *Views are interface items that interact directly with the user by displaying data or receiving button clicks. ​
 +  *Controllers are each responsible for a different "​scene"​ in the app, each which serves a particular function. A Settings scene , a Home scene , and a Contact scene each have different controllers. Controllers own views, and each gets their own setup of them in InterfaceBuilder. They also, obviously, control.
 +
 +The following are examples of views in the pictures below
 +  -Button
 +  -Image
 +  -Table
 +{{ ios-labs-s14:​9.png }}
 +
 +The following are examples of view controllers in the pictures below
 +  -Settings
 +  -General
 +  -Autolock
 +{{ ios-labs-s14:​7.jpg }}
 +
 +----
  
 ======Hello,​ World!====== ======Hello,​ World!======
Line 70: Line 94:
  
 ===Formatting Views=== ===Formatting Views===
-  -Change the title of the button to "​Greeting" ​(the image below shows "​Hello,​ World,"​ ignore this.) ​To change the title of the button, double-click on it and type in the new title. +  -Change the title of the button to "​Greeting." To change the title of the button, double-click on it and type in the new title. 
-  -Change the width of the label to accommodate our greeting. Click on the label and resize it using the draggable sides. Make it a little ​smaller than the width of the controller. ​+  -Change the width of the label to accommodate our greeting. Click on the label and resize it using the draggable sides. Make it slightly ​smaller than the width of the controller. ​
  
 At this point you can run your app again and see the views laid out on the root view. Unfortunately,​ since the views are not connected to code, they don't do anything terribly interesting. At this point you can run your app again and see the views laid out on the root view. Unfortunately,​ since the views are not connected to code, they don't do anything terribly interesting.
  
-What does this mean? One of the ways in which iOS is structured is called **MVC,** which stands for Model, View, Controller. This is just a way of thinking of different objects in code and keeping them separateEssentially,​ each type of object'​s source code //never// mixes with other types of object'​s ​source code. Views don't merge into controllers and vis versa. You have already seen Views (the label and the button) and Controllers (the rectangle in the middle of the screen, and the file you wrote "​Hello,​ World!"​ in.) Controllers are the masters of the program, so to make Views do anything interesting we have to connect the two. We will discuss MVC in more detail in the next lectures.+What does this mean? Remember, ​MVC splits objects into different typeskeeping their code and interaction seperateEach type of object'​s source code //shouldn'​t ever// mix with other types of object source code. Views don't merge into controllers and vis-versa. You have already seen Views (the label and the button) and Controllers (the rectangle in the middle of the screen, and the file you wrote "​Hello,​ World!"​ in.) Controllers are the masters of the program, so to make Views do anything interesting we have to connect the two. We will discuss MVC in more detail in the next lectures.
  
 We connect Views to Controllers using a simple drag and drop. There are two kinds of connections you can make: We connect Views to Controllers using a simple drag and drop. There are two kinds of connections you can make:
Line 120: Line 144:
   -Place the following method in between the braces of the buttonHello method   -Place the following method in between the braces of the buttonHello method
  
-  [labelHello setText:​@"​UW Madison Instagram"​];​+  [labelHello setText:​@"​Welcome to UW Madison Instagram!"];
   ​   ​
 Run your program and check the button and greeting. If the text is being cut off, your label isn't wide enough. Run your program and check the button and greeting. If the text is being cut off, your label isn't wide enough.
 +----
 ======UWMadInstagram====== ======UWMadInstagram======
 This app will serve a few, fairly limited functions. Users will be able to connect to UW Madison'​s Instagram feed over the internet and display all of the images and comments listed there. This app will serve a few, fairly limited functions. Users will be able to connect to UW Madison'​s Instagram feed over the internet and display all of the images and comments listed there.
  
-In this lecture ​you will begin creating the interface of the application though InterfaceBuilder. First, each scene of the app will get a ViewController. Then, you will drag Views onto their corresponding ViewControllers.+Here, you will begin creating the interface of the application though InterfaceBuilder. First, each scene of the app will get a ViewController. Then, you will drag Views onto their corresponding ViewControllers.
  
-We won't be coding ViewControllers in this lecture, but you have to know what they are in order to understand the structure of iOS applicationsAll of the types of views avaliable to you are presented in the Object Library highlighted above+The view objects that you drag onto ViewControllers in InterfaceBuilder make up the "​scene"​ for each view controller. When that ViewController is loaded in your app it loads all of the views you dragged onto it in InterfaceBuilder. ​We won't be coding ViewControllers in this lecture.
  
-The view objects that you drag onto ViewControllers in InterfaceBuilder make up the "​scene"​ for each view controller. ​When that ViewController is loaded ​in your app it loads all of the views you dragged onto it in InterfaceBuilder.+Our app will have 4 screens 
 +  -Home- this is the controller ​you already have on the screen. Users will use this as springboard to access the rest of the app. This will be the first controller ​to appearContains two buttons ​that transition to Settings and Posts. 
 +  -Settings- users can set the number of posts to display ​in the Posts controller here. 
 +  -Posts- display a list of each user and each comment for all the instagram pictures within a scrollable table. When a user touches an entry, transition to the Images controller. 
 +  -Images- display the Instagram image and the comment below it.
  
 ===Adding View Controllers to App=== ===Adding View Controllers to App===
Line 137: Line 165:
   -Scroll through the object library (or search using the text box) to find a //View Controller//​   -Scroll through the object library (or search using the text box) to find a //View Controller//​
   -Drag it onto the storyboard next to the original View Controller   -Drag it onto the storyboard next to the original View Controller
 +  -Repeat until your storyboard matches the image below
  
 {{ ios-labs-s14:​2.png }} {{ ios-labs-s14:​2.png }}
 +{{ ios-labs-s14:​18.png }}
  
 Now we're going to populate the views of the app. The process for dragging and dropping views onto controllers is simple, the only thing that changes is the type of view. After you're finished, **do not connect IBActions or IBOutlets.** Now we're going to populate the views of the app. The process for dragging and dropping views onto controllers is simple, the only thing that changes is the type of view. After you're finished, **do not connect IBActions or IBOutlets.**
  
 ===Adding Views to View Controllers=== ===Adding Views to View Controllers===
-  *Check the image below for a final layout of what the app's views look like. The views used are:+Check the image below for a final layout of what the app's views look like. The views used are:
   -Buttons   -Buttons
   -Label   -Label
Line 158: Line 188:
 The //Images// button should connect to the view controller where you put the Table View. The //​Settings//​ button should connect to the controller that has the Text View and the "​Images per Page" label. The //Images// button should connect to the view controller where you put the Table View. The //​Settings//​ button should connect to the controller that has the Text View and the "​Images per Page" label.
  
-==Creating Segues Between Controllers===+===Creating Segues Between Controllers===
   -Right click on a button on the original view controller and drag onto the desired view controller ​   -Right click on a button on the original view controller and drag onto the desired view controller ​
   -Select //push// from the popup menu that appears   -Select //push// from the popup menu that appears
Line 173: Line 203:
   -The navigation controller is the controller on the left. The one on the right is a stock //Root View Controller,//​ but we want to use our own view controller. Click on the right one and delete it (hit delete key)   -The navigation controller is the controller on the left. The one on the right is a stock //Root View Controller,//​ but we want to use our own view controller. Click on the right one and delete it (hit delete key)
   -To set up our home view controller as the root view, right click drag from the navigation controller to the original view controller and select //root view// from the popup that appears.   -To set up our home view controller as the root view, right click drag from the navigation controller to the original view controller and select //root view// from the popup that appears.
 +
 +{{ ios-labs-s14:​20.png }}
 +
 +There'​s one small change we still have to make to let the app know that we want the Navigation Controller to be the root view controller. The arrow that doesn'​t have a left end denotes the root view controller, you need to drag it from the original view controller to the navigation controller.
 +
 +===Change the Root View Controller===
 +  -Drag the arrow from the greeting view controller to the navigation controller
 +
 +{{ ios-labs-s14:​21.png }}
 +{{ ios-labs-s14:​22.png }}
  
 Test your app. You should be able to move back and forth between the three view controllers (the menu, the table, and the settings.) Test your app. You should be able to move back and forth between the three view controllers (the menu, the table, and the settings.)
ios-labs-s14/class-01.1390843916.txt.gz · Last modified: 2014/01/27 11:31 by mbarboi