| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.

View
 

Using the Android Template

Page history last edited by Lee Barney 10 years, 7 months ago

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

 

In order to develop for Android you must have installed the AndroidSDK.  Instructions for QCAndroid installation are found in the Installation Tutorial

 

 

After creating and naming your project based on the QuickConnect Android 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 assets/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.

 

 

 

 

At this point you need to make sure that the Android emulator is running.  The QCFamilySuportApps.zip file you downloaded from sourceForge at the QuickConnect project site contains an application called SimDroid.  Run that application and it will launch the Android emulator for you.  You can then build the Android Simple Example application and Xcode will install and run the application for you.

 

To build and run your application, in the Xcode project window select "Build for Simulator".  Now select Build->Build from the Xcode main menu or enter "Command B" with the keyboard.  If you now select Build->Build Results from the Xcode main menu or enter "Shift Command B" with the keyboard you will see the build results as well as any debug statements send from you JavaScript code.

 

In order to see your application in the emulator you must click the menu button of the emulator the first time you start the emulator.   The image below shows you what you will 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!";

}

 

The file now looks like this.

 

 

 

Click Build again and you will see the changes displayed in the emulator.  Notice that you do not need to click the emulators Menu button this time since it is already running.

 

 

 

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

 

 

Sometimes the Android emulator refuses to respond to the Android tools the Xcode template, or Eclipse for that matter, uses to communicate with it.  If this happens you must quit the emulator and restart it.

 

 

 

 

 

 

 

 

Comments (0)

You don't have permission to comment on this page.