Vvidget Code Reference Manual

Vvidget Code > Programming > Cocoa Touch > Tutorial

a.k.a.: iPhone, iPad, iPod touch (iOS) Programming Tutorial

This tutorial outlines the step needed to make an iPhone, iPad, iPod touch application. You may wish to read the Cocoa Tutorial first because it is very similar and is also chock-full of diagrams and explanations. However, this tutorial is self contained and provides all the information required for a Cocoa Touch tutorial.

Prerequisites

First install the Apple Xcode developer tools with the iOS SDK and the Vvidget Code distribution.

Make A New Project

Launch Xcode, located on your computer at /Developer/Applications/Xcode, and make a new Cocoa Touch Application project.

Add Vvidget Capability

Xcode does not come with Vvidget capability so you will have to explicitly add it to your application. Adding that capability is a matter of properly referencing the Vvidget header files and library. Within Xcode click the menu item "Project > Add to Project ... ", navigate to /Library/Vvidget/ios/include, select all of the header files and add them. Next click the menu item "Project > Add to Project ... " again, navigate to /Library/Vvidget/ios/lib/simulator, select the libVvidget.a library archive and add that too. You may wish to make a Group folder within Xcode, called "Vvidget", for instance, and place the newly added files within that group.

Add libz Capability

Right-Click the Frameworks Group in Xcode then from the resulting menu select Add > Existing Frameworks ... In the resulting panel choose libz.dylib and click the Add button.

Interface

A Cocoa Touch application's interface is constructed using the GUI tool called Interface Builder. Use that to add a Vvidget Code view onto your window as follows. In Xcode, double click MainWindow.xib, to open it up. Depending on the type of Cocoa Touch application you created you will now need to locate the View Controller's view instance within the window. Click that view instance once, then go to the IB Library Tool and drag a Cocoa Touch View instance (of class UIView) onto the view instance already on the window. Then in the Identity Inspector change the class to VvidgetCodeView. In the final result, a graph will appear within the instance of VvidgetCodeView you just made.

In this step it is incumbent upon you to add an ivar into the xib file's View Controller and connect that to the VvidgetCodeView instance you just made, lets call that ivar graphView. That is similar to the Cocoa Tutorial so I won't elaborate here.

Source Code Implementation

In the View Controller's header (interface) file add these ivars:

id graphView; // already added in steps above id constructor; id dictionaryParser; BOOL templateDidChange;

Notice that in order to add ivars it is implicit that you have subclassed the View Controller and are using that subclass as the nib owner. In the View Controller's .m (implementation) file at the top add these imports:

#import "VvidgetCodeDictionaryParser.h" #import "VvidgetCodeDictionaryConstructor.h"

In the viewDidLoad method body add the following code.

dictionaryParser = [[VvidgetCodeDictionaryParser alloc] init]; constructor = [[VvidgetCodeDictionaryConstructor alloc] init]; [dictionaryParser VC_associate_with_view:graphView]; templateDidChange = YES;

In the viewWillAppear: method body add the following code.

[constructor VC_reset]; [constructor VC_append_key:"pvs_version" unsigned_value:1U]; [constructor VC_append_key:"vvidgetcode_deployment_license" char_c_array_value:"embedded 1d65ch78f09aadR06464fY6" length:32U]; [constructor VC_append_key:"image_maker" string_value:@"chart"]; [constructor VC_append_key:"chart_type" string_value:@"line"]; [constructor VC_append_key:"chart_subtype" string_value:@"linear"]; [constructor VC_append_key:"chart_format_type" string_value:@"default"]; [constructor VC_append_key:"title" string_value:@"Graphs For Your iPad, iPhone and Mac"]; [constructor VC_append_key:"data_1" string_value:@"1 2 3 4 5 6"]; if(templateDidChange == YES) {   NSString *templatesPath = templatesPath = [[NSBundle mainBundle] resourcePath];   templatesPath = [templatesPath stringByAppendingPathComponent:@"my_templates"];   [constructor VC_append_key:"x_title" string_value:@"X Direction"];   [constructor VC_append_key:"y_title" string_value:@"Y Direction"];   [constructor VC_append_key:"templates" string_value:templatesPath];   templateDidChange = NO; } [dictionaryParser VC_update_using_dictionary_constructor:constructor]; [graphView setNeedsDisplay];

Note how the templates key is only added to the dictionary the first time. That is an efficiency detail. If the templates directory changes then set templateDidChange to YES.

Template File

Make a folder in your project's root called my_templates. Navigate to /Library/Frameworks/Vvidget_PVS.framework/Resources/English.lproj/templates and drag the document named PVST_LineGraph.book into your project's my_templates folder (the one you just made). Then in Xcode add that folder (as a folder reference) to the Resources group of your project.

Linker Flags

In the Project Configuration Build settings add this linker flag:

Setting	Value
Other Linker Flags	-all_load

Testing

Click the Build And Run button within Xcode to test the application in the simulator.

Refining

Listed below are just a few refinements that you will need to think about.

• Once your Xcode project is graphing while running its target (application) then you can modify the source code to acquire and present your actual data using the graph types, data values and format you choose.

• It is probably better if you move the PVST_LineGraph.book document to a different location, then double click it to open it and "File > Export To ..." a Skin document named PVST_LineGraph.book in the my_templates folder of your project. A skin file is a flat and compressed Vvidget Builder document that loads faster into the app. Suggestion: While you are looking at the template file you can also change thousands of attributes in it and experiment with the template concept of Vvidget Code. If you need to make many documents into skins then you can automate it with the CLI tool vvizard.

• I totally skipped over the fact that the instructions above told you to add the simulator version of the Vvidget library into your project. Thus you can only build a simulator version of your app. To build a version that runs on the device you will need to use a different build Configuration (or make a new one) and then setup the linker search path for each separate build Configuration to point to each separate library. This is a known issue while linking in static libraries with Xcode (no big deal once you get use to it).

• You should probably subclass VvidetCodeView and override the touch event methods so that they are processed according to your own needs.

Deploy

Deployment involves distribution keys and iTunes App Store submission and are beyond the scope of this tutorial.

Summary

This tutorial described how to make a Vvidget Code project from scratch for an iOS device. You may also wish to consult the iOS Projects which are pre-made projects that you can build right away and examine for the exact setup details.