Dapp

As promised, here is a UIScrollView tutorial. I’ve gone ahead and made it extremely simple . Should be a nice change from some of the other more complicated tutorials I’ve seen online.

As the scroll view we are going to create is very simple, it is perhaps worthwhile to checkout Apple’s documentation on this object so you can go ahead and add your own custom features.

Apple UIScrollView Class Reference

Enjoy the tutorial .  I’ve also attached a copy of the updates I made to the Dapp exported code files so you can just browse the code if you wish.

ScrollViewApp Project Files

And just to be extra nice to those that just want to have a quick look at some of the code without downloading or watching anything .

HomeView.h

// Parent View Controller
@class HomeViewController;
 
@interface HomeView : UIView {
    HomeViewController *refParentViewController;
 
    UIScrollView *ourScrollView;
}
 
- (id)initWithParentViewController:(HomeViewController *)parent;
@end

HomeView.m

// Header File
#import "HomeView.h"
 
// Parent View Controller
#import "HomeViewController.h"
 
// Please add the QuartzCore.framework to the project
#import <QuartzCore/QuartzCore.h>
 
// Private Methods
@interface HomeView()
- (void)loadRectangleView1;
- (void)loadRectangleView2;
- (void)loadRectangleView3;
- (void)loadScrollView;
@end
 
@implementation HomeView
 
#pragma mark -
#pragma mark Memory Management
 
- (void)dealloc {
    [ourScrollView release];
    [super dealloc];
}
 
#pragma mark -
#pragma mark Initialization
 
- (id)initWithParentViewController:(HomeViewController *)parent {
    if ((self = [super init])) {
        // Update this to initialize the view with your own frame size
	[self setFrame:CGRectMake(0, 0, 320, 460)];
 
	// Assign the reference back to the parent view controller
	refParentViewController = parent;
 
	// Set the view background color
	[self setBackgroundColor:[UIColor lightGrayColor]];
 
        // Our load scrollview method
        [self loadScrollView];
	}
	return self;
}
 
#pragma mark -
#pragma mark Load Subview Methods
 
- (void)loadScrollView {
    ourScrollView = [[UIScrollView alloc] init];
 
    // Now to populate and configure our scroll view
    // 416 is the height of our view that is leftover, after you take away the navigation bar (44 pixels) and status bar (20 pixels)
    [ourScrollView setFrame:CGRectMake(0, 0, 320, 416)];
 
    // Now we need to add our rectangle views as subviews of our scroll view.
    [self loadRectangleView1];
    [self loadRectangleView2];
    [self loadRectangleView3];
 
    // Now we need to set our content size for our scroll view.  Which can be any size and is not limited by our scroll view frame size.
    [ourScrollView setContentSize:CGSizeMake(320, 500)];
 
    [self addSubview:ourScrollView];
}
 
- (void)loadRectangleView1 {
    UIView *rectangleView1 = [[[UIView alloc] init] autorelease];
    [rectangleView1 setBackgroundColor:[UIColor greenColor]];
    rectangleView1.layer.cornerRadius = 10;
    rectangleView1.layer.borderColor = [[UIColor blackColor] CGColor];
    rectangleView1.layer.borderWidth = 1;
    [rectangleView1 setFrame:CGRectMake(110, 37, 100, 100)];
    [ourScrollView addSubview:rectangleView1];
}
 
- (void)loadRectangleView2 {
    UIView *rectangleView2 = [[[UIView alloc] init] autorelease];
    [rectangleView2 setBackgroundColor:[UIColor greenColor]];
    rectangleView2.layer.cornerRadius = 10;
    rectangleView2.layer.borderColor = [[UIColor blackColor] CGColor];
    rectangleView2.layer.borderWidth = 1;
    [rectangleView2 setFrame:CGRectMake(110, 196, 100, 100)];
    [ourScrollView addSubview:rectangleView2];
}
 
- (void)loadRectangleView3 {
    UIView *rectangleView3 = [[[UIView alloc] init] autorelease];
    [rectangleView3 setBackgroundColor:[UIColor greenColor]];
    rectangleView3.layer.cornerRadius = 10;
    rectangleView3.layer.borderColor = [[UIColor blackColor] CGColor];
    rectangleView3.layer.borderWidth = 1;
    [rectangleView3 setFrame:CGRectMake(110, 356, 100, 100)];
    [ourScrollView addSubview:rectangleView3];
}

Welcome!

This is a two part series on how you can create an Augmented Reality app using just Dapp and Layar.  As part of this series, I have also included the settings for a sample published Layar app for you to try out.

The first required step is that you download the Layar Player SDK - LayarPlayerSDK26May.zip

Alternatively, you can also download the latest Layar Player SDK at http://www.layar.com/tools/player/, just be careful with later versions as instructions might have changed and this tutorial might no longer be 100% correct.

Within the Layar Player SDK is also included the “LayarPlayer SDK 1.1 Documentation.PDF”.  Please open this file when working on the second part of the tutorial as this is the documentation I work from and can assist in getting everything correctly setup.

PART ONE

The first part shows us creating a simple Dapp app that we will export to Xcode.  This will form the basis of our Layar App.

PART TWO

Part two of this video tutorial involves us copying over our exported Dapp code into a new Xcode project.  Feel free to visit Creating an advanced Hello World Xcode 4 iPhone project with Dapp video tutorial for a more detailed rundown of copying over these files to Xcode.

This is my first Audio based Video Tutorial and I feel I might have moved a bit too quickly .  All good, just make sure you press the pause button often so you can keep up. Finally, feel free to view the video in full-screen 720p HD mode if you have any trouble seeing any of the code. Everything should then be perfectly clear .

Amendment: Throughout the video I included Release AND Debug symbols (as well as both the Debug and Release folders). Perfectly fine to use both during development but prior to release, please remove references to Debug symbols and the copied Debug folder from your project as they are no longer required.

The code that we insert during this second tutorial is:

- (void)loadLayarPlayerWithName:(NSString *)layarName key:(NSString *)consumerKey secret:(NSString *)consumerSecret {
    NSArray *oauthKeys = [NSArray arrayWithObjects:LPConsumerKeyParameterKey, LPConsumerSecretParameterKey, nil];
    NSArray *oauthValues = [NSArray arrayWithObjects:consumerKey, consumerSecret, nil];
    NSDictionary *oauthParameters = [NSDictionary dictionaryWithObjects:oauthValues forKeys:oauthKeys];
    NSArray *layerKeys = [NSArray arrayWithObject:@"radius"];
    NSArray *layerValues = [NSArray arrayWithObject:@"1000"];
    NSDictionary *layerFilters = [NSDictionary dictionaryWithObjects:layerValues forKeys:layerKeys];
    LPAugmentedRealityViewController *augmentedRealityViewController = [[[ LPAugmentedRealityViewController alloc] init] autorelease];
augmentedRealityViewController.delegate = nil;
    [self presentModalViewController:augmentedRealityViewController animated:YES];
    [augmentedRealityViewController loadLayerWithName:layarName oauthParameters:oauthParameters layerFilters:layerFilters options:LPMapViewDisabled | LPListViewDisabled];
}

 
Also, this is the sample Layer Player name, consumer key and secret key to use within the tutorial (if you don’t already have your own).

• Player Name: nestest
• Consumer Key: e4c775db9a1d90377764dd8ba06829
• Secret Key: 3e69effc36

 
Create an Augmented Reality app with Dapp and Layar Player SDK Dapp Auto-Generated Project Files
 
As a special treat I’m also attaching my complete Xcode project. Feel free to replace my Dapp generated files with your own, and use it as a starting template for future Layar SDK projects . The neat thing is that all the frameworks, include files and everything is already setup for you. Please Note: These include/release/debug folders would need to be replaced when using future versions of Layar Player SDK.
 
Create an Augmented Reality app with Dapp and Layar Player SDK Dapp Complete Project

Comments are encouraged as I’m keen to update this video tutorial wherever might be required.

There is a bug in version 1.3 of Dapp which is causing Navigation Controllers not to be hidden when exporting to code.  I’ll be correcting this in the next update, but before then, this is a little tutorial on the code you can use to hide them yourself.

Oh, also please note that this is an extension to another tutorial – Updating Navigation Controller in code.  The other tutorial will show you how to update the look of the Navigation Controller (and how to hide it).  Although I’ll be going into a bit more depth on how to use the viewWillAppear method in your code.

If you want to hide your Navigation Controller throughout your whole app, then you will want to be placing this in your AppDelegate.m file.  Dapp generally creates this file with the format <ProjectName>AppDelegate.m. If you scroll down the code, you will see the part where I inserted the code to hide the Navigation Controller. Just copy this part and place it in your equivalent didFinishLaunchingWithOptions method.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
	// Override point for customization after app launch
	// Create the window object
	UIWindow *localWindow = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
 
	// Assign the localWindow to the AppDelegate window, then release the local window
	self.window = localWindow;
	[localWindow release];
 
	// Setup the first view controller
	Page1OffViewController *page1OffViewController = [[Page1OffViewController alloc] init];
 
	// Initialise the navigation controller with the first view controller as its root view controller
	navigationController = [[UINavigationController alloc] initWithRootViewController:page1OffViewController];
 
        // This is where we hide the navigation bar! :)
        [navigationController setNavigationBarHidden:YES];
 
	// Navigation controller has copy of view controller, so release our copy
	[page1OffViewController release];
 
	// Add the navigation controller as a subview of our window
	[window addSubview:[navigationController view]];
	[window makeKeyAndVisible];
 
	return YES;
}

Ok, that’s just if we want to hide our Navigation Controller throughout our entire app. There are times where we would like to show it, and then alternately hide it. To specifically control this for every page, you will need to have a viewWillAppear method in your View Controllers which is where you can call code to hide your Navigation Controller.

Just copy the following code underneath your ‘#pragma mark UIViewController Delegates’ section in your code for the View Controller that you wish to hide your Navigation Bar for.

- (void)viewWillAppear:(BOOL)animated {
    [self.navigationController setNavigationBarHidden:YES];
 
    [super viewWillAppear:animated];
}

And that’s it. Pretty simple . I’ve added this to the list of known bugs and will be addressing this in the next update so that you can individually set this within Dapp itself.

Just a quick Tab Bar Controller tutorial.  :)

I’ll put up the Dapp generated source code tomorrow.  But yeah, this video shows a quick rundown of building a Design (Project) with 3 Pages (View Controllers) that are linked together with Actions.

From there, I set up the Tab Bar Controller and Tab Bar Items.

Tab Bar Controllers support custom images, titles and all of the system Tab Bar Item choices.

Just a BIG bit of information in regard of Tab Bar Item images is to make sure you read the Apple Custom Icon and Custom Image Creation Guidelines.  Basically, Tab Bar Item Images must follow a strict format guidelines for them to display correctly.  I’ll try to get a more condensed version of those guidelines on the website tomorrow.

Without further ado, here is the Tab Bar Controller with Dapp Video Tutorial.

Updated for Xcode 4.  The process is very easy, and it’s a short tutorial!

Bonus is that the tutorial was done in the latest version of Dapp (1.3 – currently in review with Apple), which includes the improved tableviews.

Check it out!

Note: Use Xcode 3? Then please view our Xcode 3 version of this video tutorial – Hello World Tutorial for Xcode 3

I’ve created a list of all the tutorials that are available so they can more easily be referenced .

You can view all tutorials by category at – Dapp iPhone SDK Tutorials

If you are looking for support, then you can contact me at:

dapp@kerofrog.com.au

I check my emails every morning, so you should get a very speedy reply .

Otherwise, the following is the current list of tutorials ordered by their publish date.

Tutorials

• How to Send Email – Dapp + Xcode 4 iOS Video Tutorial
• ImageView Zoom: Custom class for making your images zoomable Video Tutorial
• How to export Dapp iPhone generated code files to Xcode 4.2 Video Tutorial
• iPhone UIScrollView tutorial using Dapp
• Create an Augmented Reality app with Dapp and Layar Player SDK
• How to hide Navigation Controller Navigation Bars using code
• Tab Bar Controller with Dapp Video Tutorial
• Creating an advanced Hello World Xcode 4 iPhone project with Dapp video tutorial
• Updating UINavigationController Navigation Bar Tutorial
• Basic RSS Reader iPhone SDK Tutorial with Dapp
• Dapp iPhone Code Gen with Actions Preview
• Hello World iPhone SDK Tutorial with Dapp
• Create an iPhone App with Dapp Tutorial 2 – Export to code
• Create an iPhone App with Dapp Tutorial 1 – Our first mockup

Planned Tutorials

One of the common questions we receive is how to update the Navigation Bar, especially as Dapp will create a separate navigation bar for us but will not update the Navigation Controllers Navigation Bar provided by the iPhone SDK.

A common export of the navigation bar might look as follows -

- (void)loadnav {
  UINavigationBar *nav = [[UINavigationBar alloc] init];
  [nav setBarStyle:UIBarStyleBlack];
  [nav setTranslucent:YES];
  [nav setTintColor:[UIColor redColor]];
  UINavigationItem *navigationItem = [[UINavigationItem alloc] initWithTitle:@"Done"];
  [nav setItems:[NSArray arrayWithObject:navigationItem]];
  [navigationItem release];
  [nav setFrame:CGRectMake(0, -44, 320, 44)];
  [self addSubview:nav];
}

The navigation bars y co-ordinates are -44, placing it behind the Navigation Controller that the iPhone SDK inserts. We want to take the attributes from this navigation bar and update the navigation controller with them.

Attributes like bar style, translucent and tintColor need to be assigned in our App Delegate, before the Navigation Controller is loaded. This is because after the Nav Controller is loaded, these attributes will become read-only.

So, after exporting a project, open up the AppDelegate file and insert the following code after the navigation controller is initialised.

// Initialise the navigation controller with the first view controller as its root view controller
navigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController];
 
// Add your code here
[navigationController.navigationBar setBarStyle:UIBarStyleBlack];
// I have commented out the set translucent attribute, as it has some interesting effects.  Try uncommenting it :).
// [navigationController.navigationBar setTranslucent:YES];
[navigationController.navigationBar setTintColor:[UIColor redColor]];
 
// If you wish to hide the navigation controller
// Note: We are able to alternatively hide or show the navigation bar by using
// [self.navigationController setNavigationBarHidden:YES] in our viewWillAppear method
// within the specific UIViewController that we wish to hide/show the navigation bar
[navigationController setNavigationBarHidden:YES];
 
// Navigation controller has copy of view controller, so release our copy
[rootViewController release];

Luckily, updating the title is much easier. Apple provide a convenience method for this, in any View Controller (usually in the init method) you can simply type -

self.title = @"My Title";

The final item that you might want to add to a navigation bar is a bar button item. Again, in the init method of a view controller a sample bar button item you can create is:

UIBarButtonItem *infoButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Info"
    style:UIBarButtonItemStyleBordered
    target:self
    action:@selector(infoButtonAction)];
[self.navigationItem setRightBarButtonItem:infoButtonItem];

The action section of the bar button item tells us what method is called when the user presses the button, to handle this call we need to create the method within our code.

- (void)infoButtonAction {
  // Put your own code in here
  NSLog(@"User pressed the info button");
}

I’m going to show you how to quickly build a basic RSS Reader using Dapp. We will use Dapp to create and export the visual side of our code, after which we will be linking up our code with a custom RSS Reader class.

An RSS Feed is really just an XML Document. Apple provide us with an object called NSXMLParser that will fetch and handle the parsing for us. An XML document is a text document that encloses different types of data using tags. A quick example can be seen below:

<?xml version=”1.0″ encoding=”UTF-8″?>
<item>
<link>http://website.com</link>
<title>Post title</title>
<content>This is the content from a post</content>
</item>

Please follow the following video tutorial on how to build the UI in Dapp and then write the code for our basic RSS Reader.  To speed things up, we have included a reusable RSS Reader class for you to learn from and create additional RSS Feeds. A copy of this class is here – KFRSSFeed.

I recommend that you play the following video at full-screen, native resolution is 1024*768.  Also, please download a copy of the KFRSSFeed zip provided as this forms part of the tutorial.  The complete project is included at the end of this post.

Project Files: Basic RSS Reader project files

Hello World!

I don’t think this type of tutorial needs an introduction. But, we are going to do it with Dapp! The following video will take us through the process… enjoy.

Note: Using Xcode 4? Then please view the Xcode 4 version of this video tutorial – Hello World Tutorial with Xcode 4

Note: Please ensure you select ‘iPhone’ as the Product option when creating a new project in Xcode.  The other two options, Universal and iPad will present a different folder structure to you.

Oh, and before i forget.. here are the project files.

Project Files – Hello World iPhone SDK Tutorial with Dapp

Till next time,
Cliff

Welcome to episode 2 of Creating on iPhone app with Dapp. I will be showing you how to build an iPhone app from scratch. At the end of these tutorials we will be submitting and releasing our funky new app on the app store.

In our last tutorial, we defined some requirements and created our mockups, which were then published to PDF. In this tutorial, we will export our mockups as code, drag and drop the code into a new Xcode project and then finally release a prototype of our app.  The very cool part is we are going to do this with ZERO code… I’m gonna go grab some coffee while you watch the tutorial.  Enjoy!

Note: Please ensure you select ‘iPhone’ as the Product option when creating a new project in Xcode.  The other two options, Universal and iPad will present a different folder structure to you.

Updates:

• File system folders were created in the OS and linked to the Xcode project to further neaten up the code.  This can be seen in the attached zipped project files.

Please find attached the exported code files and a copy of the Xcode project.

Bug Tracker Project Files – Episode 2

Bug Tracker Export to Code Files – Episode 2

Our next few tutorials will move away from Dapp … as disappointing as that is, I will be showing you guys how to:

• setup a SQLite database and how to interact with it
• create a layered design, which will be composed of a data layer and a business layer to interact with out database
• we will also be creating classes for our ‘Projects’.  I will explain this further in later tutorials
• Oh.. and the next tutorial will focus on button events and actions, and pushing new view controllers.  This will allow us to jump between our views that we created. Very cool!

Mmm…. the next tutorial will be called ‘Linking our view controllers’.  See you then.