BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Abel Avram 关注 11 他的粉丝 ,译者 李彬 关注 1 他的粉丝 发布于 2013年6月18日. 估计阅读时间: 4 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

受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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT