首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

开源 Web 应用程序框架 Mavo 入门-2

开源 Web 应用程序框架 Mavo 入门-2

样本应用程序在本文中,我将通过向您说明如何构建 Poetry Book Club 通知页面来介绍 Mavo 的基本功能。
Mavo 应用程序元素Poetry Book Club 应用程序代码的核心是 HTML body 中的 main                元素。main 元素是内容的重要主体的容器。在此例中,它也是 Mavo 应用程序的容器结构。这由其                mv-app 属性来指示,该属性的值是所选的应用程序标识。完整的开始标签看起来如下所示:
<main mv-app="poetryclub" mv-storage="local">
这被称为 Mavo 应用程序元素或声明,可以将其放置在任何 HTML 块元素上,不仅可放置在 main                元素上,甚至还可放置在 article 或 div 元素上。Mavo 引入了前缀为                mv- 的专用属性。mv-storage 属性指示应用程序所处理数据的存储位置。如果它的值为                none 或者该属性完全被忽略,那么将不会存储任何内容。如果如上所示,它的值为                local,那么数据将存储在浏览器的本地存储中。
Mavo 属性在 Mavo 应用程序元素中,具有 property 属性的任何元素都会变成可操作且可保存的数据项。思考以下片段:
<p>
  <label>Title: </label>
  <span property="title">Ndewo, Colorado</span>
</p>
<img property="cover" src="//gonzaga.ogbuji.net/~uche/lit/2013/ndewo-cover-small.jpg"
alt="cover" />
<p>
  <label>Meeting date: </label>
  <time property="meeting" datetime="2017-10-09">9 Oct 2017</time>
</p>




在顶部 p 元素中,span 将声明和管理名为 title 的 Mavo                数据属性。通过 Mavo,任何 HTML 5 元素都可以管理一个属性,并且 Mavo                将根据每个元素类型的语义确定有意义的用户编辑行为。例如,在此例中,编辑模式为单行文本输入。如果一个属性改为由块元素(如                p)管理,那么编辑模式将为多行文本输入。
cover 和 meeting 属性也位于上述片段中。img 元素管理                cover,并且编辑模式为替换图像 URL 的输入。time 元素将管理                meeting,并且编辑模式为日历窗口小部件。
完整的 Poetry Book Club 示例列表 1 中显示的 bookclub1.html 是从中获取上述片段的整个 HTML 文件。
清单 1. 简单的 Poetry Book Club                通知页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The poetry book club</title>

    <link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
    <script src="https://get.mavo.io/mavo.js"></script>
  </head>
  <body>
    <main mv-app="poetryclub" mv-storage="local">
      <h1>The poetry book club</h1>

      <p>
        <label>Title: </label>
        <span property="title">Ndewo, Colorado</span>
      </p>
      <img property="cover" src="//gonzaga.ogbuji.net/~uche/lit/2013/ndewo-cover-small.jpg" alt="cover" />
      <p>
        <label>Meeting date: </label>
        <time property="meeting" datetime="2017-10-09">9 Oct 2017</time>
      </p>

    </main>
  </body>
  </html>




Mavo 实际运用在将 bookclub1.html 文件加载到浏览器中时,会显示简单的 Poetry Book Club 通知页面,如图 1 所示:
图 1. 简单的 Poetry Book Club 通知页面
请注意页面顶部的 Mavo 操作栏。在单击“Edit”按钮后,会显示编辑功能。
图 2 显示了单击“Edit”并开始更改标题字段后的页面。请注意,该按钮现已更改为“Editing”。                如果我再次单击此按钮,页面将恢复其正常查看状态,而不存在特殊编辑行为。
图 2. 用户编辑模式下的 Poetry Book Club 通知页面
在单击该图像后,会弹出一个字段,可以在其中替换 URL 和上传新图像。顺便提一下,Mavo 会要求您为每个使用属性声明的图像都提供一个                alt 属性。当然,这是您应该做的。
图 3. 在 Mavo 中编辑图像
在单击会议日期时,会显示一个日历窗口小部件,如图 4 所示:
图 4. 在 Mavo 中编辑日期
使用“Clear”按钮,您可以撤销在编辑会话中进行的所有更改。
如果您仔细观察,就会看到 Mavo 在编辑工具中以各种方式使用属性名称。例如,如果单击以编辑图像,那么可输入新 URL                的字段的标签即为“Cover:”,这取自属性名称。
返回列表