Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: Output API.

Obsolete:Output API: Difference between revisions

From MoodleDocs
Line 70: Line 70:


==== html_table_cell ====
==== html_table_cell ====
*This represents a table cell, and is aggregated by a html_table_row object, itself aggregated by html_table.
*This component's variables mirror those of the XHTML <nowiki><td> or <th></nowiki> elements (differentiated by the $header boolean)
==== html_select ====
==== html_select ====
==== html_select_option ====
==== html_select_option ====

Revision as of 02:11, 11 August 2009

Moodle 2.0


Note: This article is a work in progress. Please use the page comments or an appropriate moodle.org forum for any recommendations/suggestions for improvement.


This page describes the Output API for Moodle 2.0. It works closely with the Page API, so you may want to refer to that documentation as well.

Components

Components in the Output API are classes that represent elements to be output. They do not contain any code for outputting anything, but they contain rich meta-data that is used by the Renderers to generate output. Some of the key aspects of components are outlined here:

  • Components do not have defined constructors with arguments. Passing arguments to the default constructor will not do anything useful.
  • Some components have a constructor which is used exclusively to instantiate object member variables.
  • Components consist mainly of variables with sensible defaults, and a prepare() method which makes use of these variables to setup other defaults prior to rendering.
  • The prepare() method always behaves the same way, regardless of which renderer is used. This ensures consistency of the component's variables.
  • Additional "shortcut" methods are sometimes added to provide a more high-level API to developers.

moodle_html_component

  • This is the base class for all output components. It is not declared as abstract, because you could actually use it to instantiate a basic component. However, almost all rendering functions will expect a sub-class of this class as a parameter, so instantiating it is unlikely to be very useful.
  • This class basically holds data and useful functions that can apply to any component, such as id, classes, style, alt and title (HTML attributes valid for any XHTML element). It also handles the collection and setting up of component_actions, which are described below. Refer to the class' PHP docs for details on variables and functions.
  • This class also defines a function for generating unique HTML ids for components that require one, and holds a static array for generated ids to prevent duplication.
  • A set_label($text, $for=null) is defined, with the first argument accepting either a string or a html_label component, in which latter case the second argument is ignored. If the component does not have an $id value, one will be generated and assigned to the label's $for value unless a html_label object is given as the $text argument. For this reason, if you explicitly set a component's $id value, make sure set_label() is called after you set that value.

HTML low-level components

This list of components replicate basic HTML elements. They are prefixed with html_ to make it clear that they are the basic building blocks of the output API.

html_label

  • Many HTML elements may have a label (input fields, dropdowns etc.). Some rendering functions look for this label and render it accordingly.
  • html_label requires a $text value, and should be given a $for value for accessibility reasons. It is rendered ultimately by $OUTPUT->label(html_label $label).

html_field

  • Represents a HTML input field. Can be used to output any input type, although some of its variables only apply to some types (e.g. maxlength only applies to text inputs).
  • It has a shortcut method for preparing a text input: make_text($name, $value, $alt, $maxlength).

html_button

  • Represents a HTML button, which may be rendered in many different ways, though by default it is rendered as an input field of type "button".
  • Requires a $text value (by default used as the HTML "value" attribute)

html_link

  • Represents a link, by default rendered by the $OUTPUT->link() function as HTML:

<a href="$url">$text</a>

html_image

  • Simple class representing an image, rendered by $OUTPUT->image().
  • The $alt variable is set to HTML_ATTR_EMPTY by default. This constant is interpreted by the renderer as an attribute with an empty string as a value. If you use an actual empty string, the attribute will not be output at all, which would break XHTML strict for the <img/> tag.

html_form

  • This component represents a form 'wrapper' with an optional html_button object. You can use $OUTPUT->form($form, $contents) to output a form with any HTML you want within it.
  • The object requires a $url value, which can either be a string or a moodle_url object. In the prepare() method, this variable will be converted to a moodle_url.
  • If the $method "post" is used, the sesskey param will be added automatically
  • You can use the $params array to specify hidden inputs, but it will be ignored if you give a moodle_url as the $url value (because moodle_urls include query params).
  • This object is also used by the $OUTPUT->button($formwithbutton) and the $OUTPUT->confirm($message, $formcontinue, $formcancel) methods.

html_list

  • Represents a HTML nested list.
  • Has a load_data($tree, $level=0) recursive method which take a nested array and stores instantiated html_list_item objects in the $items array.
  • CSS classes are automatically added to each element in the list, to allow for custom styling.
  • This is rendered by $OUTPUT->htmllist($list) as a <ul> or <ol> element, but could be used to output nav menus etc. by yet unwritten output methods.
  • Use the $type variable to specify if the list should be ordered or unordered.

html_list_item

  • Represents a list item used by the html_list component. Only has a $value variable, but also benefits from all other variables and methods of the moodle_html_component base class.

html_table

  • Represents a HTML table with data
  • Is intended to replace the old flexible_table class
  • The $data array either holds an associate array of arrays representing rows and cells, or it can be set up with html_table_row and html_table_cell objects, for finer control over the look and layout of the table cells.
  • In the $OUTPUT->table($table) method, the $data array's contents are converted into html_table_row and html_table_cell objects if they are not already of that type.

html_table_row

  • A simple component holding an array of html_table_cell objects.

html_table_cell

  • This represents a table cell, and is aggregated by a html_table_row object, itself aggregated by html_table.
  • This component's variables mirror those of the XHTML <td> or <th> elements (differentiated by the $header boolean)

html_select

html_select_option

html_select_optgroup

Moodle components

The following components do not map exactly to HTML elements, so they are prefixed with moodle_.

moodle_paging_bar

moodle_user_picture

moodle_action_icon

moodle_help_icon

Renderers

moodle_renderer_base

template_renderer

moodle_core_renderer

cli_core_renderer

Pix finders

interface icon_finder

pix_icon_finder

theme_icon_finder

smartpix_icon_finder

Actions

  • Component actions are objects that represent Moodle's response to a user's action on a component.
  • These objects bind to a moodle_html_component or one of its subclasses.
  • The renderers are responsible for interpreting these actions and generating the appropriate Javascript code.

component_action

  • This is the base class for all component actions. It includes the name of the event (click, change, keydown etc.), the name of the Javascript function to be called, and an optional array of arguments to pass to the JS function.
  • Important!: the JS function called by this event handler will always receive two arguments: "event" and "args".
    • The first is a DOM event object and can be used within the function to get the element on which the action was performed, and get information about the event (such as which key was pressed).
    • The second argument (args) is an object with named parameters (a "hash") that includes the optional JS arguments you defined in the component_action instantiation.
  • Any component which receives an action (through the moodle_html_component::add_action($action) method) needs to be given a unique DOM id attribute. If you do not specify it, one will be automatically generated for you.

$link = new html_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?')); // OR $action = new component_action('click', 'confirm_dialog', array('message' => 'Are you REALLY sure?')); $link->add_action($action);

echo $OUTPUT->link($link);

  • Actions cannot yet be stacked in a component. This means that the above code will behave erratically because we are setting two actions for the same event. It is better to write a custom, more complex JS function than to try to bind several event handlers to the same component.

popup_action

  • This action opens up a new window using the given $url value.
  • It has a $params associative array with the arguments to the JS window.open() function. It has sensible defaults, but you can override them if necessary.

Factories

Theme Config

XHTML Container Stack

Miscellaneous functions