Quick Start Guide

Introduction

In this document, we’d like to show you the initial steps for application development with Smartface Designer.

At the end of this document, you will be able to;

*create a simple “Hello World” application

*test your application on Device Simulator

*publish your application with Smartface Designer and send it to the device.

1. Download and Install Smartface Designer

1.1. Download

You can download Smartface Designer from this link:

http://developer.smartface.biz/download.php

1.2. Requirements

1.3. Installation

You can install Smartface Designer easily by clicking on the “Next” buttons, and no configuration except for the path of the Smartface Designer will be needed.

When the installation process has finished, there will be three options:

If you need a JRE update you will be redirect to the www.java.com when you select “Download Java” option.

2.Create Your First Application

2.1. Properties of Page

Open a new project from File menu:

You can edit visual properties of the page from Palette panel. For example, you can change background image of the page:

You can edit visual properties of the page from Palette panel. For example, you can change background color of the page:

2.2. Add a Label

You can add any design object by clicking on the buttons at Toolbar or by dragging and dropping them to the Design area from Design Objects panel.  Let’s add a Label to our project:

You can edit all Design Objects’ properties from Palette panel.

You can change Label’s name and position:

If you want to use percentage values for making your application suitable for multiple resolutions, you need to set them from this panel.

You can edit Label’s font  type/size or can set Alignment properties:

You can type any text by clicking twice on the Label’s text from the Design panel:

2.2. Add a "Show Message" Button

Let’s add a button to our project and see how we can set actions for an event of an object.

*Add a Button Object

*Change its name from Palette panel and  make it bttnShowMessage

*Now let’s set an action which will be triggered when the button is clicked and this action will make the text of the label: “Hello World” :

*You need to choose On Press event of the bttnShowMessage.

*Add Change Object Property action:

3.Testing

3.1.Testing on Android

There are three ways to testing applications on Android Devices. You can set the Android Virtual Device or you can publish your application and send your .APK file to your real Android device or you can emulate to your application simultaneously on device. 

3.1.1.Android Virtual Device

An Android Virtual Device (AVD) is an emulator configuration that lets you model an actual device by defining hardware and software options to be emulated by the Android Emulator. This allows to emulate applications by the virtual device.

To display smartface application at this Android Virtual Device you can follow these steps:

*First need to install SDK Manager. You can download it from the following link:

http://developer.android.com/sdk/index.html

*After download and install SDK Manager, you should install packages. 

*We suggest you to install "Android 3.0 (API 11)". Minimum requirements are:

-SDK Platform

-Google APIs by Google Inc.

*After Installing it you must set at least one virtual devices from the "Tools"-> "AVD Manager". For example:

- Target should be:Google APIs(Google INC.)

- Size : 100

- Resolution : 320*480

- Device Ram Size : 512

*Now, you should start the virtual device.

*You must show the Android SDK path from the "Smartface Designer -> Project Details-> Device Simulator" tab.

*Now it’s ready to test. You only need to open Smartface Designer’s emulator for testing it. First you should set "Profile" -> "Android", and click the "Device Simulator". Shortcut of the "Device Simulator" is "ctrl+enter".

*Device simulator results should be like this,

Before click the "bttnShowMessage"                           After click the "bttnShowMessage"

3.1.2.Emulating OnDevice (Working with an Android Device Simultaneously)

Smartface Designer allows you to emulate your project to your Android Devices.

*You should plug the connection cable of the device to your computer

*Then you should set "Profile"->"Android", and click the "Device Simulator" 

Warning: Android Device features can change, some of them set an obligation to install device driver. When you emulate the application, please take care of this situation.

3.1.3.Publishing Application and Sending Installation into the Device

Now we need to create installation files for supported platforms.

*Firstly, you should publish your application from the "Smatface Designer -> Publish".

You have two options here:

-Smartface Server : Publishes your application to Smartface Server

-Local File System: Creates installation files at your local file system.

You should publish it to the "Local File System".

You can continue the Publishing easily by clicking on the “Next” buttons.

Following window allows you to set "Android" or "iOS" platforms. Set "Android" platform.

You can continue the Publishing easily by clicking on the “Next” buttons.

At the end of the publishing, send the installation file on to your android device.

3.2. Testing on iOS

Smartface Designer allows you to publish your application to "iOS" platform. You can emulate the application on the Microsoft Windows Operating System. That means you must not have a Mac. You can download the "Emulator" from the "AppStore". Except all of this, By using this publishing file you can compile your application into the Mac.

3.2.1.Emulator

iOS Emulator is an iOS application that allows you to test your project on iOS devices simultaneously. You can install emulator to your devices in two ways.

3.2.1.1.Download from the AppStore

*Emulator hasn't been  published to the "Appstore" yet.

3.2.1.2.Sending to Emulator which is on to the Smartface Designer

You should open the "Smartface Designer" and click the "Home" button at the right top of the window.

You should click "iOS Emulator Project" and unzip the file. Then copy the "Smartface" and "Smartface.xcodeproj" on to a removable hardware etc. Compile the .xcodeproj file with your iOS Device on to a MAC. Now your device is ready to emulate your project.

*You should plug the connection cable of the device to your computer

*Open the iTunes,

*Select your device from the left menu of the iTunes.

*Navigate the Apps tab which is on the bottom menu of the iTunes.

*Scroll down to the File Sharing section.

*Select Smartface  Emulator from Apps list.

*Then you should set "Profile"->"iOS", and click the "Device Simulator" on the "Smartface Designer"

*A file which contains "Emulator Files" opens. Select all files, then drag and drop this file into the "SmartfaceEmulator Documents"

3.2.2. Publishing on the Smartface and Compiling on the MAC

Now we need to create installation files for supported platforms. By publishing the application, you can get the XCode files of the application and you compile Xcode on the Mac.

*Firstly, you should publish your application from the Smatface Designer -> Publish.

*You should publish it to the "Local File System".

*You can continue the Publishing easily by clicking on the “Next” buttons.

*Following window allows you to set "Android" or "iOS" platforms. Set "iOS" platform.

*You can continue the Publishing easily by clicking on the “Next” buttons,

*Unzip the file and copy "Smartface" and "Smartface.xcodeproj" files into a removable hardware

*Now, compile your published project on the "MacBook".