După cum am văaut în articolul inițial, modulul de limbaj UI JavaScript (JUL) poate fi folosit pentru a converti o sarcină substanțială de programare într-o scriere a unei configurații.
Acest lucru este posibil deoarece JUL gestionează fazele de configurare și de instanțiere într-un mod standardizat pentru orice framework JavaScript bazat pe componente. Și, deoarece obiectivul majorității acestor framework-uri este o aplicație cu interfață complexă (RIA) ce rulează în browser, JUL oferă un mod unitar de a descrie structura și logica interfeței pentru aplicațiili browser bazate pe evenimente.
Pentru a-i putea utiliza pe deplin capacitățile, vom vedea în cele ce urmează conceptele pe care se bazează JUL. Toată discuția se va purta în contextul programării JavaScript și DOM cât timp nu se specifică altfel.
Obiect de configurare
Un obiect de configurare este un obiect JavaScript care poate avea următoarele tipuri de membri:
- toate tipurile valide JSON: șir de caractere, număr, boolean, nul, obiect, vector
- o instanță RegExp
- definiția unei funcții (adică o instanță Function)
- un obiect de configurare
- un vector de obiecte de configurare
Exemplu:
APP.codeUi = {
tag: 'dialog',
id: 'dialog-code',
title: 'Code',
hidden: true,
width: 700,
height: 330,
children: [
{tag: 'textbox', id: 'textbox-code', width: '100%', multiline: true, flex: 1}
],
listeners: {
dialogaccept: function() {
APP.saveCode();
return false;
},
dialogcancel: function() {
APP.cancelCode();
return false;
}
}
};Arbore de configurare
Un arbore de configurare este o ierarhie de obiecte de configurare cu obiectul rădăcină având anumiți membri (vectori de) obiecte de configurare și așa mai departe pentru descendenți.
Spațiu-nume de configurare
Un spațiu-nume de configurare este un obiect de configurare ai cărui membri pot fi funcții constructor.
Exemplu:
JUL.UI = {
lassProperty: 'xclass',
defaultClass: 'Object',
...
// următoarea funcție este folosită drept constructor
Parser: function(oConfig) { ... },
...
};Cale punctată
O cale punctată sau o cale pe obiecte este șirul de caractere ce reprezintă variabila JavaScript necesară pentru a accesa ca membru un obiect pornind de la obiectul global JavaScript ca rădăcină (ex. window). O cale punctată folosește doar puncte pentru a-și separa segmentele (inclusiv pentru segmentele numerice).
Exemplu:
APP.mainWindow = {
xclass: 'Window',
align: 'center',
width: 1100,
height: 500,
children: [
{xclass: 'Toolbar', items: [
{xclass: 'Button', icon: 'img/open.png', caption: 'Open'},
{xclass: 'Button', icon: 'img/save.png', caption: 'Save'},
{xclass: 'List', label: 'Export', options: ['pdf', 'text', 'xml']}
]},
...
]
};
// obținere vector listă de opțiuni folosind o cale punctată
var aOptions = JUL.get('APP.mainWindow.children.0.items.2.options');Serializare consistentă
Serializarea consistentă este serializarea unui obiect JavaScript ce produce cod JavaScript echivalent de-a lungul diferitelor medii runtime (ex. bbrowser-e). Codul rezultat trebuie să producă un obiect având aceiași membri non-prototip pentru toate aceste medii. În JUL, serializarea consistentă trebuie să producă același obiect de configurare ca și cod JavaScript pentru toate browser-ele importante.
Observație: Obiectul ce se serializează nu trebuie să nu fie neapărat identic cu obiectul produs de codul serializat JavaScript.
Exemplu:
var oTest = {
name: 'type',
maxLength: 10,
allowedValues: /^(boolean|numeric|string)$/i,
listeners: {
onBlur: function() {
if (!this.value) { return false; }
}
}
};
// următoarea linie produce cod JavaScript echivalent în toate browser-ele majore
var sCode = JUL.UI.obj2str(oTest);Membri speciali
Un obiect de configurare poate avea printre alții, următorii membri speciali:
- proprietatea clasă – un șir de caractere ce reprezintă numele clasei componentei create de obiectul de configurare.
- proprietatea copii – un vector de obiecte de configurare pentru care JUL va crea componente copil.
- proprietatea alți membri – servește aceluiași scop precum proprietatea copii, permițând ierarhii multiple în același obiect de configurare. Acești membri permit de asemenea scrierea sub o formă mai compactă a arborelui de configurare.
- proprietatea ID – dacă w prezentă, oferă baza separării structurii de logică pentru arborii de configurare. Poate fi folosită și pentru a identifica instanțele componentelor.
Pentru lista completă a membrilor speciali, urmăriți vă rog paragraful următor despre parser-ul JUL.
Parser-ul JUL
Un parser JUL este o instanță a clasei JUL.UI.Parser folosită pentru a crea un întreg arbore de componente dintr-un arbore de configurare. Procesul de creare instanțiază componentele într-o anumită ordine (ex. de la părinte către copii).
Exemplu:
var oParser = new JUL.UI.Parser({
defaultClass: 'xul',
useTags: true,
customFactory: JUL.UI.createDom,
topDown: true
});Rutina parser-ului acceptă un obiect de configurare ce oferă informația necesară pentru construcția arborelui de componente.
Proprietățile de configurare ale parser-ului sunt:
- classProperty – numele proprietății clasă în obiectul de configurare – implicit ‘xclass’.
- defaultClass – numele clasei implicite dacă numele clasei nu e specificat de către obiectul de configurare – implicit ‘Object’.
- childrenProperty – numele proprietății din obiectul de configurare ce conține un vector de obiecte de configurare – implicit ‘children’.
- membersProperties – este un vector de nume cu scop similar cu childrenProperty permițând ierarhii multiple sub aceeași configurație părinte – implicit [].
- IdProperty – numele proprietății ID a obiectului de configurare – implicit ‘id’. Permite identificarea componentelor, publicarea lor runtime prin căi de nume specificate și separarea structurii de logică pentru obiectul de configurare.
- bindingProperty – permite separarea structurii de logică similar cu idProperty dar nu va fi pasată constructorului componentei – implicit ‘cid’. Nu poate fi folosită pentru identificarea componentei dar oferă o modalitate pentru moștenirea obiectelor incluse – a se vedea includeProperty.
- topDown – boolean ce precizează că parser-ul va instanția componentele de sus în jos sau de jos în sus – implicit false. Pentru procesarea de jos în sus copiii sunt creați mai întâi, iar pentru procesarea de sus în jos părinții sunt creți primii.
- customFactory – o funcție căreia îi va fi pasat un obiect de configurare. Va fi folosită în loc de constructorul ‘new’ – implicit null.
- parentPropery – numele proprietății obiectului de configurare căreia îi va fi atribuită automat instanța componentei părinte – implicit ‘parent’. Este folosită doar pentru instanțierea de sus în jos.
- useTags – dacă sau nu se utilizează o proprietate tag în loc de classProperty – implicit false. Pentru limbajele DOM (ex. HTML, XML, SVG, XUL etc.), puteți seta defaultClass la ‘html’ de exemplu, iar apoi utiliza proprietatea tag pentru a preciza ce componentă va fi construită.
- tagProperty – numele proprietății tag pentru a instanția un element DOM – implicit ‘tag’. JUL.UI are și o funcție specializată numită ‘createDom’ pentru a asista la construirea elementelor DOM.
- includeProperty – permite includerea explicită a altui obiect de configurare în cel curent – implicit ‘include’. Obiectul curent este aplicat peste obiectul inclus.
Pentru informații complete despre configurarea oarser-ului, vă rog să consultați topicul aferent din API Reference .
Concluzie
Acestea au fost câteva concepte de bază pentru început. Concepte avansate și o serie de tutoriale vor urma.
Constructorul Zonal