Outline

• Types, Foundation Kit
• Reference Counting in Objective-C
• Quiz
• HTML 5
• Starting our 2nd iPhone App

Objectice-C Types, Foundation Kit

• Objective-C was defined before C had a boolean type.
• To do booleans in Objective-C you declare a variable to be of type BOOL. This has two values: YES or NO.
• We set object pointers to nil rather than NULL, if we haven't declared an object or what to make sure we don't have garbage.
• In the Cocoa Touch we will generally have our objects extend at least NSObject which is in the header Foundation/NSObject.h
• To get this we will generally import the header Foundation/Foundation.h of the Foundation kit, which also has several other useful classes:
  • NSInt - wrapper for an int
  • NSString, NSMutableString -- which have a large range of functions for manipulating strings, especially in Unicode.
  • NSArray, NSMutableArray -- for arrays
  • NSSet, NSMutableSet -- for undordered sets of items
• More information about these classes can be found by looking at Help > Documentation and API Reference and searching on Core Foundation in XCode.

Memory Management in Objective-C

• Before IOS 5, when a scheme called Automatic Reference Counting was introduced, application developer had to pay close attention to memory management.
• Although this is less important nowadays, it is still useful to know what the compiler is doing for you.
• In C, we do dynamic memory management with malloc and free.
• In Objective-C, a system of reference counting is used.

What is Reference counting

• We already know alloc can be used to allocate memory for our object.
• To free up memory associated with our object we should create a dealloc implementation:

  -(void)dealloc
  {
   /* call release on instance variable; then... */
   [super dealloc];
  }
  

• We will almost never directly call dealloc, except as in [super dealloc]...
• Instead, we will use the messages retain and release..

  [myObj retain]; //increases myObj's reference count by 1.
  [myObj release]; // decreases myObj's reference count by 1.
  

• When an object is initially allocated its reference count is set to 1.
• If an object's reference count goes to 0, the runtime system will call dealloc for you.
• You can determine the current reference count by calling: [myObj retainCount];

Remarks on Memory Management

• Notice this is not the same as having a garbage collection thread like in Java which nondeterministically runs and tries to find objects that aren't being referenced.
• The reason we won't have to worry so much about retain and release this semester is that the llvm compiler is now smart enough for non-core Foundation objects to auto-add these lines for you at the end of your methods as part of the compilation process.

Quiz

Introducing HTML 5

• The third approach we are going to consider to developing apps this semester is to use HTML 5.
• It has the advantage that it will pretty much work across platforms: iOS, Android, Blackberry, etc.
• It has as drawbacks that the apps tend to be slower and might not be able to take as full advantage of all the device sensors and graphics.
• For HTML 5 you probably would need a different business model than just the cost of downloading the app.
• Nevertheless, several companies have created lightweight "wrapper apps" which allow you to package your HTML 5 app as a native app (even using some of the native sensors you wouldn't normally be able to use):
  • PhoneGap
  • Sencha Touch
• A mobile app created with HTML 5 is essentially a web page which employs features of HTML 5 to make it render nicely and to render rich content in a mobile device.
• Such an app typically makes use of the Javascript language for networking as well as for persistence.
• When coding such an app, people typically make use of an existing Javascript framework (a library written in Javascript and CSS) to provide a palette of pre-made, useful widgets which are cross-platform. Otherwise, you would have to code these yourself.
• For this class, we are going to make use of jQuery Mobile.

A Template HTML 5 Document with jQuery Mobile

<!DOCTYPE html>
<html> 
    <head> 
    <title>Hello HTML 5</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My First HTML APP!</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>This is an HTML 5 app.</p>        
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Hello HTML 5 app.

General formal of a document

• HTML 5 has been under development, since 2004 and still being standardized, but the previous code should pass the W3C Validator so is compliant with what is likely to be the standard.
• The first line of an HTML 5 document is always <!DOCTYPE html>, this is for legacy reasons due to how browsers detect whether they need to go into quirks mode. The line tells a browser -- mobile or otherwise -- that what follows should be a validating document. The fact that we don't declare the version of HTML in this tag is the browser's clue that it is HTML 5.
• Notice HTML is a tag-based language, where <some-tag > is called an open tag; </some-tag > is called a close tag.
• The open tag is allowed to contain within it name-values pairs called attributes. For example, name="viewport" is an attribute of the meta tag on the last slide.
• The text between an open tag and a closed tag is called the content of the tag.
• After the doctype, an HTML 5 document consists of an html-tag pair whose content consists of a valid head of the document and then a valid body of a document
• A valid of head of a document, at a minimum is consists of head-tag pair whose content must include a title-tag pair, but may also include other tags which are allowed to occur in head tags.
• A valid body of a document, consists of a body-tag pair whose content consists of 0 or more tags which are allowed to occur in a body as well as their content.
• The contents of a title tag are supposed to be text data and are rendered usual as the title of the web page in the browser title bar.

The Head of a Document

• In our example, the head of the document also uses the script tag to include the jQuery framework, and the jQuery mobile framework.
• The link tag in our example is used to include jQuery's Cascading Style Sheet file. Stylesheets are used to specify how a tag should render in the browser. For example, if I wanted the background-color of the span tag to be red and its font-size 20pt in my document, I might have in my CSS file the lines:

  span {
      background-color:red;
      font-size:20pt;
  }
  

• meta-tags are used to specify meta information about how the page should be loaded (usually by setting the http-equiv attribute followed by content attribute) or meta information about the page which may be used by a user-agent (name attribute followed by content attribute). In our example, we have the name attribute given the value viewport. This is a new HTML 5 name value.
• The viewport of a browser is the virtual window area in which it renders a web page. This may be larger than the devices screen size (for example, you might need to scroll left or right or up down on the desktop to see the whole viewport).
• The viewport affects how lines wrap, etc.
• The area of the browser which is not rendered into ( the area containing the url, etc) is often called browser chrome).
• The reason for the viewport meta tag is on a mobile device we often don't have scroll-bars -- we use pinch and zoom. The default viewport on a iOS device has a width of 980. Safari draws this whole width within the actual screen-width of 320 pixels (on a 3GS) by scaling .
• The content attribute associated with the name attribute viewport in the meta directive says how the browser should render the page within the viewport. For example, width=device-width. Says that the viewport width should be the actual devices width rather than 980. initial-scale controls the zoom level of the page when initially loaded (1 means no zoom).
• We could have given a number of pixels rather than device-width. We could also have specified height as device-height or some number of pixels. Other possible directives are minimum-scale, maximum-scale, as well as user-scalable (yes/no as values).

The Body of a Document

• The body of our example document illustrates a few common HTML tags: div, h1, p.
• These are examples of tags which typically render as blocks on the screen.
• The div tag (short for division) is a generic such tag and can be nested with other block tags. It is usually styled to make it behave as we want on the screen.
• h1 through h6 tags are heading tags of more to lesser importances. You can style an h2 tag so that it is drawn bigger than an h1 tag; however, when you use a h1 tag you are saying somehow it is more important, than something that is h2. This can be important to screen-readers.
• The p tag is used for paragraphs.
• Another kind of tag is called an inline tag. The tags for bold (b tag), italics (i tag), typewriter (tt tag), etc. Are some common examples of inline tags.
• Other examples of examples of inline tags are span tags, which are used to indicate a region of text within a block (might decide to style to look however we want) and anchor tags ("a" tags) used for links. The latter have the format:

  <a href="http://www.link-to-somewhere.com/">Link Text</a>
  

• Notice in our example, the div tag has a data-role attribute. data-* attributes are user-defined attributes which were introduced with HTML 5.
• HTML 5 supporting Javascript engines have a document object model including a dataset field for their elements. This allows Javascript to easily get at elements that have data-* attributes and manipulate them. This is what jQuery is using as part of how it draws things.
• In CSS, we can also select such tags using selectors like div[data-role=header] .

Where to Find Examples

• The jQuery Mobile Getting Started page has a lot of quick examples you can try out to get started with creating HTML 5 apps.
• We conclude by showing one of the widgets from that page for displaying unordered lists.
• The code you would put within your data-role="content" div tag would look like:

  <ul data-role="listview" data-inset="true" data-filter="true">
      <li><a href="#">Red</a></li>
      <li><a href="#">Green</a></li>
      <li><a href="#">Blue</a></li>
      <li><a href="#">Violet</a></li>
      <li><a href="#">Ultra-Violet</a></li>
  </ul> 
  

• This would render as this Unordered List Page.

Starting a Second Project

• Let's now create a second view-based iPhone app and take a look at some of code files...
• Our second application is going to have two buttons which control the content of a label on the screen
• iPhone projects often use the MVC (Model View Controller) design pattern.
• This pattern makes use of three types of classes:
  • Model: The classes that hold your application's data
  • View: Made up of window, widgets, etc that the user can see and interact with
  • Controller: Binds the models and views together and has the application logic that decides how to handle the user's input.

A Second Project

• If we look in the Navigator View pane at the controller class created for us, it might look like:

  //
  //  SecondProjectViewController.h
  //  SecondProject
  //
  //  Created by Chris Pollett on 8/26/09.
  //  Copyright San Jose State University 2009. All rights reserved.
  //
  
  #import <UIKit/UIKit.h>
  
  @interface SecondProjectViewController : UIViewController 
  
  
  @end
  

• UIViewController is a generic controller class that is part of UIKit.
• We can use Interface Builder to layout our two buttons and our label; we will use this class to implement the control for the buttons.
• Our controller can refer to objects in the nib file using an instance variable called an outlet.
• For example, to control the text label, we might declare an outlet and point it at the label object.
• In the opposite direction, interface objects in our nib file can be set to trigger special methods in our controller class.
• These special methods are called action methods.