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:23]
mbarboi
ios-labs-s14:class-01 [2014/02/03 12:42] (current)
mbarboi
Line 11: Line 11:
 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 32: Line 38:
 {{ 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 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.** **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.**
Line 57: Line 64:
   -General   -General
   -Autolock   -Autolock
-{{ ios-labs-s14:​7.png }}+{{ ios-labs-s14:​7.jpg }}
  
 ---- ----
Line 87: 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 137: 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 144: 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 162: 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.1390847021.txt.gz · Last modified: 2014/01/27 12:23 by mbarboi