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

受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