写点什么

Fries:使用 HTML、JavaScript 和 CSS 搭建 Android 本地接口

  • 2013-06-17
  • 本文字数:1021 字

    阅读完需:约 3 分钟

受 iPhone 应用原型设计框架 Ratchet的启发, Jaune Sarmiento创建了 Fries——一个用来创建 Android 应用 UI 的小型框架,在创建过程中使用 HTML、JavaScript 和 CSS,而无需本地代码。虽然已有许多类似的框架,但 Fries 对 Android 4.0 本地接口模仿得尤为出色。

目前,Fries 定义了若干 UI 组件,包括:操作栏(包括向上按钮、操作按钮、操作溢出菜单和副标题)、标签、按钮、下拉菜单、列表(2 行和多行)和表单(包括可伸缩表单)。下图展现了顶部的操作栏,它带有一个操作项和溢出菜单项:

对应的 HTML 代码如下:

复制代码
<div class="page">
<header class="action-bar fixed-top">
<a class="app-icon action" href="#">
<i class="icon-fries"></i>
</a>
<h1 class="title">Action Buttons</h1>
<ul class="actions pull-right">
<li><a title="Search" class="action" href="
#"><i class="icon-search"></i></a>
<li><a title="Copy" class="action" href="
#"><i class="icon-copy"></i></a>
<li><a title="Cut" class="action" href="
#"><i class="icon-scissors"></i></a>
<li><a title="Settings" class="action" href="
#"><i class="icon-settings"></i></a>
</li></ul>
</header>
</div>

就像上图一样,基于 Fries 的应用是一系列 HTML“页面”,在请求时使用 stack.js载入它们——stack.js 改编自 Ratchet 的 push.js,它在需要的时候执行 AJAX 调用,从服务器端取回新的页面。Sarmiento 表示,stack.js 使用“HTML5 历史 API,因此不会破坏 Android 设备的后退按钮功能。”

Fries 使用 PhoneGap 实现页面间的过渡,一段 YouTube 上的视频对此进行了展示。

Sarmiento 给出了一份简要的路线图,其中提到了可滑动标签、模态、进度条等内容。

目前,在搭建HTML5 接口以模拟本地接口时还存在一些问题。HTML5 应用的主要价值在于一次编写就可以部署在多种移动操作系统上。但Fries 与Android 风格类似,而与iOS 并不是非常匹配。如果在Ratchet 和Fries 之上搭建一个抽象的UI 框架或许能够解决这个问题,这样的框架根据应用在哪个操作系统——iOS 或Android——上运行来切换框架。

另一个重大问题与应用的离线运行相关。目前,Fries 应用需要保持Internet 连接,或是在设备上运行一个Web 服务器。这个问题可以通过运用HTML5 离线特性来解决,届时应用将被缓存或本地存储。

查看英文原文: Fries: Building a Native Android Interface with HTML, JavaScript and CSS

2013-06-17 10:272497
用户头像

发布了 256 篇内容, 共 63.1 次阅读, 收获喜欢 10 次。

关注

评论

发布
暂无评论
发现更多内容

什么是数据质量管理?企业怎样做好数据质量管理?

雨果

数据质量

如何在 ACK 中使用 MSE Ingress

阿里巴巴中间件

阿里云 容器 微服务 云原生 ingress

Android技术分享| Activity 过渡动画 — 让切换更加炫酷

anyRTC开发者

android 音视频 动画 移动开发 Activity

干货 | 如何实现软件自动化部署?

嘉为蓝鲸

运维 IT 应用发布 应用部署

Java培训学习技术需要具备哪些能力

小谷哥

知识管理对企业的作用不容小觑

Baklib

知识管理 企业

写出优秀的产品手册文档的技巧

Baklib

文档 产品手册

如何选择比较靠谱的数据培训班?

小谷哥

怎么来选择大数据培训课程

小谷哥

大规模数据如何实现数据的高效追溯

华为云开发者联盟

大数据 后端 华为云 企业号九月金秋榜

干货 | 企业数字化转型过程中,传统IT和数字型IT能否严格区分?

嘉为蓝鲸

运维 转型 IT 数字化 研发

软件测试 | 测试开发 | Jenkins 踩坑(四)|基于接口自动化测试完成 Jenkins+GitHub+Allure 的结合

测吧(北京)科技有限公司

测试

微服务治理热门技术揭秘:动态读写分离

阿里巴巴中间件

数据库 阿里云 微服务 云原生

elasticsearch的字符串动态映射

程序员欣宸

elasticsearch 9月月更

学员在web前端培训机构应该怎么学习

小谷哥

贝斯的圆桌趴 |科技公司内部 SaaS 工具大公开

Bytebase

Baklib|FAQ常见问题对产品推广的重要性

Baklib

产品 FAQ

Java开发培训的就业方向有哪些?

小谷哥

太牛了,这是我见过把微服务讲的最全最好的SpringCloud架构进阶

程序知音

Java 架构 微服务 SpringCloud 后端技术

Linux系统安装配置Tomcat

Linux Tomccat 9月月更

OneFlow源码解析:Tensor类型体系与Local Tensor

OneFlow

深度学习 源码解析 算子

Linux vim的使用和配置

挚爱光小胖

Linux vim教程

画一个 “月饼” 陪我过中秋,使用 ESP32-C3 制作炫彩月饼

矜辰所致

电路设计 ESP32-C3 9月月更

设计模式的艺术 第十四章享元设计模式练习(开发一个多功能文档编辑器,在文本文档中可以插入图片、动画、视频等多媒体资料。为了节省系统资源,相同的图片、动画和视频在同一个文档中只需保存一份,但是可以多次重复出现,而且它们每次出现时位置和大小均可不同)

代廉洁

设计模式的艺术

Fries:使用HTML、JavaScript和CSS搭建Android本地接口_JavaScript_Abel Avram_InfoQ精选文章