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

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

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

对应的HTML代码如下&＃xff1a;

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

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

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

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

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

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

查看英文原文&＃xff1a;Fries: Building a Native Android Interface with HTML, Javascript and CSS