developing webpage for iphone

8/14/2019 Developing Webpage for iPhone

http://slidepdf.com/reader/full/developing-webpage-for-iphone 1/27

Developing Webpage

for iPhoneIntroduction of Oracle ADF Mobile

Oracle Embedded Global Business Unit

Sales Consultant

Jiwoong Park



Mobile Devices

• MID, Smartphone, Netbook, eBook andeven a powerful feature phones

• Everyone wants Internet

• Gate is opened : 3G with Wifi



Internet in Device

• Full-browsing - Just a Basic

• Mobile Web - One step forward for device

• Native Apps - Best UX for ‘each’ devices



Mobile Web

• Independent from actual devices

• But still have to deal with device browsers

• Write once, use everywhere as possible



Oracle ADF

BusinessServices

DataServices

ADF Bindings (JSR 227) Model

Controller

JSF View

Desktop Browser-Based

Struts JSF/ADF Task Flow

OfficeADF Swing JSP

TopLink

EJB BAM ADFbc PortletsBI EssbaseBPEL

WebServices

Java

ADF Faces

XML Data Legacy DataRelational Data Packaged Apps



Oracle ADF Mobile

Browser Client

•Standard-based framework for Enterprise

Mobile Application

• ADF extension - Simply JSF application

•Enabling apps development that function

properly on different browser types



ADF Mobile offers..

•Mobile Browser Detection & Handling

• 60+ Rich UI Components

• Partial Page Rendering for low bandwidth

• Reusability - ADF Model, Business logics



Architecture

BusinessServices

DataServices

ADF Bindings (JSR 227) Model

Controller

JSF View

Desktop Browser-Based

Struts JSF/ADF Task Flow

OfficeADF Swing JSP

TopLink

EJB BAM ADFbc PortletsBI EssbaseBPEL Web

Services

Java

ADF Faces

XML Data Legacy DataRelational Data Packaged Apps

JSF Taskflow



Supported Browser

Browser JavaScript Support CSS Support PPR Support

BlackBerry Ver 4.6 &Later

Yes Yes Yes

BlackBerry Ver 4.2 ~ 4.5 No Yes No

Microsoft WindowsMobile 5

Yes Yes Yes (with nuances)

Microsoft WindowsMobile 6.X

Yes Yes Yes

Apple iPhone Safari Yes Yes Yes

Nokia s60 series Yes Yes No

Plain HTML (Opera Mini,

OperaMobile and Skyfire)No Yes No



Steps for iPhone

Configuring Environment

Creating Page Flows

Creating Pages

Skinning

And more..

1

2

3

4

5



Demo Scenario

• Simple Contact Apps

• 4 Pages with Single table

• ADF BC & Managed Bean

• Mysql Database



Step 1: Configuring Environment


Creating Page Flows

Creating Pages

Skinning

And more..

1

2

3

4

5



Configuring Development

Environment

• Prepare ADF Model Project with ADF BC

• Create ADF Mobile Browser Client Project



DB Schema

create table friends ( uname varchar(32),

nick varchar(32) not null,

imgfile varchar(32),

phone varchar(32),

address varchar(128),

posx int,

posy int,

age int,

sex varchar(8),

note varchar(128),

primary key(uname));



Step 2: Creating Page Flows


Creating Page Flows

Creating Pages

Skinning

And more..

1

2

3

4

5



Creating PageFlows

• Modify Faces-config.xml

• Modeling Pages and Navigation Cases

• Only supports JSF Page flows

Mobile Web needs lots of pages & flows..



Step 3: Creating Pages


Creating Page Flows

Creating Pages

Skinning

And more..

1

2

3

4

5



Apache My Faces

Trinidad• Oracle contributed Opensource JSF

framework

• Partial-page rendering support

•A dialog framework and etc..

• http://myfaces.apache.org/trinidad

http://myfaces.apache.org/trinidad





Trinidad Components

• Input Components - Text, List..

• Output Components - Text, Image..

• Layout Components - Page, Panel, Space..

•Navigation Components - Button, Link..

• Data Visualization - Graph, Table,Tree..



Step 4: Skinning


Creating Page Flows

Creating Pages

Skinning

And more..

1

2

3

4

5



Browser determination

•User Agent Support provides various info

about requested browser

• Based on this, Trinidad narrows propercomponents - Panel Group, Input..

• Also, JavaScript enabling, PPR supports



Implementing Skinning

• Specify the renderkit and style sheet in

trinidad-skins.xml

• Create and include style sheet file (CSS)

•Define a proper skin family in trinidad-

config.xml



iPhone CSS Example

.toolbar {

box-sizing: border-box !important;-webkit-box-sizing: border-box !important;

-moz-box-sizing: border-box !important;

border-bottom: 1px solid #2d3642 !important;

border-top: 1px solid #000000 !important;

padding: 10px !important;

height: 45px !important;

background: url(/images/toolbar.png) #6d84a2 repeat-x !

important;

display: block !important;

}

.backButton {

position: absolute !important;

overflow: hidden !important;

top: 8px !important;

left: 6px !important;

margin: 0 !important;

height: 30px !important;

max-width: 45px !important;

line-height: 30px !important;

font-family: inherit !important;font-size: 12px !important;

font-weight: bold !important;

color: #FFFFFF !important !important;

text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0 !important;

text-overflow: ellipsis !important;

text-decoration: none !important;

white-space: nowrap !important;

background: none !important;

-webkit-border-image: url(/images/toolButton.png) 0 5 0 5 !important;

padding: 0 !important;

border-width: 0 8px 0 14px !important;

-webkit-border-image: url(/images/backButton.png) 0 8 0 14 !important;

}

Header



More examples..

• http://www.oracle.com/technology/pub/articles/huang-iphone.html

Dynamic List Field Set

http://www.oracle.com/technology/pub/articles/huang-iphone.html





Step 5: Extensions


Creating Page Flows

Creating Pages

Skinning

And more..

1

2

3

4

5



Extending ADF Mobile

Browser Client Apps

• Use goLink and goURL for extending

• E-Mail Client - goLink, Mailto

• Telephony - goLink with Tel. (Only RFC

2086 supports)

• Integrating Google Maps



Summary

• Mobile Web is a reasonable choice but you

must deal with various limitations

• ADF Mobile can survive you from

supporting various Mobile Browsers

• Reuse your Business Components

• Enabling Rapid Development

developing webpage for iphone

Documents