De context menu's worden automatisch gegenereerd uit de structuur die is gedefinieerd in de XML Schema Defenitie (XSD). De screenshot hieronder toont een stukje van de XSD. De XSD bevat definities voor elk element in de Shazzoo editor. In de screenshot zie je bijvoorbeeld de elementen 'column 3' en 'textbox'. Beide elementen fungeren als een container voor andere elementen. Hier voegen we ook de search component aan toe. De groene pijlen laten zien dat de Search component is geplaatst in zowel 'column 3' als 'textbox'. Als we niet willen dat de search component beschikbaar is in de 'Textbox' kunnen we dat gewoon definiëren in de XSD.

Nadat de component is opgenomen in de XSD, definiëren we deze component zelf ook in de XSD. De screenshot hieronder toont een gedeelte van de nieuwe zoek component definities. Hier kunnen de eigenschappen van de component zoals data type, selecteerbare waarden, standaardwaarde, verberg regels, input validaties, input vertaling etc. worden vastgelegd.

De syntax van de <conditions> xml is door Shazzoo ontwikkeld. Het ondersteunt simpele tot complexe constructies. De JavaScript-engine maakt gebruik van deze voorwaarden om te valideren of waarden in een component correct zijn ingevoerd.

In het screenshot bij de vorige stap zagen we component attributen zoals 'search_engine', 'search_google_cseid', 'search_google_ads' etc. en waarden als 'google', 'domino', 'bubblegum' enz. Deze attributen en waarden gebruiken labels om weer te geven in de component eigenschappen van Shazzoo. Shazzoo ondersteunt meerdere talen welke allemaal een eigen vertalingsbestand hebben. Hieronder ziet u een screenshot het Engelse XML-bestand

.

Zodra een gebruiker een zoek component invoegt in een web pagina, wordt de data voor deze component in het volgende XML formaat opgeslagen:

We gebruiken een XML stylesheet (XSL) om deze XML naar XHTML te vertalen zodra de pagina wordt geserveerd. Het bewaren can component data in XML formaat biedt belangrijke voordelen:

• Indien je de HTML voor de component wilt wijzigen, wijzig je de XSL. Alle pagina's waar de component gebruikt wordt zijn vervolgens geactualiseerd.
• Eenvoudige conversie naar nieuwe (X)HTML standaarden zoals HTML5. Wijzig eenvoudigweg de HTML output in de XSL.
• Uitgebreide zoek en vervang opties.
• Uitgrebreide data uitwisselings opties met andere (backend) systemen.

Het screenshot hieronder toont het gedeelte van de XSL, waar onze nieuwe zoek component vertaald wordt naar de correcte HTML.

In de vorige stap gebruikten we een XSL om XML te vertalen naar HTML. Deze HTML bevat classes welke verwijzen naar stijlen in een cascaded style sheet (CSS). Onderstaande screenshot laat zien hoe de CSS stijlen gedefinieerd zijn.

Sommige componenten gebruiken javascript voor interactie met de bezoeker. Deze nieuwe search component gebruikt bijvoorbeeld een JavaScript om alle data van en naar de backend server te verwerken, wanneer een gebruiker een full text search op Lotus Domino uitvoert. Nadat een bezoeker een query invoert en op 'Search' klikt zend de Javascript een XML pakketje naar de server:

Een server script verwerkt het verzoek en stuurt de volgende XML response terug naar de client, waar de JavaScript hem weer opvangt en vertaalt naar HTML.

De screenshot hieronder laat enkele stukken JavaScript zien, welke worden gebruikt door de search component. Deze JavaScript library is beschikbaar in iedere web pagina.

In de vorige stap werd een XML fragment naar de server gestuurd. Een server script verwerkt vervolgens de XML en stuurt in XML formaat een antwoord terug naar de browser. Bij de XML bestanden staat toegelicht in de vorige stap.

Hieronder staan een tweetal screenshots van de server LotusScript waarmee de XML wordt verwerkt en geretourneerd aan de browser. Het is geen probleem als de backend niet Domino is. Een alternatieve server scripting taal (i.e. PHP, ASP etc..) zal dezelfde acties uitvoeren.