Thursday, August 22, 2013

Programming 101: Model View Controller and Object Class

A few people have asked me to briefly explain to them what the MVC design pattern is and what classes are in object oriented programming so here is a very simple description for each one which hopefully will help you understand what they are and how they work

Model View Controller:

MVC is a design pattern which helps define the different aspects of an application by separating it into 3 parts.

  • View: This is the composite layer. It represents the user interface, what they see and what they are able to interact with. Here you have your labels, text-boxes, buttons, images and other elements.
  • Model: This is the observer layer. It represents the back end code which performs all the functionalities and calculations. Here you have all your classes, methods, data connections and object references.
  • Controller: This is the strategy layer. It represents the connection between the View and the Model. This is where you determine for example, which method should be called when a user selects a specific button on the UI. It is also in charged of updating the UI based on a response from the model layer. 
A class is a construct which we use to define objects in object oriented programming languages. A class (or object) is composed of two pieces:

  • Structure: This is what defines the attributes, fields or properties of a class. For example when you think of a contact on your phone some of the attributes it has are a picture, a name, a phone number, an email address. 
  • Behavior: This is what defines the different actions your object can do or that you can do with your object. These actions is what we call methods. Again following the example of a contact on your phone, some of these actions could be calling, sending an email, sharing contact information. 
Classes can be used in a hierarchical way which allows you to re-use certain attributes for different objects:

  • Superclass: This is also referred to as a parent or base class. Any attributes or methods defined in this class will carry over to all subclasses. 
  • Subclass: This is derived from a superclass and is often called a child class or sub class. It contains specific methods and attributes for it. 
Attributes and methods for any class can be further separated into 3 different types which define their accessibility:

  • Private: This means that the specific method or attribute is only accessible within the given class.
  • Protected: This means that the specific method or attribute is only access by the given class or any subclasses derived from it.
  • Public: This means that the specific method or attribute can be accessed by any other class within the application as long as the original class is being referenced.

Thursday, May 23, 2013

Turning a simple web project into an iOS app

Today I'll talk briefly about how you could turn your web site into a simple iOS application using UIWebView.

If you are familiar with how these things work, you've probably wondered how difficult is it to make the transition if all you are looking for as basic functionality?

The answer is not much. In fact this will be extremely helpful for a web developer who has zero experience with Objective-C code!

Difficulty: Basic

1. Lets start by creating a new Single View Application project on Xcode. For this example I'll be working with iPad only and naming it SimpleWebViewer but you may chose the universal option if you want to allow for iPhone as well.

2. Go to your Storyboard and add a new Web View to your View Controller. This is really all you need if you were to think of an HTML5 app as a simple website, all you need to do is not have an address bar.

3. Next you'd want to activate the Editor option to view your storyboard alongside the code of your .h file.
After doing this you want to select the UIWebView then hold your "control" key and drag it to your code. You will see a blue line. This will create the property outlet for you.

When prompted, simply chose a name for your UIWebView and click connect.

NOTE: If you are doing an iPhone and iPad version, you will have 2 storyboards. Simply do these steps from both of your storyboards and make sure to point the blue line to the same property outlet on the code.

4. Now go to your ViewController.m and add the following code to your (void)viewDidLoad method

NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSString *htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
    NSString *newHTMLString = [NSString stringWithFormat:@"%@ ", htmlString];
    [_customWebView loadHTMLString:newHTMLString baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle]resourcePath]]];

This simply takes care of assigning your index.html file to the browser as soon as the application loads.

Next we want to handle the rest of the animations and rotation, simply add the following code to your ViewController.m:

- (void)viewDidUnload
    [self setCustomWebView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;

- (void)viewWillAppear:(BOOL)animated
    [super viewWillAppear:animated];

- (void)viewDidAppear:(BOOL)animated
    [super viewDidAppear:animated];

- (void)viewWillDisappear:(BOOL)animated
[super viewWillDisappear:animated];

- (void)viewDidDisappear:(BOOL)animated
[super viewDidDisappear:animated];

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
    // Return YES for supported orientations
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);

5. Now that we are done with the the iOS wrapper for your application, you would want to add your HTML code to your application. Simply select your project and right click (or control+click) and find the option to Add Files to your project.

Locate and include the folder where your website code is. Make sure you have selected the option that says "Copy items into destination group's folder (if needed)". Now you will see a new group on your project navigation with all of your website files.

6. Now we gotta handle your javascript files. By default, Xcode will try to compile your javascript files.   To prevent this, simply click on your target project and go to the tab called "Build Phases"

Under "Compile Sources" find your javascript files and delete them using the "-" sign. After this, go down to the section called "Copy Bundle Resources" and click on the "+". This is where you want your javascript files to be. Select your files and click Add.


You have just created a standalone HTML app for iOS. 

Important things to note: 
  • This is a very basic and quick tutorial that will only work for simple applications. The one down side to this is that you have to make sure your code does not redirect the user to any additional websites or they won't have a way of getting back.
  • For more complex solutions and needs, you can try using PhoneGap solution or a few others.
  • Also its important to note that files in your iOS project are considered as being in a single directory. So when you are linking to an image or other file inside of your HTML or CSS, simply use ("filename.extension") as opposed to ("folder/filename.extension")

Welcome to Pedro Zabala's Dev Corner

I decided to start a new blog to go over certain topics regarding mobile development, web development, project/design development and just programming in general.

Unlike my other blogs, this will be very specific topics with examples that I've found useful during my years of development.

They will be ranked from Basic, Intermediate, or Advanced and I hope people will find them to be useful.

Please feel free to leave any comments or questions, I'd be more than happy to answer all of them

I will also include a youtube channel which will have live demo for many of the topics I'll cover