1 1 iOS - iPhone/iPad Application Development Workshop Part 1.

Slides:



Advertisements
Similar presentations
View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.
Advertisements

Step-by-Step: Add a Graphical Hyperlink USE the Special Events Final presentation that is still open from the previous exercise. 1.Go to slide 4, and click.
DEVELOPING ICT SKILLS PART -TWO
CS0004: Introduction to Programming Visual Studio 2010 and Controls.
 Use the Left and Right arrow keys or the Page Up and Page Down keys to move between the pages. You can also click on the pages to move forward.  To.
Microsoft Office 2010 Office 2010 and Windows 7: Essential Concepts and Skills Mark Worden Instructor Use your spacebar or down arrow key to advance slides.
X-Media V2.0 Healthcare Training Jayex Technology Limited X-Media V2.0 March 2010 v
ROWAN COUNTY PUBLIC LIBRARY Using iTunes. Objectives Today you will learn how to: Navigate the iTunes interface Add music to the iTunes library Navigate.
Word Processing First Steps
Introduction to Objective-C and Xcode (Part 1) FA 175 Intro to Mobile App Development.
View Controllers (second part) Content taken from book: “iPhone SDK Development” by Bill Dudney and Chris Adamson.
Copyright 2007, Paradigm Publishing Inc. POWERPOINT 2007 CHAPTER 1 BACKNEXTEND 1-1 LINKS TO OBJECTIVES Create Presentation Open, Save, Run, Print, Close,Delete.
Friday, August 29, 2014 CSCI 351 – Mobile Applications Development.
WINDOWS XP BACKNEXTEND 1-1 LINKS TO OBJECTIVES Starting Windows Using the Taskbar, opening & switching programs Using the Taskbar, opening & switching.
Fundamentals of Programming in Visual Basic 3.1 Visual basic Objects Visual Basic programs display a Windows style screen (called a form) with boxes into.
Storyboards Managing multiple views. Overview Create a single view application Give the project a name and click “Use Storyboards” and “Use Automatic.
Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop.
Microsoft Office 2010 Office 2010 and Windows 7: Essential Concepts and Skills.
Go to our website, and click on the eMedia Catalog link To find books, either click on the advanced search (which I will.
Microsoft Visual Basic 2012 CHAPTER TWELVE (ENRICHMENT CHAPTER) Windows Store Apps.
IOS WorkShoP Xcode 4 iOS 5 : “A Primer”. Objective-C iOS applications are written in Objective-C language using the Cocoa Touch library Objective-C is.
05/09/ Introducing Visual Basic Sequence Programming.
Microsoft Windows LEARNING HOW USE AN OPERATING SYSTEM 1.
Xcode Presentation Tom Pletzke. Creating App from template Launch Xcode Select Tabbed Application.
Advanced Forms Lesson 10.
Create Database Tables
Key Applications Module Lesson 19 — PowerPoint Essentials
PowerPoint. Basic Vocabulary Slide - Presentation - Slide layout – ► ► ► ► a single page in PowerPoint all the slides for a speech all the slides for.
Office 2013 and Windows 8: Essential Concepts and Skills
Copyright© Jeffrey Jongko, Ateneo de Manila University Android.
Office 2013 and Windows 8: Essential Concepts and Skills Microsoft Access 2013.
InDesign CS3 Lesson 4 ( Only pages ) Importing and Editing Text.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Alice 2.0 Introductory Concepts and Techniques Project 1 Exploring Alice and Object-Oriented Programming.
Introduction to Windows7
Objective C Basics. It’s C with Some Extras!  Cross Platform language  Mac  Linux/UNIX  Windows  Layer above C (Superset)  Adds Object-Oriented.
Computing Fundamentals Module Lesson 3 — Changing Settings and Customizing the Desktop Computer Literacy BASICS.
© Paradigm Publishing Inc. MICROSOFT WINDOWS XP MAINTAINING FILES AND CUSTOMIZING WINDOWS Section 2.
Excel CREATING A WORKSHEET AND CHART. Personal Budget Worksheet We will create a personal budget worksheet that shows you income each month and your expenses.
Folio3 IPhone Training Session 1 Presenter: Imam Raza.
Downloading and Installing Autodesk Revit 2016
Lesson 11: Looking at Files and Folders what a file or folder is on the computer how to recognize a file or folder on the desktop how to recognize the.
Tabbed Views UITabBarController. Controller Architecture UITabBarController Controls the first view that the user sees The view controller class (and.
IOS with Swift Hello world app.
Using Xcode A Beginner’s Tutorial Erin Green. This tutorial will walk you through Xcode, a software development tool for Apple’s iOS applications – We.
1 What to do before class starts??? Download the sample database from the k: drive to the u: drive or to your flash drive. The database is named “FormBelmont.accdb”
XP New Perspectives on Windows 2000 Professional Windows 2000 Tutorial 2 1 Microsoft Windows 2000 Professional Tutorial 2 – Working With Files.
Lection №5 Modern integrated development environment.
View Controllers Content taken from book: “iPhone SDK Development” by Bill Dudney and Chris Adamson.
Downloading and Installing Autodesk Inventor Professional 2015 This is a 4 step process 1.Register with the Autodesk Student Community 2.Downloading the.
Nav Controllers UINavigationController. Overview Nav Controller basics Like a tabview controller, a navViewController manages views A navigationViewController.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
IMovie 10 Overview. Importing Files from a Video Camera into iMovie 1.Plug the camera into a wall outlet using the power supply. (Some cameras will not.
Getting Started with Word & Saving Guided Lesson.
The iOS Platform and SDK. iOS iPhoneiPad Mini iPad.
Modify Tables and FieldsModify Tables and Fields Lesson 4 © 2014, John Wiley & Sons, Inc.Microsoft Official Academic Course, Microsoft Word Microsoft.
Folio3 IPhone Training Session 2 Testing App on device Presenter: Imam Raza.
IE 411/511: Visual Programming for Industrial Applications Lecture Notes #2 Introduction to the Visual Basic Express 2010 Integrated Development Environment.
Office 2013 and Windows 8: Essential Concepts and Skills Microsoft Office 2013.
Digital Literacy Introduction to Computers Unit 1, Lesson 1.
Chapter 8 Using Document Collaboration, Integration, and Charting Tools Microsoft Word 2013.
Getting Started with Microsoft Word
iOS - iPhone/iPad Application Development Workshop Part 1
Designing with Introspection
CSCI 351 – Mobile Applications Development
Office 2010 and Windows 7: Essential Concepts and Skills
Microsoft Windows 2000 Professional
Introduction to TouchDevelop
EEC-492/693/793 iPhone Application Development
Presentation transcript:

1 1 iOS - iPhone/iPad Application Development Workshop Part 1

2 2 What do you need? Previous experience in another Object Oriented Programming (OOP) language will be helpful Some understanding of C can be helpful, but is not required. Objective-C builds on C++. Development Environment (IDE) is helpful Mac computer running OS X Lion or higher! If you plan to submit to the App Store, you will need Apple devices to do real testing on. The simulator is not good enough.

3 3 Introduction iOS is the operating system that runs iPhones, iPod Touches, iPads, and Apple TVs. The language used to develop software for iOS is Objective-C. (very similar to C) This workshop will teach you how to get started but will not have time to teach you everything. This workshop is good preparation for a real full iPhone/iPad, iOS Development class!

4 4 What is iOS? iOS is an OS. It’s a subset of Mac OS X. The iOS SDK is the software development kit that allows application programs to utilize classes and frameworks provided by the SDK. This workshop will focus on iOS SDK 5 iOS is multitasking and runs on different devices (iPhones, iPod Touches, iPads, and Apple TVs). Apple provides an IDE called Xcode. Xcode is the IDE used by iOS (and OS X) developers. It does NOT run on MS Windows. Xcode provides an interface to the compiler, editor, debugger, and code profiling tools.

5 5 Device Features SQLite for structured data storage Media support for common audio, video, and still image formats (MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF) GSM Telephony (hardware dependent) Bluetooth, EDGE, 3G, and WiFi (hardware dependent) Camera, GPS, compass, and accelerometer (hardware dependent) Rich development environment including a device simulator, tools for debugging, memory and performance profiling

6 6 Download the iOS SDK Download the latest from the Apple App store This is only available for Apple Macintosh computers It’s free To build to device and submit to the app store, you will be required to becomes a register Apple iOS developer It’s $99 year for the basic account If you plan to get a job in iOS development, you will need to establish a basic account and submit something to the Apple Store. Maybe a game?

7 7 Let’s get started - Launch Xcode You are presented with the Welcome screen: Create a new project Connect to a repository Learn about using Xcode Go to Apple’s Portal Go ahead and click on “Create a new project”

8 8 Project Template There are several predefined templates to help you get started on a new project For now, click on Single View Application

9 9 Project Options The Product Name is the name of your app Company Identifier is your organization name – such as edu.itu (reverse domain) Class Prefix (leave empty) Device Family: iPad, iPhone, Universal (Universal means that a single binary will have screens for iPhone, iPod Touch, and iPads) Storyboards Automatic Reference Counting Include Unit Tests (leave unchecked as we are not using)

10 Source Control Asks for a location for Source Control By Default, it will use a local GIT repository New developers not used to source control – this is extremely useful! It keeps track of versions, lets you see what’s changed, and will undoubtedly be used in any team project you run into in the “real” world GIT and Subversion are two popular source controls systems – there are many others to choose from

11 Where do I start?

12 Let’s build the default project Click the Run button (upper left of the screen) The iPad simulator will launch (You can also change this to iPhone if you want) You will have a blank white screen Press Command-Q to end the simulator

13 Quick Terminology: MVC Model-View-Controller (MVC) MVC is the paradigm of iOS programming Model: Holds data, should know nothing of the interface View: Code for getting data in/out of a view. Deals with items like buttons, lists, tables, etc Controller: Keeps the Model objects and View objects in sync

14 Quick Terminology: Delegate AppDelegate.h AppDelegate.m The Delegate is essentially the “controller” of your app. It links buttons, labels and views together.h files are header files and interfaces are defined here.m files are implementation files. These contain your classes, code, etc.

15 Quick Terminology: Storyboard These are new to iOS5 Storyboards help you graphically lay out your app before you code it. It makes it easy to see the “flow” of your app You are advised to use Storyboards going forward with you iOS programming adventures If you have tinkered with iOS in the past, you might be asking about the xib/nibs. They are still there, however, Storyboards offer similar functionality and make it easier to visualize your views. We will not be covering nibs in this workshop.

16 Quick Terminology: ARC Automatic Reference Counting (ARC) The LLVM 3.0 compiler handles memory management for you It is not a garbage collector! Prior to iOS5 – memory management was the single most difficult item to grasp in Objective-C. Unless you have specific reasons, all of your projects should use ARC.

17 Quick Terminology: Unit Tests We will not be discussing Unit Tests in this workshop Be advised – unit tests are very useful for your programs The tests can help you make sure your code changes are not breaking anything. The goal is to be able to find bugs quicker and fix them before your code goes to QA (or the customer!)

18 Click on the iPhone Storyboard It shows a blank view It looks like you are on a sheet of graph paper There are two buttons – below First Responder View Controller

19 Find the Label In Xcode, lower right hand corner, scroll until you find the object Label Drag Label to the blank view Double click on the Label you added, and change it to say “Hello World” Do the same steps for the iPad Storyboard

20 Run the project The iPad and iPhone projects should now display Hello World!

21 Next, add two buttons to your view Find the Round Rect Button, drag two to the view Double-click on one of the buttons and type Hello Double-click on one of the buttons and type Goodbye Run your project, click on the buttons

22 Nothing Happens – we have to tell it to do something Click on the Assistant Editor It looks like a tuxedo It will be in the upper right hand corner of your screen

23 Linking the ViewObject to your ViewController… You will see your ViewObject in the middle of the screen The right hand side of the screen should be the ViewController.h file View Object ViewController.h

24 Link the label… Single click on your Hello World label While holding down the Control key, left click-drag to the ViewController.h file You need to drag between in the code This will make a new property For the name, call it helloLabel so we can easily recognize what it is This step will allow us to make changes to the UILabel

Remember that Objective-C is an extensive to the C language symbol denotes an Objective-C is the start of a Classname: Superclass Anything between the declaration and end is part of the class

(weak, nonatomic) IBOutlet UILabel *helloLabel; A property is an attribute of the class Getters and Setters are automatically created for you Weak is a memory management term Nonatomic has to do with adding mutexes around your getters and setters IBOutlet stands for Interface Builder Outlet. Interface Builder still exists in iOS5 but we are using the new Storyboard feature instead.

helloLabel Synthesize – this creates the accessor/mutators (getters/setters) for you You can write your own if you want, but in general, there is no reason to do this.

28 Link the rest of the buttons Link helloButton to ViewController.h Link goodbyeButton to ViewController.h When done, you will have two properties Now, switch the Assistant window to the ViewController.m file

29 TouchUpInside Actions TouchUpInside events occur if you touch a button and lift off while inside the button This corresponds to a user tapping a button Right-Click on the Hello button On the far right, locate Touch Up Inside Left click-drag this over to your ViewController.m Notice it creates some code Do the same for the goodbye button

30 IBAction You created two IBActions Actions signify something that happens when you do something for example, push a button. When you push a button, it fires the action These are currently empty methods - (IBAction)helloPushed:(id)sender { } - (IBAction)goodbyePushed:(id)sender { }

31 Change the UILabel - (IBAction)helloPushed:(id)sender { Pushed"; } - (IBAction)goodbyePushed:(id)sender { Pushed"; } Self refers to the ViewController class We defined the property helloLabel earlier Text is a property of UILabel’s that we can set. text” is an NSString object that UILabels can display. Run your program and push the buttons. You should see the UILabel change when you press the buttons

32 Tab Controller If you’ve ever used an iOS device, you have come across apps that use the tab controller. Several of the built in apps (such as the phone app) use this controller For the next exercise, we are going to create a simple tab controller

33 Create a new project Close any existing projects you have open (to make things easier!) Select File->New- >Project from the application menu

34 Select Tab Template Select the “Tabbed Application” Template for your project

35 Set Options For product name, call it tabDemo Whatever you used for Company Identifier should be set – if not, edu.itu is ok Leave Class Prefix blank For Device family, choose iPhone (to keep it simple) Enable Storyboards and Arc Do not select Unit Tests

36 Look at the Storyboard Click on MainStoryboard.Storyboard Notice how the Tab Bar Controller is shown It also shows the child views associated with the tab bar buttons This lets the developer see the views and path to them at a quick glance. Go ahead and run the project, observe what happens when you tap the tab items. It switches between the views

37 Let’s add a new class: ThirdViewController On the left hand side, right-click on the tabDemo folder and select New File

38 Pick the type of file We are adding a new ViewController – so select Objective-C class

39 Pick the options For Class, type in Third In the Sublass combo box, select UIViewController The IDE will change your class name It is good naming convention to have the class be description – so in this case, ThirdViewController lets any developer know this is a ViewController Leave Targeted for iPad and XIB unchecked

40 Create Take the default options, click the Create button

41 We now have a.h and.m Notice that you now have two files ThirdViewController.h and ThirdViewController.m If you look at the files, they are basically “skeleton” classes ready for the developer

42 Add another View Controller Add a new View Controller to the Storyboard After you add it, it will not be linked to any view

43 Our new view, all alone Notice that Storyboard does not have any arrows pointing to it The developer will have to make the association as this view could be a sub view of any of the views shown

44 Link this ViewController to the Tab Controller Hold down the Control key, left-click drag from the Tab Controller to the new view we just added This tells Storyboard that this view is going to be accessed from the tab controller

45 Select Relationship

46 Label this before we forget Click on the Text Change this to say Third We do not have any graphics – if we did, we would want to go ahead and add a graphic for this. Note: you will need graphics for standard iPhones, retina, and iPads.

47 Lets be more specific about the class Left Click on your new view in Storyboard – icon on right bottom Click the Identify Inspector (upper right) Notice how the class is currently UIViewController We need to make this to be associated with our ThirdViewController (which is a subclass of UIViewController)

48 Select ThirdViewController From the combo box, scroll until you find ThirdViewController This will let us do any custom actions we might need to do Remember: ThirdViewController has all of the methods and properties of a UIViewController!

49 Let’s Replace the First View We are going to replace the FirstViewController with a TableViewController Click on First View, hit the Delete button to remove it

50 Drag a Table View Controller From the Object Library, drag over a Table View Controller A good spot would be where you just deleted the other view controller

51 Embed Navigation Controller From the Xcode menu bar, select Editor->Embed In- >Navigation Controller Notice that another view controller is added to the Storyboard canvas

52 Check it out This is what we did in the previous slide Since the Navigation Controller is a container, there is a relationship between the Navigation controller and the table view controller. (Noted by the connecting arrow)

53 Hook up the Scenes Ctrl-drag from the Tab Bar controller to the Navigation controller Select Relationship – View Controllers

54 Look at Storyboard now The relationship is defined When we added this, it added an entry labeled “Item” as the last tab bar button Drag this “Item” and make it the first entry in our tab bar

55 Fix up the tab bar items Drag item to the left most position Also, let’s rename this back to First Double-click on Item in the Navigation Controller scene, change text to First

56 Name the Navigation bar In the Table View window, double-click on the Title bar. Type in “Things” to give the Navigation bar a name. In a “real” app, you would type something descriptive and meaningful to the user.

57 The Navigation Bar has a title You can now see the title has a name. If you have noticed, we have been getting a warning from the compiler for our storyboard. “Prototype table cells must have reuse identifiers”

58 Let’s get rid of the warning Warnings are typically not something you want in your program. We are getting this warning because we have not configured the cells yet – so the compiler does not know what they are.

59 Table View Controller Click on the blank prototype cell Next, click on the attributes inspector and set Style to Subtitle.

60 Attributes Inspector

61 More cell attributes Set the Accessory attribute to Disclosure Indicator. Give the cell an identifier of ThingsCell. The warning from Xcode is a reminder to developers – there is something you need to do if you want this to work. (Side note – warnings are something you should not overlook. Several program crashes can stem from warnings people don’t pay attention to.)

62 Add a UIViewController subclass template… Add a new file to the project. Choose UIViewController subclass template. Name the class ThingsViewController, this will be a subclass of UITableViewController

63 New file

64 Objective-C Class

65 ThingsViewController

66 Create to add to project

67 Set the class with Identify Inspector Click on the TableViewController object (the whole object will be outlined in blue) Now, click class and select ThingsViewController

68 Build and run! Go ahead and build the app You can now add items to the table view if you want to continue working with this app.

69 HelloTabBar Example Download: Save to your desktop. Double-click to uncompress the file Double-click on “HelloTabBar.xcode.proj” to load the project in XCode Examine and customize as you wish!

70 The End of Part 1 Next… Part 2 Objective-C Programming