Upload
api-26127654
View
221
Download
0
Embed Size (px)
Citation preview
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
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 2/27
Mobile Devices
• MID, Smartphone, Netbook, eBook andeven a powerful feature phones
• Everyone wants Internet
• Gate is opened : 3G with Wifi
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 3/27
Internet in Device
• Full-browsing - Just a Basic
• Mobile Web - One step forward for device
• Native Apps - Best UX for ‘each’ devices
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 4/27
Mobile Web
• Independent from actual devices
• But still have to deal with device browsers
• Write once, use everywhere as possible
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 5/27
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
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 6/27
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
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 7/27
ADF Mobile offers..
•Mobile Browser Detection & Handling
• 60+ Rich UI Components
• Partial Page Rendering for low bandwidth
• Reusability - ADF Model, Business logics
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 8/27
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
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 9/27
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
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 10/27
Steps for iPhone
Configuring Environment
Creating Page Flows
Creating Pages
Skinning
And more..
1
2
3
4
5
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 11/27
Demo Scenario
• Simple Contact Apps
• 4 Pages with Single table
• ADF BC & Managed Bean
• Mysql Database
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 12/27
Step 1: Configuring Environment
Configuring Environment
Creating Page Flows
Creating Pages
Skinning
And more..
1
2
3
4
5
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 13/27
Configuring Development
Environment
• Prepare ADF Model Project with ADF BC
• Create ADF Mobile Browser Client Project
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 14/27
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));
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 15/27
Step 2: Creating Page Flows
Configuring Environment
Creating Page Flows
Creating Pages
Skinning
And more..
1
2
3
4
5
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 16/27
Creating PageFlows
• Modify Faces-config.xml
• Modeling Pages and Navigation Cases
• Only supports JSF Page flows
Mobile Web needs lots of pages & flows..
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 17/27
Step 3: Creating Pages
Configuring Environment
Creating Page Flows
Creating Pages
Skinning
And more..
1
2
3
4
5
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 18/27
Apache My Faces
Trinidad• Oracle contributed Opensource JSF
framework
• Partial-page rendering support
•A dialog framework and etc..
• http://myfaces.apache.org/trinidad
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 19/27
Trinidad Components
• Input Components - Text, List..
• Output Components - Text, Image..
• Layout Components - Page, Panel, Space..
•Navigation Components - Button, Link..
• Data Visualization - Graph, Table,Tree..
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 20/27
Step 4: Skinning
Configuring Environment
Creating Page Flows
Creating Pages
Skinning
And more..
1
2
3
4
5
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 21/27
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
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 22/27
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
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 23/27
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
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 24/27
More examples..
• http://www.oracle.com/technology/pub/articles/huang-iphone.html
Dynamic List Field Set
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 25/27
Step 5: Extensions
Configuring Environment
Creating Page Flows
Creating Pages
Skinning
And more..
1
2
3
4
5
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 26/27
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
8/14/2019 Developing Webpage for iPhone
http://slidepdf.com/reader/full/developing-webpage-for-iphone 27/27
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