1 FRONTBONE stelt jou in staat je eigen werkwijze te hanteren. Deze inleiding is bedoelt om je zo snel mogelijk op weg te helpen. Wanneer je de basisp...
FRONTBONE stelt jou in staat je eigen werkwijze te hanteren. Deze inleiding is bedoelt om je zo snel mogelijk op weg te helpen. Wanneer je de basisprincipes van het systeem doorhebt, kun je de rest zelf invullen en jouw applicaties naar eigen inzicht vormgeven. Om efficiënt te werk te gaan is het belangrijk een beeld te hebben van de gedachtengang achter het systeem. Het centrale uitgangspunt is dat jij als frontend-ontwikkelaar jouw Content Management-applicatie configureert door middel van templates die je geheel naar eigen inzicht vormgeeft. We vallen meteen met de deur in huis. Weergaves/skins Content managers kunnen verschillende weergaves toekennen aan webpagina’s. Misschien heeft de homepage een heel andere layout dan andere pagina’s. Een contactformulier hoeft meestal niet op elke pagina getoond te worden. Door gebruik te maken van verschillende weergaves kun je simpele tot zeer gecompliceerde systemen configureren.
Inclusie-templates/includes FRONTBONE gaat ervan uit dat code wordt hergebruikt. Daarom werkt het systeem met inclusie- of invoegtemplates, die ‘includes’ worden genoemd. Het principe is simpel: vanuit een basistemplate, de ‘root’, worden includes aangeroepen, de verschillende stukken code worden aan elkaar geplakt en als een complete webpagina naar de browser gestuurd. Vanuit includes kunnen weer andere includes worden ingevoegd. Het voorbeeld hiernaast toont hoe een weergave ‘Contactpagina’ is opgebouwd aan de hand van het root-template ‘contact-pagina.tpl’ dat gebruik maakt van drie includes:
Zoals je ziet in de voorbeeldmappenstructuur hierboven bevinden alle templates die jij ontwikkelt zich in de skins-map. De skins-map zelf vindt je in jouw FTP-ontwikkelaccount.
FTP-ontwikkelaccount Voor zover je nog niet bent ingelogd in jouw account, is het handig om dat nu te doen. We beperken ons even tot de skins-map, die heeft standaard de volgende indeling: De letters ‘tpl’ staan voor template, dit geeft aan dat jouw webpagina’s zijn opgebouwd uit verschillende templates die samen een xhtml-pagina vormen.
In de skins-map vind je een bestand genaamd ‘default.frontbone.tpl’, in de Content Managementinterface wordt deze weergave ‘Standaard’ genoemd. Naast deze standaardweergave kun je in de root van de skins-map templates plaatsen die daardoor als weergave-optie beschikbaar komen voor content-managers. De templates die rechtstreeks in de root van de skins-map worden geplaatst, vormen samen de weergave-opties waarover een content-manager kan beschikken. Alle overige templates dienen in submappen van de skins-map te worden geplaatst, dat zijn dus geen weergaves maar includes. Standaard wordt FRONTBONE opgeleverd met twee submappen: een lege projectmap en een frontbone-map waarin een aantal templates staan die het systeem verwacht aan te treffen. Voor nu is dat niet belangrijk. Werkwijze frontend-ontwikkeling De meeste ontwikkelaars werken rechtstreeks op een server door gebruik te maken van een FTP-editor zoals DreamWeaver of HTML-kit. Je opent dan templates meteen vanaf de server en slaat bewerkingen ook rechtstreeks op, hierdoor hoef je niet telkens bestanden heen en weer te slepen in een FTP-programma. Uiteraard kun je ook lokaal werken en templates uploaden. Als je het ‘default.frontbone.tpl’-bestand al geopend hebt, weet je inmiddels dat het bestand leeg is, net als de projectmap. De reden hiervoor is dat wij geloven dat jij van meet af aan wilt bepalen hoe jouw applicatie eruit komt te zien. FRONTBONE probeert je dus ook niet een richting in te sturen. Om zo snel mogelijk aan de slag te kunnen is het echter handig een aantal voorbeelden te downloaden. Op die manier kun je meteen de code in actie zien. Download de volgende bestanden en sla deze op in de map ‘/skins/project/’. -
Open nu je browser en surf naar jouw ontwikkelaccount. Open daarnaast de drie bestanden in een texteditor, we lopen er stap voor stap doorheen. header.tpl In de header kom je meteen een aantal FRONTBONE-functies tegen. Zoals vermeld verwerkt het systeem automatisch metagegevens: title, description en keywords, mits het systeem de betreffende tags kan vinden. Zo kunnen content-managers zelf hun meta-informatie bewerken en kan het template overal worden hergebruikt. Notes/commentaar Verder zie je dat in het template commentaar is geplaatst met behulp van de ‘note’-tag. Alle notes worden genegeerd, in de output is het commentaar niet terug te vinden. Zo kun je nuttige aanwijzingen in templates plaatsen en stukken code tijdelijk uitzetten. Templates Vervolgens komen we de ‘template’-tag tegen waarmee includes worden ingevoegd. De header is zelf ook een include en wordt op dezelfde wijze ingevoegd in de ‘weergaves’. Zie voor meer informatie over de template-tag: - http://docs.frontbone.com/1.1/Template-module.pdf Dynamische verwijzingen Een onopvallende, maar erg belangrijke FRONTBONE-functie is het zoeken naar en vervangen van ‘./’-verwijzingen. In de header kom je bijvoorbeeld de volgende tag tegen:
Als je nu in je browser de source bekijkt zie je dat de verwijzing ‘./’ is vervangen door ‘http://fb.domein.sxx.frontbone.com/’. Jouw FTP-ontwikkelaccount draait namelijk onder een subdomein. Doordat FRONTBONE de verwijzingen dynamisch vervangt: -
hoef je niet alle verwijzingen uit te schrijven hoef je bij het verplaatsen van de site geen verwijzingen te vervangen kun je vanuit je stylesheet verwijzen naar een afbeelding met url(../images/afbeelding.gif)
Jouw ontwikkelomgeving is hierdoor volledig afgeschermd van de content-manager. De genoemde ‘./css/’-verwijzing verwijst naar de ‘css’-map in jouw ontwikkelaccount, voor ‘images’ en ‘js’ geldt dezelfde werkwijze. Overgens staat het je vrij zelf mappen aan te maken in jouw FTP-account voor zover je daar prijs op stelt.
Conditions De laatste functie die we tegenkomen in de header is de ‘condition’-tag. Hiermee kun je op basis van een conditie bepaalde inhoud wel of niet tonen. In het volgende voorbeeld kijkt het systeem welke browser een bezoeker gebruikt: Hello Explorer user
Een ander voorbeeld van een veel gebruikte conditie is: ‘is de gebruiker een administrator?’. Zie voor meer informatie over de condition-tag: - http://docs.frontbone.com/1.1/Conditions.pdf default.frontbone.tpl Wanneer je in het standaardtemplate kijkt zie je dat alle code wordt omsloten door note-tags. Dat is gedaan om zodirect een ‘fout’ te introduceren. Het menu ‘topmenu’ bestaat namelijk nog niet, het aanmaken van dat menu moet door een administrator worden bevestigd. Omdat jij op dit moment niet bent ingelogd in het Content Management Systeem zal FRONTBONE een foutmelding genereren. Dus verwijder de note-tags en bekijk het resultaat in je browser, log echter niet in in de beheeromgeving. Als alles ‘goed’ ging kreeg je onderstaande foutmelding:
FRONTBONE foutmelding Het is natuurlijk vervelend om tegen een foutmelding aan te lopen. Gelukkig probeert FRONTBONE je zo snel mogelijk weer op weg te helpen, door: -
duidelijk te melden wát er precies fout gaat het template te noemen waarin de fout is aangetroffen de regel, de tag en waar mogelijk het attribuut te highlighten waarin de fout is aangetroffen een inlogmogelijkheid te bieden voor admin-gerelateerde foutmeldingen
Wat we nu even niet doen is inloggen, in plaats daarvan gaan we naar het footer-template. footer.tpl Zoals te verwachten viel tref je in de footer de afsluitende tags voor de body en html aan. Daarnaast vind je hier een stukje javascript. Voor diegenen die denken “huh?” bij deze een korte technische uitleg van de werking van het script: Om te beginnen wordt een naamloze functie door zichzelf aangeroepen. Dat klinkt misschien vreemd, maar is in feite erg handig, de constructie ervan is de volgende: ( function () { /* code */ } )();
Als je nu denkt “euh... moet ik dit allemaal begrijpen?” dan is het antwoord: nee. FRONTBONE biedt echter scripters een javascript-framework, waarvan de Content Management-interface zelf ook gebruik maakt. In de footer wordt gebruik gemaakt van het FB.key-object, waarmee op relatief eenvoudige wijze een in- en uitlogfunctie kan worden gebouwd: -
inloggen: ALT + SHIFT + I uitloggen: ALT + SHIFT + U
De naamloze functie koppelt het onkeydown-event van het html-object aan een functie die kijkt welke toetsen zijn ingedrukt. Het FRONTBONE javascript framework heeft listener-objecten die in geval van een event alle aangesloten listeners op de hoogte stellen. In dit geval wordt gebruik gemaakt van de listener FB.key. Als je denkt “dat kan ik beter..!” dan is het prettig om te weten dat afgezien van een aantal Arrayprototypes alle FRONTBONE-javascript zich bevindt onder het FB-object. De code is compatible met populaire frameworks als jQuery, Prototype en script.aculo.us en is volledig open-source. Voor we verder gaan plaatsen we de note-tags terug in default.frontbone.tpl en verversen we de browser. Het scherm is weer leeg als alles goed is gegaan.
Inloggen Nu loggen we in door ALT+SHIFT+I in te toetsen, gebruik de admingegevens die je hebt toegestuurd gekregen. Zoals vrijwel alle bewerkingen werkt het inloggen met ajax. De beheerinterface werkt met layers die bovenop de layout worden geplaatst. Hierdoor kan de frontend tegelijkertijd als backend functioneren. Als je er prijs op stelt kun je alle layers en overige interface-elementen zelf opmaken. Nu we zijn ingelogd is het tijd om de note-tags weer te verwijderen uit het standaardtemplate. Omdat je nu bent ingelogd als beheerder is het toegestaan menu’s en dergelijke aan te maken. Daarom verversen we nogmaals de browser. <module name="menu" id="topmenu" offset="1"/>
De bovenstaande regel code levert een melding op: FRONTBONE detecteert nu een nieuwe instantie van de menu-module genaamd ‘topmenu’. De reden dat om bevestiging wordt gevraagd is het voorkomen van bugs door spelfouten. Klik ‘OK’ om het menu aan te maken. Kijk vervolgens in de source om te zien hoe FRONTBONE het menu omzet in UL-output.
De output van een menu is in beheermodus anders dan in standaardmodus. Als je bent ingelogd, worden een aantal toevoegingen gedaan om (a) de beheerinterface te activeren en (b) onderscheid te maken tussen online en offline menu-items voor de content-manager.
Voor informatie over de exacte werking van de menu-module verwijzen we je door naar de documentatie over dit onderwerp. Zie voor meer informatie over de menu-module: - http://docs.frontbone.com/1.1/Menu-module.pdf Broodkruimelpad/breadcrumb Een andere module die je aantreft is de ‘breadcrumb’. Zie voor meer informatie over de breadcrumb-module: - http://docs.frontbone.com/1.1/Breadcrumb -module.pdf Document-module Met de documentmodule voeg je contentvlakken in die met een teksteditor kunnen worden bewerkt door content-managers. Omdat je 1 of meer contentvlakken kunt invoegen moet elke tag voorzien worden van een id. Wanneer een content-manager een webpagina aanmaakt, zijn alle ingevoegde contentvlakken leeg. Door middel van een rechtsklik op een contentvlak kan de inhoud ervan worden bewerkt. Zie voor meer informatie over de document-module: - http://docs.frontbone.com/1.1/Document -module.pdf Overige modules FRONTBONE levert nog veel meer functionaliteiten. Je kunt met het systeem bijvoorbeeld geavanceerde webwinkels ontwikkelen. Met de functionaliteiten die nu kort zijn behandeld kun je al goed uit de voeten, als het gaat om Content Management-applicaties. Het is belangrijjk alle basisfunctionaliteiten en de werking van het systeem in z’n algemeenheid goed te begrijpen, om vervolgens het systeem volledig naar jouw hand te kunnen zetten. Ten slotte De beurt is nu aan jou. Jij weet zelf het beste hoe je graag werkt en wat je verwacht van jouw internet applicaties. Je hebt nu een indruk van hoe je te werk kunt gaan en hoe je met FRONTBONE in een mum van tijd complete Content Management-applicaties in elkaar sleutelt. Wij wensen je veel succes en vooral plezier! We kunnen ons voorstellen dat je met vragen komt te zitten. Neem vooral contact met ons op via [email protected], we horen graag van je. Ook als het gaat om feature-verzoeken en feedback. Disclaimer Aan de inhoud van dit document kunnen geen rechten worden ontleend. Dit document is met de grootste zorg samengesteld. FRONTBONE is daarentegen niet aansprakelijk voor onjuistheden, onvolkomenheden en/of schade ontstaan door het gebruik van informatie ontleend aan dit document.
