Bijlage A. Stijlgids voor het chat-venster van Kopete

Stijlreferentiegids voor het chat-venster van Kopete.

Beginnend met Kopete 0.12, gebruiken we nu het format Adium voor de stijl van ons chat-venster. Het themaformat is gebaseerd op HTML sjablonen enCSS. Ze zijn gemakkelijker te maken en te ontwikkelen; er is alleen kennis van HTML en CSS nodig. Ook stijlen kunnen varianten hebben (gedefinieerd als CSS-bestand) die meer waarde toevoegen aan aanpassen :).

Referentiegids.

Het Adium-format bestaat uit een mapstructuur, HTML-sjablonen, CSS-bestanden en sleutelwoorden die worden vervangen elke keer dat het sjabloon wordt verwerkt. De uiteindelijke conversatie is een XHTML-pagina waaraan berichten worden toegevoegd met DOM-bewerkingen. Het centrale element is een div-element genaamd Chat. Voor en na dit div-element bevindt zich het Header- en Footer-sjabloon. Berichten zijn Nakomelingen van het div-element Chat.

Mapstructuur

Een stijl moet deze mapstructuur respecteren. De code in Kopete is gebouwd rond deze mapstructuur. Bij het archiveren van de stijl, archiveer dan de map styleName. De mapstructuur is een structuur van een Mac OS X-bundel voor hen die bekend zijn met dat besturingsysteem. U moet de hoofd-/kleine letters, die hier getoond worden respecteren, omdat een UNIX-systeem hiervoor gevoelig is.

styleName\ (kan .adiumMessageStyle als achtervoegsel hebben, omdat het in Mac OS X een bundel is)
        Contents\
                Info.plist
                Resources\
                        main.css
                        Header.html
                        Footer.html
                        Status.html
                        Incoming\ (and Outgoing\)
                                Content.html
                                NextContent.html (for consecutive messages)
                                Context.html (for message history)
                                NextContext.html
                                Action.html
                        Variants\
                                *.css

Over <div id="insert"></div>

Dit is een speciaal div-element dat intern wordt gebruikt. Het is een plaatshouder om aan te geven waar het volgende bericht in te voegen. Als het een nieuw bericht is, dan wordt het verwijderd en het nieuw bericht gebeurt. Maar als het een opvolgend bericht is, dan wordt het div-element vervangen door de inhoud van het nieuwe bericht. Dit speciale div-element is vereist in Content-,Context-,NextContent- en NextContext-sjablonen. Het is geen probleem om het ook in Action- en Status-sjablonen te zetten.

HTML-sjablonen.

Beschrijving van het sjabloon.

Header.html (Vereist)

Gebruik het Header-sjabloon om een mooie kop van de conversatie weer te geven. Dit sjabloon wordt ingevoegd voor het div-element Chat. Als u het niet gebruikt, zet er dan een leeg bestand neer.

Footer.html (Vereist)

Dit is meestal hetzelfde als het Header-sjabloon, het is er echter voor de voet van de conversatie. Dit sjabloon wordt ingevoegd achter het div-element Chat. Als u het niet gebruikt, zet er dan een leeg bestand neer.

Status.html (Vereist)

Dit sjabloon wordt gebruikt om een intern bericht weer te geven. Interne berichten zoals een statuswijziging, bericht vanuit Kopete (bijv. inkomende bestandsoverdracht). Wanneer de stijl geen Action-sjabloon levert, wordt het gebruikt om het Action-bericht weer te geven.

Incoming/Content.html, Outgoing/Content.html (Vereist)

Het sjabloon voor inhoud is het hart van het bericht. Denk er aan als een blok dat het bericht bevat. Zorg er voor dat het opvolgende berichten kan ontvangen; ontwerp het niet om maar één bericht te ontvangen. Opvolgende berichten zullen ingevoegd worden op de plaats van het div-insert-element.

Incoming/NextContent.html, Outgoing/NextContent.html (Vereist)

Het NextContent-sjabloon is een berichtfragment voor opvolgende berichten. Het zal worden ingevoegd in het hoofd berichtenblok. Het HTML-sjabloon zou het absolute minimum bevatten om een bericht weer te geven.

Incoming/Action.html, Outgoing/Action.html (Optioneel) (Kopete-extensie)

Dit sjabloon is een extensie van Kopete naar het Adium-format. Het is beschikbaar voor de richting inkomend en uitgaand. Actieberichten zijn speciale berichten om te vertellen dat er een actie gedaan wordt. Voorbeeld: "/me is Kopete aan het installeren" zou worden weergegeven als "DarkShock is Kopete aan het installeren".

Incoming/Context.html, Incoming/NextContext.html, Outgoing/Context.html, Outgoing/NextContext.html (Optioneel)

Deze sjablonen worden in Kopete niet gebruikt. In Adium worden ze gebruikt om de geschiedenis weer te geven. Het is meestal hetzelfde ding als Content en NextContent maar met enige verschillen om ze van normale berichten te onderscheiden.

Over CSS-stijlen en varianten

Het sjabloon voor HTML wordt gebruikt om te beschrijven hoe de structuur is opgebouwd. Echter alle stijl is beschreven in CSS-bestanden. main.css is de hoofdstijl, waar varianten eenvoudig wijzigingen zijn van de hoofd stijl. Voorbeelden van varianten zijn verschillende kleuren, geen weergave van een foto van de gebruiker. Beide main.css en varianten worden geïmporteerd in uiteindelijke XHTML-pagina.

-main.css

Dit is het hoofd CSS-bestand dat gemeenschappelijk is voor alle varianten. Dit bestand moet alle hoofd beschrijvingen van de stijl bevatten.

-Varianten

Varianten zijn CSS-bestanden gelocaliseerd in de map Variants/. Elke variant is een enkel CSS-bestand die ingevoegd wordt in main.css en de hoofdstijl wijzigen.

Stijlen debuggen

Hier zijn twee tips voor het testen van een stijl tijdens het aanmaken.

-Een voorbeeld conversatie opslaan.

In het chat-venster kunt u een conversatie opslaan. Dit is een kopie van de interne weergegeven XHTML-pagina. Gebruik het in Konqueror om uw CSS-bestanden te testen.

-Stijlbuffer uitschakelen.

Er bestaat een kleine configuratioeschakelaar om de stijlbuffer uit te schakelen. Indien ingeschakeld, herlaadt het telkens de HTML-sjablonen wanneer er om de stijl wordt gevraagd. Voeg de volgende regels toe aan uw kopeterc. Zeer bruikbaar bij het testen van een stijl in Kopete

[KopeteStyleDebug]
disableStyleCache=true

Naslag van sleutelwoorden

Sleutelwoorden lijken op gaten die met details gevuld moeten worden. In elk nieuw bericht worden ze vervangen door de juiste waarde die overeenkomt met hun context. Om alle functies van Kopete te ondersteunen, hebben we enkele extensies van sleutelwoorden toegevoegd aan Adium. Enkele sleutelwoorden zijn alleen in een bepaalde context beschikbaar.

Lijst met sleutelwoorden voor Header- en Footer-sjablonen.

Deze sleutelwoorden worden aan het begin van de chat verwerkt.

%chatName%

Dit is de naam van de huidige chat-sessie. Voor een typische sessie, toont het de naam van de contactpersoon en zijn status. Voor IRC, toont het het onderwerp van een kanaal.

%sourceName%, %destinationName%

Dit zijn de namen van de contactpersonen voor een chat-sessie. %sourceName% is uw naam. %destinationName% is de naam van de contactpersoon waarmee u aan het converseren bent. Geef de voorkeur aan %chatName% boven de eerdere, omdat ze verwarrend kunnen zijn bij groepchat en IRC.

%incomingIconPath%, %outgoingIconPath%

Dit zijn de afbeeldingen/foto's/avatars van de contactpersonen voor een chat-sessie. Inkomend representeert de foto van de contactpersoon en uitgaand representeert uw eigen foto. Als er geen foto beschikbaar is, gebruikt het afbeelding buddy_icon.png die zich in de map Incoming of Outgoing bevindt.

%timeOpened%, %timeOpened{X}%

Het is de begintijd van de chat-sessie. %timeOpened% gebruikt het standaard tijdformat voor de huidige taalregio. Als u een specifiek tijdformat wilt gebruiken, gebruik dan %timeOpened{X}% waar X een tekenreeks is die het tijdformat bevat. De tijdparameters zijn hetzelfde als in de glibc-functie strftime. Geef het commando man strftime om de lijst met beschikbare parameters te krijgen.

Lijst met sleutelwoorden voor Content-, NextContent-, Context-, NextContext- en Action-sjabloon

Hun sleutelwoorden worden verwerkt voor elk bericht.

%userIconPath%

Dit is de afbeelding/foto/avatar van de contactpersoon behorende bij het bericht. Als er geen foto beschikbaar is, dan gebruikt het de afbeelding buddy_icon.png die zich bevindt in de map Incoming en Outgoing afhankelijk van de richting van het bericht.

%senderScreenName%

Dit is de contact-ID van het contact geassocieerd met het bericht. Voorbeelden: me@hotmail.com, 45566576, JanJansen.

%sender%

Dit is de naam van de contactpersoon behorende bij het bericht. Het gebruikt MetaContact weergave van de naam als een bron.

%service%

toon de naam van de service verbonden met het bericht. Voorbeelden: Jabber, Yahoo, MSN.

%textbackgroundcolor{X}%

Dit sleutelwoord wordt in Kopete, gebruikt om de achtergrondkleur voor accentueren aan te geven. Negeer de parameter in de haakjes en gebruik het alleen als %textbackgroundcolor{}.

%senderStatusIcon% (Kopete extensie)

Toon het statuspictogram van de contactpersoon behorende bij het bericht. Het is een bestandspad.

%senderColor%, %senderColor{N}% (Kopete extensie)

Genereer een kleur uit de id van de zender. Kan worden gebruikt om een andere kleur te tonen voor de schermnaam van de contactpersoon.

%senderColor{N}% waar N een positief getal is. Als N groter dan 100 is, dan vertegenwoordigt het een lichtere kleur dan de kleur van de contactpersoon. Als N gelijk is aan 150 is een kleur 50% meer helder. Als N kleiner is dan 100 dan is een kleur donkerder. Bruikbaar voor het hebben van een achtergrondkleur die anders is dan voor elke contactpersoon.

Als u deze kleuren in een variant wilt gebruiken, maar niet in de hoofdstijl, dan moet u er omheen werken.


<div style="color:%senderColor%;border:none;border-color:%senderColor{40}%;"
><p class="message"
>...</p
></div>

u kunt kleur toekennen aan het p.message-element in uw bestand main.css en in uw variant iets stoppen zoals

p.message { color:inherit; border-color:inherit; }

Gezamelijke lijst met sleutelwoorden voor berichten en Status.html

%message%

Het bericht zelf. Dit is een HTML-fragment.

%time%, %time{X}%

Het tijdstip dat het bericht is ontvangen. %time% gebruikt het standaard tijdformat voor de huidige taalregio. Als u een specifiek tijdformat wilt gebruiken, gebruik dan %time{X}% waar X een tekenreeks is die het tijdformat bevat. De tijdparameters zijn hetzelfde als de glibc-functie strftime. Geef man strftime om de lijst met beschikbare parameters te verkrijgen.

%messageDirection% (Kopete-extensie)

Geeft de richting van het bericht aan, als het bericht van rechts naar links of links naar rechts moet worden getoond. De waarden zijn "rtl" of "ltr". Lees Richtlijn voor richting van bericht om te zien hoe dit sleutelwoord juist te gebruiken.