目录

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);

输出:

<a id="html_link-2b4310" href="http://domain.com/index.php">
  <img class="action-icon image" alt="What is moodle?" src="http://enterprise/cvs_moodle_head/pix/moodlelogo.gif"/>
</a>
...
<script type="text/javascript">
//<![CDATA[ 
YAHOO.util.Event.addListener('html_link-2b4310', 'click', confirm_dialog, {"message":"Are you sure?"});
//]]> 
</script>

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);

输出:

<div class="singlebutton">
  <form action="http://domain.com/index.php" method="post">
    <div>
      <input type="hidden" value="fXlccUgFTz" name="sesskey"/>
      <input type="hidden" value="3" name="id"/>
      <input type="hidden" value="5" name="userid"/>
      <input class="singlebutton" type="submit" value="My account"/>
    </div>
  </form>
</div>

2.2.4 checkbox 复选框

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

输出:

<span class="checkbox donotask">
  <input id="html_select_option-e7be90" type="checkbox" name="donotask" value="1"/>
  <label for="html_select_option-e7be90">Do Not Ask</label>
</span>

2.2.5 close_window_button 关闭窗口按钮

echo $OUTPUT->close_window_button();

输出:

<div class="closewindow">
  <div class="singlebutton">
    <form action="http://enterprise/cvs_moodle_head/#" method="get">
      <div>
        <input id="html_button-d35ffa" class="singlebutton" type="submit" value="Close this window"/>
      </div>
    </form>
  </div>
</div>
...
<script type="text/javascript">
//<![CDATA[ 
YAHOO.util.Event.addListener('html_button-d35ffa', 'click', close_window);
//]]> 
</script>

2.2.6 confirm 确认按钮

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

输出：

<div id="notice" class="box generalbox">
  <p>Are you sure?</p>
  <div class="buttons">
    <div class="singlebutton">
      <form action="http://enterprise/cvs_moodle_head/index.php" method="post">
        <div>
          <input type="hidden" value="fXlccUgFTz" name="sesskey"/>
          <input type="hidden" value="1" name="delete"/>
          <input class="singlebutton" type="submit" value="Yes"/>
        </div>
      </form>
    </div>
    <div class="singlebutton">
      <form action="http://enterprise/cvs_moodle_head/index.php" method="post">
        <div>
          <input type="hidden" value="fXlccUgFTz" name="sesskey"/>
          <input class="singlebutton" type="submit" value="No"/>
        </div>
      </form>
    </div>
  </div>
</div>

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)));

输出:

<div class="continuebutton">
  <div class="singlebutton">
    <form action="http://domain.com/index.php" method="get">
      <div>
        <input type="hidden" value="2" name="id"/>
        <input type="hidden" value="4" name="userid"/>
        <input class="singlebutton" type="submit" value="Continue"/>
      </div>
    </form>
  </div>
</div>

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');

输出:

<h3 id="uniqueid" class="helptitle">Help</h3>

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);

输出:

<span class="helplink">
  <a id="html_link-42560f" 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="Help about forum posts" title="Help about forum posts" />
  </a>
</span>

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;

输出:

<img class="image" style="height: 24px; width: 24px;" alt="Helpful icon" src="http://domain.com/help.gif"/>

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);

输出:

<img class="image" style="height: 35px; width: 35px;" alt="Picture of Admin User" src="http://enterprise/cvs_moodle_head/pix/u/f2.png"/>

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() 函数. 它有合理的默认值，但如果需要的话可以覆盖它们.

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