Moodle 中文API之全局输出API（二）

我就是我 2022-08-06 08:20 146阅读 0赞

2. 渲染

2.1 基本渲染

2.1.1 输出标签方法

2.1.2 图片地址

2.1.3 prepare\_event\_handlers(&$component) 预处理方法

2.1.4 prepare\_legacy\_width\_and\_height($component)

2.2 核心渲染

2.2.1 action\_icon 活动图标

2.2.2 box,box\_start 和 box\_end

2.2.3 button 按钮

2.2.4 checkbox 复选框

2.2.5 close\_window\_button 关闭窗口按钮

2.2.6 confirm 确认按钮

2.2.7 container，container\_start 和  container\_end

2.2.8 continue\_button 继续按钮

2.2.9 doc\_link 文档链接

2.2.10 error\_text 错误文本

2.2.11 footer 脚部

2.2.12 form 表单

2.2.13 header 头部

2.2.14 heading 头顶部

2.2.15 heading\_with\_help

2.2.16 help\_icon 帮助按钮

2.2.17 htmllist

2.2.18 image 图像

2.2.19 label

2.2.20 link

2.2.21 link\_to\_popup

2.2.22 link

2.2.23 notification 提示

2.2.24 paging\_bar 分页条

2.2.25 radio

2.2.26 select

2.2.27 select\_option

2.2.28 spacer  间隔

2.2.29 table

2.2.30 textfield 文本域

2.2.31 user\_picture 用户头像

2.3 点击核心渲染

3. 活动

3.1 component\_action 活动组件

3.2 popup\_action 弹出活动

2. 渲染

2.1 基本渲染

· 简单基础类实现moodle渲染.

· 通过构造函数跟踪xhtml\_container\_stack使用.

· 也有方法促使生成HTML的输出.

2.1.1 输出标签方法

· 输出特定的HTML标签低级功能.

· 对于空标签（没有内容），使用output\_empty\_tag

2.1.2 图片地址

· 对于旧模块的图标 使用old\_icon\_url获得相同的图标

· 相当于 "$CFG->modpixpath/$mod/icon.gif" 是 mod\_icon\_url('icon', $mod)

2.1.3 prepare\_event\_handlers(&$component) 预处理方法

· 用于渲染功能来准备JS事件侦听器组件，可能需要它.

· 它可以接收用户输入的所有组件都应通过这个方法

2.1.4 prepare\_legacy\_width\_and\_height($component)

· 返回正确的CSS的组件已不推荐使用的$height和$ width属性

2.2 核心渲染

由于这些功能都非常有据可查的内联（PHPDoc的），我只会把例子放在这里，不做深入的解释.

2.2.1 action\_icon 活动图标

$icon = new moodle_action_icon();
    $icon->image->src = $OUTPUT->old_icon_url('moodlelogo');
    $icon->image->alt = 'What is moodle?';
    $icon->link->url = new moodle_url('http://domain.com/index.php');
    $icon->add_confirm_action('Are you sure?'); // 可选的参数. 相当于 $icon->link->add_confirm_action('Are you sure?');
    echo $OUTPUT->action_icon($icon);

输出:

2.2.2 box,box\_start 和 box\_end

echo $OUTPUT->box('A message of some kind');
    // 或者
    echo $OUTPUT->box_start();
    echo 'A message of some kind';
    echo $OUTPUT->box_end();

输出:

<div class="box generalbox">A message of some kind</div>

2.2.3 button 按钮

· 请注意，这种方法的签名要求html\_form组件作为其唯一的参数。这种形式的对象必须有一个$button value (html\_button)

$form = new html_form();
    $form->url = new moodle_url('http://domain.com/index.php', array('id' => 3, 'userid' => 5));
    $form->button->text = 'My account';
    echo $OUTPUT->button($form);

输出:

2.2.4 checkbox 复选框

$checkbox = html_select_option::make_checkbox('1', false, get_string('donotask'));
    echo $OUTPUT->checkbox($checkbox, 'donotask');

输出:

2.2.5 close\_window\_button 关闭窗口按钮

echo $OUTPUT->close_window_button();

输出:

2.2.6 confirm 确认按钮

echo $OUTPUT->confirm('Are you sure?', '/index.php?delete=1', '/index.php');

输出：

2.2.7 container，container\_start 和  container\_end

· 容器不同于盒子在两个方面:

1. 它不添加默认的CSS类（盒子增加了一个“box”类和“generalbox”类，除非默认被忽略）

2. 它被存储在XHTML的栈的一种 "container", 而不是一个 "box"

echo $OUTPUT->container('A message of some kind', 'important', 'notice');
    // 或者
    echo $OUTPUT->container_start('important', 'notice');
    echo 'A message of some kind';
    echo $OUTPUT->container_end();

输出:

<div id="notice" class="important">A message of some kind</div>

2.2.8 continue\_button 继续按钮

echo $OUTPUT->continue_button('http://domain.com/index.php?id=2&userid=4');
    // 或者(推荐)
    echo $OUTPUT->continue_button(new moodle_url('http://domain.com/index.php', array('id' => 2, 'userid' => 4)));

输出:

2.2.9 doc\_link 文档链接

一般不会用到.

2.2.10 error\_text 错误文本

echo $OUTPUT->error_text("It's all broken!");

输出:

<span class="error">It's all broken!</span>

2.2.11 footer 脚部

· 简单调用 $OUTPUT->footer() 在每个页面的尾部.

· 输出取决于你所在的页面.

2.2.12 form 表单

$form = new html_form();
    $form->url = new moodle_url('http://domain.com/index.php', array('id' => 3, 'userid' => 5));
    $checkbox = html_select_option::make_checkbox(1, false, 'Agree to terms');
    $contents = $OUTPUT->container('Terms and conditions: Be kind and courteous');
    $contents .= $OUTPUT->checkbox($checkbox, 'agree');
    echo $OUTPUT->form($form, $contents);

输出:

<form action="http://domain.com/index.php" method="post">
      <div>
        <input type="hidden" value="79D3tSzYfz" name="sesskey"/>
        <input type="hidden" value="3" name="id"/>
        <input type="hidden" value="5" name="userid"/>
        <div>Terms and conditions: Be kind and courteous</div>
        <span class="checkbox agree">
          <input id="html_select_option-3a3de0" type="checkbox" name="agree" value="1"/>
          <label for="html_select_option-3a3de0">Agree to terms</label>
        </span>
        <input class="singlebutton" type="submit" value="Submit"/>
      </div>
    </form>

2.2.13 header 头部

$OUTPUT->header();

2.2.14 heading 头顶部

echo $OUTPUT->heading(get_string('help'), 3, 'helptitle', 'uniqueid');

输出:

2.2.15 heading\_with\_help

$helpicon = new moodle_help_icon();
    $helpicon->page = 'posts';
    $helpicon->text = 'Help about forum posts';
    $helpicon->module = 'forum';
    echo $OUTPUT->heading_with_help($helpicon);

输出:

<div class="heading-with-help">
      <h2 class="main help">Help about forum posts</h2>
      <span class="helplink">
        <a id="html_link-7b0b0d" href="http://enterprise/cvs_moodle_head/help.php?module=forum&file=posts.html">
        <img class="iconhelp image" src="http://enterprise/cvs_moodle_head/pix/help.gif" alt="" />
        </a>
      </span>
    </div>

2.2.16 help\_icon 帮助按钮

$helpicon = new moodle_help_icon();
    $helpicon->page = 'posts';
    $helpicon->text = 'Help about forum posts';
    $helpicon->module = 'forum';
    echo $OUTPUT->help_icon($helpicon);

输出:

2.2.17 htmllist

警告 -  html\_list 类和 $OUTPUT->htmllist 方法是不存在的！

不像这篇文章的的其他例子一样

$data = array('Group 1' => array('Group 1.1' => array('Item 1.1.1', 'Item 1.1.2'), 'Item 1.2'),
                  'Group 2' => array('Item 2.1', 'Item 2.2', 'Item 2.3'));
    $list = new html_list();
    $list->type = 'ordered';
    $list->load_data($data);
    echo $OUTPUT->htmllist($list);

输出:

<ol class="list-0">
      <li>Group 1
        <ol class="list-1">
          <li>Group 1.1
            <ol class="list-2">
              <li class="list-item-2-1">Item 1.1.1</li>
              <li class="list-item-2-2">Item 1.1.2</li>
            </ol>
          </li>
          <li class="list-item-1-2">Item 1.2</li>
        </ol>
      </li>
      <li>Group 2
        <ol class="list-1">
          <li class="list-item-1-1">Item 2.1</li>
          <li class="list-item-1-2">Item 2.2</li>
          <li class="list-item-1-3">Item 2.3</li>
        </ol>
      </li>
    </ol>

注意:

· 类名是自动生成的。对于OL和UL类，数字代表嵌套的深度.

· 这也是在列表项的类的第一个数字的含义，第二个是列表项目中的项目的列表中的数.

· 一旦你调用 $list->load\_data($array), 这个list->items 数组将用 html\_list 和html\_list\_item 组件填满, 您可以设置更多的细节，准备输出.

2.2.18 image 图像

$image = new html_image();
    $image->src = 'http://domain.com/help.gif';
    $image->alt = 'Helpful icon';
    $image->width = 24;
    $image->height = 24;

输出:

2.2.19 label

$label = new html_label();
    $label->text = 'Form element';
    echo $OUTPUT->label($label);

输出:

<label>Form element</label>

这是一个相当低级的函数, 你甚至没必要直接调用它. 代替的是, 使用标签上labelled\_html\_component的子类:

$field = new html_field();
    $field->name = 'variable1';
    $field->id = 'myfield';
    $field->set_label('Form element');
    echo $OUTPUT->textfield($field);

输出:

<span class="textfield variable1">
      <label for="myfield">Form element</label>
      <input id="myfield" type="text" style="width: 4em;" name="variable1"/>
    </span>

2.2.20 link

$link = new action_link();
    $link->url = new moodle_url('http://domain.com/index.php', array('id' => 2, 'action' => 'browse')); // 必须的参数，你可以用一个字符串代替
    $link->text = 'Browse page 2'; // 必须的参数
    echo $OUTPUT->link($link)

输出:

<a href="http://domain.com/index.php?id=2&action=browse">Browse page 2</a>

2.2.21 link\_to\_popup

· 同样的API作为link()，但是你的组件设置一个popup\_action，和link()将其转发给link\_to\_popup（）方法。你不应该需要直接调用此方法.

2.2.22 link

$link = html_link::make(new moodle_url('http://domain.com/index.php', array('id' => 2, 'action' => 'browse')), 'Browse page 2');
    $link->add_action(new popup_action('click', $link->url));
    echo $OUTPUT->link($link)

输出:

<a id="html_link-985165" href="http://domain.com/index.php?id=2&action=browse">Browse page 2</a>
    ...
    <script type="text/javascript">
    //<![CDATA[ 
    YAHOO.util.Event.addListener('html_link-985165', 'click', openpopup, {"url":"http:\/\/domain.com\/index.php?id=2&action=browse","name":"popup","options":"[...]"});
    //]]> 
    </script>

2.2.23 notification 提示

· 通过默认的函数起作用就像 container(), 携带一个默认的类集合 'notifyproblem'.

· 它实际上插入一个模板令牌被解释和呈现在稍后阶段.

2.2.24 paging\_bar 分页条

$pagingbar = moodle_paging_bar::make(120, 3, 20, 'http://domain.com/index.php');
    // 可选的 : $pagingbar->pagevar = 'mypage';
    echo $OUTPUT->paging_bar($pagingbar);

输出:

<div class="paging">
      Page: (
      <a class="previous" href="http://domain.com/index.php?page=2">Previous</a>
      )   
      <a href="http://domain.com/index.php?page=0">1</a>
      <a href="http://domain.com/index.php?page=1">2</a>
      <a href="http://domain.com/index.php?page=2">3</a>
        4  
      <a href="http://domain.com/index.php?page=4">5</a>
      <a href="http://domain.com/index.php?page=5">6</a>
        (
      <a class="next" href="http://domain.com/index.php?page=4">Next</a>
      )
    </div>

2.2.25 radio

API (一) 中已提到 忽略

2.2.26 select

· 这种方法在很大程度上取决于所传递的组件是如何配置的，故见查看html\_select 部分

2.2.27 select\_option

· 通过内部使用 select(), 你不必直接调用.

2.2.28 spacer  忽略

2.2.29 table

$table = new html_table();
    $table->head = array('Student', 'Grade', 'Comments');
    $table->data = array(
        array('Harry Potter', '76%', 'Getting better'),
        array('Rincewind', '89%', 'Lucky as usual'),
        array('Elminster Aumar', '100%', 'Easy when you know everything!')
    );
    echo html_writer::table($table);

输出:

<table class="generaltable">
      <thead>
        <tr>
          <th class="header c0" scope="col" style="white-space: nowrap;">Student</th>
          <th class="header c1" scope="col" style="white-space: nowrap;">Grade</th>
          <th class="header c2 lastcol" scope="col" style="white-space: nowrap;">Comments</th>
        </tr>
      </thead>
      <tbody>
        <tr class="r0">
          <td class="cell">Harry Potter</td>
          <td class="cell">76%</td>
          <td class="cell">Getting better</td>
        </tr>
        <tr class="r1">
          <td class="cell">Rincewind</td>
          <td class="cell">89%</td>
          <td class="cell">Lucky as usual</td>
        </tr>
        <tr class="r0 lastrow">
          <td class="cell">Elminster Aumar</td>
          <td class="cell">100%</td>
          <td class="cell">Easy when you know everything!</td>
        </tr>
      </tbody>
    </table>

2.2.30 textfield 文本域 详见API (一)

2.2.31 user\_picture 用户头像

$user = new stdClass();
    $user->id = 1;
    $userpic = new moodle_user_picture();
    $userpic->user = $user;
    $userpic->courseid = 1;
     
    echo $OUTPUT->user_picture($userpic);

输出:

2.3 点击核心渲染 (略)

3.活动

· 组件的动作是代表在组件上Moodle的响应于用户的操作对象.

· 这些对象绑定到一个 moodle\_html\_component 或它的一个子类.

· 该渲染器负责解释这些行动和产生相应的Javascript代码.

3.1 component\_action 活动组件

· 这是所有组件的操作的基类。它包括事件的名称(click, change, keydown 等等.), 要调用的Javascript函数的名称，以及可选的参数数组传递给JS函数.

· 重要！: 调用此事件处理的JS函数总是收到两个参数: "event" 和 "args".

o 他首先是一个DOM事件对象，并且可以在函数中被用来获得在其上执行操作的元素，并获得关于该事件的信息（诸如按下了哪个键）.

o 第二个参数（参数）是一个对象命名的参数（“哈希”），其中包括您在component\_action实例中定义的可选参数JS.

· 接收一个动作（通过moodle\_html\_component:: add\_action（$action）方法）的任何组件需要赋予一个唯一的DOM id属性。如果不指定，我们将会自动为你生成.

$link = new action_link();
    $link->url = new moodle_url('/index.php', array('id' => 2, 'delete' => 5));
    $link->text = 'Delete this website';
     
    $link->add_action('click', 'confirm_dialog', array('message' => 'Are you sure?'));
    // 或
    $action = new component_action('click', 'confirm_dialog', array('message' => 'Are you REALLY sure?'));
    $link->add_action($action);
     
    echo $OUTPUT->link($link);

· 操作还不能堆叠在一个组件。这意味着上面的代码会运行不稳定，因为我们正在设置两个动作为同一事件。最好是写一个自定义的，更复杂的JS功能，而不是尝试一些事件处理程序绑定到同一个组件.

3.2 popup\_action 弹出活动

· 这一动作利用给定的$url值打开一个新窗口.

· 他有一个  关联数组的参数$params传给 JS window.open() 函数. 它有合理的默认值，但如果需要的话可以覆盖它们.