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

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

\

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

\

\

对应的HTML代码如下：

\

\\u0026lt;div class=\"page\"\u0026gt;\  \u0026lt;header class=\"action-bar fixed-top\"\u0026gt;\    \u0026lt;a class=\"app-icon action\" href=\"#\"\u0026gt;\      \u0026lt;i class=\"icon-fries\"\u0026gt;\u0026lt;/i\u0026gt;\    \u0026lt;/a\u0026gt;\    \u0026lt;h1 class=\"title\"\u0026gt;Action Buttons\u0026lt;/h1\u0026gt;\    \u0026lt;ul class=\"actions pull-right\"\u0026gt;\      \u0026lt;li\u0026gt;\u0026lt;a title=\"Search\" class=\"action\" href=\"\#\"\u0026gt;\u0026lt;i class=\"icon-search\"\u0026gt;\u0026lt;/i\u0026gt;\u0026lt;/a\u0026gt;\      \u0026lt;li\u0026gt;\u0026lt;a title=\"Copy\" class=\"action\" href=\"\#\"\u0026gt;\u0026lt;i class=\"icon-copy\"\u0026gt;\u0026lt;/i\u0026gt;\u0026lt;/a\u0026gt;\      \u0026lt;li\u0026gt;\u0026lt;a title=\"Cut\" class=\"action\" href=\"\#\"\u0026gt;\u0026lt;i class=\"icon-scissors\"\u0026gt;\u0026lt;/i\u0026gt;\u0026lt;/a\u0026gt;\      \u0026lt;li\u0026gt;\u0026lt;a title=\"Settings\" class=\"action\" href=\"\#\"\u0026gt;\u0026lt;i class=\"icon-settings\"\u0026gt;\u0026lt;/i\u0026gt;\u0026lt;/a\u0026gt;\    \u0026lt;/li\u0026gt;\u0026lt;/ul\u0026gt;\  \u0026lt;/header\u0026gt;\\u0026lt;/div\u0026gt;\

\

就像上图一样，基于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