ADF_110：使用ADF Mobile开发手机Web应用

运行环境：JDeveloper 11.1.2.1.0 + Oracle Database 10g Express Edition 10.2.0.1 + Safari 5.1.2。

使用ADF Mobile开发手机Web应用与开发ADF Web应用过程类似又有不同。

重要步骤说明：

1. 创建应用
这里仍然选择Fusion Web Application(ADF)

给出应用的名称，点击finish按钮。

2. 删除ViewController Project
这个Project是开发ADF Web应用的，将其删除，选择彻底删除所有文件。

3. 在Model Project中使用ADF-BC建立模型层
连接HR Schema。

选择Department、Employee和Job表生成ADF-BC对象。

4. 新建一个Project: ViewController
注意，这里要选择Custom Project。

技术范围选择ADF Mobile Browser，其它会自动选择过来。

5. 新建一个页面: browse.jsf
注意，这里一定要勾上"Render in Mobile Device"。

页面创建后，还会增加一些新文件。

其中trinidad-config.xml表明当前使用的皮肤是哪一个，其内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>#{requestContext.agent.type == 'desktop'? 'richmobile': 'mobile'}</skin-family>
</trinidad-config>

其中trinidad-skins.xml包含所有的皮肤定义，其内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<!-- To use mobile skin families in your app, please update trinidad-config.xml with below tags -->
<!-- <skin-family>#{requestContext.agent.type == 'desktop'?'richmobile': 'mobile'}</skin-family> -->
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>richmobile</id>
<family>richmobile</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>styles/richmobile.css</style-sheet-name>
</skin>
<skin>
<id>mobile</id>
<family>mobile</family>
<render-kit-id>org.apache.myfaces.trinidad.pda</render-kit-id>
<style-sheet-name>styles/mobile.css</style-sheet-name>
</skin>
</skins>

6. 向页面增加组件
注意，这里必须选择Trinidad组件，不可以选择ADF组件，因为ADF组件目前无法运行在所有的手机浏览器上。

拖放Employee Data Control生成Trinidad ReadOnly Table。

为组件设置合适的StyleClass，这一步需要参考《Oracle ADFMobile – Skinning Guide》。
也就是说，ADF Mobile是通过设置StyleClass来实现兼容不同手机浏览器。

7. 运行
这是在IE上运行的效果，不是很好看。
但是我们惊喜的发现，它实现了自动分页的功能。

这是在Safari上运行的效果，看起来是不是有些像客户端应用？
Safari可以模拟手机上浏览器的运行效果。

这里有一个小问题，就是对panelHeader的styleClass="af_m_toolbar"设置，效果不是很理想。
不知道是不是一个bug，有待求证。

当然，你可以安装不同手机的模拟器，看看在手机上运行的真实效果。

Project 下载： MobileBrowserHR.7z