Inheritance diagram for ILIAS\UI\Implementation\Factory:

Collaboration diagram for ILIAS\UI\Implementation\Factory:

Public Member Functions

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:

http://www.ilias.de/docu/goto_docu_wiki_wpage_3854_1357.html

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

More...

glyph ()

description: purpose: > Glyphs map a generally known concept or symbol to a specific concept in ILIAS.Glyphs are used when space is scarce. composition: > A glyph is a typographical character that represents something else. As any other typographical character, they can be manipulated by regular CSS. If hovered they change their background to indicate possible interactions. effect: > Glyphs act as trigger for some action such as opening a certain Overlay type or as shortcut. rivals: icon: > Standalone Icons are not interactive. Icons can be in an interactive container however. Icons merely serve as additional hint of the functionality described by some title. Glyphs are visually distinguished from object icons: they are monochrome. background: > "In typography, a glyph is an elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing and thereby expressing thoughts, ideas and concepts." (https://en.wikipedia.org/wiki/Glyph)Lidwell states that such symbols are used "to improve the recognition and recall of signs and controls".rules: usage: 1: Glyphs MUST NOT be used in content titles. 2: > Glyphs MUST be used for cross-sectional functionality such as mail for example and NOT for representing objects. 3: > Glyphs SHOULD be used for very simple tasks that are repeated at many places throughout the system. 4: > Services such as mail MAY be represented by a glyph AND an icon. style: 1: > All Glyphs MUST be taken from the Bootstrap Glyphicon Halflings set. Exceptions MUST be approved by the JF. accessibility: 1: > The functionality triggered by the Glyph must be indicated to

screen readers with by the attribute aria-label or aria-labelledby attribute.

Returns

More...

button ()

description: purpose: > Buttons trigger interactions that change the system’s status.Usually Buttons are contained in an Input Collection. The Toolbar is the main exception to this rule, since buttons in the Toolbar might also perform view changes. 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. 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: 1: > A Button SHOULD trigger an action. Only in Toolbars, Buttons MAY also change the view. 2: > If an action is temporarily not available, Buttons MUST be disabled by setting as type 'disabled'. 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

More...

card ($title, \ILIAS\UI\Component\Image\Image $image=null)

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:

http://www.ilias.de/docu/goto_docu_wiki_wpage_3992_1357.html

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

More...

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

More...

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. effect: Images may be included in interacted components but not interactive on their own.rules: 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

More...

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

More...

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. effect: The effect of interaction with panels heavily depends on their content.rules: wording:

1: Panels MUST contain a title.

Returns

More...

Public Member Functions inherited from ILIAS\UI\Factory

card ($title, \ILIAS\UI\Component\Image\Image $image=null)

description: purpose: > A card is a flexible content container for small chunks of structured data. More...

Detailed Description

Definition at line 8 of file Factory.php.

Member Function Documentation

◆ button()

ILIAS\UI\Implementation\Factory::button ( )

description: purpose: > Buttons trigger interactions that change the system’s status.Usually Buttons are contained in an Input Collection. The Toolbar is the main exception to this rule, since buttons in the Toolbar might also perform view changes. 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. 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: 1: > A Button SHOULD trigger an action. Only in Toolbars, Buttons MAY also change the view. 2: > If an action is temporarily not available, Buttons MUST be disabled by setting as type 'disabled'. 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.

Definition at line 29 of file Factory.php.

         {
                 return new Component\Button\Factory();
         }

◆ card()

ILIAS\UI\Implementation\Factory::card	(		$title,
		\ILIAS\UI\Component\Image\Image	$image = `null`
	)

Definition at line 37 of file Factory.php.

References $title.

         {
                 return new Component\Card\Card($title, $image);
         }

◆ counter()

ILIAS\UI\Implementation\Factory::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:

http://www.ilias.de/docu/goto_docu_wiki_wpage_3854_1357.html

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.

Definition at line 13 of file Factory.php.

         {
                 return new Component\Counter\Factory();
         }

◆ deck()

ILIAS\UI\Implementation\Factory::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:

http://www.ilias.de/docu/goto_docu_wiki_wpage_3992_1357.html

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.

Definition at line 45 of file Factory.php.

         {
                 return new Component\Deck\Deck($cards, Component\Deck\Deck::SIZE_S);
         }

◆ glyph()

ILIAS\UI\Implementation\Factory::glyph ( )

description: purpose: > Glyphs map a generally known concept or symbol to a specific concept in ILIAS.Glyphs are used when space is scarce. composition: > A glyph is a typographical character that represents something else. As any other typographical character, they can be manipulated by regular CSS. If hovered they change their background to indicate possible interactions. effect: > Glyphs act as trigger for some action such as opening a certain Overlay type or as shortcut. rivals: icon: > Standalone Icons are not interactive. Icons can be in an interactive container however. Icons merely serve as additional hint of the functionality described by some title. Glyphs are visually distinguished from object icons: they are monochrome. background: > "In typography, a glyph is an elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing and thereby expressing thoughts, ideas and concepts." (https://en.wikipedia.org/wiki/Glyph)Lidwell states that such symbols are used "to improve the recognition and recall of signs and controls".rules: usage: 1: Glyphs MUST NOT be used in content titles. 2: > Glyphs MUST be used for cross-sectional functionality such as mail for example and NOT for representing objects. 3: > Glyphs SHOULD be used for very simple tasks that are repeated at many places throughout the system. 4: > Services such as mail MAY be represented by a glyph AND an icon. style: 1: > All Glyphs MUST be taken from the Bootstrap Glyphicon Halflings set. Exceptions MUST be approved by the JF. accessibility: 1: > The functionality triggered by the Glyph must be indicated to

screen readers with by the attribute aria-label or aria-labelledby attribute.

Returns

Implements ILIAS\UI\Factory.

Definition at line 21 of file Factory.php.

         {
                 return new Component\Glyph\Factory();
         }

◆ image()

ILIAS\UI\Implementation\Factory::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. effect: Images may be included in interacted components but not interactive on their own.rules: 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.

Definition at line 61 of file Factory.php.

         {
                 return new Component\Image\Factory();
         }

◆ legacy()

ILIAS\UI\Implementation\Factory::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.

Definition at line 69 of file Factory.php.

         {
                 return new Component\Legacy\Legacy($content);
         }

◆ listing()

ILIAS\UI\Implementation\Factory::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.

Definition at line 53 of file Factory.php.

         {
                 return new Component\Listing\Factory();
         }

◆ panel()

ILIAS\UI\Implementation\Factory::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. 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.

Definition at line 77 of file Factory.php.

         {
                 return new Component\Panel\Factory();
         }

The documentation for this class was generated from the following file:

src/UI/Implementation/Factory.php