Inheritance diagram for NoUIFactory:
Collaboration diagram for NoUIFactory:
Public Member Functions | |
| counter () | |
description: purpose: > Counter inform users about the quantity of items indicated by a glyph. More... | |
| button () | |
description: purpose: > Buttons trigger interactions that change the system’s or view's status. More... | |
| card () | |
description: purpose: > A card is a flexible content container for small chunks of structured data. More... | |
| deck (array $cards) | |
description: purpose: > Decks are used to display multiple Cards in a grid. More... | |
| listing () | |
description: purpose: > Listings are used to structure itemised textual information. More... | |
| image () | |
description: purpose: The Image component is used to display images of various sources. More... | |
| legacy ($content) | |
description: purpose: > This component is used to wrap an existing ILIAS UI element into a UI component. More... | |
| panel () | |
description: purpose: > Panels are used to group titled content. More... | |
| modal () | |
description: purpose: The Modal forces users to focus on the task at hand. More... | |
| dropzone () | |
description: purpose: > Dropzones are containers used to drop either files or other HTML elements. More... | |
| popover () | |
description: purpose: > Popovers can be used when space is scarce i.e. More... | |
| divider () | |
description: purpose: > A divider marks a thematic change in a sequence of other components. More... | |
| link () | |
description: purpose: > Links are used navigate to other resources or views of the system by clicking or tapping them. More... | |
| dropdown () | |
description: purpose: > Dropdowns reveal a list of interactions that change the system’s status or navigate to a different view. More... | |
| item () | |
description: purpose: > An item displays a unique entity within the system. More... | |
| viewControl () | |
description: purpose: > View Controls switch between different visualisation of data. More... | |
| breadcrumbs (array $crumbs) | |
description: purpose: > Breadcrumbs is a supplemental navigation scheme. More... | |
| chart () | |
description: purpose: > Charts are used to graphically represent data in various forms such as maps, graphs or diagrams. More... | |
| input () | |
description: purpose: > In opposite to components with a purely receptive or at most navigational character, input elements are used to relay user-induced data to the system. More... | |
| table () | |
description: purpose: > Tables present a set of uniformly structured data. More... | |
| messageBox () | |
description: purpose: > Message Boxes inform the user about the state of the system or an ongoing user task. More... | |
| layout () | |
description: purpose: > Layout components are compontents used for the overall construction of the user interface. More... | |
| mainControls () | |
description: purpose: > Main Controls are components that are always usable, depending only on overall configuration or roles of the user, not depending on the current content. More... | |
| tree () | |
description: purpose: > Trees present hierarchically structured data. More... | |
| menu () | |
description: purpose: > Menus let the user choose from several (navigational) options. More... | |
| symbol () | |
description: purpose: > Symbols are graphical representations of concepts or contexts quickly comprehensible or generally known to the user. More... | |
Detailed Description
Member Function Documentation
◆ breadcrumbs()
| NoUIFactory::breadcrumbs | ( | array | $crumbs | ) |
description: purpose: > Breadcrumbs is a supplemental navigation scheme.
It eases the user's navigation to higher items in hierarchical structures. Breadcrumbs also serve as an effective visual aid indicating the user's location on a website. composition: > Breadcrumbs-entries are rendered as horizontally arranged UI Links with a seperator in-between. effect: > Clicking on an entry will get the user to the respective location.
context:
- Suplemental navigation under the main menu
- Location hint in search results
- Path to current location on info page
rules: usage: 1: Crumbs MUST trigger navigation to other resources of the system. accessibility: 1: > The HTML tag < nav > MUST be used for the Breadcrumbs to be identified as the ARIA Landmark Role "Navigation". 2: > The "aria-label" attribute MUST be set for Breadcrumbs,
which MUST be language-dependant.
- Parameters
-
Implements ILIAS\UI\Factory.
◆ button()
| NoUIFactory::button | ( | ) |
description: purpose: > Buttons trigger interactions that change the system’s or view's status.
Acceptable changes to the current view are those that do not result in a complete replacement of the overall screen (e.g. modals). composition: > Button is a clickable, graphically obtrusive control element. It can bear text. effect: > On-click, the action indicated by the button is carried out. A stateful button will indicate its state by an aria-attribute. rivals: glyph: > Glyphs are used if the enclosing Container Collection can not provide enough space for textual information or if such an information would clutter the screen. links: > Links are used to trigger Interactions that do not change the systems status. They are usually contained inside a Navigational Collection.
background: > Wording rules have been inspired by the iOS Human Interface Guidelines (UI-Elements->Controls->System Button)
Style rules have been inspired from the GNOME Human Interface Guidelines->Buttons.
rules: usage: 1: > Buttons MUST NOT be used inside a Textual Paragraph. interaction: 2: > If an action is temporarily not available, Buttons MUST be disabled by setting as type 'disabled'. 3: > A button MUST NOT be used for navigational purpose. style: 1: > If Text is used inside a Button, the Button MUST be at least six characters wide. wording: 1: > The caption of a Button SHOULD contain no more than two words. 2: > The wording of the button SHOULD describe the action the button performs by using a verb or a verb phrase. 3: > Every word except articles, coordinating conjunctions and prepositions of four or fewer letters MUST be capitalized. 4: > For standard events such as saving or canceling the existing standard terms MUST be used if possible: Save, Cancel, Delete, Cut, Copy. 5: > There are cases where a non-standard label such as “Send Mail” for saving and sending the input of a specific form might deviate from the standard. These cases MUST however specifically justified. accessibility: 1: > DOM elements of type "button" MUST be used to properly identify an element as a Button if there is no good reason to do otherwise. 2: > Button DOM elements MUST either be of type "button", of type "a" accompanied with the aria-role “Button” or input along with the type
attribute “button” or "submit".
- Returns
Implements ILIAS\UI\Factory.
◆ card()
| NoUIFactory::card | ( | ) |
description: purpose: > A card is a flexible content container for small chunks of structured data.
Cards are often used in so-called Decks which are a gallery of Cards. composition: > Cards contain a header, which often includes an Image or Icon and a Title as well as possible actions as Default Buttons and 0 to n sections that may contain further textual descriptions, links and buttons. The size of the cards in decks may be set to extra small (12 cards per row), small (6 cards per row, default), medium (4 cards per row), large (3 cards per row), extra large (2 cards per row) and full (1 card per row). The number of cards per row is responsively adapted, if the size of the screen is changed. effect: > Cards may contain Interaction Triggers. rivals: Heading Panel: Heading Panels fill up the complete available width in the Center Content Section. Multiple Heading Panels are stacked vertically. Block Panels: Block Panels are used in Sidebars
featurewiki:
rules: composition: 1: Cards MUST contain a title. 2: Cards SHOULD contain an Image or Icon in the header section. 3: Cards MAY contain Interaction Triggers. style: 1: Sections of Cards MUST be separated by Dividers. accessibility:
1: If multiple Cards are used, they MUST be contained in a Deck.
- Returns
Implements ILIAS\UI\Factory.
◆ chart()
| NoUIFactory::chart | ( | ) |
description: purpose: > Charts are used to graphically represent data in various forms such as maps, graphs or diagrams.
composition: > Charts are composed of various graphical and textual elements representing the raw data.
rules: style:
1: Charts SHOULD not rely on colors to convey information.
- Returns
Implements ILIAS\UI\Factory.
◆ counter()
| NoUIFactory::counter | ( | ) |
description: purpose: > Counter inform users about the quantity of items indicated by a glyph.
composition: > Counters consist of a number and some background color and are placed one the 'end of the line' in reading direction of the item they state the count for. effect: > Counters convey information, they are not interactive.
featurewiki:
rules: usage: 1: A counter MUST only be used in combination with a glyph. composition: 1: > A counter MUST contain exactly one number greater than zero and no
other characters.
- Returns
Implements ILIAS\UI\Factory.
◆ deck()
| NoUIFactory::deck | ( | array | $cards | ) |
description: purpose: > Decks are used to display multiple Cards in a grid.
They should be used if a page contains many content items that have similar style and importance. A Deck gives each item equal horizontal space indicating that they are of equal importance. composition: > Decks are composed only of Cards arranged in a grid. The cards displayed by decks are all of equal size. This Size ranges very small (XS) to very large (XL). effect: > The Deck is a mere scaffolding element, is has no effect.
featurewiki:
rules: usage: 1: Decks MUST only be used to display multiple Cards. style:
1: The number of cards displayed per row MUST adapt to the screen size.
- Parameters
-
Implements ILIAS\UI\Factory.
◆ divider()
| NoUIFactory::divider | ( | ) |
description: purpose: > A divider marks a thematic change in a sequence of other components.
A Horizontal Divider is used to mark a thematic change in sequence of elements that are stacked from top to bottom, e.g. in a Dropdown. A Vertical Divider is used to mark a thematic change in a sequence of elements that are lined up from left to right, e.g. a Toolbar.
rules: usage: 1: > Dividers MUST only be used in container components that explicitly state
and define the usage of Dividers within the container.
- Returns
Implements ILIAS\UI\Factory.
◆ dropdown()
| NoUIFactory::dropdown | ( | ) |
description: purpose: > Dropdowns reveal a list of interactions that change the system’s status or navigate to a different view.
composition: > Dropdown is a clickable, graphically obtrusive control element. It can bear text. On-click a list of Shy Buttons and optional Dividers is shown. Note that empty dropdowns are not rendered at all to keep the UI as clean as possible. effect: > On-click, a list of actions is revealed. Clicking an item will trigger the action indicated. Clicking outside of an opened Dropdown will close the list of items. rivals: button: > Buttons are used, if single actions should be presented directly in the user interface. links: > Links are used to trigger actions that do not change the systems status. They are usually contained inside a Navigational Collection. popovers: > Dropdowns only provide a list of possible actions. Popovers can include more diverse and flexible content. rules: usage: 1: > Dropdowns MUST NOT be used standalone. They are only parts of more complex UI elements. These elements MUST define their use of Dropdown. E.g. a List or a Table MAY define that a certain kind of Dropdown is used as part of the UI element. composition: 1: > Empty dropdowns MUST NOT be rendered at all to keep the UI as clean as possible. interaction: 1: > Only Dropdown Items MUST trigger an action or change a view. The Dropdown trigger element is only used to show and hide the list of Dropdown Items. style: 1: > If Text is used inside a Dropdown label, the Dropdown MUST be at least six characters wide. wording: 1: > The label of a Dropdown SHOULD contain no more than two words. 2: > Every word except articles, coordinating conjunctions and prepositions of four or fewer letters MUST be capitalized. 3: > For standard events such as saving or canceling the existing standard terms MUST be used if possible: Delete, Cut, Copy. 4: > There are cases where a non-standard label such as “Send Mail” for saving and sending the input of a specific form might deviate from the standard. These cases MUST however specifically justified. accessibility: 1: > DOM elements of type "button" MUST be used to properly identify an element as a Dropdown. 2: > Dropdown items MUST be implemented as "ul" list with a set of "li" elements and nested Shy Button elements for the actions. 3: > Triggers of Dropdowns MUST indicate their effect by the aria-haspopup attribute set to true. 4: > Triggers of Dropdowns MUST indicate the current state of the Dropdown by the aria-expanded label. 5: > Dropdowns MUST be accessible by keyboard by focusing the trigger element and clicking the return key. 6: > Entries in a Dropdown MUST be accessible by the tab-key if opened. 7: > The focus MAY leave the Dropdown if tab is pressed while focusing the last element. This differs from the behaviour in Popovers and Modals. 8: > Dropdowns MUST set the aria-label describing the contained options, if the
term "Actions" does not describe the contained options well.
- Returns
Implements ILIAS\UI\Factory.
◆ dropzone()
| NoUIFactory::dropzone | ( | ) |
description: purpose: > Dropzones are containers used to drop either files or other HTML elements.
composition: > A dropzone is a container on the page. Depending on the type of the dropzone, the container is visible by default or it gets highlighted once the user starts to drag the elements over the browser window. rules: usage: 1: > Dropzones MUST be highlighted if the user is dragging compatible elements
inside or over the browser window.
- Returns
Implements ILIAS\UI\Factory.
◆ image()
| NoUIFactory::image | ( | ) |
description: purpose: The Image component is used to display images of various sources.
composition: An Image is composed of the image and an alternative text for screen readers.
rules: interaction: 1: > Images MAY be included in interactive components. Images MAY also be interactive on their own. Clicking on an Image can e.g. provide navigation to another screen or showing a Modal on the same screen. The usage of an interactive Image MUST be confirmed by the JF to make sure that interactive Images will only be used in meaningful cases. accessibility: 1: > Images MUST contain the alt attribute. This attribute MAY be left empty (alt="") if the image is of decorative nature. According to the WAI, decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive
(see https://www.w3.org/WAI/tutorials/images/decorative/).
- Returns
Implements ILIAS\UI\Factory.
◆ input()
| NoUIFactory::input | ( | ) |
description: purpose: > In opposite to components with a purely receptive or at most navigational character, input elements are used to relay user-induced data to the system.
composition: > An input consists of fields that define the way data is entered and a container around those fields that defines the way the data is submitted to the system.
- Returns
Implements ILIAS\UI\Factory.
Definition at line 91 of file Base.php.
Referenced by StandardFilterTest\test_render_activated_collapsed(), StandardFilterTest\test_render_activated_expanded(), StandardFilterTest\test_render_deactivated_collapsed(), and StandardFilterTest\test_render_deactivated_expanded().
Here is the caller graph for this function:
◆ item()
| NoUIFactory::item | ( | ) |
description: purpose: > An item displays a unique entity within the system.
It shows information about that entity in a structured way. composition: > Items contain the name of the entity as a title. The title MAY be interactive by using a Shy Button. The item contains three sections, where one section contains important information about the item, the second section shows the content of the item and another section shows metadata about the entity. effect: > Items may contain Interaction Triggers such as Glyphs, Buttons or Tags. rivals: Card: > Cards define the look of items in a deck. Todo: We need to refactor cards.
rules: composition: 1: Items MUST contain the name of the displayed entity as a title. 2: Items SHOULD contain a section with it's content. 3: Items MAY contain Interaction Triggers.
4: Items MAY contain a section with metadata.
- Returns
Implements ILIAS\UI\Factory.
◆ layout()
| NoUIFactory::layout | ( | ) |
description: purpose: > Layout components are compontents used for the overall construction of the user interface.
They assign places to certain components and thus provide a learnable structure where similar things are found in similar locations throughout the system. In ultimo, the page itself is included here.
Since Layout components carry - due to their nature - certain structural decisions, they are also about the "where" of elements as opposed to the exclusive "what" in many other components.
- Returns
Implements ILIAS\UI\Factory.
◆ legacy()
| NoUIFactory::legacy | ( | $content | ) |
description: purpose: > This component is used to wrap an existing ILIAS UI element into a UI component.
This is useful if a container of the UI components needs to contain content that is not yet implement in the centralized UI components. composition: > The legacy component contains html or any other content as string.
rules: usage: 1: > This component MUST only be used to ensure backwards compatibility with existing UI elements in ILIAS,
therefore it SHOULD only contain Elements which cannot be generated using other UI Components from the UI Service.
- Parameters
-
string $content
- Returns
Implements ILIAS\UI\Factory.
◆ link()
| NoUIFactory::link | ( | ) |
description: purpose: > Links are used navigate to other resources or views of the system by clicking or tapping them.
Clicking on a link does not change the system status. composition: > A link is a clickable, graphically minimally obtrusive control element. It can bear text or other content. Links always contain a valid href tag which should not just contain a hash sign. effect: > After clicking a link, the resource or view indicated by the link is requested and presented. Links are not used to trigger Javascript events. rivals: buttons: > Buttons are used to trigger interactions that usually change the system status. Buttons are much more obtrusive than links and may trigger Javascript events.
rules: usage: 1: > Links MAY be used inline in a text paragraph. interaction: 1: > Hovering an active link SHOULD indicate a possible interaction. 2: > Links MUST not be used to trigger Javascript events. style: 1: > Links SHOULD not be presented with a separate background color. wording: 1: > The wording of the link SHOULD name the target view or resource. accessibility: 1: > DOM elements of type "a" MUST be used to properly identify an
element.
- Returns
Implements ILIAS\UI\Factory.
◆ listing()
| NoUIFactory::listing | ( | ) |
description: purpose: > Listings are used to structure itemised textual information.
composition: > Listings may contain ordered, unordered, or labeled items. effect: > Listings hold only textual information. They may contain Links but no Buttons. rules: composition:
1: Listings MUST NOT contain Buttons.
- Returns
Implements ILIAS\UI\Factory.
◆ mainControls()
| NoUIFactory::mainControls | ( | ) |
description: purpose: > Main Controls are components that are always usable, depending only on overall configuration or roles of the user, not depending on the current content.
Main Controls provide global navigation in the app and information about the app.
rivals: View Controls: > View Controls are used to change the visualisation of some set of data within a component.
rules: usage: 1: Main Controls MUST NOT change the state of entities in the system.
- Returns
Implements ILIAS\UI\Factory.
◆ menu()
| NoUIFactory::menu | ( | ) |
description: purpose: > Menus let the user choose from several (navigational) options.
- Returns
Implements ILIAS\UI\Factory.
◆ messageBox()
| NoUIFactory::messageBox | ( | ) |
description: purpose: > Message Boxes inform the user about the state of the system or an ongoing user task.
Such as the successful completion, the need for further input of an actual error or stopping users in their tracks in high-risk tasks. composition: > Message Boxes consist of a mandatory message text, optional Buttons and an optional Unordered List of Links. There are four main types of Message Boxes, each is displayed in the according color:
- Failure,
- Success,
- Info,
- Confirmation effect: > Message Boxes convey information and optionally provide interaction by using Buttons and navigation by using Links.
rules: interaction: 1: > In general Message Boxes MAY provide interaction by using Buttons. Only Confirmation Message Boxes MUST provide interaction by using Buttons. 2: >
Navigation to other screens MUST by done by using Links.
- Returns
Implements ILIAS\UI\Factory.
◆ modal()
| NoUIFactory::modal | ( | ) |
description: purpose: The Modal forces users to focus on the task at hand.
composition: > A Modal is a full-screen dialog on top of the greyed-out ILIAS screen. The Modal consists of a header with a close button and a typography modal title, a content section and might have a footer. effect: > All controls of the original context are inaccessible until the Modal is completed. Upon completion the user returns to the original context. rivals: Popover: > Modals have some relations to popovers. The main difference between the two is the disruptive nature of the Modal and the larger amount of data that might be displayed inside a modal. Also popovers perform mostly action to add or consult metadata of an item while Modals manipulate or focus items or their sub-items directly.
background: http://quince.infragistics.com/Patterns/Modal%20Panel.aspx
rules: usage: 1: > The main purpose of the Modals MUST NOT be navigational. But Modals MAY be dialogue of one or two steps and thus encompass "next"-buttons or the like. 2: Modals MUST NOT contain other modals (Modal in Modal). 3: Modals SHOULD not be used to perform complex workflows. 4: Modals MUST be closable by a little “x”-button on the right side of the header.
5: Modals MUST contain a title in the header.
- Returns
Implements ILIAS\UI\Factory.
◆ panel()
| NoUIFactory::panel | ( | ) |
description: purpose: > Panels are used to group titled content.
composition: > Panels consist of a header and content section. They form one Gestalt and so build a perceivable cluster of information. Additionally an optional Dropdown that offers actions on the entity being represented by the panel is shown at the top of the Panel. effect: The effect of interaction with panels heavily depends on their content.
rules: wording:
1: Panels MUST contain a title.
- Returns
Implements ILIAS\UI\Factory.
◆ popover()
| NoUIFactory::popover | ( | ) |
description: purpose: > Popovers can be used when space is scarce i.e.
within List GUI items, table cells or menus in the Header section. They offer either secondary information on object like a preview or rating to be displayed or entered. They display information about ongoing processes composition: > Popovers consist of a layer displayed above all other content. The content of the Popover depends on the functionality it performs. A Popover MAY display a title above its content. All Popovers contain a pointer pointing from the Popover to the Triggerer of the Popover. effect: > Popovers are shown by clicking a Triggerer component such as a Button or Glyph. The position of the Popover is calculated automatically be default. However, it is possible to specify if the popover appears horizontal (left, right) or vertical (top, bottom) relative to its Triggerer component. Popovers disappear by clicking anywhere outside the Popover or by pressing the ESC key. rivals: > Modals: > Modals hide all other content while Popovers do not prevent interaction with other parts of the current context. rules: usage: 1: > Popovers MUST NOT contain horizontal scrollbars. 2: > Popovers MAY contain vertical scrollbars. The content component is responsible to define its own height and show vertical scrollbars. 3: > If Popovers are used to present secondary information of an object, they SHOULD display a title representing the object. interaction: 1: > A Popover MUST only be displayed if the Trigger component is clicked. This behaviour is different from Tooltips that appear on hovering. Popovers disappear by clicking anywhere outside the Popover or by pressing the ESC key. style: 1: Popovers MUST always relate to the Trigger component by a little pointer. accessibility: 1: > There MUST be a way to open the Popover by only using the keyboard. 2: > The focus MUST be inside the Popover, once it is open if it contains at least one interactive item. Otherwise the focus MUST remain on the Triggerer component. 3: > The focus MUST NOT leave the Popover for as long as it is open. 4: > There MUST be a way to reach every control in the Popover by only using the keyboard. 5: > The Popover MUST be closable by pressing the ESC key. 6: > Once the Popover is closed, the focus MUST return to the element triggering the opening of the Popover or the element being clicked if the Popover was
closed on click.
- Returns
Implements ILIAS\UI\Factory.
◆ symbol()
| NoUIFactory::symbol | ( | ) |
description: purpose: > Symbols are graphical representations of concepts or contexts quickly comprehensible or generally known to the user.
- Returns
Implements ILIAS\UI\Factory.
◆ table()
| NoUIFactory::table | ( | ) |
description: purpose: > Tables present a set of uniformly structured data.
- Returns
Implements ILIAS\UI\Factory.
◆ tree()
| NoUIFactory::tree | ( | ) |
description: purpose: > Trees present hierarchically structured data.
rivals: Drilldown: > A Drilldown shows only one level of the hierarchy, the Tree will show all at the same time. Presentation Table: > Allthough the rows in a table are expandable, entries in a table reflect entities and certain aspects of them. Nodes, however, are entities by themself.
rules: usage: 1: > A Tree SHOULD NOT be used for data-structures with little hierachy. E.g., listing objects and their properties would call for a Presentation Table rather than a Tree (see "rivals"), since this is a two-dimensional structure only. 2: > A Tree SHOULD NOT mix different kind of nodes, i.e. all nodes in the same Tree SHOULD be identical in structure.
- Returns
Implements ILIAS\UI\Factory.
◆ viewControl()
| NoUIFactory::viewControl | ( | ) |
description: purpose: > View Controls switch between different visualisation of data.
composition: > View Controls are composed mainly of buttons, they are often found in toolbars.
effect: Interacting with a view control changes to display in some content area.
- Returns
Implements ILIAS\UI\Factory.
The documentation for this class was generated from the following file:
- tests/UI/Base.php
