Transpunerea Diagramelor U.m.l. de Clase In Cod Javascript

Introducere

Scopul și necesitatea lucrării

În momentul de față aplicațiile web devin din ce în ce uzuale, atât pentru ca permit accesului rapid al utilizatorilor la aplicație cât și pentru faptul că în general aplicațiile web sunt mai ușor de întreținut și îmbunătățit de cei care le concep. Tendința curentă in dezvoltarea aplicațiilor web este de a separa cât de mult posibil partea de client de cea de server, comunicarea între cele două entități realizându-se cu ajutorul API-urilor.

Application Programming Interface (prescurtat API) este termenul în limba engleză a unei interfețe folosite în programarea aplicațiilor. În marea majoritate a cazurilor un API este folosit pentru a crea o legătura între două sisteme la distanță sau pentru a facilita lucrul cu datele. Un API pentru aplicații web definește modul de comunicare intre client ( browser-ul web ) și server.

Cu cât aplicațiile devin mai complexe, cu atât codul JavaScript folosit este mai greu de întreținut, de urmărit și de înțeles de persoane noi care iau contact cu codul sursă. UML2JS este o aplicație cu scopul de a venit în ajutorul dezvoltatorilor de aplicații web, prin a le pune la dispoziție un tool care sa le permită definirea și menținerea structurii aplicației într-un mod vizual, utilizând diagrame UML de clase. În momentul de față nu mai există nici un tool care să permită gestiunea unei aplicații JavaScript folosind diagrame UML, singura referință fiind un plugin pentru IDE-ul Eclipse – JS/UML a cărui dezvoltare a fost întreruptă, ne mai fiind comptabil cu versiunile curente ale IDE-ului.

Designul aplicațiilor utilizând diagrame UML de clase

Scopul Diagramelor de clase

Scopul diagramelor de clasă este de a arăta structura statică a sistem care este modelat. Diagrama arată în mod specific entitățile din sistem – și mă refer literalmente entități , la fel ca în "lucrurile discrete," a nu fi confundat cu "entități de baze de date" – împreună cu structura internă a fiecărei entități și relațiile cu alte entități din sistem. Deoarece diagramele de clasă modelează numai structura statică a unui sistem, numai tipuri de entități sunt afișate pe o diagramă de clasă; cazuri specifice nu sunt afișate. Spre exemplu, o diagramă de clasă ar arăta o clasă Angajat, dar nu ar fi arata cazuri reale ale angajaților, cum ar fi Ion Popescu, Vasile Milea, sau Iuliu Maniu.

Dezvoltatorii de obicei folosesc diagramele de clase pentru a afla detalii despre sistemul de clase care au fost scrise sau care urmează să fie scrise, împreună atributele și metodele fiecare clase.

Notații in realizarea diagramelor de clase

După cum am menționat anterior diagramele de clase modelează structura statică a unei aplicații. În continuare se va face analogia între clase și entități. E o simplificare, dar de acum va face lucrurile mai ușor de înțeles.

Structura generală a unei entități

Diagrama de clase arată structura internă a fiecărei clasă, împreună cu relațiile pe care clasă trebuie să le aibă in raport alte clase. Reprezentarea UML a unei clase – o diagramă de clasă – este un dreptunghi care conține trei compartimente stivuite vertical.

Compartimentul de sus arată numele clasei. Compartimentul de mijloc listează atributele clasei. Compartimentul de jos listează operațiunile clasei. Figura 2.1 oferă un exemplu simplu de o diagramă de clasă.

Lista atributelor unei clase

Secțiunea de atribute al unei clase (compartimentul din mijloc) enumeră fiecare dintre atributele clasei pe o linie separată. Fiecare linie atribut utilizează următorul format:

nume : tip atribute

O diagrama de clase care vor fi utilizate pentru a genera cod trebuie să aibă clase ale căror tipuri de atribut sunt limitate la tipurile furnizate de limbajul de programare, sau tipuri incluse în model, care va fi de asemenea implementate în sistem.

Uneori este util să apară pe o diagramă de clasă că un anumit atribut are o valoare implicită. Specificația UML permite identificarea valorilor implicite din partea lista de atribute utilizând următoarea notație:

nume : tip atribute = valoare_initiala

Lista metodelor unei clase

Metodele unei clase sunt documentate în al treilea (cel mai de jos) compartimentul din dreptunghiul clasei dintr-o diagrama de clase. Ca atributele, metodele unei clase sunt afișate într-un format listă, cu fiecare metoda pe o linie proprie. Metodele sunt documentate folosind următoarea notație:

nume (lista parametri) : tip de date întors

Modelarea relațiilor între clase

Moștenirea

Un concept foarte important în designul orientat-obiect, moștenirea, se referă la capacitatea unei clase (clasă copil) de a moșteni funcționalitatea unei alte clase (super-clasă) și apoi să adauge o nouă funcționalitate proprie.

Pentru a modela moștenire pe o diagramă de clasă, o linie de solid este trasată din clasa copil (clasa care moștenește comportamentul ), cu un vârf de săgeată închisă (sau triunghi) arătând spre super-clasă. Figura 2 arată cum atât clasele CheckingAccount și SavingsAccount moștenesc clasa BankAccount.

Asocierea

Atunci când este modelat un sistem, anumite obiecte vor fi legate unele de altele, iar aceste relații înșiși trebuie să fie modelate pentru claritate. Există cinci tipuri de asociații. În continuare se vor prezenta asocierile folosite cel mai des in aplicații sau cele care au fost implementate în aplicația UML2JS.

Asocierea bidirecțională

O asociație este o legătură între două clase. Asociațiile sunt presupuse a fi bidirecționale – cu alte cuvinte, ambele clase sunt conștiente fde relația lor și cu cealaltă. Figura 2,2 prezintă un tip standard asociere între clasa de Flight și clasa Plane.

O asociație bidirecțională este indicată printr-o linie continuă între cele două clase. La fiecare capăt al liniei, punem un nume și o valoare multiplicitate. Figura 2.3 arată că zborul este asociat cu un anumit avion, iar clasa de zbor știe despre aceasta asociere. Avionul preia rolul de "assignedPlane" în această asociație, deoarece numele rol de lângă clasa Plane spune așa.

Valoarea de multiplicitate de lângă clasa avionul 0..1 înseamnă că atunci când există o instanță a unui zbor, poate avea fie o instanță a unui avion asociate cu acesta sau nu (de exemplu, poate un avion nu a fost încă fost atribuit). Figura 2.3 arată, de asemenea, că un avion știe despre asocierea sa cu clasa de zbor.

În această asociere, zborul preia rolul de "assignedFlights"; diagrama din figura 2.3 ne spune că instanța avion poate să nu fie asociat cu nici un zbor (de exemplu, este un avion de brand nou) sau cu până la un număr infinit de zboruri (de exemplu, avionul a fost în comisie în ultimii cinci ani ).

Asocierea unidirecțională

O asociație unidirecțională arată că două clase sunt legate, dar numai o singură clasă știe că există relația. Figura 2.4 prezintă un exemplu de raport de conturi descoperire cu o asociație unidirecțională. O asociație unidirecțională este trasată ca o linie continuă cu un vârf de săgeată deschis (nu săgeată închise, sau triunghi, folosit pentru a indica moștenire) arătând spre clasa care cunoaște existența asocierii.

Ca și asociații standard asocierea unidirecțională include un nume rol și o valoare de multiplicitate, dar spre deosebire de asociația bidirecțională standard asocierea unidirecțională conține doar numele rol și valoarea multiplicitate pentru clasa care cunoaște asocierea. În exemplul nostru în Figura 2.4, OverdrawnAccountsReport știe despre clasa BankAccount, iar clasa BankAccount joacă rolul de "overdrawnAccounts." Cu toate acestea, spre deosebire de o asociere standard clasa BankAccount are nici o idee că este asociat cu OverdrawnAccountsReport.

Agregarea

Agregarea este un tip special de relație utilizate pentru a modela o relație de tipul „întreg la părțile sale”. In relațiile de agregare de bază, ciclul de viață al unei clase parte este independentă de ciclul de viață clase întreg. De exemplu, ne putem gândi la Car ca o entitate ansamblu și Wheel ca parte a clasei Car. Roata poate fi creată cu săptămâni înainte și poate sta într-un depozit înainte de a fi introduse pe o mașină în timpul asamblării. În acest exemplu, exemplu, clasa Wheel în mod clar duce o existență independentă de clasa Car. Totuși, există momente când ciclul de viață al clasei parte nu este independentă de cea a întregii clase – aceasta se numește compoziție. Luați în considerare, de exemplu, relația dintre un cont bancar și tranzacțiilor sale.

O asociație cu o relație de agregare indică faptul că o clasă subordonat (sau o parte) din altă clasă. Într-o relație de agregare, instanța clasa copil poate trăi mai mult decât clasa părinte. Pentru a reprezenta o relația de agregare, se trage o linie continuă de la clasa părinte la clasa subordonată, și se adaugă la capătul dinspre clasa părinte o diamant neocupate. Figura 2.5 prezintă un exemplu de o relație agregare între o Companie și un Departament.

Figură 2.5 Exemplu de relație de agregare

Compoziția

Relația de agregare de tip compoziție este doar o altă formă a relației de agregare, dar pentru clasa copil ciclul de viață este dependent de cel al clasei părinte. În figura 2.6, se prezintă o relație compoziție între un clasa Student și o clasa Schedule, se observă că relația de compoziție este întocmit ca relația de agregare, dar de data aceasta forma de diamant este umplută. În relația modelată în Figura 2.6, un exemplu de clasă Student va avea întotdeauna o instanță de Schedule. Deoarece relația este o relație de compoziție, atunci când studentul este scos ( distrus ), instanța Schedule este eliminat în mod automat.

Figură 2.6 Exemplu de relație de compoziție

Noțiuni de bază ale limbajului JavaScript

JavaScript a apărut ca un efort comun între Netscape Communications Corporation și Sun Microsystems Inc. Noul limbaj a fost anunțat la 4 decembrie 1995, pe vremea când Netscape Navigator 2.0 a fost încă în versiunea beta. JavaScript versiunea 1.0 a devenit disponibil cu noul browser. (Înainte de eliberarea sa ca JavaScript, a fost numit LiveScript.)

JavaScript este un limbaj bazate pe obiecte, limbaj de scripting client-side ( mai nou si server-side ) care este folosit pentru a face paginile Web mai dinamice.

JavaScript are similitudini cu alte limbaj programare și de scripting. Se aseamănă cu Java, C++, sau C, în sintaxa. Pentru că este un limbaj de scripting, JavaScript are, de asemenea, similitudini cu limbi ca Perl- care de asemenea, poate fi rulat prin intermediul unui interpretor, mai degrabă decât să fie compilate.

JavaScript ca limbaj pe scripting

Un limbaj de scripting nu are nevoie de un program pentru a fi compilate înainte de execuție. Toate interpretarea se face on-the-fly de client.

Cu un limbaj de programare regulat, înainte de a putea rula un program, trebuie compilat folosind un compilator special pentru a fi sigur că nu există erori de sintaxă. Cu un limbaj de scripting, codul este interpretat ca acesta este încărcat în clientul. Astfel, puteți testa rezultatele codul mai rapid. Cu toate acestea, erorile nu vor fi prinse înainte ca script-ul să fie rulat și ar putea cauza probleme cu clientul în cazul în care nu poate trata erorile bine.

JavaScript rulează în browser fiind adăugat într-un document HTML existent (fie direct, fie prin referire la un fișier script extern). Se pot adăuga etichete speciale și comenzi la codul HTML care spun browser-ului de ce are nevoie pentru a rula un script.

Odată ce browser-ul vede aceste tag-uri speciale, se interpretează comenzile JavaScript și va face execuția codului. Astfel, prin simpla editarea unui document HTML, se poate începe să utilizarea JavaScript pe paginile de web și se pot vedea rezultatele.

Componente ale limbajului JavaScript

Variabile

O variabilă reprezintă sau are o valoare. Valoarea reală a unei variabile poate fi schimbat în orice moment. Pentru a înțelege ce o variabilă se ia în considerare o declarație de:

x=2

Litera x este folosit ca nume al variabilei.Se atribuie o valoare de 2. Pentru a modifica valoarea, se reasignează x cu noua valoare:

x=4

Funcții

O funcție este de fapt script într-un script mai mare. Scopul său este de a efectua o singură sarcină sau o serie de sarcini. Ce o funcție face depinde de ceea ce codul din interiorul acesteia. De exemplu, s-ar putea scrie o funcție o linie de text pentru ca browser-ul sau poate calcula o valoare numerică și a reveni cu valoarea la scriptul principal.

Pe prima linie a unei funcții, îl declara ca o funcție, nume l, și indică dacă acceptă parametri. Pentru a declara o funcție, folosiți funcția rezervat cuvântul, urmat de numele său, și apoi un set de paranteze:

function numeFunctie()

JavaScript ca limbaj bazat pe obiecte

Bazate pe obiect înseamnă că JavaScript pot folosi elemente numite obiecte. Cu toate acestea, obiectele nu se bazează pe clase (adică nici o distincție nu se face între o clasă și o instanță); în schimb, ele sunt doar obiecte generale.

Un limbaj de programare pe bază de prototip este un model de OOP care nu utilizează clasele, ci mai degrabă realizează comportamentul din orice clasă și apoi o refolosește (echivalent cu moștenire în limbi bazate pe clasă) reutilizat prin decorare (sau extinderea) prototipului obiectelor. (De asemenea, numit fără clase, orientat prototip, sau pe baza de exemplu de programare.)

Clase in lumbajul JavaScript

JavaScript este un limbaj bazat pe prototip și nu conține nici o declarație de clasă, cum se găsește în C++ sau Java. Acest lucru este uneori confuz pentru programatori obișnuiți cu limbi cu o declarație de clasă. În schimb, JavaScript folosește funcții ca suplinitori pentru clase. Definirea unei clase este la fel de ușor ca definirea unei funcție. In exemplul de mai jos vom defini o noua clasa numita Person.

Pentru a crea o nouă instanță a unui obiect obj vom folosi declarație new OBJ, atribuirea rezultatul (care este de tip obj) la o variabilă pentru a accesa mai târziu. In exemplul de mai sus s-a definit o clasă numit Person.

În exemplul de mai jos se vor crea două instanțe (Persoana1 și Persoana2).

Constructorul

Constructorul este numit la chemat instanțiere ( în momentul în care este creat un obiect instanță). Constructorul este o metodă de clasa. În JavaScript funcția servește ca constructorul a obiectului, prin urmare, nu este necesar să se definească în mod explicit o metodă constructor. Fiecare acțiune a declarat în clasa este executat în momentul instanțierea.

Constructorul este folosit pentru a seta proprietățile obiectului sau pentru a apela metodele pentru a pregăti obiect pentru utilizare. Adăugând metode de clasă și definițiile lor apare utilizând o sintaxă diferită descris mai târziu în acest articol.

In exemplul de mai jos, constructorul de clasa Person înregistrează un mesaj, atunci când o persoană este instanțiată.

Proprietăți ( atribute ale obiectelor )

Proprietățile sunt variabile cuprinse în interiorul unei clase; fiecare instanță a obiectului are acele proprietăți. Proprietăți sunt stabilite în constructorului (funcția) din clasa, astfel încât acestea sunt create la fiecare instanțiere.

Cuvântul cheie this, se referă la obiectul curent, vă permite să lucrați cu proprietăți din cadrul clasei. Accesarea (citire sau scriere) o proprietate în afara clasei se face cu sintaxa: NumeInstață.proprietate, la fel ca în C++, Java, și mai multe alte limbaje. (În interiorul clasei this.proprietate este utilizat pentru a obține sau pentru a seta valoarea proprietății.)

În exemplul de mai jos, vom defini proprietatea firstName pentru clasa Person la instanțiere:

Metode

Metodele sunt funcții, dar în caz urmează aceeași logică ca și proprietățile. Apelarea unei metode este similară cu accesarea unei proprietăți, dar se adaugă () la sfârșitul numele metodei, eventual cu argumente. Pentru a defini o metodă, se atribui o funcție pentru o proprietate adăugată pe proprietatea prototip a clasei.

În exemplul de mai jos, se va defini și folosi metoda numită sayHello() pentru clasa Person.

UML2JS

Tehnologii și biblioteci folosite în dezvoltarea aplicației

Mediul de dezvoltare WEB

HTML5 este un limbaj pentru structurarea și prezentarea conținutului pentru World Wide Web, o tehnologie nucleu pentru Internet propusă inițial pentru software-ul Opera.

Este a cincea revizuire a standardului HTML (creat în 1990 și standardizat ca HTML4 din 1997) și din octombrie 2011 este în curs de dezvoltare. Obiectivele sale principale au fost acelea de a îmbunătăți limbajul cu un suport pentru cele mai recente apariții multimedia în același timp menținându-l ușor de citit de oameni și bine înțeles de computere și device-uri (browsere web, parsere, etc.). HTML5 își propune să însumeze nu numai HTML4, dar și XHTML1 și DOM2HTML (îndeosebi JavaScript).

Urmărind predecesorii săi imediați HTML 4.01 și XHTML 1.1, HTML5 este un răspuns la observația că HTML și XHTML utilizate în comun pe World Wide Web sunt un amestec de caracteristici introduse de specificații diferite, împreuna cu acestea mai sunt și caracteristicile diferite aduse de software, de browsere, și multe erori de sintaxă în documentele web existente.

Astfel, HTML5 devine o încercare de a defini un singur limbaj de marcare care poate fi scris în oricare dintre sintaxele HTML sau/și XHTML. Acesta include modele detaliate de prelucrare pentru a încuraja mai multe implementări interoperabile; extinde, îmbunătățește și raționalizează disponibilitățile pentru documentele web și introduce marcarea și aplicații API (application programming interfaces) pentru aplicații web complexe. Din aceste motive, HTML5 este un posibil candidat pentru aplicațiile de platforme mobile. Multe caracteristici ale HTML5 au fost create din considerarea că va trebui să devină capabil să ruleze pe dispozitive cum ar fi smartphone-urile sau tabletele.

În special, HTML5 aduce multe noi caracteristici sintactice. Acestea cuprind elemente ca <video>, <audio>, <header> și <canvas> elemente HTML, precum și integrarea conținutului SVG care a înlocuiește utilizarea tag-ului generic <object>. Aceste noutăți sunt proiectate pentru a facilita includerea și manipularea în web a conținuturilor multimedia și grafice fără a fi nevoie să se recurgă la proprietățile de plugin și API.

Alte noi elemente ca <section>, <article>, <header>, și <nav> sunt proiectate să îmbunătățească conținutul semantic al documentelor. Noi atribute au fost introduse în același scop, în același timp unele elemente și atribute au fost îndepărtate. Unele elemente ca <a>, <menu> au fost schimbate, redefinite și standardizate. API-urile și DOM-urile (document object model) sunt certitudini și sunt părți fundamentale în specificațiile HTML5. HTML5, de asemenea, definește in câteva detalii prelucrările necesare pentru documentele invalide, astfel încât sintaxa erorilor va fi tratată uniform de toate browserele cunoscute.

Conceptul de aplicație WEB – ADD CITASIONS

Un număr tot mai mare de site-uri de Web sunt ceea ce noi sunt aplicații web; ele imita aplicații desktop, mai degrabă decât documentele tradiționale web , statice ( de tipul text-imagini-linkuri ), care alcătuiesc cea mai mare parte a Web-ului. Exemple sunt procesoare de on-line de text, instrumente de editare foto, site-uri de cartografiere, etc. puternic sprijinite de JavaScript, acestea împingând HTML 4 la marginea capacităților sale.

Noi API-uri pentru DOM sunt specificate în HTML5 pentru acțiuni de drag-and-drop, evenimente de comunicare cu serverele, desenare, video, și altele asemenea. Aceste noi interfețe pe care HTML-ul le expune prin JavaScript prin intermediul obiectelor din DOM fac mai ușor scrierea aplicațiilor folosind standarde bine specificate, mai degrabă decât hack-uri abia documentate.

Chiar mai important este nevoia de un standard deschis (libertatea de a fi folosi și implementat gratuit), care să poată concura cu standardele proprietare, cum ar fi Adobe Flash sau Silverlight Microsoft.

Aplicațiile web sunt de obicei rupte în bucăți logice numite "tiers", în care fiecărui nivel îi este atribuit un rol. Aplicațiile tradiționale sunt alcătuite doar dintr-un nivel, care se află pe mașina client, dar aplicatiile web se dezvoltă printr-o abordare n-tired datorită naturii lor. Deși sunt posibile mai multe variante, cea mai comuna este structura cererii pe trei nivele. În forma sa cea mai comună, cele trei niveluri sunt numite de prezentare, de aplicații și de depozitare, în această ordine. Un browser web este primul nivel (prezentare), un motor folosind o tehnologie de conținut web dinamic (cum ar fi ASP, CGI, ColdFusion, Dart, JSP / Java, Node.js, PHP, Python sau Ruby on Rails) este nivelul de mijloc (logica aplicației), și o bază de date este al treilea nivel (depozitare). Browser-ul web trimite cererile la nivelul de mijloc, care le deservește prin interogări și actualizări în baza de date și generează o interfață de utilizator.

Pentru aplicații mai complexe, o soluție pe 3 niveluri pot cădea scurt, și ar putea fi benefic pentru a utiliza o abordare de n-niveluri, în cazul în care cel mai mare beneficiu este de rupere logicii aplicației în nivele granulare. Un alt avantaj poate fi adăugarea unui nivel de integrare care separă de rangul de date de restul nivelurilor, oferind o interfață ușor de utilizat pentru a accesa datele.

Bibliotecile JavaScript folosite in UML2JS

jQuery

jQuery este o platformă de dezvoltare JavaScript, concepută pentru a ușura și îmbunătăți procese precum traversarea arborelui DOM în HTML, managementul inter-browser al evenimentelor, animații și cereri tip AJAX. jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile de browsere importante existente, și să respecte filosofia "Unobtrusive JavaScript". Biblioteca a fost lansată in 2006 de către John Resig.

jQuery se poate folosi pentru a rezolva următoarele probleme specifice programării web:

selecții de elemente în arborele DOM folosind propriul motor de selecții open source Sizzle

parcurgere și modificarea arborelui DOM (incluzând suport pentru selectori CSS 3 și XPath simpli)

înregistrarea și modificarea evenimentelor din browser

manipularea elementelor CSS

efecte și animații

cereri tip AJAX

extensii

utilități – versiunea browser-ului, funcția each.

Backbone.JS

Backbone.js dă structura aplicațiilor web prin furnizarea de modele cu posibilitatea adăugării evenimentelor personalizate, colecții cu un API bogat în funcții, view-uri cu eveniment de manipulare declarative și se conectează API-urile existente pe servere folosind o interfață de tipul JSON.

Cu Backbone, datele sunt reprezentate ca modele, care pot fi create, validate, distruse, și salvate pe server. Ori de câte ori o acțiune în interfața cu utilizatorul provoacă un atribut al unui model să se schimbe, modelul declanșează un eveniment de "schimbare"; toate view-urile care afișează starea modelului poate fi notificată cu privire la schimbare, astfel încât să fie în măsură să răspundă în consecință, să se re-randeze cu noile informații. Într-o aplicație Backbone terminată, nu trebuie scris codul care caută în DOM pentru a găsi un element cu un id specific, și să actualizeze HTML manual – în cazul în care modelul se schimbă, view-urile se actualiză singure.

Backbone este o încercare de a descoperi setul minim de date structurare (modele si colecții) și interfața cu utilizatorul (view-uri și URL-uri), primitive, care sunt utile în general, atunci când construirea de aplicații web cu JavaScript.

Underscore.JS

Underscore.JS este o bibliotecă JavaScript, care oferă o multitudine de funcții utile, helpere de programare fără a extinde obiecte built-in.

Underscore.JS oferă peste 100 de funcții care vin in ajutorul programatorilor in taskuri de zi cu zi. Spre exemplu conține funcții de mapare, filtrare, invocare – precum și funcții mai specializate: funcția de legare, sistem de template-uri pentru JavaScript, crearea de indici rapizi, testarea profunda a egalității a doua obiecte, și așa mai departe.

JointJS

JointJS este o bibliotecă JavaScript modernă de HTML 5 pentru vizualizare și interacțiune cu diagrame și grafice. Acesta poate fi folosit pentru a crea fie diagrame statice sau, și mai important, instrumente complet interactive pentru realizarea diagramelor și construitul de aplicații. JointJS face ușor de a crea instrumente vizuale de diferite tipuri.

Deținând atât o arhitectură bazată pe evenimente cât și una de tip MVC de JointJS îl face ușor de integrat cu otice tehnologie backend.

Caracteristicile principale ale bibliotecii JointJS sunt:

Elemente de bază diagrama (dreptunghi, cerc, elipsă, text, imagine, linie)

diagramele bine-cunoscute sunt deja implementate (ERD, Org, FSA, UML, PN, DEVS, …)

elemente de diagrama personalizat bazat pe SVG sau randate programatic

elemente interactive și legături

conectarea elemente diagrama cu legături

legături personalizate, săgeți și etichete

netezirea legăturilor (bezier interpolare)

magneți (puncte de conectare între legături legătură) pot fi plasate oriunde

diagrame ierarhice

serializarea / deserializarea la / de la format JSON

bazat în special pe evenimente – puteți reacționa la orice eveniment care se întâmplă în interiorul canvasului

zoom in / out

suport tactil

animații

filtre și degradeuri

suport pentru NodeJS

rapid – capacitatea de a face sute elementelor și cu interacțiunea instant

ușor de extins , permite plugin-uri

Arhitectura MVC

PHP

PHP este un limbaj de programare. Numele PHP provine din limba engleză și este un acronim recursiv : Php: Hypertext Preprocessor.

Folosit inițial pentru a produce pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web. Se folosește în principal înglobat în codul HTML, dar începând de la versiunea 4.3.0 se poate folosi și în mod „linie de comandă” (CLI), permițând crearea de aplicații independente. Este unul din cele mai importante limbaje de programare web open-source și server-side, existând versiuni disponibile pentru majoritatea web serverelor și pentru toate sistemele de operare.

Conform statisticilor este instalat pe 20 de milioane de site-uri web și pe 1 milion de servere web. Este disponibil sub Licența PHP și Free Software Foundation îl consideră a fi un software liber.

Inițial, limbajul a fost dezvoltat de inventatorul său, Rasmus Lerdorf. Odată cu creșterea numărului de utilizatori, dezvoltarea a fost preluată de o nouă entitate, numită The PHP Group (Grupul PHP).

PHP este simplu de utilizat, fiind un limbaj de programare structurat, ca și C-ul, Perl-ul sau începând de la versiunea 5 chiar Java, sintaxa limbajului fiind o combinație a celor trei. Datorită modularității sale poate fi folosit și pentru a dezvolta aplicații de sine stătătoare, de exemplu în combinație cu PHP-GTK sau poate fi folosit ca Perl sau Python în linia de comandă. Probabil una din cele mai importante facilități ale limbajului este conlucrarea cu majoritatea bazelor de date relaționale, de la MySQL și până la Oracle, trecând prin MS Sql Server, PostgreSQL, sau DB2.

PHP poate rula pe majoritatea sistemelor de operare, de la UNIX, Windows, sau Mac OS X și poate interacționa cu majoritatea serverelor web. Codul dumneavoastră PHP este interpretat de serverul WEB și generează un cod HTML care va fi văzut de utilizator (clientului –browser-ului- fiindu-i transmis numai cod HTML).

Arhitectura tip LAMP a devenit populară în industria web ca modalitate rapidă, gratuită și integrată de dezvoltare a aplicațiilor. Alături de Linux, Apache și Mysql, PHP reprezintă litera P, deși uneori aceasta se referă la Python sau Perl. Linux ocupă rolul de sistem de operare pentru toate celelalte aplicații, MySQL gestionează bazele de date, Apache are rol de server web, iar PHP are rol de interpretator și comunicator între acestea.

PHP folosește extensii specifice pentru fișierele sale: .php, .php3, .ph3, .php4, .inc, .phtml. Aceste fișiere sunt interpretate de către serverul web iar rezultatul este trimis în formă de text sau cod HTML către browser-ul clientului.

Toro.php

Toro.php este p biblioteca care permite rutarea in scripturi PHP pentru dezvoltarea de aplicații web de tip RESTful și API-uri.

Principalele caracteristici ale bibliotecii sunt:

Rutare RESTful folosind șiruri de caractere, expresii regulate, și tipuri definite (număr, șir, alfa)

Manipularea erorilor într-un mod flexibil și callback prin ToroHook

Core intuitiv și auto-documentate (Toro.php)

Testat cu PHP 5.3 și mai sus

Tabel de rutare realizat ca un vector de asociere de tipul:

route_pattern => handler

Acest lucru este strâns modelat după Tornado (Python). Rutele nu sunt exprimate ca funcții anonime pentru a preveni dublarea inutilă a codului.

Principalele Modulele aplicației

Aplicația UML2JS este o aplicație pe trei nivele:

Interfațata web cu utilizatorul

APIul serverului pentru gestionarea conținutului

Mediul de stocare al datelor ( nu este necesara existenta unei baze de date, întrucât aplicația generează fișiere de tip text)

Interfața web cu utilizatorul

Interfața cu utilizatorul este concepută în HTML5 deoarece este unul din mediile de dezvoltarea care este în urcare în ultimii ani, permițând rularea aplicațiilor orice calculator sau smartphone.

Aplicația a fost proiectata având la baza biblioteca Backbone și este alcătuită din următoarele componente:

ApplicationModel și ApplicationView

ClassModel și ClassView

ClassOverlayView

RelationModel

ClassesCollection și respectiv RelationsCollection

LeftPanelModel și LeftPanelView

RightPanelModel și RightPanelView

IOModel

Bootstrap-ul de aplicație

ApplicationModel și ApplicationView

Cele două componente se ocupă de manipularea canvasului aplicației. Au rolul de gestionarea ( creare, ștergere, randare) al claselor și relațiilor dintre clase create pe canvasul aplicației.

Se ocupă totodată de corelarea celorlalte componente ale aplicației atât prin chemarea directă a funcțiilor acestora cât și prin invocarea sau ascultare de evenimente precum schimbarea clasei selectate, adăugarea unei noi clase sau relații, modificarea conținutului unei clase sau ștergerea unei entități de pe canvas sau cele generate de biblioteci precum JointJS.

ApplicationView implementează elementele de Graph și Paper disponibile in biblioteca JointJS. Aceste două componente au la rândul lor rolul de a randa sau actualiza View-urile generate atunci când au loc modificări in structura diagramei UML.

ClassModel și ClassView

Reprezintă componenta aplicației care generează o singură clasă, având rolul atât de furnizor de date ( date care conțin numele, structura și poziția pe canvas a clasei ) cât și de gestionare a rezultatului vizual care va fi afișat către utilizator.

ClassModel și ClassView implementează extensia de generare a diagramelor UML implementată pentru biblioteca JointJS, ascultând de asemenea la evenimentele trimise de obiectele implementate.

Actualizează View-urilor, însă de data aceasta mult mai specific, actualizând doar view-ul clasei pe cer o reprezintă.

Manipulează direct componenta ClassOverlayView și prin evenimente componenta ClassesCollection.

ClassOverlayView

ClassOverlayView este doar o componentă vizuală, are rolul de a marca curentă si de a adaugă două controale standard care invocă evenimentele de ștergere a unei clase și de generare a unei relații între două clase.

Componenta se atașează view-ului unei clase, folosindu-se de structura din DOM a acesteia pentru a-și calcula poziția, dimensiunile și pentru a avea cunoștință de clase de care este atașată.

Principalul scop al componentei este de a oferi utilizatorului final un mod cât mai simplu de a gestiona cele două acțiuni prezentate mai sus.

ClassesCollection și RelationsCollection

Reprezintă componentele folosite in special la pregătirea datelor pentru a fi salvat. ClassesCollection reprezintă colecția tuturor claselor vizibile pe canvas, iar analog RelationsCollection reprezintă o colecție a relațiilor existente pe canvas.

Pe lângă rolul de grupare al datelor, cele două colecții au proprietăți de mapare și filtrare a claselor, proprietăți folosite in cele două panel-uri.

LeftPanelModel și LeftPanelView

Componenta LeftPanel are rolul de a gestiona evenimentele și conținutul panoul din stânga al aplicației, etl deservind atât ca scop informativ, conținând lista tuturor claselor disponibile in canvas cat și ca factor de creștere al utilizabilității aplicației ( la selecția unui element din panelul stâng, clasa care are numele echivalent cu eticheta elementului selectat va fi adus in ViewPort-ul canvasului).

RightPanelModel și RightPanelView

Componenta ce deservește panelul din dreapta, are rolul de a gestiona pune la dispoziția utilizatorului o interfață simplă de editare a conținutului unei clase selectate. Permite adăugarea și ștergerea atributelor sau metodelor unei clase, ținând cont de posibilitate de introducere a date duplicate in interiorul clase.

IOModel

Reprezintă componenta care comunică cu API scris in PHP, are ca scop salvarea spațiului de lucru ( a canvasului ) și a fișierelor generate de diagrame UML.

De asemenea este folosit pentru determinarea aplicațiilor deja existente și la încărcarea acestora de pe hard disk.

Pentru fiecare acțiune pe care o deservește este definită o cerere de tipul AJAX, către un URL de tipul rest, prin metode specifice nevoilor fiecărei cereri. Spre exemplu cererea de salvare a aplicației folosește metoda POST pentru a evita atingerea numărului maxim de caractere posibile utilizând un URL de tip GET ( 2000 ) și pentru a menține o consistență între metoda și necesitatea unei cereri ( metodele de tip GET sunt pentru preluarea datelor de la server, pe când cele de tip POST pentru transmiterea datelor către server ) .

AJAX este o tehnică de construire a paginilor web tot mai întâlnită în ultimul timp , abreviere venind de la termenul în engleză „Asynchronous JavaScript and XML” ( JavaScript și XML în mod asincron ). Ajax este de fapt un termen asociat cu posibilitatea paginilor web de a comunica dinamic cu serverele fără a fi necesară reîncărcarea actualizându-se numai anume porțiuni ale paginii prin manipularea DOM-ului paginii. Tehnica AJAX permite construirea paginilor web ce au un timp de răspuns redus, întrucât scade considerabil datele ce sunt trimis de la server la client.

Bootstrap-ul de aplicație

Bootstrap-ul de aplicație are rolul de a încărca toate componentele aplicației și de a crea minimul de DOM necesar celorlalte componente. De asemenea are rol de a stabili tipul de diagramă care va fi folosită în pașii următori, permițând utilizatorului sa creeze o nouă diagramă sau să folosească una deja existentă.

APIul serverului pentru gestionarea conținutului

APIul aplicației este realizat folosind biblioteca Toro.php pentru a crea o interfațată RESTful către resursele serverului. Este alcătuită din două mari componente ( clase ) care se ocupă de gestionarea tuturor acțiunilor disponibile în API:

Actions

MainHandler

Clasa Actions este clasa unde sunt definite și implementate acțiunile disponibile ale APIului, având atât rolul de a gestiona request-urile după ce acestea au fost validate de MainHandler cât și in a determina structura ( rutele ) disponibile ale APIului.

Clasa MainHandler este clasa care se ocupă crearea legăturilor intre rutele URL-ului si acțiunile implementate. Metoda check_for_method are rolul de a verifica dacă clasa Actions conține o acțiune precum cea cerută de ruta URL-ului ( de forma http://domeniu/api/ACȚIUNE ). Dacă metoda dorită nu există, va întoarce o eroarea standard de HTML pentru resurse care nu au fost găsite: 404

Interfață prin care comunică APIul este bazată pe obiecte de tipul JSON, ideale pentru manipulările in JavaScript și pentru cereri de tipul AJAX.

Stocarea datelor

Întrucât aplicația generează fișiere de tip text, nu este necesară existența unei baze de date, totuși a fost definitivată o structurare în foldere și fișiere a fiecărei diagrame. Astfel orice diagramă salvată va fi stocată sub forma unui folder în directorul applications.

În folderul cu numele aplicației se vor găsi fișiere cu extensia .js, fișiere ce reprezintă transpunerea diagramei in clase JavaScript și un fișier uml2js.json.

Fișierul uml2js.json este fișierul în care se salvează structura canvasului ( clasele, relațiile și pozițiile acestora), de asemenea reprezintă structura care va fi încărcata de fiecare dată când se editează o diagramă deja existentă. Mai jos este prezentat un exemplu de diagramă salvată, pentru a evidenția structura fișierului uml2js.json.

Cum implementează UML2JS o clasă în JavaScript?

Deoarece JavaScript este un limba bazat pe principiul moștenirii prototipul obiectului superior și la momentul actual EcmaScript6 nu este complet definitivat și implementat în cele mai importante browsere ( Internet Explorer, Firefox, Google Chrome, Opera) pentru a crea o analogie cu limbajele cu limbaje precum Java sau C# în momentul generării codul claselor prezente în diagrame UML, aplicație se bazează pe utilizarea unei biblioteci JavaScript realizată de Angelo Dini numita Class.JS.

In manifestul acestui biblioteci Angelo Dini susține următoarele lucruri cu priviri la necesitatea existenței acestei biblioteci: „Eu nu sunt un mare fan al jQuery, mai ales abordarea jQuery UI, deoarece lipsește orice structură modulară și este aproape imposibil să se extindă. […] Dacă ajungi să găsești unul ( se referă la un plugin de jQuery) va trebui să modifici codul acestuia pentru a funcționa conform specificațiilor tale. Este greșit. Ar trebui să fii în măsură să iei plugin și îl poți extinde, lăsând neatinse codul. Acest lucru îmi permite să actualizeze cu ușurință pluginul fără a reimplementa propriilor modificări.

Există, de asemenea un al doilea motiv. O mulțime de dezvoltatori nu înțeleg principiile de moștenire prorotipale. JavaScript este una dintre putinele limbaje populare în care se adaptează acest concept. Acest lucru este confuz și conduce la o interpretare greșită. Acesta este motivul pentru care am creat class.js.”

UML2JS folosește două din metodele bibliotecii lui Angelo Dini și anume metoda Class si metoda Class.extend.

Metoda Class este metoda care generează un obiect ( constructorul clasei), care va fi folosit ulterior pentru generarea obiectelor din clasa respective. Are ca parametri un obiecte ce include toate atributele si metodele clasei așa cum au fost ele definite în interiorul diagramei UML.

Figura următoare exemplifică un model de clasă implementată utilizând biblioteca Class.JS.

Metoda Class.extend este folosită pentru realizarea relațiilor de moștenire între clase, fiind una din cele mai căutate și utilizare relații de către programatorii în JavaScript.

În mod asemănător metoda generează un obiect ( constructorul clasei), care va fi folosit pentru generarea obiectelor.

În momentul salvării unei diagrame UML, aplicația va genera o clasă cu structura celei din diagramă. Exemplul următor exemplifică codul generat pentru o clasă MyFirstClass, care conține două atribute și două metode una fără parametri și una cu parametri.

Crearea și gestionarea unei diagrame de clase

Interfața web a aplicație UML2JS a fost concepută într-un mod cât mai simplu, pentru a asigura atât o familiarizare ușoară a utilizatorului dar și pentru a oferi acestuia un mediu rapid de lucru.

Crearea sau încărcarea unei diagrame

În momentul accesării URL-ului aplicației de către utilizator, acesta va fi întâmpinat de un formular unde poate crea o noua diagramă sau de unde poate încărca una deja existenta.

După ce s-a ales tipul de diagramă, utilizatorului i se va afișa canvasul si panelul din stânga ( cu lista claselor ). Daca aplicația este una nouă atunci pe canvas va exista doar o singură clasa, clasă ce va avea numele diagramei.

Manipularea unei clase

Pentru a edita o clasă, utilizatorul poate arăta panelul de editare prin apăsarea unei săgeți albastre atașate panelului.

Acest panel este împărțit în 3 secțiuni, în aceeași ordine precum blocurile care alcătuiesc diagrame unei clase. Datorită consistenței între diagramă și panoul de editare, utilizatorul va putea modifica în mod eficient conținutul clasei selectate.

Pentru a adăuga o nouă clasă pe canvas, este de ajuns să se facă dublu click în poziția în care se dorește adăugarea clasei, aceasta putând fi mutată ulteriori printr-o operațiune de drag-n-drop.

Pentru a șterge o clasă, utilizatorul va selecta clasa de pe canvas sau de din lista disponibilă în panelul din stângă. Clasa selectată va avea două butoane în partea dreaptă, o săgeată și un X. Ștergerea unei clase se va face prin apăsarea butonului X.

Adăugarea și ștergerea uni relații

Pentru a adăuga o relație sunt necesare cel puțin două clase să fie existente pe canvas. Adăugarea unei relații se face print-o operațiune de drag-n-drop de la o clasă la cealaltă, în funcție de sensul săgeții relației, în cazul în care contează sensul. Utilizatorul va fi notificat vizual că este în modul de generare a relațiilor prin adăugarea unui overlay verde peste clasa de pornire si unul pe clase care se află în prezent, sugerând de asemenea cele 2 clase care vor fi implicate în realizarea relației.

Pentru selectarea tipului relației utilizatorul va trebui să selecteze o opțiune din popup-ul următor:

Pe lângă tipul de relație, utilizatorul va fi informat si despre sensul în care se va crea relația. Acesta poate anula creare relației daca observă o neregulă, sau nu mai este necesară. De asemenea în cazul relațiilor de asociere, agregare sau compoziție, poate defini caracterul de multiplicitate al termenilor relației.

Ștergerea unei relații se face de pe canvas, pe butonul marcat cu X care apare atunci când mouse-ul se află deasupra liniei generate de relație.

Salvarea diagramei

Atunci când utilizatorul consideră că diagrama a fost terminată, sau daca dorește să salveze un anumite progres în realizarea diagramei, acesta poate apăsa butonul de save ( discheta care apare în dreapta sus ).

La o reîntoarcere ulterioară, utilizatorul o va putea reîncărca și va putea continua lucrul.

Descărcarea codului generat

Pentru a descărca codul generat de aplicație, utilizatorul va apusa butonul de download din meniul de sus al aplicației. APIul aplicației va genera un fișier .zip care conține toate clasele prezente în aplicație, biblioteca folosită pentru generarea obiectelor care vor fi instanțiate ( Class.js) și fișierul generat de canvasul aplicației ce conține structura diagramei UML ( uml2js.json )

Concluzii

Aplicația UML2JS își propune să acopere cazul celei mai întâlnite probleme în programarea unei aplicații web și anume dificultatea urmăririi și a mentenanței codului sursă. Framework-urile de JavaScript apărute în ultimii ani folosesc modele din ce în ce mai abstracte de relaționare între DOM și cod ( de exemplu AngularJS, ReactJS, PolymerJS ), impun structuri proprii și adaugă un nivel de dificultatea pentru o persoană care încearcă să înțeleagă codul sursă scris de altcineva.

Tendințele ultimilor ani de a finaliza aplicații web cât mai rapid, sau de a crea aplicații de tip MVP ( Minimum Viable Product – concept ce se referă la elaborarea unui produs minimal ca funcționalitate pentru a primi feedback de la un anumit grup de persoane ) reduc timpii în care un programator își poate documenta munca, lucru care se resimte în dezvoltările ulterioare ale proiectului.

Prin folosirea unei aplicații de tipul UML2JS utilizatorii nu generează doar o structură comună a codului pentru întreg proiectul ci contribuie la documentarea indirectă, prin generarea unei diagrame statice a structurii aplicației, crescând timpul de productivitate al persoanelor implicate în dezvoltarea proiectului, fiind mult mai ușor de urmărit o diagramă decât trecerea fugitivă prin cod sau documentație incompletă.

Tabelul figurilor

Figură 2.1 Exemplu diagramă de clase arătând o singură clasă 3

Figură 2.2 Exemplu de moștenire 5

Figură 2.3 Un exemplu de o asociație bidirecțională 6

Figură 2.4 Un exemplu de o asociație unidirecțională: clasa OverdrawnAccountsReport știe despre clasa BankAccount, dar clasa BankAccount nu știe despre asociația. 7

Figură 2.5 Exemplu de relație de agregare 8

Figură 2.6 Exemplu de relație de compoziție 9

Figură 3.1 Un exemplu de utilizare al constructorului unei clase 13

Figură 3.2 Constructorul unei clase 14

Figură 3.3 Un exemplu de utilizare a metodelor unei clase 14

Figură 4.1 Exemplu al conținutul clasei Actions din APIul de PHP 29

Figură 4.2 Funcția care se ocupă de gestionarea acțiunilor API-ului 29

Figură 4.3 Exemplu de structură al fișierului uml2js.json 30

Figură 4.4 Exemplu de clasa folosind Class.JS 32

Figură 4.5 Exemplu de moștenire utilizând Class.JS 32

Figură 4.6 Exemplu de clasă generata de UML2JS 32

Figură 4.7 Crearea sau încărcarea unei diagrame un UML2JS 33

Figură 4.8 Canvasul Aplicației și lista claselor existente 34

Figură 4.9 Panelul de gestionare al conținutului unei clase 34

Figură 4.10 Popup-ul de selectare al tipului de relație 35

Figură 4.11 Descărcarea aplicației generate de diagrama UML 36

Bibliografie