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.

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.

Please help improve this documentation. If a section is hard to understand, there is a typo, you would like a new section added, or you detect any other improvement that can be made then please email support@vvi.com with your information.




© Copyright 1993-2011 by VVimaging, Inc. (VVI); All Rights Reserved. Please email support@vvi.com with any comments you have concerning this documentation. See Legal for trademark and legal information.