In de vorige nieuwsbrief las u al over het
bouwen van een telefoon applicatie in XPages. In dit tweede deel behandelen we de ontwikkeling van een stylesheet om de applicatie mooier weer te geven.
Het resultaat zag er als volgt uit:
De applicatie bevat eigenlijk twee panelen, een zoekpaneel en een paneel dat de resultaten toont. We plaatsen beide delen dan ook in panelen. In XPages zijn dit de panel controls.
Open de phonebook XPage en sleep een paneel net boven het zoekveld.
In dit paneel komt straks het zoekveld. Het zoekveld sleept u heel handig via de outline in het paneel. Klik hiertoe in de outline op het zoekveld en sleep deze naar het paneel.
Klik om de afbeelding te vergroten
In de outline ziet u het zoekveld in het paneel staan.
De helptekst plaatsen we in een
label control. Daarom verwijderen we de tekst en plaatsen we een label control voor het zoekveld:
- klik hiervoor op de Label bij Container Controls
- klik vervolgens weer net voor het zoekveld
Er wordt nu een nieuw label geplaatst voor het zoekveld. Als het goed is, ziet dit er zo uit.
Stel nu de labeltekst in:
- klik daarvoor op het label en selecteer dan in de properties tab, de label tab
- geef als name zoekwaardeLabel en als label tekst de oude tekst “Toon alleen achternamen beginnend met”
- Het is verstandig om ook direct op te geven voor welk veld het label is bedoeld. Doe dit met de optie Select target control.
- Selecteer hier uw zoekveld. Dit veld heeft nog de defaultname namelijk inputText1.
De opties voor het label zien er nu zo uit:
Als u de wijzigingen nu previewt, zal de pagina er nog hetzelfde uitzien. Alles voor niets? Nee, we moeten nog wat stylesheet verwijzingen maken. Allereerst geven we het paneel met het zoekveld een styleclass zodat we hier gemakkelijk stylerules op kunnen loslaten. In plaats van classes opgeven zouden we ook met Theme's aan de slag kunnen gaan. Maar dat doen we nu nog even niet.
Klik op het paneel met het zoekveld en stel de
panelname in op
zoekPaneel
Vervolgens past u ook de class aan. Klik hiertoe op de
style en vul bij
Class zoekpaneel in.
Op dezelfde manier stelt u de class van de
viewcontrol in op
resultaattabel.
Sla de wijzigingen in de XPage op.
Vervolgens maakt u een
stylesheet. Notes 8.5 bevat een
stylesheet editor (handig ook voor uw niet-XPage applicaties). Maak een nieuwe stylesheet aan:
- klik op resources
- rechts-klik vervolgens op Style Sheets
- kies in het menu voor New Style Sheet
- dit kan ook via het File menu (File/ New stylesheet resource alt+f n y)
Noem de stylesheet 'main.css'. Plak de volgende regels in de stylesheet:
.zoekpaneel {
display:inline;
float:left;
height:886px;
margin-left:20px;
margin-top:10px;
width:200px;
background-color: #F3F3F3; }
.resultaattabel{margin-left:20px; margin-top:10px;}
.xspDataTableViewPanelHeaderStart,.xspPagerContainer,.xspDataTableViewPanelHeaderMiddle,
.xspDataTableViewPanelHeaderEnd,.xspPagerRight, .xspDataTableViewPanelFooterStart,
.xspDataTableViewPanelFooterMiddle,.xspDataTableViewPanelFooterEnd {
background-color: #fff;
border:none;
} |
De onderste stylesheet rule is voor de
viewcontrol. De header en de footer van de
viewcontrol krijgen standaard als kleur grijs mee. Dit willen we nu niet, dus 'overrulen' we de standaard css rules. U kunt de stylesheet nu opslaan.
Nu de stylesheet klaar is, moeten we deze nog laden in onze XPage.
- open hiertoe de phonebook XPage
- klik in de outline op XPage
- klik vervolgens bij de properties op resources
- voeg de stylesheet toe door op Add Style Sheet... te klikken
- selecteer main.css
- klik op OK
Als u de XPage nu opslaat en vervolgens previewt, zal het er als volgt uit zien:
)
