OOUI/Toolbars/nl
| OOUI |
|---|
| Introductie |
| Aan de slag |
| Met widgets werken |
| Zie ook |
Werkbalken
Werkbalken zijn complexe interfacecomponenten waarmee gebruikers eenvoudig toegang hebben tot een verscheidenheid aan hulpmiddelen (bijvoorbeeld opmaakopdrachten) en acties, die extra opdrachten zijn die deel uitmaken van de werkbalk, maar niet zijn geconfigureerd als hulpmiddelen.
Ontwikkelaars maken en passen de afzonderlijke hulpmiddelen aan en registreren ze vervolgens bij een ToolFactory, die ze op aanvraag maakt. Elk hulpmiddel heeft een symbolische naam (gebruikt bij het registreren ervan), een titel (bijvoorbeeld 'Afbeelding invoegen') en een pictogram.
Individuele hulpmiddelen zijn georganiseerd in groepen, die worden weergegeven als menu's met hulpmiddelen, lijsten met hulpmiddelen, of als een enkele balk met hulpmiddelen. U kunt de rangschikking en volgorde van de hulpmiddelengroepen aanpassen door het instellen van de werkbalk. Hulpmiddelen kunnen in elke volgorde worden weergegeven, maar ze kunnen slechts één keer in de werkbalk worden weergegeven.
Hieronder ziet u een voorbeeld van een basiswerkbalk. We zullen later in deze documentatie nader kijken naar elk van deze gebruikte componenten in dit voorbeeld. Als u deze demo live wilt zien, raadpleeg de gegenereerde documentatie.
Hulpmiddelen
Hulpmiddelen worden gemaakt door de abstracte class Tool of een van de subclasses ervan uit te breiden, PopupTool of ToolGroupTool. Elk hulpmiddel moet worden geconfigureerd met de eigenschappenː
name— De symbolische naam wordt intern gebruikt om het hulpmiddel te registreren bij een ToolFactory. Hulpmiddelen moeten worden geregistreerd voordat ze in een werkbalk kunnen worden gebruikt.title— De titeltekst wordt op verschillende manieren gebruikt, afhankelijk van het type groep waarin het hulpmiddel is geplaatst (BarToolGroup, MenuToolGroup of ListToolGroup). Voor 'balk'-hulpmiddelgroepen, waarbij alleen een pictogram wordt weergegeven om het hulpmiddel te identificeren, wordt de titeltekst gebruikt als knopinfo die wordt weergegeven wanneer een gebruiker de muis over het pictogram beweegt. Voor 'lijst'-hulpmiddelgroepen wordt de titeltekst gebruikt om het hulpmiddel te identificeren in de vervolgkeuzemenu's die in de gebruikersinterface worden gebruikt. Als er een sneltoets is gedefinieerd voor het hulpmiddel, wordt de sneltoets automatisch weergegeven. Voor hulpmiddelen in 'balk'-hulpmiddelgroepen wordt de sneltoets weergegeven in de knopinfo; Voor hulpmiddelen in de groepen 'Menu' en 'Lijst' verschijnt de snelkoppeling rechts van het item in het vervolgkeuzemenu.icon— Het pictogram wordt ook op verschillende manieren gebruikt, afhankelijk van het groepstype waarin het hulpmiddel zich bevindt. Voor 'bar'-hulpmiddelgroepen wordt het pictogram weergegeven in de werkbalk om het hulpmiddel te identificeren. Voor 'lijst'-hulpmiddelgroepen wordt het pictogram weergegeven naast de titeltekst in het vervolgkeuzemenu. Voor 'menu'-hulpmiddelgroepen wordt het pictogram genegeerd.
Naast de statische eigenschappen moet een hulpmiddel ook twee methoden implementeren:
- onSelect() — wordt gebruikt om de actie op te geven die het hulpmiddel moet uitvoeren wanneer het is geselecteerd
- onUpdateState() — wordt gebruikt om de status van het hulpmiddel te synchroniseren met de status van de grotere context. Deze methode kan bijvoorbeeld worden gebruikt om 'vet' in de werkbalk te selecteren wanneer de tekstcursor binnen een gebied met vetgedrukte tekst wordt verplaatst.
// Voorbeeld: Een standaard hulpmiddel maken.
// Maak een ToolFactory (één keer gedaan voor elke werkbalk). Alle hulpmiddelen moeten worden geregistreerd bij een ToolFactory, die op verzoek een nieuwe instantie maakt.
var toolFactory = new OO.ui.ToolFactory();
// Definieer de statische eigenschappen van het hulpmiddel en de actie die het uitvoert
function PictureTool() {
PictureTool.super.apply( this, arguments );
};
OO.inheritClass( PictureTool, OO.ui.Tool );
// Elke hulpmiddel moet een 'name' hebben (gebruikt als interne id, zie verderop) en ten minste één 'icon' en 'title' (weergegeven pictogram en tekst).
PictureTool.static.name = 'picture';
PictureTool.static.icon = 'picture';
PictureTool.static.title = 'Insert picture';
// Definieer de actie die wordt uitgevoerd wanneer op dit hulpmiddel wordt geklikt.
PictureTool.prototype.onSelect = function () {
// ... Wat het hulpmiddel hier ook doet...
this.setActive( false );
};
// Definieer de onUpdateState(). We gebruiken deze functie hier niet.
PictureTool.prototype.onUpdateState = function () {};
// Registreer het met de tool-factory.
toolFactory.register( PictureTool );
Een hulpmiddel kan ook worden geconfigureerd met een statische eigenschap 'group', die later kan worden gebruikt bij het toevoegen van het hulpmiddel aan een balk, menu of toolgroep (zie ToolGroepen voor een voorbeeld van hoe dit wordt gedaan):
// Definieer een statische groepseigenschap als u hulpmiddelen wilt opnemen op basis van de hier gedefinieerde naam.
function PictureTool() {
PictureTool.super.apply( this, arguments );
};
OO.inheritClass( PictureTool, OO.ui.Tool );
PictureTool.static.name = 'picture';
PictureTool.static.icon = 'picture';
PictureTool.static.title = 'Insert picture';
PictureTool.static.group = 'myGroup';
Voor een volledige lijst met ondersteunde methoden en configuratieopties, zie de code-level documentatie van de class Tool.
PopupTool
Pop-up hulpmiddelen openen een pop-upvenster wanneer ze worden geselecteerd op de werkbalk.
In tegenstelling tot standaardhulpmiddelen vereisen pop-upss niet dat ontwikkelaars een methode van onSelect() of onUpdateState() opgeven, omdat deze methoden al zijn geïmplementeerd.
// Voorbeeld van een pop-up
// een popup venster.
function HelpTool( toolGroup, config ) {
OO.ui.PopupTool.call( this, toolGroup, $.extend( { popup: {
padded: true,
label: 'Help',
head: true
} }, config ) );
this.popup.$body.append( '<p>I am helpful!</p>' );
};
OO.inheritClass( HelpTool, OO.ui.PopupTool );
HelpTool.static.name = 'help';
HelpTool.static.icon = 'help';
HelpTool.static.title = 'Help';
toolFactory.register( HelpTool );
Voor een volledige lijst met ondersteunde methoden en configuratieopties, zie de code-level documentatie van de class PopupTool.
ToolGroupTool
Een ToolGroupTool is een speciaal soort hulpmiddel die andere hulpmiddelen of groepen daarvan kan bevatten. De ToolGroupTool is speciaal ontworpen om te worden gebruikt in een balkhulpmiddelgroep om toegang te bieden tot extra hulpmiddelen vanuit het balkitem.
// Voorbeeld: ToolGroupTool met twee geneste hulpmiddelen, 'setting1' en 'setting2', elders gedefinieerd.
function SettingsTool() {
SettingsTool.super.apply( this, arguments );
};
OO.inheritClass( SettingsTool, OO.ui.ToolGroupTool );
SettingsTool.static.name = 'settings';
SettingsTool.static.title = 'Change settings';
SettingsTool.static.groupConfig = {
icon: 'settings',
label: 'ToolGroupTool',
include: [ 'setting1', 'setting2' ]
};
toolFactory.register( SettingsTool );
Voor een volledige lijst met ondersteunde methoden en configuratieopties, zie de code-level documentatie van de class ToolGroupTool.
ToolGroups
Hulpmiddelen worden georganiseerd in hulpmiddelgroepen, die worden gemaakt door een ToolGroupFactory en vervolgens worden toegevoegd aan de werkbalk wanneer de werkbalk wordt ingesteld. Afzonderlijke hulpmiddelen kunnen aan elk type groep (balk (bar), lijst (list) of menu) worden toegevoegd. Het type van de groep bepaalt hoe de opgenomen hulpmiddelen op de werkbalk worden gerangschikt:
bar— Hulpmiddelen worden in rij weergegeven met een pictogram per hulpmiddel.list— Hulpmiddelen worden weergegeven met een label en pictogram in een vervolgkeuzemenu. De titel van het hulpmiddel wordt gebruikt als labeltekst. De lijst kan worden geconfigureerd om te worden samengevouwen en uitgebreid met de configuratie-instelling allowCollapse.menu— Hulpmiddelen worden weergegeven met een label in een vervolgkeuzemenu. De titel van het hulpmiddel wordt gebruikt als labeltekst. 'menu'-hulpmiddelengroepen worden over het algemeen gebruikt voor sets van elkaar uitsluitende hulpmiddelen, zoals een groep opdrachten voor tekstopmaak (alinea, kop, enz.).
Hulpmiddelen kunnen op verschillende manieren aan een groep worden toegevoegd: op symbolische naam, op groepsnaam of met een '* ' (sterretje) catch-all:
Hulpmiddelen toevoegen met nameː
// Voeg hulpmiddelen toe op basis van hun symbolische naam.
{
type: 'list',
include: [ 'picture', 'help' ]
}
// Of gebruik een objectː
{
type: 'list',
include: [ { name: 'picture' }, { name: 'help' } ]
}
Hulpmiddelen toevoegen met group.
De groepsnaam van een hulpmiddel wordt opgegeven met de statische eigenschap 'group' van het hulpmiddel. voorbeeld
// Voeg hulpmiddelen toe op groepsnaam.
{
type: 'list',
include: [ { group: 'myGroup' } ]
}
Voeg hulpmiddelen toe met de catch-allː
// Voeg hulpmiddelen toe met het teken 'voor alles', een sterretje.
// Het sterretje geeft aan dat alle hulpmiddelen die zich nog niet in een groep bevinden, moeten worden opgenomen.
{
type: 'list',
include: { '*' }
}
Ontwikkelaars kunnen de rangschikking van de hulpmiddelen verder beheren met behulp van de configuratieopties promote en demote van de groep, die ze respectievelijk bovenaan de lijst (of voorkant van de werkbalk) of aan het einde plaatsen.
Deze instellingen zijn vooral handig wanneer hulpmiddelen massaal aan de werkbalk zijn toegevoegd (bijvoorbeeld met het sterretje of wanneer een groep aan een groep wordt toegevoegd) om hun prioriteit te beheren.
BarToolGroup
Hulpmiddelen in een BarToolGroup worden weergegeven door het pictogram in een enkele rij.
De titel van het hulpmiddel wordt weergegeven wanneer gebruikers de muis erover bewegen.
// Voorbeeld van een BarToolGroup
{
// Elk hulpmiddelen wordt in de rij weergegeven met een pictogram
type: 'bar',
include: [ 'picture', 'help', 'settings', 'stuff']
}
Voor een volledige lijst met ondersteunde methoden en configuratieopties, zie de code-level documentatie van de class BarToolGroup.
ListToolGroup
Hulpmiddelen in een ListToolGroup worden weergegeven door pictogram en label in een vervolgkeuzemenu.
De titel van het hulpmiddel wordt gebruikt als labeltekst.
Lijstgroepen kunnen worden geconfigureerd om te worden uitgevouwen en samengevouwen.
Samengevouwen lijsten hebben een optie 'Meer' die gebruikers kunnen selecteren om de volledige lijst met hulpmiddelen te zien.
Als een samengevouwen groep wordt uitgevouwen, kunnen gebruikers met een optie 'Minder' de lijst samenvouwen.
// Voorbeeld van een ListToolGroup. Hulpmiddelen worden weergegeven met pictogram en label in een vervolgkeuzemenu.
// Het vervolgkeuzemenu kan ook worden geconfigureerd met een label, in dit voorbeeld 'ListToolGroup'
{
type: 'list',
indicator: 'down',
label: 'ListToolGroup',
include: [ 'picture', 'help', 'settings', 'stuff' ]
}
Naast een label kan ListToolGroups ook worden geconfigureerd met een header en title:
// Voorbeeld: ListToolGroup met label, koptekst en titel.
{
type: 'list',
indicator: 'down',
header: 'This is the header',
title: 'This is the title',
label: 'ListToolGroup (this is the label)',
include: [ 'picture', 'help', 'settings', 'stuff' ]
}
Gebruik de instelling allowCollapse om hulpmiddelen aan te wijzen als inklapbaar ('help' en 'stuff', in het volgende voorbeeld).
Standaard wordt de lijst geopend in de samengevouwen status en moeten gebruikers op de optie 'Meer' klikken om de lijst met hulpprogramma's te zien:
// Voorbeeld van een ListToolGroup met inklapbare hulpmiddelen. Standaard wordt het menu geopend in de samengevouwen status.
{
type: 'list',
indicator: 'down',
label: 'ListToolGroup - Collapsed',
include: [ 'picture', 'help', 'settings', 'stuff' ],
allowCollapse: [ 'help', 'stuff' ]
}
Als u een inklapbare lijst in de uitgevouwen status wilt weergeven wanneer de lijst wordt geopend, stelt u de instelling expanded in op true:
// Als u een inklapbare lijst wilt uitvouwen, stelt u de instelling 'expanded' in op 'true'.
{
type: 'list',
indicator: 'down',
label: 'ListToolGroup - Expanded',
include: [ 'picture', 'help', 'settings', 'stuff' ],
allowCollapse: [ 'help', 'stuff' ],
expanded: true
}
U kunt ook de namen opgeven van hulpmiddelen die nooit mogen worden samengevouwen.
Dit wordt gedaan met de instelling forceExpand.
In het volgende voorbeeld is alleen het hulpmiddel 'help' aangewezen als uitgevouwen; Alle andere zijn standaard samengevouwen.
// Geef de hulpmiddelen die moeten worden uitgebreid; Alle andere zijn standaard samengevouwen.
{
type: 'list',
indicator: 'down',
label: 'ListToolGroup - forceExpand',
include: [ 'picture', 'help', 'settings', 'stuff' ],
forceExpand: [ 'help' ]
}
Voor een volledige lijst met ondersteunde methoden en configuratieopties, zie de code-level documentatie van de class ListToolGroup.
MenuToolGroup
Hulpmiddelen in een MenuToolGroup worden weergegeven met een label in een vervolgkeuzemenu.
De titel van het hulpmiddel wordt gebruikt als labeltekst en het menulabel wordt bijgewerkt om aan te geven welke hulpmiddelen nu zijn geselecteerd.
NBː Elk hulpmiddel moet een methode onUpdateState() definiëren als een MenuToolGroup wordt gebruikt.
// Voorbeeld: MenuToolGroup
function SettingsTool() {
SettingsTool.super.apply( this, arguments );
this.reallyActive = false;
}
OO.inheritClass( SettingsTool, OO.ui.Tool );
SettingsTool.static.name = 'settings';
SettingsTool.static.icon = 'settings';
SettingsTool.static.title = 'Change settings';
SettingsTool.prototype.onSelect = function () {
// De actieve status bij elke klik in-/uitschakelen
this.reallyActive = !this.reallyActive;
this.setActive( this.reallyActive );
// Het menulabel bijwerken
this.toolbar.emit( 'updateState' );
};
SettingsTool.prototype.onUpdateState = function () {};
toolFactory.register( SettingsTool );
// Een ander hulpmiddel.
function StuffTool() {
StuffTool.super.apply( this, arguments );
this.reallyActive = false;
}
OO.inheritClass( StuffTool, OO.ui.Tool );
StuffTool.static.name = 'stuff';
StuffTool.static.icon = 'ellipsis';
StuffTool.static.title = 'Change the world';
StuffTool.prototype.onSelect = function () {
// De actieve status bij elke klik in-/uitschakelen
this.reallyActive = !this.reallyActive;
this.setActive( this.reallyActive );
// Het menulabel bijwerken
this.toolbar.emit( 'updateState' );
};
StuffTool.prototype.onUpdateState = function () {};
toolFactory.register( StuffTool );
// Voeg de MenuToolGroup toe aan de werkbalk.
toolbar.setup( [
{
type: 'menu',
indicator: 'down',
include: [ 'settings', 'stuff' ]
}
] );
De werkbalk configureren
Naast het bevatten van hulpmiddelgroepen kan de werkbalk worden geconfigureerd met acties, CSS, acceleratortoetsen en/of een optionele schaduw.
Merk op dat 'acties' in de context van de werkbalk verschillen van ActionWidgets. Voor werkbalken verwijst 'acties' naar een lege container die rechts is uitgelijnd en kan bevatten wat u maar wilt.
Toolgroup toevoegen
Hulpmiddelgroepen worden toegevoegd aan de werkbalk met de methode setup van de werkbalk:
// Voeg hulpmiddelgroepen toe aan de werkbalk.
toolbar.setup( [
{
type: 'bar',
include: [ 'picture', 'help' ]
},
{
type: 'list',
indicator: 'down',
label: 'More',
include: [ 'settings', 'stuff' ]
}
] );
Een actie toevoegen
Werkbalken hebben een optioneel 'acties'-gebied, dat opdrachten bevat die beschikbaar zijn voor gebruikers, maar niet zijn geconfigureerd als hulpmiddelen. In het volgende voorbeeld is de werkbalk geconfigureerd om acties te gebruiken, in dit geval twee extra knoppen, 'Actie' en 'Uitgeschakeld'. Kortheidshalve is alleen de actiespecifieke code in het voorbeeld opgenomen (de rest is precies hetzelfde als de basiswerkbalk).
// Voorbeeld: een werkbalk met aanvullende acties.
// Maak de werkbalk en stel de 'action' configuratie in op 'true'.
var toolFactory = new OO.ui.ToolFactory();
var toolGroupFactory = new OO.ui.ToolGroupFactory();
var toolbar = new OO.ui.Toolbar( toolFactory, toolGroupFactory, { actions: true } );
// De actieknoppen maken en toevoegen
actionButton = new OO.ui.ButtonWidget( { label: 'Action' } );
actionButtonDisabled = new OO.ui.ButtonWidget( { label: 'Disabled', disabled: true } );
toolbar.$actions.append( actionButton.$element, actionButtonDisabled.$element );
CSS gebruiken voor opmaak labels
In het volgende voorbeeld worden CSS-klassen gebruikt om het uiterlijk van de gereedschapslabels 'oo-ui-tool-name-<' en '>' aan te passen. In het volgende voorbeeld worden CSS-klassen gebruikt om het uiterlijk van de labels 'picture' en 'help' aan te passen.
<!-- Voorbeeld: labels van stylinghulpmiddelen met CSS -->
<style>
.oo-ui-listToolGroup .oo-ui-tool-name-picture .oo-ui-tool-title {
font-size: 200%;
font-weight: normal;
}
.oo-ui-listToolGroup .oo-ui-tool-name-help .oo-ui-tool-title {
font-size: 150%;
font-weight: normal;
}
</style>
<script>
// In dit voorbeeld zijn de hulpmiddelen 'picture' en 'help' opgemaakt
{
type: 'list',
indicator: 'down',
label: 'Using CSS',
include: [ 'picture', 'help', 'settings', 'stuff' ]
}
</script>
Sneltoetsen gebruiken
De OOUI-bibliotheek bevat geen versnellersysteem, maar de klasse Toolbar bevat wel er een hook voor.
Als u een versnellersysteem wilt gebruiken, subclasseert u de werkbalk en overschrijft u de methode getToolAccelerator(), die bedoeld is om een label te retourneren dat de versnellersleutels beschrijft voor het hulpmiddel dat (met symbolische naam) aan de methode is doorgegeven.
Versnellerlabels (bijvoorbeeld Ctrl + M) worden op verschillende manieren weergegeven, afhankelijk van het type hulpmiddelengroep dat wordt gebruikt:
- Voor balk hulpmiddelgroepen wordt het acceleratorlabel weergegeven in de knopinfo die wordt weergegeven wanneer gebruikers er met de muis overgaan.
- Voor menu- en lijst hulpmiddelgroepen wordt het acceleratorlabel rechts uitgelijnd en weergegeven in grijze tekst, die nog steeds voldoet aan WCAG-niveau AA [1].
De werkbalk maken
De werkbalk moet aan het document worden toegevoegd voordat het kan worden gemaakt. Zodra het is toegevoegd, kan de werkbalk worden geïnitialiseerd:
// De werkbalk toevoegen
$( document.body ).append( toolbar.$element );
// Hier wordt de werkbalk daadwerkelijk gebouwd.
// Dit moet worden gedaan nadat het in het document is ingevoegd.
toolbar.initialize();
// Verzend een gebeurtenis 'updateState' na het initialiseren van de werkbalk.
toolbar.emit( 'updateState' );
Voor een volledige lijst met ondersteunde methoden en configuratieopties raadpleegt u deze documentatie over werkbalken.
Referenties
- ↑ WCAG (Web Content Accessibility Guidelines)
 | OOUI wordt onderhouden door the Design System Team.
Hulp krijgen:
|
