Before reading this tutorial you should have read the General Tutorial.

After creating and naming your project based on the QuickConnectiPhone Application Template Xcode opens up and displays to you your ready-to-modify project.  You see several folders and a few files.  To use the QuickConnectFamily framework the only items you need to concern yourself with are:

1. index.html
2. mappings.js
3. functions.js
4. databaseDefinition.js
5. main.css
6. main.js
7. and the Images directory

We will now modify the body of the html file to add visual components.  We'll add an image to be displayed as well as some text.  You may add any types of HTML elements you desire.  After doing so, the file looks like this:

Now we will modify the main.css file to align the image in the center of the display.

Before running, we need to add the puzzle_tiny.png file to your projects Images directory.  The image itself is embedded here for you to download.

Once you have downloaded this file open the project directory that Xcode created for you in the General Tutorial.  Since I saved my project on my desktop I'll go there.  There are a lot of files here.  Ignore them.  Nearly all of them are support files that make up the framework.  Navigate to the Images directory and drop your copy of the puzzle_tiny.png file there.

The image file should now show up in the Images folder as seen below.

In the Xcode project window select Simulator Debug.  Make sure you select a version of the iPhone SDK that you have installed on your Mac.  Now click "Build and Run" in the header at the top of the Xcode window.  You can safely ignore any warnings generated during the compile.  The simulator launches and you see

Now lets add a standard button and a div to display some information to the index.html file.  This is the same as creating a web page since the framework was created to allow application creation in HTML, CSS, and JavaScript.

The code added is:

<input type='button' onclick='showMessage()' value='Display Message' />

<br/>

<div id='messages'></div>

and the display now looks like this.

Now lets create the onclick handler function in the main.js file.

The code to be added is:

function showMessage(){

document.getElementById('messages').innerText = "The button worked!";

}

You can safely ignore the dashcode.setupParts();  call in the onload listener, load().  It is there to support Dashcode development only.  The file now looks like this.

Click "Build and Run" again and you will see the changes displayed in the simulator.

Select the "Display Messages" button and the message is inserted into the div.