Advanced app development for ios. Lab 1 Introduction to Mac OS X and ios app development. Gdańsk 2015 Tomasz Idzi

Transcription

1 Advanced app development for ios Lab 1 Introduction to Mac OS X and ios app development Gdańsk 2015 Tomasz Idzi

2 Introduction This lab is designed to acquaint the student with the basic functionality of the Mac OS. Tasks to be performed is not subject to assessment, although it is recommended to perform with extreme care, since they are the basis for the next class. A student who will perform the following tasks should possess basic knowledge of navigating the Mac OS. Mac OS X - First look The desktop is the space where you see files, folders and application windows. Learn about your desktop and how to customize it. 1. Elements of the desktop

3 1. Apple menu (apple) - information about Mac, System Preferences, Sleep, Shut Down and more. 2. Application menu - contains menus for the application you re currently using. The name of the application appears in bold next to the Apple menu. 3. Menu bar - contains the Apple menu, active application menu, status menus, menu bar extras, Spotlight icon and Notifiaction Center icon. 4. Status menu - shows the date and time, status of your computer or gives you quick access to certain features - for example, you can quickly turn on Wi-Fi, turn off Bluetooth or mute your s computer s volume. 5. Spotlight icon - Click it to bring up the Spotlight search field, where you can search for anything on your Mac (in the newest Mac OS X - Yosemite to run Spotlight you have use keyboard shortcut + space). 6. Notification Center icon - Click it to view Notification Center, which consolidates your notifications from Messages, Calendar, Mail, Reminders, and third-party apps. 7. Desktop - This is where your applications' windows will appear. You can add more desktops using Mission Control. 8. The Dock - Quick access to your most frequently used applications, folders, and files. With a single click the application, folder, or file opens. Finder The Finder is the app that helps you navigate all of the files and folders on your Mac. The Finder lets you browse your apps, disks, files and folders in variety of ways. You can use the Finder to organize these items the way you want. You can also use the Finder to search for items, delete files you no longer want and more. 2. Finder icon To open a new Finder window, click the Finder icon in the Dock, than select File > New Window/ New Finder Window ( + N). The first window you may see in Finder is All My Files. This is a special window that shows all of the documents you have access to on your Mac.

4 3. Finder All My Files window. You can change how items are displayed in Finder windows by dragging them, arranging them or changing view. Use the View menu to change the view of the current Finder window. You can also click the corresponding View button in the Toolbar that appears at the top of Finder windows. Changing Views Icon View/List View/Column View/Cover Flow Arrangin items Arrange items in a folder from the View menu as well. Action button Include shortcuts to common actions in Finder 4. Finder baisic options. Using folders The Finder shows you the files contained on the disk and drives connected to your computer. You can organize these files into folders. You can store folders within other folders.

5 5. Creating folder in Finder. To create a new folder, use these steps: 1. Click where you want the folder to appear, such as on the desktop. 2. Choose File > New Folder. 3. Drag any of the files or other folders into this that you want field into the folder. You can also create a folder quickly by selecting multiple items. 1. Select the items you want to place in a folder. - click and drag your pointer across the items to create a selection box - or hold down the Command key on your keyboard and clidk each item you want to select - or select the first item you want in a list, then hold down the Shift key and select the last item 2. Choose File > New Folder with Selection After finishing these steps, the items are then placed in a folder. You can type a new name for the folder once it appears, like my files. To view the items stored within the folder, double-click the folder to see its contents. The name of the folder it shown at the top of the window to let you know which folder you are viewing.

6 Using folders When you no longer want an item, you can delete it. Select the item (or folder of items) in the Finder, then choose File > Move to Trash. The Finder then moves the item to a special folder called "Trash" so that you no longer see it. You can view items that are marked for deletion by clicking the Trash icon in the Dock. 6. Trash icon in the Dock. You can also removing a file by drag and drop on trash icon. To rename a file/folder in Mac OS X, you have to click on it and: - right-clicking, choose GetInfo and in Name & Extension section type new name - or press Enter button and type new name - or in finder open Action menu, choose GetInfo and in Name & Extension section type new name 7. Rename folder in Mac OS X

7 Compress an item Do any of the following: Select the items you want to compress and choose File > Compress. Control-click an item and choose Compress from the shortcut menu. In a Finder window, select one or more items and choose Compress from the Action menu. If you compress a single item, the compressed file has the name of the original item with the.zip extension. If you compress multiple items at once, the compressed file is called Archive.zip. Uncompress (expand an item) Double-click the.zip file. Keyboard shortcuts To use a keyboard shortcut, press a modifier key at the same time as a character key. For example, pressing the Command key (it has a symbol) and then the "c" key copies whatever is currently selected to the Clipboard. This is also known as the Command-C keyboard shortcut. You can see the keys that map to many shortcuts by looking in an app's menus. 8. App s menus with shortcuts.

8 fn Command key Control key Option key Shift Key Caps Lock Function Key 9. Keys represented by special symbols Cut, copy and paste Key combination Command-C Command-X What it does Copy the selected data to the Clipboard Remove the selected item and place a copy on the Clipboard Command-V 10. Shortcuts to cut, copy and paste. Place a copy of (paste) the Clipboard contents into the current document or app

9 Xcode Xcode is Apple s integrated development environment (IDE) that you use to build apps for Apple products such as the ipad, iphone, and Mac. Xcode provides tools to manage your entire development workflow from creating your app, to testing, optimizing, and submitting it to the App Store. 11. Xcode icon. 12. Workspace window.

10 Make the first ios app Xcode includes several built-in app templates for developing common types of ios apps, such as games, apps with tab-based navigation, and table-view-based apps. Most of these templates have preconfigured interface and source code files. This time, you ll start with the most basic template: Single View Application. 1. Find Xcode icon in Dock and run the application. 2. In the welcome window click Create a new Xcode project.

11 3. In the ios section at the left of the dialog, select Application. 4. In the main area of the dialog, click Single View Application and then click Next. 5. In the dialog that appears, name your app and choose additional options for your project. Use the following values: Product Name: MyFirstApp (it will be name of your project and app). Organization Name: The name of your organizatio or your own name. You can leave this blank. Organization Identifier: Your organization identifier, if you have one. If you don t, use com.example. Bundle Identifier: This value is automatically generated based on your product name and organization identifier. Language: Objective-C Devices: Universal (iphone and ipad) Use Core Data: Leave unselected 6. Click Next. 7. In the dialog that appears, choose a location to save your project and click Create. Xcode opens your new project in a window (workspace window):

12 Run ios Simulator Because you based your project on an Xcode template, the basic app environment is automatically set up for you. Even though you haven t written any code, you can build and run the Single View Application template without any additional configuration. To run your app in ios Simulator 1. Make sure iphone is selected in the Scheme pop-up menu in the Xcode toolbar. Scheme

13 Go ahead and look through the menu to see what other hardware options are avaliable in ios Simulator. 2. Click the Run button, located in the top-left corner of the Xcode toolbar. Run button Activity viewer 3. Watch Xcode toolbar as the build process completes. After Xcode finishes building your project, ios Simulator starts automatically. It may take a few moments to start up the first time.

14 Right now, the Single View Application template doesn t do much it just displays a white screen. Other templates have more complex behavior. It s important to understand a template s uses before you extend it to make your own app. Running your app in ios Simulator with no modifications is a good way to start developing that understanding. Create User Interface in Interface Builder The Interface Builder editor within Xcode makes it simple to design a full user interface without writing any code. Simply drag and drop windows, buttons, text fields, and other objects onto the design canvas to create a functioning Mac, iphone, or ipad user interface. To create UI in Interface Builder: 1. Select Main.storyboard file which you find in Navigator area on the left side of Xcode window. 2. Next in Utilities area on the right side of Xcode window find UIButton. Drag it from the list and drop on View Controller field. Do it three times. Double-click on the button to change title.

15 3. Now User Interface should looks like:

16 4. Select Show the Assistant editor button, which is on the right side of Toolbar. Than editor area will divide to two parts. In code section select ViewController.h file. 5. Than select UIButton in Interface Builder, press ctrl button on keyboard, drag and drop in ViewController.h code Type name of property and press enter. Do it for every button.

17 6. Than add new action method changecolor section. #import ViewController : (weak, nonatomic) IBOutlet UIButton (weak, nonatomic) IBOutlet UIButton (weak, nonatomic) IBOutlet UIButton *bluebutton; - 6. Than select button in Interface Builder. In Utilities area on the right side of Xcode select Connection Inspector (the last icon). Than find Touch Up Inside in the list, press dot on the right side of the text and make connection with ViewController. Than select changecolor method from the list. Do it for every button.

18 7. Than go to ViewController.m file and implement changecolor method. 8. Run ios Simulator and press buttons. You should see how the color of backround is changed.