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 12:12]
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 
 + 
 +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, Controller. This is just a way of thinking of different objects in code and keeping them separate.  
 + 
 +  *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 }}
  
-====ViewControllers==== 
-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 simpler, we use a custom ViewController called a UINavigationController. Navigation Controllers implement a 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. 
 ---- ----
  
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.
Line 127: Line 151:
 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 145: Line 173:
  
 ===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
ios-labs-s14/class-01.1390846345.txt.gz · Last modified: 2014/01/27 12:12 by mbarboi