内容


Maqetta 即模型,第 1 部分:设计一个 HTML5 移动 UI

在您的浏览器中拖放 HTML5 开发小部件

Comments

Maqetta 是一个免费的开源可视编辑工具,它使得设计丰富的 HTML5 用户界面变得更为简单有趣。UI 设计师可以使用 Maqetta (不需要使用插件或下载就可以在浏览器中运行)为桌面和移动应用程序构建运行的原型。只需要将小部件拖放到设备画布上,就可以生成一个生动的 UI 模型,然后将该 UI 原型提供给开发人员进行代码编写。

Maqetta 和 Dojo Foundation

Maqetta 最初由 IBM 创建,作为一个开源项目在 2011 年 4 月赠予 Dojo Foundation。在拥有 Dojo 的自由和商业友好的开源许可的条件下,可以使用 Maqetta。Maqetta 通常几个月更新一次,自从公开发布后就一直持续更新。2012 年下半年发布的版本支持主要 UI 改造以及显著的性能增强。

体重跟踪器应用程序的 UI 设计

移动用户界面通常由一系列屏幕或者称之为视图 的面板构成,视图随用户导航到应用程序的各个部分来回切换。图 1 中的流程图显示了 4 个将包含应用程序以及用户交互导航流的视图。

流程图中的实线箭头代表前进导航,虚线箭头代表后退导航,后退到前一视图。每个视图上的标签代表我们使用 Maqetta 创建视图时将要分配给该视图的 ID

图 1. 体重跟踪器应用程序的流程图 放大该图
体重跟踪器应用程序的流程图
体重跟踪器应用程序的流程图

4 个应用程序视图如下所示:

  • mainView 是用户发布应用程序时显示的第一个视图。它包含一个呈现用户输入体重的数字列表。单击列表中的任何一个数字,下一视图 detailsView 就会出现。另外,用户可以单击应用程序顶部的加号(+) 按钮添加一个新体重。
  • detailsView 显示了与给定条目相关的属性(比如,体重、输入日期以及备注)。单击 Date 条目就会让 detailsView_Date 视图出现。单击 Notes 条目会让 detailsView_Notes 视图出现。单击 Home 按钮会让用户回到 mainView 视图。
  • detailsView_Date 允许用户使用一个旋转轮来设置体重条目的日期。这是一个导航终点 ,因为在这里,用户惟一能够到达的地方就是 detailsView 视图。在应用程序标题处单击 Details,用户将会返回 detailsView 视图。
  • detailsView_Notes 允许用户在形式自由的文本区域输入任何与体重条目相关的备注。这也是一个导航终点,因为用户从这里能够到达的惟一地方就是返回 detailsView 视图。在应用程序标题处单击 Details,用户将会返回 detailsView 视图。

尽管体重跟踪器的设计可能比较复杂,但您可以使用 Maqetta 直观地创建一个 UI 模型,而不需要编写任何代码。您只需要拖放一些小部件然后编辑一些属性即可。

在云中发布 Maqetta

如果在阅读本文的同时跟随我们的指导来构建应用程序,您会从本文中获益更多。Maqetta 很容易入门,而且是免费的:

  1. 使用 Chrome、Firefox 或 Safari 最新版本浏览 Maqetta.org
  2. 单击 Launch Maqetta 按钮。
  3. 如果您已经有一个帐户:
    1. 输入您的邮件地址和密码。
    2. 单击 Log In
  4. 如果您没有帐户:
    1. 单击页面底部的 Register 按钮。
    2. 在 Create an Account 页面,输入您的邮箱地址然后单击 Sign up
    3. 注意包含链接的邮件,您可以通过该链接确认注册,只需在收到邮箱时单击链接。
    4. 请求得到确认之后,输入您的邮件地址和密码,然后单击 Log In

Maqetta 欢迎页面

登录后,将会看到一个展示 Maqetta 欢迎页面的工作台。如 图 2 所示,欢迎页面为 Maqetta 关键功能提供一个便捷的启动点,还提供 Maqetta 文档、教程以及备忘录链接(参阅 参考资料)。您也可以从页面顶部的下拉菜单访问欢迎页面的所有功能。

图 2. Maqetta 欢迎页面 放大该图
Maqetta 欢迎页面
Maqetta 欢迎页面

创建一个新项目

在第一次使用 Maqetta 时,可以使用默认项目 project1 中的文件。尽管没有严格的要求,但是为您开发的每个应用程序创建一个项目会有助于您有条不紊地开展工作,而且可以让您轻松地导出您的作品供其他工具使用。所以,让我们开始创建一个新体重跟踪器应用程序项目:

  1. 从 Maqetta 页面顶部的工具栏中选择 Create > Project... 菜单选项。
  2. 在 New Project 对话框中,输入 “weightTracker” 作为项目名称,如 图 3 所示。
    图 3. New Project 对话框
    New Project 对话框
    New Project 对话框
  3. 单击 Create 按钮。

如果您想要切换回 project1(或其他任何项目),那么请从 Files 面板的项目列表中进行选择。

创建一个移动应用程序

现在,我们来创建应用程序使用的 HTML 文件。(完成本文中的步骤时,可以将您的作品和后面 下载部分 中的 HTML 文件进行比较。)

  1. 选择 Create > Mobile Application... 菜单选项。
  2. 在 Create a Mobile Application 对话框(参见 图 4)中,输入 “index.html” 作为文件名称。(注意 index.html 是所需的文件名,您应该选择该文件名来构建使用 PhoneGap 部署到移动设备的体重跟踪器应用程序。我们将在本系列的第 3 部分中讨论该选项,您不妨现在为该文件命名。)
  3. 保留设备字段的 iphone 选项设置。如果需要的话,稍后您可以改变设备类型。
    图 4. 创建一个 Mobile Application 对话框
    创建一个 Mobile Application 对话框
    创建一个 Mobile Application 对话框
  4. 单击 Create 按钮。

Mobile Page Editor

关闭 Create a Mobile Application 对话框后,Maqetta 欢迎页面将被 Maqetta 的 Mobile Page Editor 所替代,显示一个空的 iPhone 轮廓,如 图 5 所示。除了 iPhone 之外,Maqetta 还提供其他流行手机和平板电脑(比如 iPad、Android 和 Blackberry)的编辑支持。不管您选择什么设备,Mobile Page Editor 都会在视图中展示该设备(带有您的应用程序)的等比例副本。当您将移动小部件拖放到该轮廓上时,它们将被渲染成目标平台的外观。

图 5. 一个新的移动应用程序画布以及 Iphone 轮廓
一个新的移动应用程序画布以及 Iphone 轮廓
一个新的移动应用程序画布以及 Iphone 轮廓

构建 Main 视图

创建了 HTML 文件之后,就可以开始从流程图构建 mainView 了。

工作台左侧的 Palette 项卡包含适用于将要设计的应用程序(在本文中,是一个移动应用程序)类型的所有组件。这些小部件都是根据其用途按区段进行组织的。Views、Heading、Lists、Controls 和 Containers 文件夹中的小部件都来自 Dojo Mobile 库(参阅 参考资料)。对于体重跟踪器,我们仅使用这些文件夹中 50 个左右的小部件中的一小部分。

  1. 打开 Views 部分查看可用视图小部件,如 图 6 所示:
    图 6. Maqetta 移动视图小部件
    Maqetta 移动视图小部件
    Maqetta 移动视图小部件
  2. 选择 ScrollableView 小部件,即 Views 部分的第一个小部件,将它拖放到设备轮廓上。所呈现出来的看起来像 图 7 中的截图:
    图 7. 将 ScrollableView 添加到 iPhone 轮廓 放大该图
    将 ScrollableView 添加到 iPhone 轮廓
    将 ScrollableView 添加到 iPhone 轮廓

    注意:
    • 页面画布现在有一个蓝灰色背景。这是因为添加到页面的第一个 Dojo Mobile 小部件引入了 CSS 样式表,该样式表为特定移动设备提供本机外观。
    • 整个页面上有一个选中的矩形。这是因为 ScrollableView 已选中,默认设置是 100% 高和宽。
  3. 现在单击 Maqetta 工作台右侧的 Widget 选项卡。打开 Properties 面板,将焦点集中在特定小部件的属性部分,如 图 8 所示。注意 ID 的默认值为 ScrollableView_0,Properties 面板的顶部显示了 for: ScrollableView #ScrollableView_0 (指明了这些属性对应的小部件的类型和 ID)。
    图 8. 显示了 Properties 选项卡的 Maqetta 工作台 放大该图
    Maqetta 工作台显示了 Properties 选项卡
    Maqetta 工作台显示了 Properties 选项卡
  4. 将 "mainView" 输入到 ID 字段并单击 Return 提交更改。正如您在 图 9 中所所看到的,Properties 面板的顶部现在显示了 for: ScrollableView #mainView。该 ID 与原始应用程序流程图中显示的设计相匹配。(参见 图 1。)
    图 9. 视图的属性面板
    视图的属性面板
    视图的属性面板

    注意,ID 对于一个视图来说是非常重要的。Dojo Mobile 小部件库使用视图 ID 来引用视图,在用户导航时对其进行隐藏和显示。考虑到这一点,当您使用建立应用程序导航流时,可以引用视图 ID。如果您继续关注本系列的第 2 部分,就可以在您的代码中使用这些 ID,这对于正确设置它们非常重要。
  5. 请注意工作台右下角的 Scenes 面板,如下列 图 10 所示。创建的所有视图都会出现在该面板的 Dojo Mobile Views 节点下。在本例中,该节点现在应该包含 ScrollableView #mainView
    图 10. Scenes 面板
    Scenes 面板
    Scenes 面板

添加一个标题

我们将继续构建 mainView,添加一个标题:

  1. 从小部件面板的 Heading 部分拖放一个 Heading 小部件到设备轮廓中。(如果找到一个小部件有困难,可以将其名称输入到小部件面板顶部的搜索框。)
  2. 在出现的文本框中输入 “Weight Tracker”,如 图 11 所示,然后单击 OK 设置标题内容。如果您想要以后对文本进行更改。只需要双击标题就能再次看到该文本框。(请注意,此过程可以应用于所有小部件,在第一次创建这些小部件时,会出现一个数据输入对话框。)
    图 11. 添加一个标题
    添加一个标题
    添加一个标题
  3. 图 12 所示的 Properties 面板的小部件区域,将 fixed 属性更改为 top。当必须对视图其他地方进行垂直滚动时,该设置可以确保标题原地不动。
    图 12. 设置标题属性
    设置标题属性
    设置标题属性

添加体重列表

下一步是添加一个显示用户输入体重列表的小部件:

  1. 从小部件面板的 Lists 部分拖放一个 EdgeToEdgeDataList,然后将它拖放到想要添加到的 Iphone 轮廓的面板的顶部。创建一个数据列表,然后将对话框设置成将要呈现的列表内容,如 图 13 所示。在每一行,第一个值是显示该行的标记,第二个值是单击该列时应用程序将要浏览的视图 ID
    图 13. 添加 EdgeToEdgeDataList
    添加 EdgeToEdgeDataList
    添加 EdgeToEdgeDataList
  2. 将文本框的内容修改成清单 1 中显示的一组体重(英镑),然后单击 OK。注意,detailsView 是单击给定行或体重值时应用程序将要导航到的视图的 ID。我们在原始应用程序流程图中定义了该导航(参见 图 1)。
    清单 1. EdgeToEdgeDataList 的输入
    149, detailsView
    150, detailsView
    151, detailsView
    148, detailsView
    146, detailsView
  3. 返回 Properties 面板,然后将清单的 ID 更改为 weightList。到目前为止,我们差不多已经完成了 mainView。您应该可以看到类似 图 14 截图的画面:
    图 14. Mobile Page Editor 中的主视图以及 iphone 呈现
    Mobile Page Editor 中的主视图以及 iphone 呈现
    Mobile Page Editor 中的主视图以及 iphone 呈现

    请注意,我们在这里设置了 ID,因为它在第 2 部分中非常重要。UI 设计师通常不会设置 weightList 之类的非视图小部件的 ID;这可能发生在应用程序 UI 编码阶段。

更改设备类型

设计师通常想要查看呈现不同环境的 UI 设计。幸运的是,在 Maqetta 中,更改设备类型和呈现都很容易实现。

  1. 打开 Document Settings 菜单,移动设备编辑器工具栏右起第二个图标,然后单击 Choose device。(注意,该菜单也有一个选择设备的选项。)
    图 15. 文档设置菜单
    文档设置菜单
    文档设置菜单
  2. 如果没有保存 HTML 文件中的更改,则会收到一个警告,警告提示您在开关设备之前先保存您的更改,如 图 16 所示。单击 Save 按钮。
    图 16. 警告!
    警告消息的屏幕截图
    警告消息的屏幕截图
  3. 单击 Save,此时会弹出选择设备轮廓的对话框。该对话框包含一个下拉列表以及一些设备选项,如 图 17 所示:
    图 17. 选择一个设备轮廓
    选择一个设备轮廓
    选择一个设备轮廓
  4. 选择想要用于观看呈现 UI 的设备(例如,android_340x480),然后单击 Select。Maqetta 的设备呈现将会发生改变,以匹配所选设备。如 图 18 所示:
    图 18. Maqetta 页面编辑器呈现了 Android 的 mainView
    Maqetta 页面编辑器呈现了 Android 的 mainView
    Maqetta 页面编辑器呈现了 Android 的 mainView

    您可以继续拖放小部件并编辑小部件属性,就像您不曾改变过设备一样,但是外观将会是最新选择的设备。
  5. 要重置呈现,请从 Document Settings 菜单选择 Choose device,从设备列表选择 iphone,然后单击 Select

开始 Details 视图

接下来,我们将从 图 1 显示的应用程序流程图开始构建 Details 视图(detailsView)。该视图显示了所有给定体重条目的细节。

  1. 在小部件面板的 Views 部分选择一个 ScrollableView,然后将其拖放到 mainView 上。该操作将一个新视图作为兄弟视图(意味着在元素树中具有相同的级别)添加到当前视图上(本例中是 mainView)。最新添加的视图是空的,而且已选中。
  2. 在 Properties 面板中,将新视图的 ID 更改为 detailsView。正如前面所提到的,正确设置视图 ID 非常重要。当我们在 mainView 中配置 EdgeToEdgeDataList 时,会将其设置成使用 detailsViewID 导航到一个新视图。
  3. 查看 图 19 中显示的 Scenes 面板:
    图 19. Scenes 面板显示了新视图
    Scenes 面板显示了新视图
    Scenes 面板显示了新视图

    注意:
    • Dojo Mobile Views 下面有两个视图:ScrollableView #mainViewScrollableView #detailsView。新视图是第一个视图的兄弟视图。
    • 第二个视图将成为选定视图,是可见的(就像添加一个新视图时所发生的那样),但是另一点需要注意的是,第一个视图小部件现在是不可见的。使用 Dojo Mobile,在任何给定时间内只有一个视图可见。在设计时,Maqetta 通过管理视图控件的可视性来模拟运行时行为,因此,在显示一个视图时,所有兄弟视图小部件都是隐藏的。
    • 可以在视图小部件之间切换,在 Dojo Mobile Views 中单击它们即可。这里选中的视图将是设备轮廓中可见的那个。

添加一个 Details 视图标题

我们将继续构造 detailsView,添加一个标题:

  1. 确保 Scenes 面板中的 detailsView 被选中。
  2. 在小部件面板的 Heading 部分选择 Heading 小部件,然后将其拖放到视图上。
  3. 在出现的对话框中输入 “Details”,然后单击 OK 来更改标题文本。
  4. 确保对 Properties 面板进行了以下更改,如 图 20 所示:
    • back 属性更改为 Home。这将在标题中创建一个带有 “Home” 标签的按钮,可使用户返回前一视图。
    • 从下拉菜单中选择 mainView,将按钮的 moveTo 属性更改为 mainView。单击 Back 按钮时,应用程序会转到主视图。
    • 将按钮的 fixed 属性改为 top
    图 20. 标题的 Properties 面板
    标题的 Properties  面板
    标题的 Properties 面板

detailsView 现在看起来应该类似 图 21 中的截图。

图 21. 带有标题的 Details 视图
带有标题的 Details 视图
带有标题的 Details 视图

预览和运行应用程序

任何时候,只要您在 Maqetta 中工作,就可以运行一个在线预览。因为我们构建了两个视图并定义了它们之间的导航,我们来预览一下体重跟踪器原型的在线版本,确保目前为止一切设置都正确。

  1. 在 Scenes 面板中,通过选择 mainView 开始我们的操作。界面上显示的第一个视图是预览运行时选中的视图。
  2. 在工具栏中,单击 Preview in Browser 图标(工具栏中最后一项)。这将启动一个新浏览器选项卡,包括在 Ipjone 移动设备轮廓内运行的体重跟踪器应用程序。如 图 22 所示:
    图 22. iPhone 轮廓中运行的体重跟踪器预览
    iPhone 轮廓中运行的体重跟踪器的预览
    iPhone 轮廓中运行的体重跟踪器的预览
  3. 单击下拉体重列表其中一项,请注意,detailsView 代替了 mainView。视图模式下的应用程序小部件响应用户交互,就像是在设备上在线运行的那样。
  4. 单击 detailsView 标题中的 Home 按钮,请注意,mainView 将再次出现。

模型测试成功!

更改 Preview 中的设备和方向

这里有几个预览技巧。首先,注意在线预览有切换设备、控制缩放级别以及将应用程序视图方向从纵向改为横向的控件。可以通过切换到另一个设备对这些控件进行实验,使用 Angle 按钮翻转侧边的视图。我的更新呈现如 图 23 所示。

图 23. 横向 Android 预览 放大该图
横向 Android 预览
横向 Android 预览

注意,代码依然有效,因此您仍然可以使用新配置测试 mainViewdetailsView 之间的导航流。

在移动浏览器上运行应用程序

最后,注意 Maqetta 预览图中紧挨着 Previewing 标签的 URL,如 图 24 所示。

图 24. 使用 URL 预览工具栏 放大该图
使用 URL 预览工具栏
使用 URL 预览工具栏

您可以使用这个 URL 查看移动设备浏览器上的原型,例如,通过将此 URL 粘贴到 Iphone 上的 Safari 浏览器上。尽管在移动浏览器上预览应用程序很有价值(特别是在最终目标是获得伊特 Web 托管应用程序时),但是请记住,这不同于真正本机应用程序的安装和运行。我们将在本系列的第 3 部分看到将 Maqetta 和 PhoneGap 结合使用时它是如何工作的。

为 Details 视图创建一个 SpinWheel

预览移动应用的基本功能和导航后,我们回过头来看一下 Details 视图,并构建支持用户详细记录其体重的小部件。

我们将构建一个 RoundRect(使用 RoundRectCategory 作为标签)作为 SpinWheel 小部件的容器。SpinWheel 看起来有点类似于体重秤。我们将填入代表体重的数字(以英镑为单位,回忆一下,我们故意使用英制计量单位作为应用程序原型单位)并对其演示进行略微调整。在这个过程中,我们将使用 Properties 面板中目前尚未探索的部分,即 Layout 和 Margin 选项卡。

构建 RoundRect 和 SpinWheel

  1. 返回 Maqetta 页面编辑器,并从 Scenes 面板中选择 detailsView
  2. 从小部件面板的 List 部分中选择 RoundRectCategory 小部件,然后将它拖放到 detailsView 画布上,该部件将用作 SpinWheel 的标签。在出现的文本框中输入 “Weight (lbs)”,如 图 25 所示,然后单击 OK
    图 25. 向 Details 视图添加一个 RoundRectCategory
    向 Details 视图添加一个 RoundRectCategory
    向 Details 视图添加一个 RoundRectCategory
  3. 现在将 RoundRect 从小部件面板的 Containers > Dojo 部分拖放到 RoundRectCategory 下面的视图上,如 图 26 所示。
    图 26. 向 Details 视图添加一个 RoundRect
    向 Details 视图添加一个 RoundRect
    向 Details 视图添加一个 RoundRect
  4. 从小部件面板的 Controls > Pickers 部分拖拽一个 SpinWheel 小部件,然后放到 RoundRect 的顶部,使之成为矩形的一个子节点(也就是说被一个矩形包围)。

图 27 中显示 SpinWheel 由两个包含字母的插槽构成。最终我们希望使用三个包含数字的插槽来模拟一个体重秤。

图 27. Details 视图中的默认 SpinWheel
Details 视图中的默认 SpinWheel
Details 视图中的默认 SpinWheel

定制包含 3 个插槽的 SpinWheel

  1. 使用 Properties 面板,将 SpinWheelID 更改为 weightSpinWheel。接下来,选择第一个 SpinWheel 插槽,然后双击,在出现的文本框中输入 “0,1,2,3,4,5,6,7,8,9”。单击 OK.
    图 28. 更改第一个 SpinWheel 插槽的内容
    更改第一个 SpinWheel 插槽的内容
    更改第一个 SpinWheel 插槽的内容
  2. 仍然选择第一个插槽,将 Properties 面板小部件部分的 value 属性更改为 1。注意 图 29 中显示的 labels 属性值现在与我们所指定的值相匹配的方式:
    图 29. 设置第一个 SpinWheel 插槽的属性
    设置第一个 SpinWheel 插槽的属性
    设置第一个 SpinWheel 插槽的属性
  3. 在 Properties 面板上单击 Layout 选项卡,将第一个 SpinWheel 插槽的 width 属性值更改为 70px,如 图 30 所示。注意页面编辑器中的插槽型号要如何更改才能让数字周围的空间更小。
    图 30. 第一个 SpinWheel 插槽的 Layout 属性
    第一个 SpinWheel 插槽 的 Layout 属性
    第一个 SpinWheel 插槽 的 Layout 属性
  4. 选择第二个 SpinWheel 插槽并双击。在出现的文本框输入 “0,1,2,3,4,5,6,7,8,9”,然后单击 Return 键。
  5. 选中第二个插槽,在 Properties 面板小部件部分将 value 属性更改为 5,然后在 Layout 部分将 width 属性设置成 70px
  6. 现在,从小部件面板的 Controls > Pickers 部分将第三个 SpinWheelSlot 拖放到 SpinWheel 上,将其放在第二个插槽的右边。这个新插槽将成为 SpinWheel 的子插槽,其他两个插槽的兄弟插槽。
  7. 将出现的文本框内容更改为 “0,1,2,3,4,5,6,7,8,9” 并单击 OK
    图 31. 添加第三个插槽
    添加第三个插槽
    添加第三个插槽
  8. 仍然选中第三个插槽,在 Properties 面板的小部件部分将 value 属性改为 0,在 Layout 部分将 width 属性改为 70px。您的第三个插槽现在看起来如 图 32 所示:
    图 32. 完成后的第三个插槽
    完成后的第三个插槽
    完成后的第三个插槽

调整布局

SpinWheel 的确太宽,因为它有 3 个插槽,但是可以通过修改 SpinWheelwidth 属性对其进行调整:

  1. 单击紧挨着最后一个插槽的区域,选择 SpinWheel
  2. 在 Properties 选项卡的 Layout 部分,将 width 属性更改为 222pxSpinWheel 看起来如 图 33 所示。
    图 33. 改进 SpinWheel
    改进 SpinWheel
    改进 SpinWheel

接下来,注意 iPhone 画布中 SpinWheel 右边的所有空白区域,确定以 SpinWheel 为中心将改进整个 UI 布局。我们可以对 SpinWheel 边缘进行如下调整:

  1. 单击 Properties 面板的 Margins 部分。
  2. 查看紧挨着 Show t/r/b/l 的文本框。
  3. margin-rightmargin-left 更改为 auto。

调整如 图 34 所示。

图 34. 调整 SpinWheel 的边缘
调整 SpinWheel 的边缘
调整 SpinWheel 的边缘

SpinWheel 现在完成,值为 150,在圆角矩形中居中对齐,如 图 35 所示。

图 35. 完成的 SpinWheel
完成的 SpinWheel
完成的 SpinWheel

完成 Details 视图

添加 RoundRectList 小部件,显示与任何给定体重条目相关的日期和用户备注,Details 视图完成。应用程序用户将使用 RoundRectList 来导航到 Date 和 Notes 视图,这会使配置导航流变得更容易。

添加占位符视图

首先创建两个占位符:

  1. 将一个 ScrollableView 体重条目从小部件面板拖放到当前视图(放在标题上或灰色区域),正如您之前所见到的,这会创建一个最初选择的空视图。
  2. 使用 Properties 面板,将新视图的 ID 更改为 detailsView_Date
  3. 将另一个 ScrollableView 小部件从小部件面板上拖放到 detailsView_Date 上。
  4. 使用 Properties 面板,将新视图的 ID 更改为 detailsView_Notes

在 Scenes 面板中您应该可以看到流程图中的 4 个视图,如 图 36 所示。

图 36. 显示所有 4 个视图的 Scenes 面板
显示所有 4 个视图的 Scenes 面板
显示所有 4 个视图的 Scenes 面板

为视图导航创建一个列表

下一步是添加一个 RoundRectList 小部件,这使用户可以从给定小部件的 Detail 视图导航到 Date 和 Notes 视图。

  1. 从 Scenes 面板选择 detailsView,这样它就成为一个活动视图。
  2. RoundRectList 从小部件面板上拖放到视图上,就在包含 SpinWheelRoundRect 的下面。
  3. 在出现的文本框中,每一行都被转换成新 ListItem 的标签。在一行中输入 “Date” ,在另二行中输入 “Notes”,如 图 37 所示:
    图 37. RoundRectList 输入
    RoundRectList 输入
    RoundRectList 输入
  4. 单击 OK

选择标记为 “Date” 的列表项,在 Properties 面板的小部件部分进行如下更改:

  1. 在紧挨着字段标签的下拉菜单中选择 moveTo 并将其设置成 detailsView_Date。现在,当用户单击该条目时,体重跟踪器应用程序将导航到 detailsView_Date 视图。
  2. rightText 修改为 “2012-10-09”,这将使文本出现在该条目的右侧。(注意,我们没有为该原型进行日期本地化;所有日期都根据通用 ISO-8601 标准进行格式化。请保持该格式不变,因为这对本系列第 2 部分非常重要。)
  3. ID 更改为 dateListItem
    图 38. Date 列表条目属性
    Date 列表条目属性
    Date 列表条目属性
  4. 选择第二个列表条目(标记为 “Notes”),然后在 Properties 面板中进行以下更改:
    • 从紧挨着字段标签的下拉菜单中选择 moveTo,然后将其设置为 detailsView_Notes。用户单击该条目时体重跟踪器应用程序将导航到 detailsView_Notes
    • rightText 修改为 “Ran 5 mi..." ,这为用户提供一个完整备注预览,在本例中是:“Ran 5 miles and ate lots of broccoli!”
    • ID 更改为 notesListItem

detailsView 完成了,看起来像 图 39 中的截图。

图 39. 完成的 Details 视图
完成的 Details 视图
完成的 Details 视图

构建 Date 视图

创建第三个视图,detailsView_Date,到目前为止应该比较直观。请执行如下操作:

  1. 从 Scenes 面板中选择 detailsView_Date 视图。
  2. 从小部件面板中将一个 Heading 拖放到该视图上。在出现的文本框输入 “Date”,然后单击 OK
  3. 在 Properties 面板中,将 back 属性更改为 “Details”,将 moveTo 属性更改为 detailsView(以匹配流程图中的设计),并将 fixed 属性更改为 top
  4. SpinWheelDatePickerControls > Pickers 部分拖放到标题下。
  5. 在 Properties 面板中,将 ID 更改为 dateSpinWheel
  6. 在 Properties 面板的 Margins 部分,单击紧挨着 show t/r/b/l 的复选框,并将 margin-top 更改为 10px,以便在标题和 spin-wheel 之间增加一点空间。

完成的视图看起来类似 图 40 中的截图。

图 40. 完成的 Date 视图
完成的 Date 视图
完成的 Date 视图

构建 Notes 视图

现在,我们将构建第四个,也是最后一个视图:

  1. 从 Scenes 面板中选择 detailsView_Notes
  2. 从小部件面板中将 Heading 拖放到该视图上,在出现的文本框中输入 “Notes” ,然后单击 OK
  3. 在 Properties 面板的小部件部分,将 back 属性更改为 “Details”,将 moveTo 属性更改为 detailsView(以匹配流程图中的设计),并将 fixed 属性更改为 top
  4. RoundRectContainers > Dojo 部分拖放到标题下。
  5. TextAreaControls > TextBox 部分拖放到 RoundRect
  6. 双击新文本区域,在出现的文本框中输入 “Ran 5 miles and ate lots of broccoli!",然后单击 OK
  7. 增加文本区域大小。在 Propertie 面板的 Layout 部分,将 width 属性更改为 100%,并将高度属性更改为 150px
  8. ID 更改为 notesTextArea

Notes 视图看起来类似 图 41 中的截图。

图 41. Notes 视图
Notes 视图
Notes 视图

对应用程序进行微调并最后完成

此时此刻,UI 原型已经相当完整了,但是我们仍需要为用户提供一个机制来添加新的体重条目。为此我们将添加一个加号按钮。然后对体重跟踪器 UI 进行最后改进,使其更加完美,使用户可以查看体重列表每一行中的日期和体重条目。

添加一个加号按钮

添加加号按钮:

  1. 从 Scenes 面板中选择 mainView,以便激活它。
  2. 将一个 ToolbarButton 从小部件面板的 Heading 部分拖放到 “Weight Tracker” 标题。将文本框中出现的值更改为 “+”,然后单击 OK
  3. 在移动应用程序中添加新词条的按钮通常位于标题的右侧。要实现这一点,可以在 Properties 面板的 Layout 部分将 float 属性更改为 right
  4. 在 Properties 面板的 Widget 部分,将 moveTo 更改为 detailsView,以便在用户单击按钮时出现导航。
  5. ID 属性更改为 addWeightButton

图 42 展示了完成这些步骤后 mainView 的样子。

图 42. 加号按钮添加一个体重条目
加号按钮添加一个体重条目
加号按钮添加一个体重条目

将正确的文本添加到 EdgeToEdgeDataList

接下来(也是最后)我们想要在体重列表每一行显示一个日期和体重。为此,我们需要利用 Maqetta 能够将 EdgeToEdgeDataList 绑定到文件的数据中这一优势。

  1. 从主 Maqetta 菜单中选择 Create > JavaScript File...,创建将用来存储新数据的文件。
  2. 在出现的对话框中,将文件名更改为 weights.json,并单击 Create 按钮,此时会出现一个新编辑器选项卡。
  3. 使用清单 2 中的内容替换编辑器中的内容。
    清单 2. weights.json 的内容
    {
        "items": [
            {label: "149", moveTo: "detailsView", rightText: "2012-10-01"},
            {label: "150", moveTo: "detailsView", rightText: "2012-10-09"},
            {label: "151", moveTo: "detailsView", rightText: "2012-10-15"},
            {label: "148", moveTo: "detailsView", rightText: "2012-10-23"},
            {label: "146", moveTo: "detailsView", rightText: "2012-11-01"}
        ]
    }

    您会注意到,这里的数据类似于第一次创建 EdgeToEdgeDataList 时我们在智能输入文本框中输入的数据。回忆一下就会发现,每行的文本框中有一个 label 一个 moveTo 值,用逗号隔开。在该文件中,每行有显式 labelmoveTo 和(新)rightText 属性。
  4. 保存并关闭该文件。
  5. 返回到页面编辑器,然后双击包含体重条目的 EdgeToEdgeDataList。此时将会弹出首次设置列表内容的对话框。
  6. 将下拉菜单从 Comma separated data 更改为 Data file from workspace
  7. 在文件框中输入 weights.json(您的文件名,如 图 43 所示),然后单击 OK。(请注意,您也可以导航到您工作空间中的一个文件中,单击紧挨着文本框的文件夹图标即可。)
    图 43. 从工作空间指定一个数据文件
    从工作空间指定一个数据文件
    从工作空间指定一个数据文件

现在,应该可以看到在列表中每个词条右端有一个日期,如 图 44 所示。

图 44. 添加到体重列表的日期
添加到体重列表的日期
添加到体重列表的日期

验证原型

我们的体重跟踪器应用程序原型现在已经完成了,我们没有编写一行代码!如果您还没有准备好,那么请查看该应用程序(使用工具栏中的 Preview in Browser 图标),验证您可以向前导航到所有视图,然后再返回第一个视图。

您可能还想体验一些移动小部件,比如调整应用程序的体重和日期变量的 spin-wheels,并验证 mainView 中的加号按钮可以导航到 detailsView

结束语

在本文中,您已经了解了如何为个人移动体重跟踪器应用程序快速构建一个相当完整的在线原型。如果已经有了一个生产应用程序,那么您可以采用以下步骤:

  • 使用 Maqetta 在线预览功能:
    • 向老板演示概念验证并说服他/她让贵公司启动移动体重跟踪跟踪业务。
    • 在进入开发阶段之前,与您的潜在客户进行可用性测试。
  • 使用 Maqetta 的 Review & Commenting 功能(参见 Create > Review... 菜单选项)获取来自团队的反馈。
  • 继续构建原型;例如,生产应用程序最终需要一个 Settings 视图,以便进行英制计量单位和公制计量单位之间的转换。您可能还想要添加面板来管理不同的用户、设置目标、输入用餐信息并跟踪练习例程或进度。
  • 使用 Maqetta 的 Mobile Theme Editor 为您的应用程序创建一个自定义主题。例如,可以使用公司的品牌色彩方案作为 UI 样式。
  • 确定设计是可靠的,可以让您的设计团队根据该设计开发一个产品。在本例中,您可以使用 Maqetta 机制 将项目导出为一个压缩文件,然后将其导入另一个开发环境,比如 Eclipse 或 IBM 的 Rational Application Developer

在本文中,您已经了解了如何构建一个精细的、较为复杂的移动应用程序 UI 原型 — 不需要编写任何代码!在第 2 部分中,我们将添加一些自定义 JavaScript 来处理用户交互。在第 3 部分,我们将使用 PhoneGap 构建另一个原型,使用它作为可部署到实际移动设备的本机应用程序。同时,请查看 参考资料 部分,了解有关 Maqetta、HTML5 和 Dojo Mobile 的更多信息。

致谢

特别感谢 Maqetta 团队(Jon Ferraiolo、Javier Pedemonte、Adam Peller 和 Bill Reed)的细心审校,以及为本系列文章提出的建设性反馈。


下载资源


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=移动开发, Open source, Web development
ArticleID=938084
ArticleTitle=Maqetta 即模型,第 1 部分:设计一个 HTML5 移动 UI
publish-date=07222013