e2 appspresso hands on lab

AppspressoHands-on Labs�� /�� 웹어플리케이션팀�� /�� 팀장�� 김민태

@ibare�� http://www.ibare.kr�� [email protected]

Download http://www.appspresso.com

HelloWorld

File > New > Appspresso Application Project

File > New > Appspresso Plugin Project

HelloWorldStep 1 - project info

HelloWorldStep 2 - choose template

HelloWorldProject Directory Structure

HelloWorldProject.xml - Overview

HelloWorldProject.xml - Plugin

HelloWorldProject.xml - Plugin / Add Built-in Plugin

HelloWorldProject.xml - Plugin / Add Built-in Plugin > ax.ext.media & ax.ext.net

HelloWorldProject.xml - Feature

HelloWorldProject.xml - iOS

HelloWorldProject.xml - Android

HelloWorldProject.xml - Preference

HelloWorldProject.xml - Source

HelloWorldIndex.html

HelloWorld

Run demo

Web Development

Code Deploy Run Edit

Reload

Native Development

Code Compile Run Edit

On the fly development

Code

Run

Edit

Reload

Compile

1

Setup on the flyPreference

Use on the fly

54

3

2 1

6

Stop

Start

Pro

jec

t

Start file

Eva

luate

On the fly

demo

26

BODYdata-role=”page” id=”page1”

data-role=”header”H1

data-role=”content”...href=”link”

data-role=”page” id=”page2”...

file 1

Ajax

file 2 file 3

Stack History Management

<!doctype html><html>...

<div data-role=”page”...

SPI (Single Page Interface)

jQueryMobile

HTML Structure

<!doctype html><html><head><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.css" /><script src="js/jquery-1.5.js"></script><script src="js/jquery.mobile-1.0a4.1.js"></script><script src="/appspresso/appspresso.js"></script></head><body><div data-role=”page” id=”home”> <div data-role=”header”> </div> <div data-role=”content”> </div> <div data-role=”footer”> </div></div></body>

Header

<div data-role=”header”> <h1>KichenSink</h1></div>

<div data-role=”header”> <h1>KichenSink</h1> <a href=”#about” data-role=”button”>About</a></div>

<div data-role=”header”> <h1>KichenSink</h1> <a href=”#about” data-role=”button”>About</a> <div data-role="navbar"> <ul> <li><a href="#">Flickr</a></li> <li><a href="#">Yahoo</a></li> <li><a href="#">Twitter</a></li> </ul> </div> </div>

Content

<div data-role=”content”> <div id="logo"> <img src="kichensink.png"> </div> <ul data-role=”listview”> <li><a href=”#”>Device</a></li> <li><a href=”#”>PIM</a></li> </ul> </div>

ListView

<ul data-role=”listview”> <li>Device</li> <li>PIM</li></ul>

<ul data-role=”listview”> <li><a href=”#”>Device</a></li> <li><a href=”#”>PIM</a></li></ul>

<ul data-role=”listview”> <li> <a href=”#”> <h1>Device</h1> <p>Device status, ...</p> </a> </li> <li> <a href=”#”> <h1>PIM</h1> <p>Contacts, Calendar, Task</p> </a> </li></ul>

<ul data-role=”listview”> <li> <a href=”#”> <h1>Device</h1> <p>Device status, ...</p> </a> </li> <li> <a href=”#”> <h1>PIM</h1> <p>Contacts, Calendar, Task</p> <span class="ui-li-count">3</span> </a> </li></ul>

<ul data-role=”listview”> <li> <a href=”#”> <img src=”my_image.jpg”> <h1>Device</h1> <p>Device status, ...</p> </a> </li> <li> <a href=”#”> <h1>PIM</h1> <p>Contacts, Calendar, Task</p> <span class="ui-li-count">3</span> </a> </li></ul>

page A page B

pagebeforeshow

pageshow

pagehide

pagebeforehide

Tutorials

Devicestatus

deviceapis.devicestatus.getPropertyValue (function_success_callback, function_error_callback,options

);

function success_cb(value) {

}

function error_cb() {

}

Devicestatus

Aspect Properties

Battery batteryLevel,�� batteryBeginCharged

CellularHardware status

CellularNetwork isInRoaming,�� signalStrength,�� operatorName

Device imei,�� model,�� version,�� vendor

DisplayresolutionHeight,�� pixelAspectRatio,�� dpiY,�� resolutionWidth,�� dpiX,�� colorDepth

MemoryUnit size,�� removable,�� availableSize

OperatingSystem language,�� version,�� name,�� vendor

WebRuntime wacVersion,�� supportedImageFormats,�� version,�� name,�� vendor

WiFiHardware status

WiFiNetwork ssid,�� signalStrength,�� networkStatus

Devicestatus

Demo

Accelerometer

+Y

-Y

+X

-X

+Z

-Z

Accelerometer

deviceapis.accelerometer.watchAcceleration (function_success_callback, function_error_callback,{ minNotificationInterval: 50 }

);

function success_cb(acceleration) { ax.log(acceleration.xAxis);}


}

Gallery

ax.ext.media.pickImage(function_success_callback, function_error_callback,options

);

function success_cb(file) { deviceapis.filesystem.resolve( success_cb, error_cb, file, "r" );}


}

Gallery

Demo

Export to App Store

Upload App App StoreiOS Developer Program $99 / year

Upload App App StoreiOS Dev Center

Upload App App StoreProvisioning Portal

Upload App App StoreDevelopment Provisioning Assistant

Upload App App StoreDistribution

Upload App App StoreiTunes Connect

Upload App App StoreManage Your Apps

Upload App App StoreUpload

AppspressoHands-on Labs

감사합니다

�� /�� 웹어플리케이션팀�� /�� 팀장�� 김민태

@ibare�� http://www.ibare.kr�� [email protected]

e2 appspresso hands on lab

Technology