1    

Xcode Application note - how to export file from an iOS application

Feifei Li

ECE480 Design Team 10

2    

Table of Contents  

Introduction ...................................................................................................................... 3

Get Started ....................................................................................................................... 3

Familiar with Xcode .......................................................................................................... 6

Create user interface ........................................................................................................ 7

Export file ....................................................................................................................... 12

References ..................................................................................................................... 14

 

3    

Introduction Frist of all, it is necessary to know how to create an iOS application before get into more information about exporting files.

You are going to create an iOS application as follows, which is using Objective-C language. It is more suitable and convenient if you have a MAC system to do that. On your MAC, you can create iOS apps that can run on iPad, iPhone, and iPod touch, which depends on your choice. Before you can start developing apps, set up and make sure you have the right tools to achieve. The developing tool you are going to use is called Xcode.

(From developer.apple.com)

Xcode is Apple’s integrated development environment (IDE). Xcode includes a source editor, a graphical user interface editor, and many other features. The iOS SDK extends the Xcode toolset to include the tools, compilers, and frameworks you need specifically for iOS development. You will need to download the latest version of Xcode from the App Store. The iOS SDK is included with Xcode.

Get Started After set up the tool, you can create a project using it. We will go through what an app is, the process of creating a simple user interface, and some idea about adding the custom behavior that transforms the interface into a working app.

To create a new project

1. Open Xcode. The welcome window appears like:

4    

2. In the welcome window, click “create a new Xcode project” (or choose File>New>Project). Xcode opens a new window and displays a dialog in which you can choose a template.

5    

In this window, you can choose the template that Xcode already have and can generate for you to develop common styles of iOS apps. Most of these templates have preconfigured interface and source code files for you to start working wit. For this time, because we are not focus on how to build a complex program, we are going to get into how to export file, so, we can create a really simple project template. A “single view application” template will be more properly for this purpose.

3. In the iOS section at the left of the dialog, select Application. 4. In the main area pf the dialog, click Single View Application and then click Next. 5. In the dialog that appears, give your app a name and choose additional options

for it.

Notice:

• Product Name: which is Xcode uses the product name you entered to name your project and the app.

• Company Identifier:  Your company identifier, if you have one. If you don’t, use com.example.

• Class Prefix: XYZ

6    

Xcode uses the class prefix name to name the classes it creates for you. Objective-C classes must be named uniquely within your code and across any frameworks or bundles you might be using. To keep class names unique, the convention is to use prefixes for all classes. Two-letter prefixes are reserved by Apple for use in framework classes, so use something that’s three letters or longer.

• Device: Choose iPhone for this project. 6. Click Next. 7. In the dialog that appears, choose a location for your project and click Create.

Xcode opens your new project, which is the workspace window and look like:

Familiar with Xcode Xcode includes everything you need to create an app. It not only organizes the files that go into creating an app, it provides editors for code and interface elements, allows you to build and run your app, and includes a powerful integrated debugger.

It is really useful to familiar with the Xcode workspace before start to create the user interface. The workspace includes toolbar, navigator area, editor area and utility area. You can build and run the Single View Application template by use the iOS Simulator when you want to check the program, which is pretty simple, just click the Run button on the right top corner of the workspace in toolbar section.

The following picture shows the Xcode workspace window:

7    

Create user interface In the Single View Application project, it has all the things you will need and already include Main.storyboard, which is used for create user inter face. A storyboard is a visual representation of the app’s user interface, showing screens of content and the transitions between them. You use storyboards to lay out the flow—or story—that drives your app.

Design user interface

1. In the project navigator, select Main.storyboard. Xcode opens the storyboard in Interface Builder in the editor area. You will see there is one empty scene already shows in this area, because we chose the Single View Application template.

Toolbar

Navigator area Editor area Utility area

8    

Next, we are going to add some objects on this screen.

2. Open the Object library, which appears at the bottom of the utility area.

A list appears showing each object’s name, description, and visual representation.

9    

3. Find the Label object 4. Drag a Label object from the list to scene.

5. Drag the label to the center of the top scene until vertical guides appear.   (The

guides are visible only when you’re dragging or resizing objects next to them, so they will disappear when you let go of the label.)

6. Double-click the text of the label to select it for editing. 7. Type in what you want to title this scene. 8. Then, find Text Field in the list, drag it to the scene, add name it. Do this for more

two times. 9. Find Button in the list, drag it into the scene as well. This button will be a save

button, when click it, it will export the file and saved. Add another button called “view”, which will show the data inputted in the text view.

10. Find Text View in the list, drag it to the scene, and name it. This will show where the file will be created and saved. The screen will be look like as follows:

10    

Connections

1. On the left upper corner at toolbar, find the Assistant editor button, and click.

2. The editor area will show two areas shows the storyboard and ViewControlller.h,

we can link the object with ViewController.h together, just by Control+Click+Drag. For the three text field and text view, the connection is Outlet, name them respectively in the dialog. For the two buttons, the connection is action, also name them respectively.

11    

3. When type the data in the text fields, the keyboard should show up, so, a line of

an action should be added in the ViewController.h as: - (IBAction)retractKeyboard: (id)sender;

4. Then, link the text fields with the keyboard, right click the text field, find “Did End On Exit” under “Sent Events”, then drag the plus button to the line of code you just added.

12    

The ViewController.h should be look like this at this moment:

Export file So far, we done the basic things and create a very simple application for us to test. Next step is to save the data that typed in and export them into a .csv file through writing some useful code in the ViewController.m, which is the implement file.

After we connect the storyboard and ViewConroller.h, we need tell the application what it is going to response when the user sender a control message.

1. Open ViewController.m. 2. Under retract Keyboard action section, add the following line:

[self resignFirstResponder]; 3. In the saveinfo section, we are going to use NSString to save the information we

want into a string, and separated by comma.

4. Add another string, which represents the path to a document directory.

5. To show the document directory, add the line:

_resultview.text = docPath; 6. Run the simulator. 7. In the result view, it shows where your file is actually stored when you test them

in the simulator. This path can be changed. 8. Then common the above line out, we are continue the code. 9. Add a string to create a file:

10. Add few code to check whether there is a file, if not, it will create one:

13    

11. Then create a file handle to access data associated with files:

12. Therefore, the saveinfo section should as follows:

Then you can run the simulator to see what happens. When you click the save button after input some data, you should get a message saying” info saved”.

14    

References “Start Developing iOS Apps Today”.  https://developer.apple.com/library/iOS/referencelibrary/GettingStarted/RoadMapiOS/index.html#//apple_ref/doc/uid/TP40011343-CH2-SW1

“iOS 5 – Save Data to a CSV Text File” video. https://www.youtube.com/watch?v=ngvzUgHXX44