Udvikling med MochaUI – vinduer i browseren

Vi har for nylig udviklet et mindre projekt ved hjælp af et javascript-kodebibliotek kaldet MochaUI. MochaUI er designet til at kode en brugeroplevelse, der svarer til hvordan man benytter vinduer og popup-boksen på en normal desktop. Der er ikke så meget roderi med HTML og CSS ved det. Faktisk behøver man ikke beskæftige sig stort med den markup, der beskriver selve vinduerne, kun indholdet i dem. At åbne et nyt vindue:

open_url = "http://www.example.dk/ajaxcustomer.php?uid=" + uid;
open_title = "Kunde: " + first_name + " " + surname;

new MochaUI.Window({
  'id' : 'customer-window',
  'contentURL' : open_url,
  'loadMethod' : 'xhr',
  'title' : open_title,
  'width' : 550,
  'height' : 630
});

Denne kode vil åbne et nyt vindue med dimensionerne 550px * 630px, via metoden “XmlHttpRequest” med indholdet fra URL’en specificeret i “open_url”. Vinduet får titlen i “open_title”. Vinduet kan frit flyttes rundt og flere vinduer kan overlappe hinanden. Vinduet bliver givet et id, som kan fanges på normal vis:

window = document.getElementById('customer-window');

Eller med JQuery:

window = $('#customer-window');

Skal man af med vinduet igen:

if (window) {
  MochaUI.closeWindow(window);
}

Bemærk her, at MochaUI i modsætning til eksempelvis JQuery kræver, at elementet findes og er af korrekt type, inden man manipulerer det. Hvis man ikke kontrollerer på eksistensen af elementet, så giver Javascript en fejl. Dette var nogle ganske korte kodeeksempler. Uden at have den store kodeerfaring med MochaUI endnu, synes vi, at det virker lovende.

Se en demo af MochaUI her.