2012年11月20日星期二

ADF_204:ADF Mobile 11g 架构

目前主要有三种类型的手机应用:
(1)Native Mobile Apps
使用专有的SDK,专有的开发工具,专有的语言开发的手机应用,这些应用只能部署在专门的手机平台上。
比如:使用xCode或Objective C开发的手机应用只能部署在iOS平台上;使用Eclipse和Java开发的手机应用只能部署在Android平台上;使用Visual Studio和C#开发的手机应用只能部署在Windows Phone平台上。
Native Mobile Apps 可以直接访问手机设备服务。
(2)Mobile Web Apps
部署在服务器上的Web应用,使用手机浏览器访问,与桌面浏览器不同,这里产生的HTML是专门为手机浏览器定制的。
Mobile Web Apps 无法直接访问手机设备服务。
在ADF Mobile中,Mobile Web Apps 可以借助Phone Gap访问手机设备服务。
(3)Hybrid Mobile Apps
与Native Mobile Apps相似,应用是部署和运行在手机上的,使用的是我们所熟知的Web开发技术:HTML5,CSS和 JavaScript。
应用运行在一个Native Container中,并且利用手机的浏览器引擎(不是浏览器)来渲染HTML和处理JavaScript。
Hybrid Mobile Apps 通过一个web-to-native抽象层可以访问手机设备服务。

这三种类型的手机应用的各自特点如下图所示:

ADF Mobile的架构在Hybrid Mobile架构的基础上做了扩展, 其架构如下图所示:

下面逐一介绍其中的部件:

1. Device Natvie Container
是根一级的Container,所有的on-device的手机应用都运行在这里。

2. Phone Gap
提供了一套JavaScript API,作为一个公共的接口访问手机设备服务。即作为一个抽象层,屏蔽了不同手机平台的差异性。

3. Web View
使用手机的浏览器引擎(不是浏览器)来渲染用户界面。
这里有三种类型的文件可供选择:ADF Mobile XML(AMX),Local HTML,Server HTML。
其中,AMX是一种类似于JSF的页面,Local HTML是HTML5页面,Server HTML是运行在Server端的页面。

4. Java
一个轻量级的Java VM,是运行Java的环境。
ADF Mobile应用的模型层使用Java技术实现,可以使用JDBC方式访问本地的数据库,也可以访问远程的WebServices(SOAP/REST)。

5. Credential Management, SSO & Access Control
Oralce IDM为ADF Mobile专门提供了一套SDK(已经内置在Device Natvie Container中),用于与Oracle IDM集成。
集成之后,就可以实现用户认证、单点登录、访问控制、数据加密等功能。

6. Application Configuration
用于动态修改服务的URL。
比如,测试环境和生产环境中的WebService的URL很可能是不一样的,从测试环境到生产环境需要重新编译并发布。
有了Application Configuration后,你可以在发布之后动态地修改服务的URL,无需重新编译和发布。

参考文献:
1. http://icenium.com/community/blog/icenium-team-blog/2012/06/14/what-is-a-hybrid-mobile-app-

2012年11月13日星期二

ADF_203:页面常用布局模板之二:Stretch

开发运行环境:JDeveloper 11.1.1.6

上一个实验的是Flow风格的页面效果,页面不会随着浏览器窗口大小的改变而改变。
在本实验中,我们开发一个Stretch风格的页面效果,页面会随着浏览器窗口大小的改变而改变。

1. 使用WebCenter Application模板创建Web应用
步骤和上一个实验基本一样,除了不要选中"Configure the application with standard Portal features"这一步。
因为在本实验中,我们不需要使用WebCenter应用的目录结构和站点导航,以及安全配置。

 2. 创建页面模板




3. 运行效果
可以看出,基本效果还是不错的:右上角是基本链接和登录,中间是Logo和标题,Logo下面是Tabs,点击某个Tab,显示SubTabs,点击某个Link,显示该Link的内容。

4. 页面模板结构
(1)Center Facet
 (2)Top Facet

Project 下载:MyCompoundApp.7z

ADF_202:页面常用布局模板之一:Flow


 开发运行环境:JDeveloper 11.1.1.6

WebCenter Application模板中有很好的目录结构、页面层级结构以及两个默认的页面模板。
虽然WebCenter Application模板是专门为Portal应用而用的,我们也可以使用WebCenter Application模板来构建Web应用。

1. 使用WebCenter Application模板创建Web应用






2. 创建页面模板



3. 运行效果
(1)Firefox 16.0.2
(2)IE 8

可以看出,基本效果还是不错的:右上角是基本链接和登录,中间是Logo和标题,Logo下面是多层菜单,中间是内容部分。
由于是Flow风格,页面不会随着浏览器窗口大小的改变而改变。
整个页面宽度是1024px,这是在模板中的属性PageContentWidth定义的。
但还是能够看出一些小问题:
(1)Firefox 中Logo图片靠左对齐,IE中Logo图片居中。
(2)Logo图片和Titile之间有一块空白区域。我尝试了很多修改,始终无法去掉,不知道是什么原因,希望知道原因的人可以告诉我。

4. 页面模板结构
这里决定整个页面是Flow风格的布局组件是:panelGroupLayout - scroll。
因为panelGroupLayout - scroll可以被父布局组件拉伸,却不能拉伸它其中的组件。



Project 下载:MyWebApplication.7z