Tot voor kort heb ik Javascript nooit echt serieus genomen. Die perceptie kwam voornamelijk door slechte programmeurs die hun beste beentje voorzetten op websites en allerlei plaatjes over het scherm lieten vliegen. Ook het inline definiëren van functies resulteert al snel in een brei ongestructureerde code. Voor mij leek het gewoon onmogelijk om enigssinds object-geörienteerd te werken met deze taal.
Toch ben ik er sinds een tijd wel wat serieuzer mee bezig en is Javascript niet zo slecht als ik dacht. Er zitten wel een aantal verschrikkingen in deze taal, waaronder de dynamische scoping, waardoor je door wat brandende hoepels moet springen om toch bij de juiste objecten te kunnen (var that = this voor de insiders). Wat ik wel goed vind aan deze taal is het feit dat functies gewoon eerste-klas objecten zijn. En dat het dus wel degelijk mogelijk is om object-geörienteerd programmeren te benaderen.
Javascript wordt vaak ten onrechte afgebrand vanwege de DOM-structuur binnen de browser. Toegegeven, die structuur is ook een rommeltje, maar Javascript is daar echt de schuld niet van. Het is uiteindelijk de browser die dit allemaal aanbiedt, Javascript gebruikt het enkel. Om me bergen ergernis te sparen gebruik ik ook voornamelijk Javascript-libraries die het vuile werk voor me opknappen; met name JQuery en JQuery-UI.
Maar ik wil het deze keer niet hebben over websites, want Javascript bestaat ook buiten het WWW. Javascript is de laatste jaren sterk in opkomst in andere gebieden, in de vorm van extensies voor je browser of voor je desktop. Vooral dat laatste gaat nu even m'n interesse naar uit. Zoals je wellicht weet, kan het bureaublad van KDE uitgebreid worden met widgets om allerhande onzin op je bureaublad te toveren, zoals klokken, strips of zelfs complete webbrowsers. Het schrijven van zo'n widget kan in meerdere talen gedaan worden, zoals C++, Python en Javascript. Het nadeel van C++ is dat het binnen het geheugenbereik van KDE Plasma draait: crasht je widget dan crasht de hele desktop. Python en Javascript, beide scripttalen, kennen dit nadeel niet. Omdat het geïnterpreteerde talen zijn zal alleen je widget in de soep lopen en het bureaublad zal overeind blijven staan. Dit is de reden waarom programmeurs aangemoedigd worden om hun widget in een scripttaal te schrijven in plaats van C++.
Javascript is op dit gebied een nieuwkomer. De basisfunctionaliteit zat al een tijdje in KDE, maar voor versie 4.4.0 is er veel werk verricht om er serieus mee aan de slag te gaan. Je hebt daarvoor niet veel nodig, het geïnstalleerd hebben van kdebase-runtime is voldoende. De Javascript-API die hiermee meekomt bevat allerlei standaardwidgets (labels en knoppen), mogelijkheden om alles netjes in een layout te stoppen en een aantal animaties die je op widgets kan toepassen (roteren of vervagen). Bovendien kan je, net zoals in Qt-programmeren in C++, je widgets aan elkaar knopen met signals en slots.
Om aan de slag te gaan maak je een mapstructuur aan:
contents/
code/
main.js
metadata.desktop
Metadata.desktop bevat een aantal gegevens over je widget, zoals een naam en naam van de auteur, maar ook welk bestand het moet uitvoeren als de widget geladen wordt.
Name=CoolButton
Comment=Awesome widget which allows you to click a button!
Icon=chronometer
Type=Service
X-KDE-ServiceTypes=Plasma/Applet
X-Plasma-API=javascript
X-Plasma-MainScript=code/main.js
X-Plasma-DefaultSize=200,100
X-KDE-PluginInfo-Author=Bram Schoenmakers
X-KDE-PluginInfo-Email=bramschoenmakers@example.com
X-KDE-PluginInfo-Name=coolbutton
X-KDE-PluginInfo-Version=1.0
X-KDE-PluginInfo-Website=http://plasma.kde.org/
X-KDE-PluginInfo-Category=Examples
X-KDE-PluginInfo-Depends=
X-KDE-PluginInfo-License=GPL
X-KDE-PluginInfo-EnabledByDefault=true
Dan kan je vervolgens invulling geven aan het bestand main.js (een uitbreiding van het voorbeeld van de Getting Started-gids op KDE Techbase):
function onClick()
{
var s = 'Clicked ' + counter + ' times.';
label.text = s;
print( s );
++counter;
}
button = new PushButton;
button.clicked.connect( onClick );
button.text = 'Click me!'
label = new Label;
button.clicked();
layout = new LinearLayout;
layout.orientation = QtVertical;
layout.addItem( button );
layout.addItem( label );
Zoals je ziet is de manier van werken vrij gelijk aan GUI-programmeren in de 'grotere' talen als C++ en Java. In dit voorbeeld zie je hoe een knop en een label aan de widget worden toegevoegd. Iedere keer dat er op de knop gedrukt wordt zal het label aangepast worden in de functie onClick(), en wordt dezelfde tekst op de standard output geprint.
Om de widget uit te voeren, ga je naar de hoofdmap van je widget (daar waar metadata.desktop zich bevindt) en voer je uit:
Dit zal een klein venstertje openen met daarin je applet. Zo kan je eenvoudig je widget testen zonder het toe te hoeven voegen op je bureaublad.
Een aantal aanvullingen die niet in het bovenstaande voorbeeld te zien zijn. Naast de print()-aanroep heb je ook nog debug(). Merk op dat deze functies in KDE 4.4.0 helaas niet werken. Volgende week komt KDE 4.4.1 uit waarin dit probleem verholpen is.
In tegenstelling tot Javascript in de webbrowser, kan je hier gebruik maken van includes. Dit doe je met de volgende regel:
Zoals je ziet is er dus een globaal plasmoid-object beschikbaar dat een aantal functionaliteiten levert voor je widget. Naast includes biedt dit object functionaliteit aan om configuratie in te lezen en weg te schrijven en om een aantal aspecten van je widget te bepalen door functies te overschrijven.
Wanneer je klaar bent kan je je applet inpakken in een bepaald formaat zodat anderen eenvoudig de widget kunnen toevoegen op hun bureaublad. Dit doe je door je hoofdmap te zippen. Ga naar de hoofdmap toe en voer uit:
mv ../coolbutton.zip ../coolbutton.plasmoid
Dit bestand kan je vervolgens online zetten zodat anderen het met een eenvoudig commando kunnen installeren:
Met het plasmapkg-commando kan je ook weer widgets verwijderen:
Dit is de basis om een widget in Javascript te maken. Als je hiermee aan de slag wilt een lijst van links die je verder op weg zullen helpen:
- Getting Started op KDE Techbase
- De volledige Javascript-API
- Voorbeelden - Op SVN vind je een aantal voorbeeldwidgets geschreven in Javascript. Handig om bepaalde constructies op te zoeken.
Voor het laatste duwtje in de rug: er is een wedstrijd uitgeschreven voor het schrijven van widgets in Javascript. Wie voor 31 maart 2010 de beste widget schrijft wint een Nokia N900 (inderdaad, die coole Linux-telefoon). Kijk op plasma.kde.org voor meer informatie. Succes!