1 / 42

使用 Oracle Application Express 4.2 构建移动应用程序

使用 Oracle Application Express 4.2 构建移动应用程序. Rick Greenwald 数据库云服务产品管理总监. 议题. 响应式设计和移动优化 移动 Web 应用程序概述 jQuery Mobile 简介 使用 Oracle Application Express 4.2 构建移动 Web 应用程序.

caldwell-campbell
Download Presentation

使用 Oracle Application Express 4.2 构建移动应用程序

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 使用 Oracle Application Express 4.2 构建移动应用程序 Rick Greenwald数据库云服务产品管理总监

  2. 议题 • 响应式设计和移动优化 • 移动 Web 应用程序概述 • jQuery Mobile 简介 • 使用 Oracle Application Express 4.2 构建移动 Web 应用程序

  3. 以下内容旨在概述产品的总体发展方向。该内容仅供参考，不可纳入任何合同。该内容不构成提供任何材料、代码或功能的承诺，并且不应该作为制定购买决策的依据。此处所述有关 Oracle 产品的任何特性或功能的开发、发布以及相应的日程安排均由 Oracle 自行决定。

  4. Graphic Section Divider

  5. 响应式设计和移动优化设计

  6. 响应式 Web 设计 一种 Web 设计方法，设计人员使用该方法的目的是在各种设备中（从台式机显示器到移动电话）提供最佳观看体验— 最大限度地减少大小调整、平移和滚动操作，实现轻松的阅读和导航。(Wikipedia)

  7. 响应式 Web 设计

  8. 移动优化 单独的桌面和移动网页。移动界面针对较小的屏幕进行了优化，更加轻型，而且能够响应触摸事件和其他设备特定的事件，如屏幕方向变化。

  9. 移动优化

  10. 响应式设计和移动优化

  11. 移动 Web 应用程序概述

  12. APEX 4.2 中的移动 Web 应用程序 • APEX 应用程序通常运行在最现代化的移动设备上，如iPhone、Android、平板电脑等，但是标准应用程序可能并不适合较小的屏幕 • APEX 4.2 基于jQuery Mobile 提供支持移动的主题和模板 • 提供更类似原生的移动用户体验 • 针对移动屏幕和触摸界面进行了优化

  13. 移动 Web 应用程序 什么是移动 Web 应用程序？ • 一种越来越流行的、为移动设备提供内容和业务应用程序的方式 • 一种用于开发原生移动应用程序的替代方式 • 无需通过应用商店下载和安装 • 可在任何操作系统、桌面、平板电脑、智能手机上运行 • 需要浏览器和 Internet 连接

  14. 移动 Web 应用程序 开发和部署 • 使用标准 Web 技术和框架轻松开发 • 通过 Web 浏览器使用 Web 应用程序，大量功能在 Web 服务器上执行 • 利用HTML、CSS 和 JavaScript 的优势，将更多功能转移到浏览器，进而提供更丰富的用户体验和更优的性能 • 易于维护和轻松实施更新！

  15. 移动 Web 应用程序 局限 • 浏览器通常无法访问设备的高级功能，如GPS、相机、地址簿等*） • Web 应用程序的速度通常比原生应用程序慢 • 移动 Web 应用程序需要持久的 Internet 连接 • 使用脱机 Web 应用程序缓存和PhoneGap、Titanium等平台提供解决这些局限的方法 *) iOS6 中通过媒体捕获和文件 API 实现 HTML 5 地理定位、文件上传和相机访问

  16. jQuery Mobile 简介

  17. jQuery Mobile 概述 • 针对触摸优化的 JavaScript 框架，适用于智能手机和平板电脑 • 基于jQuery构建 • 跨所有流行移动平台的统一用户界面系统 • 轻量级尺寸，具有最小的图像、速度的依赖性 • 响应式设计技术可以使相同的底层代码库自动从智能手机扩展到平板电脑和桌面大小的屏幕

  18. jQuery Mobile 概述 • 基于 AJAX 的导航系统可实现灵活的页面切换，同时保留后退按钮、书签和简洁的 URL • 支持触摸和鼠标事件，使用一个简单的 API 即可支持不同的用户输入方法 • WAI-ARIA 等可访问性特性集成在整个框架中 • 支持屏幕读取器和其他辅助技术

  19. jQuery Mobile jQuery 与 jQuery Mobile 之间的差异 • jQuery：一种库，借助选择器、事件处理和对 AJAX 请求的支持，使编写 JavaScript 更加轻松 • jQuery Mobile： • 基于jQuery构建的框架 • 由开发人员用来构建移动界面 • 大部分编码使用纯文本 HTML 标记编写 • jQuery Mobile 可自动为小部件应用样式和添加功能

  20. jQuery Mobile 渐进增强 • 将内容和功能引入所有移动和桌面平台 • 在更新的移动平台上获得像安装应用程序一样的丰富体验 • 在较旧和支持能力较低的设备上获得基本而实用的体验

  21. jQuery Mobile 可定制的用户界面 • 内置主题框架 • ThemeRoller应用程序 http://jquerymobile.com/themeroller/

  22. jQuery Mobile 事件 • 触摸事件：tap、tapholdswipe、swipeleft、swiperight • 方向变化事件：orientationchange • 滚动事件：scrollstart、scrollstop • 页面更改事件 • 页面切换事件 • 页面初始化事件

  23. jQuery Mobile 支持的平台 • 3 级分级平台支持系统，支持的平台包括： • Apple iOS（iPhone、iPodTouch、iPad、iPad Mini） • Android • Windows Phone • Blackberry

  24. jQuery Mobile 基本页面模板 — 头 <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/mobile/jquery.mobile-1.1.0.min.css" /> <script src="/jquery-1.7.1.min.js"></script> <script src="/mobile/jquery.mobile-1.1.0.min.js"></script> </head> <body>…</body> </html>

  25. jQuery Mobile 基本页面模板 — 主体 <!DOCTYPE html> <html> <head>...</head> <body> <div data-role="page"> <div data-role="header"><h1>My Title</h1></div><!-- /header --> <div data-role="content"><p>Hello world</p></div><!-- /content --> </div><!-- /page --> </body> </html>

  26. jQuery Mobile 基本列表视图 <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul>

  27. 使用 Application Express 4.2 构建移动 Web 应用程序

  28. 使用 APEX 4.2 构建移动 Web 应用程序 • 声明式支持构建移动 Web 应用程序 • APEX 应用程序支持多个用户界面：例如桌面、智能手机 • 移动页面通过基于jQuery Mobile 的主题和模板使用jQuery Mobile • HTML5 图表和新的 HTML5 项目类型

  29. 使用 APEX 4.2 构建移动 Web 应用程序 用户界面 • APEX 应用程序可与多个用户界面关联 • 每个用户界面与一个主题相关联 • 用户界面还定义设备特定的登录URL、主页URL、全局页面（页面 0）和设备自动检测 • 每个页面仅支持一个用户界面 • 包括桌面特定页面和移动特定页面的应用程序

  30. 使用 APEX 4.2 构建移动 Web 应用程序用户界面

  31. 使用 APEX 4.2 构建移动 Web 应用程序 增强的向导 • 创建应用程序向导，允许选择用户界面 • 创建页面向导，显示当前与应用程序关联的用户界面可用的选项 • 向导生成适合设备的组件： • 报告和表单向导为移动设备创建列表视图和表单 • 图表向导为移动设备创建 HTML5 图表 • 用于移动的向导中略去了一些元素，如选项卡

  32. 使用 APEX 4.2 构建移动 Web 应用程序 更新的区域和项目类型 • jQuery Mobile 列表视图区域：用于移动导航、下钻、某些类型的报表、报告和表单页面等内容的默认选项 • 允许设置兼容性模式的插件（桌面/移动） • 支持触摸事件、点击、按住、滑动、滚动、方向变化等的动态操作

  33. 使用 APEX 4.2 构建移动 Web 应用程序 更新的区域和项目类型 • 新的 HTML5 项目类型 • 日期、电子邮件、编号、电话、颜色、范围…… • 新的 HTML5 属性 • 自动完成、最大值、最小值、只读、必填…… • 移动改进 • 显示最合适的小键盘、原生选择列表、数据选取器……

  34. 使用 APEX 4.2 构建移动 Web 应用程序 • 列表视图区域类型 • 数据角色为“listview”的无序列表 • 用于数据显示、导航、列表视图和表单页面等 • 默认使用全宽，提供插入选项 • 自动分隔符 • 声明式搜索筛选条件 • 客户端和服务器端搜索选项 简单列表 可筛选的分隔列表

  35. 使用 APEX 4.2 构建移动 Web 应用程序 非 Flash 图表 • 使用Anychart 的 HTML5 图表支持非 Flash 图表 • 对桌面应用程序，首选 Flash与 HTML 回退一起使用 • 对移动应用程序，图表创建为仅用于 HTML5

  36. 使用 APEX 4.2 构建移动 Web 应用程序 移动日历 • 移动友好的日历模板 • 用于日期条目的新列表视图 • 在移动设备的日历下使用月视图显示日期条目

  37. 移动应用程序的部署 • 内部应用程序 • 部署到公司内部网络中的 APEX 实例 • 通过 VPN 从网络外部进行访问 • 面向公众的应用程序 • 部署在可通过 Internet 访问的 APEX 实例上 • 部署到托管的站点，如Oracle 云

  38. 移动应用程序的部署 • 在内置 Web 浏览器（Safari、Chrome等）中打开应用程序 • 添加到主屏幕（菜单图标，在浏览器中打开应用程序） • 使用PhoneGap、Titanium、Rhodes等平台实现原生应用程序体验 • 将 Web 应用程序包装在框架中，从而使 Web 应用程序作为原生应用程序运行 • 访问原生特性，如GPS、加速度计、相机、指南针 • CSS、JS 和图像的本地部署 • 通过应用商店分发

  39. 演示使用 APEX 4.2 构建移动 Web 应用程序

More Related