Dapp

A while back I did a teaser video of a new movie player features that’s coming into the next update to Dapp.

I still haven’t released that update – so to tide you in the meantime, I’ve created a tutorial on how you can put movies and sounds into your iOS apps .

During the first part I take you through a quick run-through of Dapp to create the interface for us and to minimise the amount of code we have to write.

Second part of the vid I take you through the code.

Which is actually quite easy .

Of course, you are also free to just download the attached project files to grab a copy of the code to see how it’s done.

Otherwise watch the vid and learn how to code it yourself .

iOS Movie Player Project Files

A quick tutorial where I show you how to use Dapp to create our interface, including the mapview, segmented control, toolbar and navigation bar.

We then jump over to the exported code and Xcode 4 to modify our code to allow our segmented control and toolbar to interact with the mapview.

You can cheat and just download the whole project , but either way. Worth taking a look to learn how the code for these objects work .

Feel free to message me for any future tutorials you’d like to see.

Download the MapView Project files here - MapView Project

Quick little tutorial on how to add in a bit of code to your Dapp created apps to allow users to send emails .

All good if you don’t have Dapp as this tutorial will help you out too .

If you want the shortcut then the attached sample project also includes the code for sending emails that you can rip.

Source Code: SendMail Xcode 4 Tutorial with Dapp Source Code

Quick little vid I put together showing the new movie player feature that I’ve finished working on .

Still got a few more features to put into the update before release, but until then, I wanted to show everyone how it all works .

Stay tuned as I’ll also be showing you how you can add in streaming youtube videos into your apps, using Dapp and all without code.

Ok, real basic tutorial this time.

One line of code! Literally.

And the magic line of code is…

1
2
3
4
5
6

MyViewController *controller = [[[MyViewController alloc] init] autorelease];
 
// This is the line! :)
controller.hidesBottomBarWhenPushed = YES;
 
[self.navigationController pushViewController:controller animated:YES];

That’s all you need .

That’s fine and all if you’re a coder, but not all of us go tap-tap on keyboards each and every day (and especially night!), whilst sucking down on cans of cola (really bad for your teeth by the way) and chomping down on pizza as we stare like zombies at our screens.

Ah, fun times …

Anyways, I’ve also put together a video tutorial that’ll show you an example Dapp exported project and the steps to find the exact spot to put our little line of code that hides our tab bar .

Check it out.

Hey guys .  Welcome to the ImageView Zoom Tutorial for iPhone & iPad.

Ok, this vid shows you how you can take your image view (uiimageview) code that is created for you by Dapp and turn them into zoomable images for iOS (iPhone & iPad).

Of course, if you just want to create zoomable images (scale, pan) in your own code then you can use this too.

As a special treat I’ve also included a custom class that you can use in your projects … so if you are feeling lazy, just grab the custom class and drop it into your code.

—-> KFImageZoomView class files. <—-

For those who are extra lazy, here is the custom class code you can copy/paste and learn from.. or just use in your own iOS projects! .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// You are free to do whatever you want with this code :)
// Cliff, Kerofrog
 
#import <UIKit/UIKit.h>
 
@interface KFImageZoomView : UIScrollView <UIScrollViewDelegate> {
    UIImageView *imageView;
}
 
@property (nonatomic, retain)   UIImageView     *imageView;
 
#pragma mark Initialisation
- (id)initWithImageNamed:(NSString *)imageName atLocation:(CGPoint)location;
 
@end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

// You are free to do whatever you want with this code :)
// Cliff, Kerofrog
 
#import "KFImageZoomView.h"
 
@implementation KFImageZoomView
 
@synthesize imageView;
 
#pragma mark - Memory Management
 
- (void) dealloc {
    [self.imageView release];
    [super dealloc];
}
 
#pragma mark - Initialisation
 
- (id)initWithImageNamed:(NSString *)imageName atLocation:(CGPoint)location {
    self = [super init];
    if (self) {
        // Assign the delegate
        self.delegate = self;
 
        // Create our image view using the passed in image name
        self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
 
        // Update the ImageZoom frame to match the dimensions of passed in image
        self.frame = CGRectMake(location.x, location.y, 
                                self.imageView.frame.size.width, self.imageView.frame.size.height);
 
        // Set a default minimum and maximum zoom scale
        self.minimumZoomScale = 0.5f;
        self.maximumZoomScale = 3.0f;
 
        // Add image view as a subview
        [self addSubview:self.imageView];
    }
 
    return self;
}
 
#pragma mark - UIScrollViewDelegates
 
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale {
 
}
 
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return self.imageView;
}
@end

A few users having trouble with the latest release of Xcode. Xcode 4.2, which came out recently with iOS 5.

How cool is Siri?!

Anyways, the process is actually easier than it was in Xcode 4, as we now have the option to create an ‘Empty Application’ that has no reference to a XIB file at all.

There is also an awesome new feature called ‘Automatic Reference Counting’ (ARC) in Xcode 4.2 that essentially allows us to ignore memory management. Great feature for novice developers.

Dapp doesn’t support this feature yet .. because the generated code has all the needed memory management code that ARC really doesn’t like. Any ‘memory management’ related calls will cause a build error.

I can see the value this would have for our novice programmer users, so I’ll be making sure the next version of Dapp has the option of exporting code that has no memory management included.

Enjoy the very very brief video tutorial!

Oh!.. I’ve said this about 50 times in the tutorial , but it’s very short because it’s a modified version of our Xcode 4 Advanced Hello World tutorial for Xcode 4.2. The original tutorial will take you through how to use the tableview object to create what is shown in this tutorial. It can be found at:

Creating an Advanced Hello World Xcode 4 iPhone Project with Dapp Video Tutorial

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.