<?xml version="1.0" encoding="UTF-8" ?>
<messages>
  <message id="basics-intro">

    <h1>Basic widgets</h1>

    <p>
      As basic widgets, we consider the basic building blocks to
      organize your user-interface and visualize information. Some of
      the widgets listed here correspond to HTML elements, while
      others have a non-trivial implementation.
    </p>

    <p>
      They are often used to build more complex composite
      widgets. Wt's widgets all inherit from <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WWidget.html"><tt>WWidget</tt></a>. Widgets
      are rendered by inserting them in the widget tree
      hierarchy. You have the following possibilities to structurally organize your widgets:
    </p>
      <ul>
	<li>
	  Adding a widget to a <a
	  href="#/basics/wcontainerwidget"><tt>WContainerWidget</tt></a>
	  (or more conveniently, passing the container as a parent
	  during construction). You'll need to use CSS to arrange your
	  widgets inside the container widget.
	</li>
	<li>
	  Binding a widget in a <a
	  href="#/basics/wtemplate"><tt>WTemplate</tt></a>. This is
	  the most natural way of organizing your widgets if you are
	  using CSS for layout.
	</li>
	<li>
	  By adding a widget to a layout manager <a
	  href="#/style-and-layout">layout manager</a>, you can
	  circumvent the limitations of CSS-based layout managenet, and
	  benefit from splitters to allow the user to adjust the
	  layout.
	</li>
      </ul>
    
    <p>
      User interaction can be implemented using Wt's signal/slot
      implementation. You may respond to CGI post-backs or JavaScript
      events by connecting C++ method invocations to corresponding
      <i>signals</i> exposed by widgets. For example, the descendants
      of <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WInteractWidget.html"><tt>WInteractWidget</tt></a>
      emit events such as key events (<tt>keyPressed()</tt>,
      <tt>keyWentDown()</tt>, <tt>keyWentUp()</tt>, ...) and mouse
      events (<tt>clicked()</tt>, <tt>doubleClicked()</tt>, but also
      <tt>mouseWentOver()</tt> and <tt>mouseMoved()</tt>). Except for
      mouse clicks, these events can only be handled when JavaScript
      is available.
    </p>
    
    <p>
      In this widget demo application, occasionally selected events
      are demonstrated and shown in the event window at the bottom of
      the browser window.
      <a href="http://www.webtoolkit.eu/wt/doc/reference/html/index.html">The
      reference manual</a> provides a complete reference API reference
      for each widget, including all events implemented by a widget.
    </p>

    <p>
      Basic widgets have only a limited amount of styling. This allows
      you to customize the look of these widgets using CSS to fit
      within your design.
    </p>
    
    <p>
      Related topics: <a href="#/events">Events</a> and <a
      href="#/style-and-layout">Style and Layout</a>.
    </p>
  </message>

  <message id="basics-WText">
    <p>
      A <tt>WText</tt> corresponds to an HTML <tt>&lt;span&gt;</tt> or
      <tt>&lt;div&gt;</tt> element. It can display XHTML formatted
      text or plain text.
    </p>

    <p>
      <tt>WText</tt> displays a <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WString.html"
      target="_blank">WString</a>. This string class provides at the
      same time support for localization and internationalization:
      <ul>
	<li>it implements a Unicode string (internally representated
	as UTF-8).</li>
	<li>it implements a localizable string (see also <a
	href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WString.html#0afc7dc0f9897456d71b569a86ca26c1" target="_blank">WString::tr()</a>). The
	actual value corresponding to a key is retrieved from a <a
	href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WLocalizedStrings.html"
	target="_blank">WLocalizedStrings</a> instance, taking into
	account the current locale. The default implementation of this
	interface class uses XML files, which are convenient for
	specifying XHTML snippets.</li>
      </ul>
    </p>
    
    <p>
      <tt>WText</tt> allows the text to be formatted as XHTML or as
      plain text (escaping all special HTML characters). All XHTML
      text content, that is not read from a localized strings
      interface (which is considered safe by definition), is protected
      against unwanted side effects from Cross-Site Scripting (XSS)
      attacks. The text of a e.g. an XHTML-formatted <tt>WText</tt> is
      passed through an XML parser and all malicious tags are filtered
      (unless this feature is explicitly by-passed by using the
      <tt>XHTMLUnsafeText</tt> text format).
    </p>

  </message>

  <message id="basics-WTemplate">
    <p>
      A <tt>WTemplate</tt> is a widget which displays an XHTML
      fragment in which other widgets or strings may be bound. This is
      especially useful as an alternative to a container widget if you
      want to use CSS for style and layout, and the contents is well
      specified (i.e. not dynamic).
    </p>

    <p>
      In a template, <tt>${<i>var</i>}</tt> indicates a place holder
      which is substituted with a widget or string that is bound to
      the template.
    </p>

    <p>
      The template text can be provided by a <tt>WString</tt> and is
      thus easily localized and internalitionalized using a message
      resource bundle.
    </p>

    <p>
      Below is an example of a template:
    </p>
  </message>

  <message id="basics-WTemplate2">
    <p>
      When instantiated and bound using a
      <a href="#/form-widgets/wlineedit"><tt>WLineEdit</tt></a> and
      two
      <a href="#/form-widgets/wpushbutton"><tt>WPushButtons</tt></a>,
      this becomes:
    </p>
  </message>

  <message id="basics-WTemplate-example">
    <div class="form">
      <p>
	<label>Please enter your name: ${name-edit}</label>
      </p>
      <p>
	${save-button} ${cancel-button}
      </p>
    </div>
  </message>

  <message id="basics-WText-events">
    <p>
      Although the functionality of <tt>WText</tt> is very basic, it
      derives, like many widgets, from <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WInteractWidget.html">WInteractWidget</a>
      and thus may respond to mouse events, and keyboard events if it
      can be given keyboard focus. A few mouse events are demonstrated
      below.
    </p>
  </message>

  <message id="basics-WBreak">
    <p>
    A <tt>WBreak</tt> corresponds to an HTML <tt>&lt;br/&gt;</tt> element.
    </p>

    <p>
      <tt>WBreak</tt> forces a line break between <i>inline</i>
      widgets. To force inline widgets on a separate line, it is
      usually more convenient to arrange them in different container
      widgets. By default, Wt uses CSS to lay out contents, and an
      important property of each widgets being layed out is whether it
      is <i>inline</i> (and thus behaves like words organized in lines), or
      <i>block</i>.
    </p>

    <p>Related topics: <a href="#/style-and-layout">Style and Layout</a>.</p>
  </message>

  <message id="basics-WAnchor">
    <p>
      A <tt>WAnchor</tt> corresponds to an HTML <tt>&lt;a&gt;</tt>
      element, and provides a link to an URL:
    </p>
  </message>

  <message id="basics-WAnchor-more">
    <p>
      When an anchor is activated, by default the browser will
      replace the Wt application with the targeted document. This may be
      changed to suggest the browser to follow the link in a new window,
      using the <tt>setTarget()</tt> method.
    </p>

    <p>
      You may specify the anchor's target URL directly, but anchors
      can also be pointed to a <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WResource.html"
      target="_blank">WResource</a>. This allows you to serve
      auxiliary files related to a particular application session, and
      perhaps dynamically generate the content. Wt includes <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WFileResource.html"
      target="_blank">WFileResource</a> to stream a file and <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WMemoryResource.html"
      target="_blank">WMemoryResource</a> to stream a data vector.
    </p>
    
    <p>
      <tt>WAnchor</tt> also plays an important role for navigation
      within your application, using Wt's internal paths, since they
      provide support for bookmarks, the browser back/forward buttons,
      and following links in new windows. For example,
      the <a href="#/basics/wmenu">WMenu</a> widget (used here to
      navigate Wt widgets) uses anchors for its items by default. 
    </p>
  </message>

  <message id="basics-WAnchor-related">
  </message>

  <message id="basics-WImage">
    <p>
      A <tt>WImage</tt> corresponds to an HTML <tt>&lt;img&gt;</tt> element,
      and displays an image.
    </p>
  </message>

  <message id="basics-WImage-more">
    <p>
      Like an anchor, you may set the image URL directly, or point the
      image to a <tt>WResource</tt> to perhaps generate an image on
      the fly.
    </p>

    <p>
      There are alternative methods to display or generate graphics
      in Wt:
    </p>
    <ul>
      <li>
	You may use the CSS background-image property when using
	images as styling objects (see <a
	href="#/style-and-layout">Style and Layout</a>).
      </li>
      <li>
	You can also use the vector graphics API to use graphics
	primitives to paint graphics (see <a
	href="#/vector-graphics">Vector Graphics</a>)
      </li>
    </ul>

    <p>
      Since <tt>WImage</tt> derives from <tt>WInteractWidget</tt>, it
      provides the usual keyboard and mouse event handling. But images
      also have support for a more fine-grained event by defining
      interactive areas (see <a href="#/events/areas">Event
      areas</a>).
    </p>

    <p>
      Related topics: <a href="#/events/areas">Event areas</a>.
    </p>
  </message>

  <message id="basics-WTable">
    <p>
      A <tt>WTable</tt> corresponds to an HTML <tt>&lt;table&gt;</tt>
      element, and organizes content in a tabular structure.
    </p>

    <p>
      The <tt>WTable</tt> widget uses the companion classes <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WTableRow.html"
      target="_blank">WTableRow</a> and <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WTableColumn.html"
      target="_blank">WTableColumn</a> to represent table rows
      (<tt>&lt;tr&gt;</tt>) and columns (<tt>&lt;td&gt;</tt>). Each
      table cell corresponds to a <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WTableCell.html"
      target="_blank">WTableCell</a> widget, which is a specialized
      <tt>WContainerWidget</tt>.
    </p>

    <p>
      An example of a <tt>WTable</tt>:
    </p>
  </message>

  <message id="basics-WTable-more">
    <p>
      While flexible, in many cases Wt provides more specialized
      widgets to deal with certain uses of <tt>WTable</tt>.
    </p>

    <p>
      If you want to create a tabular layout you should consider the
      <a
      href="#/style-and-layout/wgridlayout"><tt>WGridLayout</tt></a>
      layout class instead. If you wish to present a lot of data in a
      table, you can also use one of the Model-View-Classes (<a
      href="#/mvc-widgets/wtreeview"><tt>WTreeView</tt></a>,
      <a href="#/mvc-widgets/wtableview"><tt>WTableView</tt></a> or 
      <a href="#/mvc-widgets/ext__tableview"><tt>Ext::TableView</tt></a>), as
      these may offer a higher performance and other benefits such as
      controls for interactive column resizing and headers.
    </p>
  </message>

  <message id="basics-WTree">
    <p>
      The <tt>WTreeNode</tt> class is a flexible building blocks for
      creating a hierarchical tree. Through specialization, the tree
      contents can be customized to contain abitrary widgets.
    </p>

    <p>
      The tree supports several options for progressively loading the
      tree contents, and all expand/collapse behaviour is optimized to
      client-side when JavaScript is available (although the entire tree
      is implemented purely in C++).
    </p>

    <p>
      The <tt>WTree</tt> class manages a hierarchy of
      <tt>WTreeNode</tt> nodes, and provides support for single or
      multiple selection.
    </p>

    <p>
      This example also uses a small class called <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WIconPair.html"
      target="_blank"><tt>WIconPair</tt></a>, which provides an easy interface
      to showing one of two icons.
    </p>
  </message>

  <message id="basics-WTree-more">
    <p>
      The flexibility of the <tt>WTree</tt> class comes at a cost (in
      terms of client-side and server-side resources). In many cases,
      the <a href="#/mvc-widgets/wtreeview"><tt>WTreeView</tt></a> class may be
      more suitable for displaying large data models, using a MVC
      (Model-View-Controller) approach.
    </p>

    <p>
      Related topics: <a href="#/mvc-widgets/wtreeview"><tt>WTreeView</tt></a>.
    </p>    
  </message>

  <message id="basics-WTreeTable">
    <p>
      The <tt>WTreeTable</tt> combines the functionality of a <a
      href="#/basics/wtree"><tt>WTree</tt></a> and a <a
      href="#/basics/wtable"><tt>WTable</tt></a>. It is a table where the first
      column contains a collapsible tree. The <a
      href="#/mvc-widgets/wtreeview"><tt>WTreeView</tt></a> is the MVC
      equivalent of a <tt>WTreeTable</tt>, but less flexible. With a
      <tt>WTreeTable</tt>, each row can have a different height, and
      any widget can be contained within a cell.
    </p>

    <p>
      Related topics: <a href="#/mvc-widgets/wtreeview"><tt>WTreeView</tt></a>,
      <a href="#/basics/wtable"><tt>WTable</tt></a>,
      <a href="#/basics/wtree"><tt>WTree</tt></a>.
    </p>
  </message>

  <message id="basics-WPanel">
    <p>
      <tt>WPanel</tt> provides basic panels that may be used to
      organize different window areas of your application.
    </p>

    <p>
      The can be thought of as
      a <a href="#/basics/wcontainerwidget"><tt>WContainerWidget</tt></a>
      with an optional title and whose contents can be collapsed.
    </p>
  </message>
  
  <message id="basics-WPanel-related">
    <p>
      Related topics: <a href="#/basics/wgroupbox"><tt>WGroupBox</tt></a>.
    </p>    
  </message>

  <message id="basics-WTabWidget">
    <p>
      <tt>WTabWidget</tt> organizes content in tab panes. Any widget
      of any complexity can provide the content for each of the tabs.
    </p>

    <p>
      <tt>WTabWidget</tt> is in fact a specialization of
      <a href="#/basics/wmenu"><tt>WMenu</tt></a>, and therefore offers
      all of the features of that class, including support for internal
      paths. It also shows how a menu can be customized to provide a
      distinct look and feel.
    </p>
  </message>

  <message id="basics-WTabWidget-more">
    <p>
      Related topics: <a href="#/basics/wmenu"><tt>WMenu</tt></a>.
    </p>
  </message>

  <message id="basics-WContainerWidget">
    <p>
      A <tt>WContainerWidget</tt> corresponds to an HTML
      <tt>&lt;div&gt;</tt> or <tt>&lt;span&gt;</tt> element, and
      groups other widgets.
    </p>

    <p>
      One of the most fundamental building blocks of Wt, the widget
      itself is usually invisible. The widgets that are contained
      within the container widget can be layed out using CSS or one of
      Wt's layout managers. CSS is usually the best option, but does
      not work if you require vertical fitting or stretching of
      children to the height of the container, or if you need to
      layout children in a grid.
    </p>

    <p>
      Wt also provides some specialized WContainerWidget classes that
      have additional markup or behaviour:
      <ul>
	<li><a href="#/basics/wanchor"><tt>WAnchor</tt></a> links to a URL</li>
	<li><a href="#/basics/wgroupbox"><tt>WGroupBox</tt></a> adds a title
	and a frame</li>
	<li><a href="#/basics/wstackedwidget"><tt>WStackedWidget</tt></a>
	displays only one of the children at a time</li>
	<li><a href="#/basics/wtable"><tt>WTableCell</tt></a> represents a cell
	in a <tt>WTable</tt></li>
      </ul>
    </p>

    <p>
      Related topics: <a href="#/style-and-layout">Style and Layout</a>.
    </p>
  </message>

  <message id="basics-WMenu">
    <p>
      A <tt>WMenu</tt> provides a list of items which are associated
      with some contents, and of which one is selected at a time.
    </p>

    <p>
      A <tt>WMenu</tt> works in conjunction with a <a
      href="#/basics/wstackedwidget"><tt>WStackedWidget</tt></a>, which manages
      the contents.
    </p>

    <p>
      By default, the menu does not provide any styling, and can be
      rendered using HTML <tt>&lt;ul&gt;</tt> and <tt>&lt;li&gt;</tt>
      elements. It should be styled using CSS. The look and behaviour
      of menu items can be customized by reimplementing these
      items. For example, the <a
      href="#/basics/wtabwidget"><tt>WTabWidget</tt></a> is merely a
      specialized menu.
    </p>

    <p>
      You can create items with submenus by using the <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WSubMenuItem.html"><tt>WSubMenuItem</tt></a>
      rather than the default <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WMenuItem.html"
      target="_blank"><tt>WMenuItem</tt></a>.
    </p>

    <p>
      A menu has full support for bookmarks and the back button, by
      rendering its items using <a href="#/basics/wanchor"><tt>WAnchor</tt></a>
      and making use of internal paths.
    </p>

    <p>
      The panel at the left is implemented using a <tt>WMenu</tt>.
    </p>
  </message>

  <message id="basics-WGroupBox">
    <p>
      A <tt>WGroupBox</tt> corresponds to an HTML
      <tt>&lt;fieldset&gt;</tt> element, and provides a frame and
      title around a group of widgets.
    </p>
  </message>

  <message id="basics-WGroupBox-contents">
    <p>
      Some contents goes here.
    </p>
  </message>

  <message id="basics-WGroupBox-related">
    <p>
      Related topics: <a
      href="#/basics/wcontainerwidget"><tt>WContainerWidget</tt></a>
      and <a href="#/basics/wpanel"><tt>WPanel</tt></a>.
    </p>
  </message>

  <message id="basics-WStackedWidget">
    <p>
      A <tt>WStackedWidget</tt> is a container widget which only
      displays a single child at a time.
    </p>
    <p>
      Related topics: <a
      href="#/basics/wcontainerwidget"><tt>WContainerWidget</tt></a>.
    </p>
  </message>

  <message id="basics-WProgressBar">
    <p>
      A progress bar can be used to indicate progress of a long
      operation. Usually you will be using this in combination with a
      <tt>WTimer</tt> or with server-side events. Another use is in
      combination with a <a
      href="#/form-widgets/wfileupload"><tt>WFileUpload</tt></a> to
      indicate the progress of a file being uploaded.
    </p>
  </message>

  <message id="formwidgets-intro">
    <h1>Form widgets</h1>

    <p>
      Form widgets implement controls for the user to enter data.
    </p>

    <p>
      The form widgets listed here are the <i>native</i> widgets
      offered by Wt. Alternatively, you can use <a
      href="#/ext-widgets">Ext Form Widgets</a>, which rely on
      presence of JavaScript and a third party JavaScript library.
    </p>
  </message>

  <message id="formwidgets-WPushButton">
    <p>
      A <tt>WPushButton</tt> corresponds to an HTML
      <tt>&lt;button&gt;</tt> element.
    </p>
    
    <p>
      A push button typically responsd to <tt>clicked()</tt> events.
    </p>
  </message>

  <message id="formwidgets-WPushButton-more">
    <p>
      You may decorate a push button with a background image to create
      a clickable image. As a descendant of class
      <tt>WFormWidget</tt>, push buttons can be disabled or enabled.
    </p>
  </message>

  <message id="formwidgets-WCheckBox">
    <p>
      A <tt>WCheckBox</tt> corresponds to an HTML <tt>&lt;input
      type="checkbox"&gt;</tt> element.
    </p>
    <p>
      Next to being checked or unchecked, a checkbox can be configured
      to allow a third state, <tt>Wt::PartiallyChecked</tt>, which can
      be used to indicate that it it isn't <i>entirely</i>
      checked. The third checkbox demonstrates this tristate behaviour
    </p>
  </message>

  <message id="formwidgets-WRadioButton">
    <p>
      A <tt>WRadioButton</tt> corresponds to an HTML <tt>&lt;input
      type="radio"&gt;</tt> element.
    </p>
  </message>

  <message id="formwidgets-WRadioButton-group">
    <p>
      In most cases, you'll group them together in a
      <tt>WButtonGroup</tt>, so that only one can be selected at a
      time.
    </p>
  </message>

  <message id="formwidgets-WComboBox">
    <p>
      A <tt>WComboBox</tt> corresponds to an HTML
      <tt>&lt;select&gt;</tt> element.
    </p>
  </message>

  <message id="formwidgets-WComboBox-model">
    <p>
      <tt>WComboBox</tt> is a View widget (see also <a
      href="#/mvc-widgets/">Model-View-Controller</a>) which
      instantiates its own <tt>WStringListModel</tt> by default. You
      can use the widget also in conjunction with another model.
    </p>
  </message>

  <message id="formwidgets-WComboBox-style">
    <p>
      <tt>WComboBox</tt> interprets <tt>StyleClassRole</tt> data to
      provide combo items with a specific style.
    </p>
  </message>

  <message id="formwidgets-WSelectionBox">
    <p>
      A <tt>WSelectionBox</tt> corresponds to an HTML
      <tt>&lt;select&gt;</tt> element.
    </p>

    <p>
      A <tt>WSelectionBox</tt> lets the user select one option...
    </p>
  </message>

  <message id="formwidgets-WSelectionBox-model">
    <p>
      <tt>WSelectionBox</tt> is a View widget (see also <a
      href="#/mvc-widgets/">Model-View-Controller</a>) which
      instantiates its own <tt>WStringListModel</tt> by default. You
      can use the widget also in conjunction with another model.
    </p>
  </message>

  <message id="formwidgets-WLineEdit">
    <p>
      A <tt>WLineEdit</tt> corresponds to an HTML <tt>&lt;input
      type="text"&gt;</tt> element.
    </p>

    <p>
      The line edit below reacts on every 'key up' event, and shows
      how you can embed the label within the control (when empty).
    </p>
  </message>

  <message id="formwidgets-WLineEdit-more">
    <p>
      <a href="#/form-validators">Form validators</a> can be used to
      to validate the user's input with immediate client-side
      feedback.
    </p>
  </message>

  <message id="formwidgets-WSpinBox">
    <p>
      A <tt>WSpinBox</tt> corresponds to an HTML5 <tt>&lt;input
      type="number"&gt;</tt> element.
    </p>

    <p>
      A JavaScript fall-back is used in browsers that do not yet support this
      element natively.
    </p>
  </message>

  <message id="formwidgets-WTextArea">
    <p>
      A <tt>WTextArea</tt> corresponds to an HTML
      <tt>&lt;textarea&gt;</tt> element.
    </p>
  </message>

  <message id="formwidgets-WTextArea-contents">A text area is a multi-line text editing area.

In contrast to a WTextEdit, which is a HTML editor and has rich text editing functionality (bold, underline, adjustable font sizes etc), a text area has no formatting capabilities.
  </message>

  <message id="formwidgets-WTextArea-related">
    <p>
      <a href="#/form-validators">Form validators</a> can be used to
      to validate the user's input with immediate client-side
      feedback.
    </p>

    <p>
      Related topics: <a href="#/form-widgets/wtextedit"><tt>WTextEdit</tt></a>.
    </p>
  </message>

  <message id="formwidgets-WCalendar">
    <p>
      A <tt>WCalendar</tt> widget displays a simple calendar, which
      can be used to input one or more dates.
    </p>
  </message>

  <message id="formwidgets-WInPlaceEdit">
    <p>This widget allows you to edit a text in-place by clicking 
      on it. You can enable the save/cancel buttons (like here below) 
      or disable them (as used in the 
      <a href="#/form-widgets/wcalendar"><tt>WCalendar</tt></a> widget 
      to edit 
      the year).
    </p>
  </message>

  <message id="formwidgets-WTextEdit">
    <p>
      A <tt>WTextEdit</tt> corresponds to an HTML
      <tt>&lt;textarea&gt;</tt> element.
    </p>

    <p>
      <a href="#/form-validators">Form validators</a> can be used to
      to validate the user's input with immediate client-side
      feedback.
    </p>
  </message>

  <message id="formwidgets-WSuggestionPopup">
    <p>
      A <tt>WSuggestionPopup</tt> can be used in conjunction with a <a
      href="#/form-widgets/wlineedit"><tt>WLineEdit</tt></a> or <a
      href="#/form-widgets/wtextarea"><tt>WTextArea</tt></a> to offer
      auto-completion suggestions.
    </p>

    <p>
      Try to enter John's email address below:
    </p>
  </message>

  <message id="formwidgets-WPopupMenu">
    <p>
      The <tt>WPopupMenu</tt> shows a popup menu, with possible sub
      menus. A popup menu can be shown at a coordinate (typically the
      position of a mouse event), or bordering a particular
      widget. The latter may be used to create a drop down menu.
    </p>
  </message>

  <message id="formwidgets-WFileUpload">
    <p>
      <tt>WFileUpload</tt> is a widget to upload one or more files.
    </p>
  </message>

  <message id="formwidgets-WFileUpload-more">
    <p>
      During the upload you may monitor its progress using a <a
      href="#/basics/wprogressbar">progress bar</a>. Once uploaded,
      the files are spooled to temporary files at the server. You may
      configure the control to allow the selection of multiple files
      at once, for more recent browsers that support this. The client
      filenames, the temporary spool file names, and the content types
      can be inspected for each uploaded file when the upload was
      completed.
    </p>

    <p>
      File uploads can be started in the background by connecting the
      <tt>changed()</tt> signal to the <tt>upload()</tt> function.
    </p>
  </message>

  <message id="validators-intro">
    <p>
      A validator is a rule set that validates user input, and can be
      associated with any <tt>WFormWidget</tt>.
    </p>

    <p>
      Validation takes place both at the client side (in the browser)
      and server side. The advantage of client-side validation is that
      the user receives feedback without a server round-trip time, but
      this requires JavaScript support, and this can also easily be
      tampered with or circumvented. Therefore, server-side validation
      is always required in any case. All built-in validators provide
      both client-side and server-side validation. If you implement a
      custom validator, client-side validation (in JavaScript) may be
      optional. You could consider to reimplement
      <tt>WRegExpValidator</tt>, as it is quite flexible and will give
      you client-side validation out-of-the-box.
    </p>
    <p>
      Wt supplies validators for dates, doubles, integers, string
      length (minimum and maximum) and regular expressions. You can
      also implement your own server-side/client-side validators.
    </p>
    <p>
      The example below uses a red background to indicate invalid 
      fields, the default in Wt.
    </p>
  </message>

  <message id="ext-intro">
    <h1>Ext Widgets</h1>
    <p>
      Wt's Ext widgets are a layer around the ExtJS JavaScript
      library. The Ext controls can now be used in Wt in the same way
      as native Wt widgets, but they have a different look.
    </p>

    <p>
      Since ExtJS was originally included in Wt, its native widgets
      have expanded to include most of the functionality that was
      provided by these ExtJS widgets, without any of the drawbacks
      from ExtJS. The ExtJS widgets are considered deprecated. If you
      are missing functionality (or esthetics) with the native
      widgets, please consider <a
      href="http://redmine.emweb.be/projects/wt/issues/new">filing an
      issue</a>.
    </p>

    <p>
      Download Ext and obtain a proper license from ExtJs. ExtJs is
      not included in the Wt download.
    </p>
  </message>

  <message id="ext-Button">
    <p>
      <tt>Ext::Button</tt> is similar to <a
      href="#/form-widgets/wpushbutton"><tt>WPushButton</tt></a>. You'll
      usually connect a signal handler to the <tt>clicked()</tt>
      signal.
    </p>
  </message>

  <message id="ext-LineEdit">
    <p>
      This class represents the ExtJs equivalent of a
      <tt>WLineEdit</tt>. Use <a
      href="#/form-validators">Validators</a> to validate the contents
      of an <tt>Ext::LineEdit</tt> client and server side. In the
      example below, the <tt>keyWentUp()</tt> signal is shown when
      activated.
    </p>
  </message>

  <message id="ext-NumberField">
    <p>
      The <tt>NumerField</tt> input class allows a user to type in a
      numeric value with a specified decimal precision. The example
      below has its precision set to 2.
    </p>
  </message>

  <message id="ext-CheckBox">
    <p>
      The Ext equivalent of a <a
      href="#/form-widgets/wcheckbox"><tt>WCheckBox</tt></a>. The
      examples demonstrate the checked event.
    </p>
  </message>

  <message id="ext-ComboBox">
    <p>
      The Ext equivalent of a <a
      href="#/form-widgets/wcombobox"><tt>WComboBox</tt></a>. The Ext
      combobox suggests possible completions as you type, similar to
      the <a
      href="#/form-widgets/wsuggestionpopup"><tt>WSuggestionPopup</tt></a>.
      Select your favorite Belgian beer below.
    </p>
  </message>

  <message id="ext-RadioButton">
    <p>
      The Ext radio button looks like this, and behaves similar to <a
      href="#/form-widgets/wradiobutton">Wt's native radio button</a>.
      <tt>Ext::RadioButton</tt> must be added to a <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WButtonGroup.html">
      <tt>WButtonGroup</tt></a> to give them their typical exclusive
      selection behavior. The following radio buttons all belong to
      the same button group.
    </p>
  </message>

  <message id="ext-Calendar">
    <p>
      The <tt>Ext::Calendar</tt> provides the same functionality as
      the <a href="#/form-widgets/wcalendar"><tt>WCalendar</tt></a>,
      but looks different.
    </p>
  </message>

  <message id="ext-DateField">
    <p>
      An <tt>Ext::DateField</tt> is an input method for a date. It is
      Ext's equivalent for the <a
      href="#/form-widgets/wdatepicker"><tt>WDatePicker</tt></a>
      class.
    </p>
  </message>

  <message id="ext-Menu">
    <p>
      The <tt>Ext::Menu</tt> class offers a desktop-application style
      menu, like Wt's <a
      href="#/formwidgets/wpopupmenu"><tt>WPopupMenu</tt></a>.
    </p>
    <p>
      The menu is under the first button of the <tt>Ext::ToolBar</tt>,
      which you can see below. The example demonstrates how other
      widgets can be added to the toolbar.
    </p>
  </message>

  <message id="ext-Dialog">
    <p>
      These classes are demonstrated in the <a
      href="#/dialogs/ext-dialogs">dialogs</a> section.
    </p>
  </message>

  <message id="graphics-intro">
    <p>
      These examples show some capibilities of Wt's vector graphics
      API.
    </p>
    <p>Wt's <tt>WPaintedWidget</tt> renders as SVG, VML or HTML5
    graphics depending on the capabilities of the browser. The backend
    decides how to render the graphics, the application programmer has
    to draw his graphics using the available methods in the
    <tt>WPainter</tt> API. The drawing primitives include points,
    lines, arcs, cubic splines, text, etc.
    </p>
  </message>

  <message id="graphics-paintbrush">
    <p>
      An example demonstrating the use of <tt>WPaintedWidget</tt> with
      the <tt>PaintUpdate</tt> rendering flag.
    </p>
    <p>
      In some cases, you would like to update the canvas without
      clearing the previously painted contents (which is the default
      behavior). You may do this by passing the <tt>PaintUpdate</tt>
      rendering flag to the <tt>update()</tt> method.
    </p>
    <p>
      This example demonstrates this by implementing a simple painting
      device. The example is quite silly on its own: it sends every
      mouse drag operation to the server, which in turn updates the
      canvas. But you could imagine more interesting uses, such as a
      multi-user white board, or interactive visualizations.
    </p>
    <p>
      The example uses a custom cursor image (pencil), this is done by
      providing a cursor image to <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WCssDecorationStyle.html"
      target="_blank"><tt>WCssDecorationStyle</tt></a>.
    </p>
  </message>

  <message id="specialpurposewidgets-intro">
    <h1>
      Special purpose widgets
    </h1>
    <p>
      This section groups widgets with special functionality, such as
      usage of Google maps, Wt's integrated sound and video support, and
      Flash objects.
    </p>
  </message>

  <message id="specialpurposewidgets-WGoogleMap">
    <p>
      <tt>WGoogleMap</tt> implements a Wt wrapper around the Google
      Maps functionality.
      <br/>
      The example demonstrates multiple controls and shows a polyline
      representing a road description from the Emweb office to the old
      market of Leuven.
      <br/>
      We also added a marker to Koen's favourite bar!
    </p>
  </message>

  <message id="specialpurposewidgets-WGoogleMap-controls">
    <table class="googlemaps-controls">
      <tr>
	<td>Zoom:</td>
	<td>
	  ${zoom-in} ${zoom-out}
	</td>
      </tr>
      <tr>
	<td>Pan to:</td>
	<td>
	  ${brussels} ${lisbon} ${paris}
	</td>
      </tr>
      <tr>
	<td>Control menu type: </td>
	<td>
	  ${control-menu-combo}
	</td>
      </tr>
      <tr>
	<td colspan="2">${dragging-cb}</td>
      </tr>
      <tr>
	<td colspan="2">${double-click-zoom-cb}</td>
      </tr>
      <tr>
	<td colspan="2">${scroll-wheel-zoom-cb}</td>
      </tr>
      <tr>
	<td colspan="2">${save-position} ${return-to-saved-position}</td>
      </tr>
    </table>
  </message>

  <message id="specialpurposewidgets-WMediaPlayer">
    <p>
      <tt>WMediaPlayer</tt> provides an interactive audio/video
      player, with flexible support for user-interface controls, and
      good cross-browser support through a combination of native HTML
      elements (<tt>&lt;video&gt;</tt>, <tt>&lt;audio&gt;</tt>) and
      flash fall-back.
    </p>

    <p>
      A unique feature of the video player is that regardless of the
      technology used for video playback, the same <tt>WWidget</tt>
      may be used to implement the controls, using native form
      elements. In this way, the user-interface is easily customized
      and adapted to your needs and skinned using CSS.
    </p>
  </message>

  <message id="specialpurposewidgets-WMediaPlayer-video">
    <h2>Video</h2>

    <p>
      Below shows the media player with its default controls. The
      player will look identical on all browsers. The default controls
      show below the player, but using CSS, or by customizing the
      controls, any effect can be achieved including showing the
      controls when hovering over the lower part of the video player
      (as is also evident from the full-screen mode).
    </p>

  </message>

  <message id="specialpurposewidgets-WMediaPlayer-audio">
    <h2>Audio</h2>

    <p>
      Below shows the media player with its default controls. The
      player will look identical on all browsers.
    </p>
  </message>

  <message id="specialpurposewidgets-WSound">
    <p>
      <tt>WSound</tt> provides a simple way to add small sound effects
      to an application, for example to attract a user's attention or to
      provide user-interface feed-back.
    </p>

    <p>
      Its implementation is based on
      <a href="#/special-purpose/wmediaplayer"><tt>WMediaPlayer</tt></a>
      to provide good cross-browser support.
    </p>
  </message>

  <message id="specialpurposewidgets-WVideo">
    <p>
      Although the
      <a href="#/special-purpose/wmediaplayer"><tt>WMediaPlayer</tt></a>
      implements a cross-browser video player, in some cases, one may
      want direct access to a native HTML <tt>&lt;video&gt;</tt>
      element. This is provided by the <tt>WVideo</tt> widget.
    </p>

    <p>
      The trailer used in the examples below
      is <a href="http://durian.blender.org/"
      target="_blank">Sintel</a>, (c) copyright Blender Foundation |
      durian.blender.org
    </p>
  </message>
  <message id="specialpurposewidgets-WVideo-1">
    <h2>Native video</h2>
    <p>
      Below is the video class, with a <tt>WImage</tt> (a static JPEG
      image) as fallback. The video will play on browsers that support
      MP4 or OGV video streams (firefox, chrome, safari, ...)
      natively (using HTML <tt>&lt;video&gt;</tt>), and show the image on other
      browsers (Internet Explorer, opera, ...).
    </p>
  </message>
  <message id="specialpurposewidgets-WVideo-2">
    <h2>Native video with Flash player fall-back</h2>
    <p>
      For browsers that support HTML <tt>&lt;video&gt;</tt>, this
      video below looks exactly like the one above. On other browsers,
      the player below falls back to a Flash player, which plays an
      MP4 video. If flash is not supported on your system, a static
      image is shown.
    </p>
    <p>
      The Flash-based video player can be any player. The example
      below uses <a href="http://flv-player.net/" target="_blank">FLV
      Player</a> as fallback for HTML5 video, but any flash player can
      do the job.
    </p>
  </message>
  <message id="specialpurposewidgets-WVideo-3">
    <h2>Flash-player video</h2>
    <p>
      Of course, you may also opt to simply rely on Flash to play the
      video. Below we use the YouTube flash player.
    </p>
  </message>
  <message id="specialpurposewidgets-WFlashObject">
    <p>
      To integrate a Flash object into an application, you can
      instantiate a <tt>WFlashObject</tt>. It's API provides ways to
      set Flash parameters and variables. You will also need to
      provide an explicit size to the object (as it does not respond
      to CSS). If flash is not supported, you can provide
      any <tt>WWidget</tt> as alternative content (including e.g. a
      link that sends the user to a page where flash can be
      downloaded).
    </p>
  </message>

  <message id="specialpurposewidgets-WAudio">
    <p>
      Although the
      <a href="#/special-purpose/wmediaplayer"><tt>WMediaPlayer</tt></a>
      implements a cross-browser audio player, in some cases, one may
      want direct access to a native HTML <tt>&lt;audio&gt;</tt>
      element. This is provided by the <tt>WAudio</tt> widget.
    </p>
  </message>

  <message id="dialogs-intro">
    <h1>Wt Dialog Widgets</h1>
    
    <p>
      Wt supports modal and non-modal dialogs. There are four classes
      involved in dialogs:
      <dl>
        <dt><a href="#/dialogs/wdialog"><tt>WDialog</tt></a></dt>
	<dd>
	  a widget that displays contents within a window drawn on
	  top of the screen. Any widget can be inserted in a dialog.
	</dd>
        <dt><a href="#/dialogs/wmessagebox"><tt>WMessageBox</tt></a></dt>
	<dd>
	  a dialog that contains only a single line of text and some
	  configurable buttons. It is convenient to use this class if
	  you only have to display a simple message.
        </dd>
	<dt><a href="#/dialogs/ext-dialogs"><tt>Ext::Dialog</tt></a></dt>
	<dd>The ExtJs implementation of a dialog.</dd>
        <dt><a href="#/dialogs/ext-dialogs"><tt>Ext::MessageBox</tt></a></dt>
	<dd>The ExtJs implementation of a message box.</dd>
      </dl>
    </p>
    <p>
      Dialogs can be used in two ways. The traditional method,
      borrowed from desktop GUI toolkits, involves calling
      <tt>exec()</tt>. This starts a local event loop which returns
      when the dialog is closed. While this method is convenient and
      familiar, it usually does not scale for web applications, as
      every session displaying a dialog keeps a thread occupied for an
      extended period of time. This may not be a problem if you plan
      to deploy every user session in its own process, but otherwise
      sessions will stall as the server runs out of threads. The
      scalable alternative to the local event loop is not to invoke is
      to simply <tt>show()</tt> the dialog similar to what you would
      do with any other widget, and delete when the
      <tt>finished()</tt> signal is triggered.
    </p>
  </message>

  <message id="dialogs-WDialog">
    <p>
      <tt>WDialog</tt> implements the functionality of a dialog box.
      Any widget or combination of widgets can be displayed inside a
      dialog.
      <br/>
      Both modal and non-modal dialogs are supported. 
    </p>
  </message>

  <message id="dialogs-WMessageBox">
    <p>
      <tt>WMessageBox</tt> is a convenience class for simple modal
      dialog boxes. They contain a line of text (the message) and a
      number of buttons.
    </p>
    <p>
      With respect to programming style, the first and the third example
      use a local event loop, the second and the last button don't. The
      difference is invisible; it is usually better not to use a local
      event loop.
    </p>
  </message>

  <message id="dialogs-ExtDialog">
    <p>
      Ext dialogs and message boxes have similar functionality as the
      Wt dialogs. <tt>MessageBox</tt> contains text messages, while
      <tt>Dialog</tt> can contain any content. A progress dialog is a
      dialog containing a progress bar.
    </p>
    <p>
      The progress bar example occupies a session thread, while
      the dialog and the message box don't. This is a programming style
      difference that is invisible to the users of the application. As
      with Wt's dialogs, both can be used in the mode of your choice,
      though it is usually required not to lock up session threads.
    </p>
  </message>

  <message id="charts-intro">
    <h1>The Charting library</h1>

    <p>
      The example below demonstrates pretty much the complete
      interface of the charting library. This widget is identical
      to the separate charting example, so it also demonstrates how
      Object-Oriented widgets can be easily reused in other
      applications without having to worry about naming conflicts
      or HTML identifier clashes.
    </p>
  </message>

  <message id="mvc-intro">
    <h1>The Model-View-Controller pattern</h1>

    <p>
      Wt implements the MVC design pattern in its user interface. With
      this pattern, user interface is separated from business logic and
      storage of the data itself (be it in memory, in a database, in files,
      ...).
    </p>

    <p>
      The MVC views (such as <tt>WTreeView</tt>, but also
      <tt>WComboBox</tt> and charts) are classes to display the
      data. The models (inherited from <tt>WAbstractItemModel</tt>)
      represent the data itself. The control is everything that you
      write around the model and the view, to let the data change in
      response to user actions; the 'business logic'.
    </p>
  </message>

  <message id="mvc-models">
    <h2>WAbstractItemModel, WAbstractListModel</h2>
    <p>
      The abstract model interfaces are used within the view, so these
      are the classes you must implement for your data, which may
      e.g. be stored in a database. Wt includes two implementations of
      models for in-memory storage of data: the
      <tt>WStandardItemModel</tt> and the
      <tt>WStringListModel</tt>. They are convenience models but can
      also be used as examples to implement your own model.
    </p>
    <p>
      A <tt>WAbstractItemModel</tt> can represent tables, trees and/or
      tree-tables (hierarchical tables).
    </p>

    <h2>WStandardItemModel</h2>
    <p>
      This is a ready-to-use in-memory model that supports all
      features of the <tt>WAbstractItemModel</tt>.
    </p>

    <h2>WStringListModel</h2>
    <p>
      This is a simple, single-dimensional list of strings, and is the
      default model used
      by <a href="#/mvc-widgets/combobox-views"><tt>Combobox Views</tt></a>.
    </p>
  </message>

  <message id="mvc-proxymodels">
    <p>
      A proxy model does not store data, but presents data from a source model 
      in another way. It may provide filtering, sorting, or other computed 
      changes to the source model. A proxy model may be a fully functional 
      model, that also allows modification of the underlying model.
    </p>
    <p>
      The example demonstrates the use of a
      <tt>WSortFilterProxyModel</tt> by sorting and/or filtering on a
      model containing different cocktails.  You can also change the
      filtering regular expresssion.
    </p>
  </message>

  <message id="mvc-stringlistviews">
    <p>
      <tt>WComboBox</tt>, <tt>WSelectionBox</tt> and
      <tt>Ext::ComboBox</tt> can either be filled by traditional
      <tt>insertItem()</tt> calls, or by making a reference to a
      model.  The three examples below are three views on the same
      model. With the Ext combobox, you can modify the model. Type a
      new item in the text field of the combobox, press the button,
      and watch how the new item also becomes available in the
      <tt>WComboBox</tt> and the <tt>WSelectionBox</tt> without
      writing a single line of code.
    </p>
  </message>

  <message id="mvc-WTableView">
    <p>
      The <tt>WTableView</tt> is part of Wt's MVC widgets, and
      provides the same functionality as a 
      and <a href="#/mvc-widgets/wtreeview"><tt>WTreeView</tt></a>, but for
      tabular models (where as the treeview supports trees, tables or
      tree-tables).
    </p>

    <p>
      The widget supports very large models by loading only the
      visible region (with some margin) in the browser, and does this
      both for rows and columns. This results in low memory consumption
      (on client and server) and fast load times.
    </p>

    <p>
      The <tt>WTableView</tt> can be seen in action in <a
      href="#/charts/pie-charts">the Charts section</a> of this
      gallery. Double-click on a value in a table to modify the
      model. The table and the chart are both views on the same model;
      the changes in the model are immediately reflected in the chart
      too.
    </p>
  </message>

  <message id="mvc-WTreeView">
    <h2>WTreeView example</h2>

    <p>
      This example illustrates the <tt>WTreeView</tt> widget. This
      widget is part of Wt's MVC widgets, and are an alternative to
      the <tt>WTree</tt>, and <tt>WTreeTable</tt> widgets which are
      not MVC.
    </p>

    <p>
      The widget supports very large models by loading only the
      visible region (with some margin) in the browser. This results in
      low memory consumption (on client and server) and fast load
      times.
    </p>

    <p>
      This example uses
      a <a href="#/mvc-widgets/the-models"><tt>WStandardItemModel</tt></a>
      to populate the tree table. As is demonstrated, various roles
      may be used to indicate text, icons, selectable items (through
      check boxes), and also URLs or internal paths.
    </p>

    <p>
      Many aspects of the tree view widget are not illustrated here,
      such as the various supported selection behaviors and modes, and
      reacting to item click events.
    </p>

    <p>
      Except for the selection of items, the view does not yet offer
      the possibility to modify the model. Together with more fine
      grained control of how to display the data through delegates,
      support for editing will be added in the near future.
    </p>
  </message>

  <message id="mvc-WTreeView-column1Fixed">
    <p>
      The following example uses shows how you can use the first
      column as a <i>row header</i>, which does not scroll
      horizontally together with the other columns column. This is
      useful when the <tt>WTreeView</tt> contains a large number of
      auxiliary columns which cannot all be displayed simultaneously,
      and there is a need to keep the first column visible while
      scrolling through the columns horizontally.
    </p>
  </message>

  <message id="mvc-Chart">
    <p>
      These classes are graphical views that visualize the data
      of the model. They can be seen in action in
      <a href="#/charts/pie-charts">the Charts section</a> of this
      demo. Click on any value in a table to modify the model using
      editing provided by <a href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WItemDelegate.html">WItemDelegate</a>. The
      table and the chart are both views on the same model; the
      changes in the model are immediately reflected in the charts
      too.
    </p>
  </message>

  <message id="events-intro">
    <h1>Browser-Generated Events in Wt</h1>

    <p>
      This section demonstrates the basic events that an application
      can receive from the browser: mouse events, keyboard events and
      drag and drop events. These events are generated by every widget
      that inherits from <tt>WInteractWidget</tt>, which most widgets
      do. When listening for these events, the browser forwards these
      events to the server, and the slots bound to the corresponding
      signals are invoked. As such, a Wt application can react to
      events entirely in C++ code.
    </p>
    <p>
      Specific widgets emit of course events specific to their
      functionality.  A <tt>WTreeNode</tt> for example can be
      expanded, collapsed, or selected. Each of these actions is
      causes a signal to be emitted. Refer to the reference
      documentation of the widget you are working with to find out
      what signals a widget emits.
    </p>
    <p>
      For a generic overview of events in Wt, including a description
      of the client-side event handling (avoids round-trip to the
      server) and how to write your own JavaScript events, please take
      a look in the
      <a href="http://www.webtoolkit.eu/wt/doc/reference/html/overview.html" target="_blank">
      library overview</a>.
    </p>
  </message>

  <message id="events-WKeyEvent-1">
    <p>
      The <tt>WKeyEvent</tt> provides detailed information for a
      keyboard event. Type in the line edits below to demonstrate the
      events. In general, keyboard events can be generated by every <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WInteractWidget.html"
      target="_blank">WInteractWidget</a>, provided that either the
      widget itself has keyboard focus, or one of its children. While
      form widgets can receive keyboard focus out of the box, this
      must be enabled for other passive widgets by adding them to the
      tab chain using <tt>setTabIndex(0)</tt>, and will not work on
      older browsers.
    </p>
    <p>
      This line edit listens to <tt>keyWentUp()</tt> and
      <tt>keyWentDown()</tt> events.
    </p>
  </message>

  <message id="events-WKeyEvent-2">
    <p>
      The next line edit listens to <tt>keyPressed()</tt> events.
    </p>
  </message>

  <message id="events-WKeyEvent-3">
    <p>
      In the line edit below, the events <tt>enterPressed()</tt> and
      <tt>escapePressed()</tt> are shown (note however that catching
      escape is a major problem in most browsers; do not expect it to
      work).
    </p>
  </message>

  <message id="events-WMouseEvent">
    <p>
      <tt>WMouseEvent</tt> gives detailed information for signals
      related to mouse operations. Mouse events can be intercepted
      from any <a
      href="http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WInteractWidget.html"><tt>
      WInteractWidget</tt></a>.
    </p>
    <p>
      In the gray area on the left <tt>clicked()</tt>,
      <tt>doubleClicked()</tt>, <tt>mouseWentOut()</tt> and
      <tt>mouseWentOver()</tt> are shown. The area on the right
      demonstrates <tt>mouseWentDown()</tt>, <tt>mouseWentUp()</tt>
      and <tt>mouseMoved()</tt>.
    </p>
  </message>

  <message id="events-WDropEvent">
    <p>
      This example demonstrates the use of drop events.
    </p>
  </message>

  <message id="style-layout-intro">
    <h1>Style and layout</h1>
    <p>
      The layout of a Wt application and the style can be specified
      using Cascading Style Sheets (CSS). Wt provides several API
      methods and classes to specify and manipulate your internal or
      external style sheets.
    </p>

    <p>
      Unfortunately, with respect to layout, CSS (and HTML) do not
      provide the designer with useful tools when it comes to vertical
      layout: the contents simply flows from top to bottom, in a
      single page. The page-style may work in many cases, but for
      those situations where you want to have more control of the
      organization of your content in the browser window, Wt also
      provides standard layout managers.
    </p>
  </message>

  <message id="style-and-layout-css">
    <h1>Cascading Style Sheets (CSS)</h1>

    <p>
      Using CSS, you can provide rules that specify both markup and
      layout properties of widgets. These rules are linked to certain
      widgets using <i>selectors</i>. Selectors may match widgets
      based on the style class or widget id of the widget or one of
      its ancestors.
    </p>

    <p>
      The important API methods and class for working with your
      application stylesheet are:
      <ul>
	<li>WApplication::useStyleSheet()</li>
	<li>WApplication::styleSheet() returns the internal stylesheet
	(an instance of WCssStyleSheet), which can be manipulated
	dynamically to add, modify or removing rules.</li>
	<li>WWidget::setStyleClass()</li>
	<li>WWidget::setId()</li>
      </ul>
    </p>

    <p>
      Most of the capabilities of CSS are also exposed in the WWidget
      API, and can thus be directly specified for a single
      widget. Properties that are related to layout can be specified
      using methods of WWidget, while properties that are decorative
      can be set in methods of WCssDecorationStyle, which can be
      accessed using WWidget::decorationStyle().
    </p>

  </message>
  
  <message id="style-WLoadingIndicator">
    <p>
      The loading indicator displays a message while a response from the server
      is pending. By implementing WLoadingIndicator a custom indicator can be 
      provided.
    </p>
  </message>
  

  <message id="layout-WBoxLayout">
    <p>
      These classes provide a horizontal or vertical layout of widgets
      inside a <a
      href="#/basics/wcontainerwidget"><tt>WContainerWidget</tt></a>.
    </p>
    <p>
      In the example below, a WHBoxLayout with default padding (9
      pixels) and spacing (6 pixels) is used to manage two child
      widgets. If no stretch factors have been specified, space is
      evenly distributed to all widgets.
    </p>
  </message>

  <message id="layout-WBoxLayout-stretch">
    <p>
      If we give Item 1 a non-zero stretch factor, then Item 2 will
      only use its minimum width, and Item 1 will get all remaining
      space, as illustrated below.
    </p>
  </message>

  <message id="layout-WBoxLayout-vbox">
    <p>
      WVBoxLayout works in exactly the same way, but stacks children
      vertically.
    </p>
  </message>

  <message id="layout-WBoxLayout-nested">
    <p>
      Layout managers may be arbitrarily nested to create complex
      layouts. In the example below, we nested a WHBoxLayout with
      items 2 and 3 inside a WVBoxLayout with item 1.
    </p>
  </message>

  <message id="layout-item1">
    <div>
      Item 1
    </div>
  </message>

  <message id="layout-item2">
    <div>
      Item 2
    </div>
  </message>

  <message id="layout-item3">
    <div>
      Item 3
    </div>
  </message>

  <message id="layout-WGridLayout">
    <p>
      This class organizes children widgets inside a <a
      href="#/basics/wcontainerwidget"><tt>WContainerWidget</tt></a>
      in a grid.
    </p>

    <p>
      Like <a
      href="#/style-and-layout/wboxlayout"><tt>WBoxLayout</tt></a>, a
      stretch factor defined for rows or columns is used to distribute
      excess space. In the example below, row 1 and columns 1 and 2
      are given a non-zero stretch factor.
    </p>
  </message>

  <message id="grid-item">
    <div>
      Item ({1}, {2})
    </div>
  </message>

  <message id="layout-WBorderLayout">
    <p>
      A layout manager that organizes the container space in up to 5
      regions, with a central region consuming any excess space.
    </p>
    <p>
      Any of the regions can be omitted.
    </p>
  </message>

  <message id="borderlayout-item">
    <div>
      {1} item
    </div>
  </message>
</messages>