3. Framework voor OPAC-layout

Auteur Marc Jeurissen
Aanmaak 16 okt 2001
Oud BVV nr 2004

3.1. Abstract

Dit document geeft een voorzet tot opzet en verwerking van het framework voor de layout van publiekscatalogi, dat ter beschikking gesteld wordt van layout-verantwoordelijken.

Zie ook OPAC - Handleiding voor de layout-verantwoordelijke.

3.2. Problematiek en doelstellingen

Layout is een erg belangrijk, erg zichtbaar en erg gevoelig element van een applicatie. Niet alleen persoonlijke voorkeuren verschillen, maar het is vaak ook wenselijk om een toepassing zo goed mogelijk in de huisstijl van een instelling in te passen. Tot hiertoe was dit zo goed als onmogelijk. Het ontwikkelteam leverde een toepassing af met een layout die wel tot stand kon komen met inspraak van derden, maar dan ook definitief vast lag.

Een framework moet toelaten een publiekscatalogus te definiëren met een unieke identificatie. Zo’n gedefinieerde publiekscatalogus wordt hierna als OPAC aangeduid. Een layout-verantwoordelijke, met de nodige basiskennis van html en css, en beschikkend over een reeks van afgesproken functionele elementen en meer vrij te bepalen vrije elementen, moet een layout-patroon kunnen invullen dat vervolgens automatisch naar html-pagina’s wordt omgezet. Het eerste scherm van een OPAC, en de volgende schermen, hebben daarbij hun eigen problematiek.

3.3. Meta-informatie

Elke OPAC heeft zijn eigen meta-informatie omtrent de hieronder beschreven schermtypes, layout-elementen en schermpatronen. Ook een aantal meer algemene layout-aspecten, zoals nu reeds voorhanden in de algemene Brocade catalogussoftware, moeten hierin geïncorporeerd worden, evenals een keuzemogelijkheid tussen een specifieke OPAC css-file of de algemene service.css file.

Al deze gegevens worden verwerkt door een toolcat-applicatie opac.

3.4. Schermtypes

Een OPAC bestaat uit verschillende opeenvolgende schermen. Het beginscherm is statisch en kan derhalve volledig vastgelegd worden met behulp van hieronder gespecificeerde layout-elementen. Voor de volgende schermen kan een patroon vastgelegd worden waarin vrije elementen kunnen geplaatst worden die per schermtype een andere invulling kunnen krijgen (Zie Vrije elementen).

Volgende schermtypes worden in het framework vastgelegd

Identificatie Omschrijving
start Startscherm
index Overzicht van gevonden indextermen
shortDescription Overzicht van korte beschrijvingen
fullDescription Volledige beschrijving
advancedSearch Invulscherm voor geavanceerd zoeken
subjectTree Onderwerpszoekboom

3.5. Layout-elementen

3.5.1. Scherm-elementen

Dit zijn de afzonderlijke bouwstenen van een scherm. Voorbeelden zijn een button, een invulveld, een select-box, ... De meeste scherm-elementen zullen een functioneel equivalent hebben, en derhalve daar verder behandeld worden.

Het framework biedt een vast aantal scherm-elementen aan en per scherm-element zal de layout-verantwoordelijke relevante meta-informatie kunnen invullen.

Voorziene scherm-elementen
Identificatie Omschrijving Meta-informatie
button_start Startknop Taalafhankelijke verwoordingen
button_next ‘Volgende’ knop Taalafhankelijke verwoordingen
button_previous ‘Vorige’ knop Taalafhankelijke verwoordingen

3.5.2. Functionele elementen

Een functioneel element kan overeen komen met een scherm-element, maar kan ook verschillende scherm-elementen omvatten. Zo zal het framework niet toelaten om te kiezen welke buttons op een scherm moeten komen, maar zal wel het functionele element buttonGroup op het scherm kunnen geplaatst worden. De software maakt zelf uit welke buttons op dat moment moeten getoond worden.

Elk functioneel element heeft zijn eigen, vastgelegde tag die in het schermpatroon zal kunnen gebruikt worden. Voor elk element zal relevante meta-informatie aangeboden worden, bijvoorbeeld welke scheidingsteken(s) er tussen de verschillende buttons van buttonGroup moeten geplaatst worden.

Voorziene functionele elementen
Identificatie Omschrijving Meta-informatie
buttonGroup Reeks van knoppen Button-separator (bvb. <tr> indien de buttons in een tabelrij geplaatst worden)
titlePhrase Verwoording in title Taalafhankelijke verwoordingen
searchInput Invulveld voor zoekterm Lengte
catalogueChoice Keuze uit catalogi Welke catalogi; selectbox of radio buttons; radio button separator
indexChoice Keuze uit indexen Welke indexen; selectbox of radio buttons; radio button separator
advancedSearchLink Link naar scherm met geavanceerde zoekactie. Het volledige advancedSearchInput blok kan echter ook reeds op het eerste scherm geplaatst worden. Taalafhankelijke omschrijving. <a> ... </a> omvat het clickable gedeelte.
advancedSearchInput Inputblok voor geavanceerde zoekactie Lengte, hoogte
subjectCatalogueLink Link naar scherm met onderwerpszoekboom Taalafhankelijke omschrijving. <a> ... </a> omvat het clickable gedeelte.
dataBlock Blok met dynamische data, te gebruiken in het patroon van de Volgende schermen  

3.5.3. Vrije elementen

In tegenstelling tot bovenvermelde elementen die vastliggen binnen het framework, kunnen vrije elementen wel door de layout-verantwoordelijke gedefinieerd worden. Bedoeling is, blokken tekst of images op het scherm te kunnen plaatsen.

Vrije elementen kunnen gedefinieerd worden per schermtype. Zo is het bijvoorbeeld mogelijk een vrij element screenHeader te definiëren dat voor schermtype shortDescription Korte beschrijvingen als nederlandstalige verwoording heeft, Volledige beschrijving voor het schermtype fullDescription en blanco is voor het schermtype index.

De meta-informatie van vrije elementen omvat per schermtype(s)

  • tekst of image,
  • taalafhankelijk verwoording.

3.6. Schermpatronen

Patronen worden opgebouwd in standaard xhtml-code, gemengd met tags van functionele en vrije elementen. De invulling van een patroon start na de <body> tag. Ook de <form> tag moet vanzelfsprekend niet ingevuld worden.

3.6.1. Algemeen

  • Layout-elementen worden in het patroon genoteerd als <layout id="layout-element-id" grouping="span|div" [toggle=lgcode]>.
  • Elk layout-element wordt achteraf automatisch ingekapseld in een <div class="layout-element-id"> of <span class="layout-element-id"> groep (default = div), afhankelijk van de specificatie in het <layout> element. Indien het attribuut toggle meegegeven wordt, wordt boven het element de klikbare verwoording van lgcode geplaatst, waarmee het element zichtbaar of onzichtbaar kan gemaakt worden. In de OPAC-code kan dit beïnvloed worden door FDtoggle("elementnaam").

3.6.2. Eerste scherm

Zoals reeds gezegd is het eerste scherm statisch en kan het dus volledig in het patroon vastgelegd worden. Zo’n patroon kan er als volgt uitzien:

<table width="100%">
<tr><td><layout id="``icon``\ "></td><td><layout id="``screenHeader``\ "></td></tr></table>
<hr/>
<table>
<tr><td><layout id="``buttonGroup``\ "></td></tr></table>
<hr/>
<p>
<table>
<tr><td><layout id="``screenText1``\ "></td></tr>
<tr><td><layout id="``catalogueChoice``\ "></td><td><layout id="``indexChoice``\ "></td></tr>
</table>
</p>
<p>
<table>
<tr><td><layout id="``subjectCatalogueLink``\ "></td></tr>
</table>
</p>
<p>
<table>
<tr><td><layout id="``advancedSearchLink``\ "></td></tr>
</table>
</p>

In dit voorbeeld is

  • icon een vrij element, gedefinieerd als een image, gelijk voor alle schermtypes.
  • screenHeader een vrij element, gedefinieerd als een tekst, verschillend voor de verschillende schermtypes.
  • buttonGroup een functioneel element, waarbij de juiste buttons bij de verwerking ingevuld worden.
  • screenText1 een vrij element, gedefinieerd als een tekst, enkel gebruikt in het eerste scherm (vb. Maak uw keuze...).
  • catalogueChoice een functioneel element, waarin de aangeboden catalogi gedefinieerd werden.
  • indexChoice een functioneel element, waarin de aangeboden indexen gedefinieerd werden.
  • subjectCatalogueLink een functioneel element, waarin een tekst met clickable zone kan gezet worden, die doorlinkt naar de onderwerpsboom.
  • advancedSearchLink een functioneel element, waarin een tekst met clickable zone kan gezet worden, die doorlinkt naar de geavanceerde zoekactie.

3.6.3. Volgende schermen

Voor alle volgende schermen wordt er 1 patroon vastgelegd. Daar moet in ieder geval het functionele element dataBlock ingepast worden. Op deze plaats wordt de uit de databank gegenereerde data geplaatst. Zo’n patroon kan er als volgt uitzien:

<table width="100%">
<tr><td><layout id="``icon``\ "></td><td><layout id="``screenHeader``\ "></td></tr></table>
<hr/>
<table>
<tr><td><layout id="``buttonGroup``\ "></td></tr></table>
<hr/>
<p>
<table>
<tr><td><layout id="``screenText``\ "></td></tr>
<tr><td><layout id="``dataBlock``\ "></td></tr>
</table>
</p>

In dit voorbeeld is

  • icon een vrij element, gedefinieerd als een image, gelijk voor alle schermtypes.
  • screenHeader een vrij element, gedefinieerd als een tekst, verschillend voor de verschillende schermtypes.
  • buttonGroup een functioneel element, waarbij de juiste buttons bij de verwerking ingevuld worden.
  • screenText een vrij element, gedefinieerd als een verklarende tekst, verschillend voor elk schermtype.
  • dataBlock een functioneel element dat de gegenereerde data vertegenwoordigt.

3.7. Verwerking

Volgende acties worden uitgevoerd bij registratie van een OPAC:

  • de meta-informatie wordt in een Python-library r4_python-lib/brocade/opac.py weggeschreven
  • opac -html
    • creëert een html-file voor het eerste scherm;
    • creëert ofwel 1 phtml-file voor de volgende schermen, intern met if-constructies opgesplitst per taal en per schermtype, ofwel verschillende phtml-files per taal en/of schermtype.
  • opac -web maakt, indien nodig, de vereiste directories aan, plaatst de html- en phtml-files op de juiste plaatsen en maakt een default css-file.