Archive for JavaScript
04.08.08
Posted in JavaScript at 3:32 am by rast
…în război cu “totul este întreruperea dialogului interior” 
să vedem, care este mai totalitar/totalitarist.
Dacă pentru extJS aş putea aduce argumente practice (aplicaţii gata realizate şi funcţionale), pentru dialogul interior numai practica fiecăruia ar putea, Internet-ul cu toate tehnologiile lui cele mai noi şi sofisticate este neputincios.
Dar de ce afirmaţia din titlu? Pentru că în extJS se poate face ORICE. Sunt persoane/programatori web, care se plâng de mărimea foarte mare a bibliotecii extJS, peste 0,5 MB.
Sunt site-uri care, pentru a realiza diferite funcţionalităţi, încarcă multe JavaScript-uri, adunate… poate nu dau chiar 0,5 MB… dar câte odata…
Ar mai fi si un beneficiu al programatorilor. În loc să ştie o multitudine de JavaScipt-uri şi ce funcţionalităţi au ele, plus de a cunoaşte cât de cât codul pentru diferite modificări/adaptări cerute de diferiţi clienţi/necesităţi ale site-ului, învaţă doar unul singur: extJS-ul - ce-i drept destul de laborios.
În extJS se pot face animaţii, galerii foto, are un DatePicker (calendar) predefinit… astea le-am citat din memorie. Şi ceea ce m-a surprins foarte tare: are posibilitatea de a include într-un form, un editor HTML. Cu această facilitate, crearea unui CMS devine foarte uşoară.
Dar ceea ce m-a determinat să “concep” sintagma din titlu este un exemplu care vine cu kit-ul de instalare. Rulând exemplul prin intermediul unui server web (http:// ci nu file://) şi introducând un cuvânt cheie, acesta face o căutare în forum-ul extJS de pe site-ul extJS.com. Deci, nu numai câ poate să facă o căutare remote (să aibă ca script de primire a cererii, un PHP - AJAX bine scris), dar se poate implementa în site-ul propriu un motor de căutare.
Permalink
Posted in JavaScript at 1:15 am by rast
După ce ieri mi-am ostenit toată gaşca de neuroni axată pe extJS şi citirea documentaţiei scrise în limba lui Shakespeare, azi, cu neuronii odihniţi, după o noapte petrecută într-un somn fără vise, obsesii şi coşmare; după o dimineaţă cu ceaţă deasă şi pretutindeni în Iaşi; după 1 oră de ascultat o maşină de găurit electrică ce schimba o uşă metalică la un birou din apropiere; iată-mă-s şi eu bucuros că am rezolvat o treabă şi am mai făcut un pas înainte înspre cunoaşterea funcţionalităţilor extJS.
Atunci când se creează un formular extJS se apelează clasa Ext.form.BasicForm, chiar dacă se construieşte o instanţă a clasei Ext.form.FormPanel. FormPanel conţine o instanţă a BasicForm şi elemente de “Layout” din clasa Ext.layout.FormLayout.
Ştiu că cele scrise mai sus sunt indescifrabile chiar şi pentru programatori. Am mai spus că extJS are o structură foarte alambicată de clase şi concepţii. Dar odată înţelese, reiese marea lor utilitate.
De exemplu: când se trimite un forms, de pe calculatorul client pe server, acesta este trimis, implicit, în AJAX. Există o modalitate de a seta form-ul să trimită datele prin metoda de transmitere normală folosită de browser, prin suprascrierea metodei submit, a clasei.
Sunt deja prevăzute şi două configurări care prelucrează mesajele venite de la server: success şi failure.
Permalink
04.07.08
Posted in JavaScript at 5:00 am by rast
Mă dădeam un jmecher… pe aici pe blog, oricum gaşca din cartier nu mă crede! că alimentaţia folosită şi întreruperea dialogului interior, îmi dau energii sporite, extJS-ul mi le haleşte pe toate.
Am început să învăţ extJS mai dinspre coadă, în loc să încep cu începutul. Acuma vin, contra curentului, spre începuturi lucruri elementare.
Pentru a crea formulare în extJS ai la dispoziţie 19 clase. Pe Internet am găsit documentaţii şi explicaţii incomplete. Chiar şi exemplele date în kit-ul de instalare sunt incomplete. Rolul formularelor este de a scrie trimite ceva spre server şi de a salva, într-un oarecare format, aceste date.
Ceea ce-i mai important lipseşte, cum se poate realiza această comunicare client-server. Lipseşte din exemplele date, dar nu din documentaţia claselor existente. Documentaţia fiind scrisă în limba lui Shakespeare, din care doar “muşc” câte ceva, îmi vine destul de greu. Asta mă oboseşte f. mult.
Întâi mă chinui să traduc, după aia să înţeleg ce scrie. Obosesc de engleză, extJX, AJAX şi, pentru relaxare, încep să scriu pe blog… vrute şi nevrute, să mi se relaxeze neuronii.
Permalink
Posted in JavaScript at 3:08 am by rast
Există mai multe framework-uri pentru JavaScript:
- Prototype
- Scriptaculous
- MooTools
- Dojo
- YahooUI - pe scurt YUI
Daaaa!!! Chiar când începusem să acriu acest post, ajuns în acest punct, “sfătuitorul nopţii” (având un program prelungit , face ore suplimentare şi pe timp de zi) îmi zice: “aruncă un ochi pe Wikipedia!”.
L-am aruncat p’ăla din dreapta şi am găsit pagina de aici, de unde reiese destul de clar cine este şi cine nu FRAMEWORK pentru JavaScript. ExtJS-ul este trecut la capitolul “library” pentru JavaScript. Este exact ceea ce voiam să spun în acest post. Voiam să spun că extJS este mai mult decât un framework JavaScript. Iată ce spune Wiki:
“building richly interactive web applications using techniques such as AJAX, DHTML and DOM scripting”… înseamnă că… l-am ghicit bine: “interactive web applications”.
Am mai găsit un blog al unui entuziasmat extJS-ist, aici care, fără a mă oftica şi a-mi băga ghiara-n gât, trebuie să recunosc că mi-a luat-o înainte , deja a realizat un site în extJS.
Permalink
04.04.08
Posted in JavaScript at 4:20 am by rast
În noua aplicaţie începută, despre clienţi şi furnizori, mă bazez mult pe Panel-uri, mai ales pe ceea ce se numeşte acordeon de panel-uri:
Imaginea de mai sus reprezintă un acordeon cu 5 panel-uri. Primului, deja i-am schimbat denumirea din exemplul din care m-am inspirat şi l-am adaptat aplicaţiei în cauză. Panel-ul 3, care este activ, conţine doar un simplu text implicit “empty panel”. Mai jos puteţi vedea o imagine din “operaţiunea” de adaptare a panel-ului la necesităţile aplicaţiei:
Panel-ului i s-a adăugat un “toolbar” care conţine butoanele: Adăugare, Modificare, Ştergere şi un simplu text: “bibi“. Clasa toolbar este foarte flexibilă, se pot adăuga diferite alte obiecte, nu numai butoane şi text simplu.
Emit o părere ne-definitivă, fiind doar la începutul lucrului cu extJS. Java, pentru a defini o bară de meniu sau un toolbar, foloseşte o sintexă destul de laborioasă, pe multe linii, extJS foloseşte o sintaxă mai greoaie, bazată pe multe semne, cu o funcţionalitate precis definită, dar mai scurtă, pe mai puţine linii.
Sintaxa extJS este mai tehnică, este mai low level - mai îndepărtată de limbajul articulat uman, dar mai sistematizată. Odată obişnuit cu sintaxă îţi vine mult mai uşor să… controlezi codul, decât în Java.
Acordeonul de panel-uri este mai rar întâlnit în aplicaţii. Este, poate, dificil să te acomodezi cu utilizarea lui. La fel am păţit şi eu la început. Acum, m-am familiarizat foarte mult cu funcţionalitatea lui şi mi se pare foarte util.
Sunt curios dacă în viitor acest tip/mod de prezentare a unor informaţii va lua amploare sau se va “pierde în ceaţă”. Utilizatorii vor hotărâ.
Permalink
04.03.08
Posted in JavaScript at 2:21 am by rast
… nu alta!
De mai multe zile nu dădeam da cap unei erori în aplicaţia RoJSPMyAdmin, îmi apărea câte o linie goală între panel-urile acordeon. Cred că m-am chinuit vreo 10-11 ore, pe total, să descopăr unde este greşeala. NIK!
Cucuie ce mi-am făcut pe scalpul meu de programator ruginit!!! Tot sfetnicul nopţii m-a ajutat. El m-a îmboldit să încep aplicaţia nouă, cea de solduri clienţi şi furnizori. Raţiunea mea riposta: las o problemă nerezolvată, devin neserios, încep atâtea şi abandonez chiar din start, de la primii paşi!
Îmi răspundea: “înveţi! nu eşti de condamnat că faci greşeli de începător! Nu pierde timpul! Învaţă!”
În mai puţin de o oră, lucrând la noua aplicaţie, mi-am dat seama unde greşeam la RoJSPMyAdmin. Fiind o aplicaţie creeată din cârpeli, abia acum învăţ extJS-ul, am copiat diferite exemple venite odată cu kit-ul de instalare. Exemplele sunt bune, luate câte unul separat funcţionează corect. Au o belea! Au aceleaşi denumiri de variabile… se încâlcesc dacă pui cap la cap mai multe exemple!
Aşa se întâmplă şi cu CSS-urile. Aici a fost beleaua mea. În CSS-urile a două exemple erau diferite setări pentru body… se călcau pe bătătură unele pe altele şi amândouă făceau cucuie pe scalpul meu!
Las înjurăturile la o parte şi mă apuc să-mi verific cucuiele… să văd dacă nu au bătături .
Permalink
03.30.08
Posted in JavaScript at 9:29 pm by rast
S-a făcut deja şi o themă Wordress în extJS. O puteţi vedea cum arată şi o puteţi download-a de aici.
Mie îmi place aspectul/designul, mi se pare foarte funcţional, uşor utilizabil. Singura reţinere este din punctul de vedere SEO (optimizarea pentru motoarele de căutare). Este bine ştiut faptul că motoarele de căutare nu ţin cont de textul scris în procedurile JavaScript. Sunt chiar curios cum a fost realizată thema: a ţinut cont de SEO sau nu.
Un lucru care mi se pare foarte bun la site-ul dat mai sus, în secţiunea de download, se spune foarte clar: thema este realizată cu versiunea 1.1.1 a extJS.
Permalink
03.24.08
Posted in JavaScript at 2:42 am by rast
Vom începe să facem paşi mărunţi spre o încărcare dinamică cu date, a grid-ului. În primul exemplu este dat un grid care are toate funcţionalităţile definite în fişierul “gridstart.js“, care fiind un fişier de pe HDD (hard disc) nu va putea fi modificat dinamic.
Din acest motiv va trebui “să externalizăm” unele variabile pe care le foloseşte şi pe care le va putea încărca dinamic folosind, de exemplu, AJAX. O primă variabilă ce poate fi “externalizată” este variabila ce defineşte “modelul coloanelor”, şi care se găseşte pe linia 63 a gridstart.js, ca valoare a parametrului “cm”, extensie a clasei Ext.grid.ColumnModel().
Pentru aceasta vom introduce o linie sub cea care defineşte variabila smcb:
var colModel = new Ext.grid.ColumnModel([
şi vom copia definirea coloanelor din valoarea parametrului “cm“. Fiţi foarte atenţi la semnele ce delimitează instrucţiunile în JavaScript şi la cele ce delimitează anumiţi parametri şi variabile extJS.
O a doua variabilă ce trebuie externalizată este array-ul ce conţine datele grid-ului. Într-o primă etapă creeăm două fişiere JavaScrit .js, unul care conţine doar variabilele definite şi celălalt cu funcţia: Ext.onReady(function(){})
În acelaşi fişier punem şi variabila “reader”. Aveţi aici o arhivă cu fişierele rezultate. Nu am mai inclus în arhivă, şi nu voi mai include nici în tutorialele următoare, cele 3 fişiere din kit-ul de extJS:
- ext-base.js
- ext-all.js
- ext-all.css
Permalink
03.20.08
Posted in JavaScript at 4:17 am by rast
Voi începe seria de post-uri cu tutoriale extJS cu un grid incomplet. Scopul acestui post nu este să prezint neapărat grid-ul ci alte probleme care pot să apară pe parcursul utilizării extJS.
Întregul cod al aplicaţiei poate fi descărcat de aici, o arhivă zip ce conţine, pe lângă cele două fişiere specifice aplicaţiei “grid incomplet”:
-
gridstart.html
-
gridstart.js
şi cele trei fişiere dezvoltate de programatorii extJS şi care se găsesc în kit-ul de extJS, versiunea 2.0.2. Motivul pentru care am preferat să includ şi aceste trei fişiere este “degringolada” versiunilor şi a inutilizării unor aplicaţii scrise pe o versiune, cu rularea ei pe altă versiune:
- ext-base.js
- ext-all.js
- ext-all.css
Păstraţi această ordine de “includere” a fişierelor, ext-all.js se bazează pe funcţii definite în ext-base.js.
Toate aplicaţiile extJS trebuie să înceapă cu declararea unei funcţii “onReady” ce va include celelalte declaraţii ale aplicaţiei ce intenţionaţi să o realizaţi.
Ext.onReady(function(){
Funcţia “va avea un final” de forma:
});
Este bine să vă impuneţi din start un anumit stil de scriere în pagină a codului sursă, extJS utilizează o sintaxă mai laborioasă decât JavaScript, complexă la prima vedere, până vă obişnuiţi cu ea.
În acest prim exemplu datele din conţinutul grid-ului sunt “citite” dintr-un array definit tot în corpul fişierului .js. Această metodă este cea mai simplă dar, probabil, nu cea uzuală.
În aplicaţii, cel mai des se utilizează încărcarea dinamică a datelor, folosind diferite tehnologii web.
Pentru a afişa grid-ul într-un anumit loc în pagina web, trebuie să definim acolo un “div” cu un “id” specific şi care va trebui să apară ca valoare a parametrului “renderTo:”, cu care este apelat constructorul clasei: “Ext.grid.GridPanel“.
Permalink
03.19.08
Posted in JavaScript at 2:23 am by rast
Iar am probleme cu procesul de mirare al fiinţei mele. De când mă preocup de extJS am parte de multe mirări. Oare cât le-oi mai putea duce?
Dacă veţi căuta pe google cuvintele “tutorial extjs” pe primul loc va fi adus… acest blog. Dacă veţi scrie invers “extjs tutorial” adresa blogului nu va mai fi chiar prima, dar va fi pe prima pagină… din vreo 100.000 şi ceva de pagini web care vorbesc tutorial-iceşte despre extJS.
Având greutăţi în înserarea unui grid în secţiunea panel-ul din dreapta al aplicaţiei mele, am aruncat un ochi pe pagina web cu tutoriale, a site-ului oficial al extJS. Am dat adresa într-un post anterior.
Mi s-a bucurat ochiul când a văzut titlul: “Beginning Using the Grid Component” ca fiind al trei-lea tutorial prezentat. Mi-am mutat ochiul pe el şi mi s-a dezumflat entuziasmul la cote alarmante. Am văzut în cuprinsul paginii că se utilizează aceeaşi clasă: “Ext.grid.Grid”, care nu mai există în versiunea curentă de extJS.
Ar trebui scris pe undeva prin pagină că documentaţia este valabilă pentru versiuni anterioare.
Până la urmă am reuşit să înserez un grid acolo unde voiam, consultând descrierea claselor versiunii 2.0.2, care este integrată în kit-ul de extJS.
O altă belea, din exemplele care sunt date în kit-ul oficial, care poate crea confuzie mare, dacă programatorul ce se inspiră din ele nu are suficientă experienţă. Exemplele sunt scrise de persoane diferite:
- uneori clasele sunt definite ca mostenind Ext.grid.GridPanel
- alteori ca moştenind: xg.GridPanel, variabila xg fiind definită în altă parte: var xg = Ext.grid;
Este acelaşi lucru, dar poate crea confuzii.
Permalink
Next entries » · « Previous entries
