108
1 UNIVRSITATEA TITU MAIORESCU FACULTATEA DE INFORMATICA P P R R O O I I E E C C T T A A R R E E A A I I N N T T E E R R F F E E Ţ Ţ E E L L O O R R G G R R A A F F I I C C E E Mironela Pîrnău - 2010 -

Curs Proiectarea Interfetelor Grafice

Embed Size (px)

DESCRIPTION

curs

Citation preview

Page 1: Curs Proiectarea Interfetelor Grafice

1

UNIVRSITATEA TITU MAIORESCU FACULTATEA DE INFORMATICA

PPRROOIIEECCTTAARREEAA IINNTTEERRFFEEŢŢEELLOORR GGRRAAFFIICCEE

Mironela Pîrnău

- 2010 -

Page 2: Curs Proiectarea Interfetelor Grafice

2

Tematica Modulul I. JAVA. GENERALITATI 4

Modulul II. GRAPHIC USER INTERFACE.

COMPONENTELE PACHETULUI SWING

12

Modulul III. UTILIZARE NETBEANS 51

Modulul IV. LUCRU CA BAZE DE DATE IN JAVA 78

Modulul V. APPLET-URI. 88

Modulul VI. JAVA SERVER PAGES (JSP) 96

Modulul VII. ALTE APLICATII 100

Bibliografie 105

Modele bilete examen 107

Page 3: Curs Proiectarea Interfetelor Grafice

3

Nota finală care se va acorda fiecărui student va conţine următoarele componente în procentele menţionate: - colocviu final 60% - lucrari practice/ proiect, etc. 30% (fiecare student, va realiza un “PROJECT” care va cuprinde minim 15 aplicatii practice, selectate din cele 7 module ale suportului de curs. Aplicatiile vor fi “//comentate” si personalizate.

- teme de control 10% (la alegere, se va rezolva, un studiu de caz, de la cele 8 adrese web-enumerate mai jos. Explicarea modului de lucru, se va face intr-un document de forma nume_student.pdf)

1. http://netbeans.org/kb/docs/java/quickstart-gui.html 2. http://netbeans.org/kb/docs/java/gui-db.html 3. http://netbeans.org/kb/docs/java/gui-db-custom.html 4. http://netbeans.org/kb/docs/web/applets.html 5. http://netbeans.org/kb/docs/web/security-webapps.html 6. http://netbeans.org/kb/docs/web/mysql-webapp.html 7. http://netbeans.org/kb/docs/web/jsf20-intro.html 8. http://netbeans.org/kb/docs/web/jsf20-support.html

Page 4: Curs Proiectarea Interfetelor Grafice

4

MODULUL I JAVA. GENERALITĂŢI Java este un mediu de programare ce oferă utilizatorului cadrul necesar şi uneltele necesare pentru dezvoltarea aplicaţiilor Java. Java este o tehnologie ce oferă suport dezvoltării de aplicaţii distribuite, independente de platformă.

Programele Java pot rula pe diferite tipuri de platforme, cu condiţia ca pe aceste platforme să fie instalată o maşină virtuală Java deasupra platformei respective. Avantajul limbajului Java, comparativ cu alte limbaje de programare este conexiunea strânsă cu tehnologia Internet.

Tehnologia Java se concretizează într-un portofoliu de produse concepute pornind de

la ideea că acelaşi software trebuie să ruleze pe sisteme şi dispozitive diferite. Produsele sunt

organizate după următoarea structură:

Nucleu/Aplicaţii desktop – J2SE ( Java 2 Platform Standard Edition )

Suport enterprise/Server – J2EE ( Java 2 Platform Enterprise Edition )

Suport pentru dispozitive mobile – J2ME ( Java 2 Platform Micro Edition )

Suport pentru Servicii WEB si suport XML

Alte tehnologii

Nucleu/Aplicaţii desktop – J2SE ( Java 2 Standard Edition )

J2SE pune la dispoziţia programatorilor un mediu complet pentru dezvoltarea

aplicaţiilor desktop şi constituie baza pentru J2EE.

Nucleul

Conţine limbajul Java, şi mediul de execuţie pentru aplicaţii. Utilizat

împreună cu componentele desktop furnizează suport pentru toată gama de

aplicaţii şi applet-uri independente de paltformă;

Aplicaţii desktop

Cuprind biblioteci de clase pentru crearea componentelor reutilizabile,

precum şi a aplicaţiilor cu interfaţă grafică;

Suport enterprise/Server – J2EE ( Java 2 Platform Enterprise Edition )

Defineşte standarde pentru dezvoltarea aplicaţiilor bazate pe componente, în cadrul unei

arhitecturi multinivel.

Suport pentru dispozitive mobile – J2ME ( Java 2 Platform Micro Edition )

Pune la dispoziţie un mediu de aplicaţie ce se adresează necesităţilor specifice

domeniului telefoniei mobile, şi altor dispozitive mobile. Include maşini virtuale şi un set de

Page 5: Curs Proiectarea Interfetelor Grafice

5

interfeţe de programare a aplicaţiilor definite în cadrul comunităţii Java, precum şi de experţi

ai fabricanţilor renumiţi de dispozitive.

Suport pentru Servicii WEB

Serviciile WEB reprezintă aplicaţii orientate WEB care folosesc standardele deshise

XML şi protocoale de transport pentru schimbul de informaţii cu aplicaţii client sau alte

servicii WEB. Suportul se concretizează în interfeţe de programare a aplicaţiilor şi

instrumente pentru dezvoltarea de servicii WEB interoperabile şi aplicaţii client.

Interschimbul de date se realizează datorită faptului că acestea sunt reprezentate în standardul

XML.

Suport XML - Extensible Markup Language (XML), reprezintă un standard deschis,

interoperabil şi bazat pe text pentru reprezentarea datelor. De asemenea constituie un element

esenţial în dezvoltarea de servicii WEB, după cum s-a arătat mai sus.

Descrierea tehnologiilor Java

Java Foundation Classes (JFC)

Reprezintă un ansamblu de biblioteci de clase distribuite ca parte integrantă din

platforma Java 2, ediţia standard (J2SE), ce oferă suport pentru construirea de

interfeţe grafice utilizator, pentru aplicaţii client ce rulează pe platformele Microsoft

Windows, Linux şi MacOS.

JavaBeans

Această tehnologie specifică arhitectura componentelor J2SE. Componentele

reprezintă programe reutilizabile, ce se dezvoltă şi asamblează cu uşurinţă pentru a

crea produse complexe.

JDBC ( Java Database Conectivity )

Se constituie într-o interfaţă de programare a aplicaţiilor cu baze de date relaţionale,

pentru o mare varietate de furnizori. Oferă suport şi pentru prelucrarea surselor de date

tabulare, ca de exemplu foi de calcul, şi fişierelor text. Accesul la bazele de date se

realizează prin drivere specifice fiecărui furnizor.

Java RMI Java Remote Method Invocation )

Permite programatorilor dezvoltarea de aplicaţii distribuite în cadrul cărora

metodele obiectelor aflate la distanţă pot fi invocate de pe alte maşini virtuale. Pentru

transfer se foloseşte mecanismul de serializare.

JAI ( Java Advanced Imaging )

Page 6: Curs Proiectarea Interfetelor Grafice

6

Oferă un set de interfeţe bazate pe un model de programare avansat pentru

manipularea facilă a imaginilor.

JAAS ( Java Authentication And Authorization Service )

Set de interfeţe de programare a aplicaţiilor care permit impunerea autorizării

utilizatorilor şi controlul accesului acestora. Implementează varianta Java a cadrului

standard PAM ( Pluggable Authentication Module) şi suportă autentificare bazată pe

user.

JCA ( Java Communications API )

Se utilizează în cadrul aplicaţiilor cu suport de comunicaţie independent de platformă

prin fax, voice-mail şi smart-cards.

JCE ( Java Cryptography Extension )

Se constituie într-un set de pachete ce oferă un cadru pentru implementarea criptării,

generării de chei şi a algoritmilor de autentificare a mesajelor. Sunt implementate

cifruri sincrone, asincrone, la nivel de bloc şi la nivel de flux. De asemenea se oferă

suport pentru obiecte sigilate şi fluxuri securizate.

JMX ( Java Management Extensions )

Cuprinde un set de instrumente pentru dezvoltarea de soluţii distribuite, dinamice şi

modulare pentru gestiunea şi monitorizarea dispozitivelor, aplicaţiilor şi reţelelor

orientate pe servicii.

JMF ( Java Media Framework )

Permite exploatarea de către aplicaţii a resurselor multimedia, într-o manieră specifică

tehnologiei Java. Oferă facilităţi pentru captură, redare, codificare şi decodificare în şi

din multiple formate.

JNDI ( Java Naming And Directory Interface )

Înzestrează aplicaţiile bazate pe tehnologia Java cu o interfaţă unificată pentru

multiple servicii de nume şi directoare.

JSSE ( Java Secure Socket Extension )

Pachet ce gestionează securitatea comunicaţiilor pe Internet. Reprezintă versiunea

Java pentru protocoalele SSL ( Secure Sockets Layer ) şi TLS ( Transport Layer

Security ). Înglobează funcţionalitate pentru criptarea datelor, autentificare la nivel de

server, integritatea mesajelor şi opţional autentificare la nivel client.

JAXP( Java API for XML Processing )

Permite aplicaţiilor citirea şi transformarea documentelor XML independent de o

anumită implementare de procesare.

JAXR ( Java API for XML Registries )

Page 7: Curs Proiectarea Interfetelor Grafice

7

Oferă o modalitate uniformă de folosire a înregistrărilor bazate pe standarde deschise(

ca de exemplu ebXML ) sau a specificaţiilor de cosorţiu ( UDDI ).

Java Mail

Pune la dispoziţie un cadru independent de platformă şi protocol pentru dezvoltarea

aplicaţiilor pentru trimiterea de mesaje prin poştă electronică.

JMS ( Java Message Service ) - reprezintă un standard de mesaje ce permite componentelor

de aplicaţie J2EE să creeze, să trimită, să primească şi să citească mesaje. Permite

comunicarea în mediu distribuit prin cuplare slabă şi în mod asincron.

Java Servlet

Implementează un mecanism simplu şi consistent pentru extinderea funcţionalităţii

unui server WEB, pentru accesarea sistemelor de afaceri existente. Este de fapt o

aplicaţie ce se execută pe server la cererea unui client, cu un scop bine precizat.

JSP ( Java Server Pages ) - tehnologie reprezintă varianta Java pentru gestionarea paginilor

WEB cu

conţinut dinamic. Permite dezvoltarea rapidă a aplicaţiilor independente de server şi

platformă.

J2EE Connector - tehnologie Java pentru problema interconectării între variate servere de

aplicaţii şi sistemele informatice de întreprindere EIS – Enterprise Information Systems.

SAAJ ( SOAP with Attachments API for Java )

Pune la dispoziţie un standard de trimitere a documentelor XML prin Internet.

J2EE Transactions

Simplifică programarea aplicaţiilor pentru gestiunea tranzacţiilor distribuite. Suportul

pentru tranzacţiile distribuite este implementat prin două specificaţii JTA ( Java

Transaction API ) şi JTS ( Java Transaction Service ).

JMI ( Java Metadata Intarface )

Această specificaţie permite implementarea unei infrastructuri dinamice şi

independente de platformă pentru gestiunea creării, stocării, accesării, descoperirii şi

schimbului de metadate. Se bazează pe specificaţia MOF ( Meta Object Facility )

definită de OMG ( Object Management Group ), un standard industrial aprobat pentru

gestiunea metadatelor. Standardul MOF constă într-un set de artefacte de modelare de

bază, descrise prin UML. Modelele pentru metadate ( metamodele ) pot fi construite

din aceste blocuri de bază. JMI defineşte şi interfeţele Java standard pentru pentru

aceste componente de modelare, facilitând astfel descoperirea şi accesarea metadatelor

într-o manieră independentă de platformă. Descoperirea, interogarea sau accesarea

Page 8: Curs Proiectarea Interfetelor Grafice

8

metadatelor se realizează atât la momentul proiectării cât şi la momentul execuţiei.

Semantica oricărui sistem modelat poate fi complet descoperită şi manipulată.

Caracteristici ale limbajului Java

Caracteristicile limbajului Java care l-au făcut şi-l fac un limbaj de succes pe piaţa

actuală de software sunt prezentate in continuare: Simplitate Limbajul Java prezintă concepte fundamentale care sunt deosebit de simple.

Programarea Java se poate învăţa în câteva săptămâni. Părţile redundante din alte limbaje au fost îndepărtate şi s-au păstrat doar părţile strict necesare.

Tot în vederea simplităţii, tehnologia Java conţine aşa numitul Garbage Colector, care face ca programatorul să nu mai aibă grija dezalocării zonelor de memorie anterior alocate. Pentru cunoscătorii limbajului C++ acest lucru înseamnă că nu mai e nevoie de delete după new. Orientat pe obiecte Limbajul Java , spre deosebire de C/C++, este în întregime orientat pe obiecte. Nu există o aplicaţie în care să nu existe cel puţin un obiect, o clasă. În Java, orice, cu excepţia câtorva tipuri de date fundamentale, este un obiect. Tehnologia programării orientate pe obiecte (OOP – Object Oriented Programming) este singura care satisface cerinţele actuale ale dezvoltării software. Robust Se măreşte gradul de siguranţă al codului. Sunt două nivele de verificare pentru mărirea gradului de siguranţă: unul la compilare (prezent în marea majoritate a limbajelor) şi unul în timpul rularii. Ca urmare un program este mai puţin supus erorilor. Securitatea

Într-o lume în care calculatoarele nu mai pot exista ca enităţi solitare, fără a fi conectate în reţea, problema securităţii este una din cele mai stringente. Problema care se pune este aceea a existenţei unui nivel de securitate în cadrul limbajului.Unul din principalele avantaje ale limbajului Java care l-au făcut atât de popular este gradul de securitate. Programele Java sunt făcute să ruleze în sisteme distribuite, şi calculatoarele pe care ele lucrează nu pot fi sigure de provenienţa programelor. Dinamic

Java este un limbaj dinamic prin faptul că multe decizii privind evoluţia programului se iau în momentul rulării, la runtime. Datorită faptului că multe din aplicaţiile Java sunt preluate de pe Internet sub forma de applet-uri chiar în momentul execuţiei lor, deci din reţea, aceste programe pot fi actualizate să facă faţă noilor cerinţe, utilizatorul dispunând în orice moment de cea mai nouă variantă.

Independent de platformă Unul din marile avantaje ale limbajului Java este independenţa de platformă. Se

impunea această independenţă de platformă, ţinând cont de ideea de lucru în medii distribuite. De fapt un program Java lucrează pe o singură maşină: maşina virtuală Java ( Java Virtual Machine- JVM ).

Ca urmare a utilizării emulatorului un program Java poate rula pe orice platformă pentru care există un emulator Java. Partea negativă este că folosirea emulatorului duce la marirea timpului de execuţie. Soluţia este compilarea just-in-time (JIT) care transformă întregul program Java în program maşină înainte de execuţia lui.

Page 9: Curs Proiectarea Interfetelor Grafice

9

Compilatoarele just-in-time lucrează ca şi interpretoarele doar că conversia nu se face la nivel de instrucţiune ci la nivel de program, crescând considerabil viteza de execuţie a programului Java.

Suport pentru multithreading Multithreading-ul este cel care permite ca un program să execute mai multe sacini aparent în acelaşi timp, utilizând mai multe fire de execuţie (thread-uri).

Java oferă suport multithreading la nivel de limbaj deci la cel mai jos nivel (clasa Thread) oferindu-i utilizatorului posibilitatea de a crea un nou fir de execuţie ca şi cum ar creea oricare alt obiect. Mai mult, Java permite comunicarea între firele de execuţie precum şi sincronizara lor. Interconexiunea cu browsere WWW Acesta este unul din avantajele care a facut limbajul Java aşa de popular. Multe din firmele care dezvoltă browsere WWW au implementat maşina virtuală Java în interiorul acestor browsere.

Amintim cele mai utilizate browsere care suportă Java: Netscape Navigator al firmei Netscape şi Internet Explorer al firmei Microsoft. Având în vedere aceste caracteristici, Java s-a conturat ca un limbaj performant, care s-a impus în lumea informaticii. Pachetul JDK

La baza dezvoltării unui program Java stă mediul de dezvoltare pus la dispoziţie de firma Sun.

Acesta este Java Developers Kit (JDK-ul) şi trebuie considerat ca mediu de referinţă în programarea Java. Mediul JDK conţine pe de o parte o serie de biblioteci de clase Java necesare scrierii unui program şi pe de o parte un set de utilitare necesare compilării, testării, execuţiei şi documentării unei aplicaţii Java. O clasă, un fişier bytecode cu extensia .class, reprezintă unitatea fundamentală a unui program executabil Java.

O bibliotecă de clase cuprinde o serie de clase ce au un numitor comun. O astfel de bibliotecă este cunoscută în java sub numele de package.

JDK-ul conţine câteva package-uri fundamentale, package-uri care conţin clase fără de care nu se pot dezvolta aplicaţii Java. Package-urile Java incluse în JDK formează principalul API- Application Programming Interface.

Orice alt mediu care poate executa aplicaţii Java diferit de mediul JDK trebuie să includă acest API. Pe lângă aceste pachete fundamentale, utilizatorul poate folosi şi altele dezvoltate chiar de el. Trebuie însă să se asigure că aceste pachete adiţionale sunt disponibile şi pe platforma pe care aplicaţia se execută, nu numai unde aceasta a fost creată. Cuvântul cheie import este folosit pentru a face cunoscută utilizarea unei clase dintru-un package sau a unui întreg package.

Page 10: Curs Proiectarea Interfetelor Grafice

10

Exemplu: import java.sql.*; import java.awt.Graphics; import java.applet.*;

Un package este o colecţie de clase şi interfeţe Java între care există o relaţie de asociere. Prin utilizarea conceptului de package, Java oferă un mecanism de mamagement al identifiactorilor (numelor) care se pot atribui claselor (”name spaces”). Printr-un package Java se pot rezolva eventualele conflicte ce pot apărea datorită existenţei a două clase cu acelaşi nume. Astfel dacă avem clasa Rectangle din package-ul java.awt , putem avea aceeaşi clasă Rectangle din pachetul myPackage. Dacâ în program dorim să utilizăm clasa Rectangle din java.awt atunci se specifică aceasta prin import java.awt

Principalele package-uri din Java API

package java.applet

Pachetul conţine clasele necesare dezvoltării unui applet (program Java ce se execută în cadrul unui browser WWW)

package java.awt., java.awt.event, package javax.swing;

Pachete ce se folosesc în dezvoltarea interfeţelor grafice de comunicare cu utilizatorul şi dezvoltarea aplicaţiilor ce implică grafică

package java.beans Conţine clase necesare implementării tehnologiei Java Beans, o tehnologie orientată pe crearea unor componente ce pot fi reutilizate.

package java.io Pachetul include clasele necesare lucrului cu stream-uri package java.lang Conţine clasele fundamentale fără de care un program Java nu poate exista. package java.math Este utilizat pentru lucrul cu funcţii matematice package java.net

Pachetul conţine clasele necesare programării în reţea package java.rmi

Pachet utilizat pentru creearea unor aplicaţii Java ce lucrează în sisteme distribuite (RMI Remote Method Invocation). Uşurează apelul unor metode din obiecte disponibile pe diferite computere ce sunt conectate în reţea.

package java.security Pachet ce priveşte asigurarea unui mecanism de securitate al sistemului software dezvoltat.

Page 11: Curs Proiectarea Interfetelor Grafice

11

package java.sql Pachetul se foloseşte în vederea lucrului cu bazele de date. package java.text Pachetul este utilizat pentru lucrul cu texte. package java.util

Oferă suport pentru lucrul cu liste, vectori, dicţionare, informaţii legate de dată şi timp.

Pe lângă Java API pachetul JDK pune la dispoziţia programatorului o

serie de unelte necesare dezvoltării, testării, analizei şi documentării programelor Java. Dintre acestea amintim: javac- Java Language Compiler

Acesta este compilatorul java care realizează transformarea surselor text scrise în limbaj de programare Java în codul executabil pe maşina virtuală Java ( JVM ), în bytecodes, in clase java (fişiere cu extensia .class). Fişierul sursă (text limbaj Java) cu extensia .java se transmite ca şi paramentru în programul javac. javac HelloJava.java

java – Java Interpreter Acesta este interpetorul Java care execută programele Java (bytecodes, fişiere class) . Prin lansarea în execuţie a acestui utilitar se porneşte de fapt JVM. Programul emulează JVM convertind instrucţiunile JVM în instrucţiuni ale maşinii reale. Este util în execuţia aplicaţiilor Java stand-alone nu şi a applet-urilor. Are ca paramentru numele fişierului rezultat în urma compilării. java HelloJava

jre –Java Runtime Interpreter Este similar cu interpretorul java dar este o variantă mai simplificată jre HelloJava jdb – Java Language Debugger Este unealta utilizată pentru depanarea programelor Java javah – Java Header

Este utilizat pentru a permite programelor scrise în limbajul Java să comunice cu programele scrise în limbajul C. Cu javah se creează fişiere header C şi fişiere stub C necesare pentru a reliza această conexiune.

javadoc – Java Document

Page 12: Curs Proiectarea Interfetelor Grafice

12

Cu acest instrument se generează documenţia programelor Java în format html. Documentarea se face pe baza comentariilor din program. Programul javadoc se aplică asupra fişierelor sursă .java javadoc HelloJava.java

appletviewer Utilitarul este utilizat pentru testarea appleturilor. Programul lansează în execuţie o maşină virtuală Java. Este un browser minimal de WWW care suportă toate caracteristicile Java ale mediului jdk din care provine.

MODULU II

GRAPHIC USER INTERFACE. COMPONENTELE

PACHETULUI SWING

În proiectarea interfeţelor cu utilizatorul există numeroase abordări, clasificate după diferite

criterii. În funcţie de aspectul principal luat în considerare în dezvoltarea interfeţei există două

direcţii de proiectare foarte utilizate: proiectarea centrată pe sarcini şi proiectarea centrată pe

utilizator.

A. Proiectarea centrată pe sarcini (task centred interface design) e structurată în jurul unui

set de sarcini specifice pe care utilizatorul trebuie să le îndeplinească cu sistemul

respectiv. Aceste sarcini sunt selectate încă de la începutul etapei de proiectare şi apoi

sunt folosite pentru stabilirea diferitelor detalii legate de proiectare, pentru a ajuta în

luarea deciziilor de proiectare precum şi pentru evaluarea proiectării pe măsura

dezvoltării ei.

B. Proiectarea centrată pe utilizator (user-centred interface design) se bazează pe

înţelegerea domeniului de muncă a utilizatorilor finali vizaţi şi a modului în care aceştia

interacţionează cu calculatorul şi urmăreşte să faciliteze acţiunile oamenilor.

Compararea celor doua metode de proiectare:

Proiectarea centrată pe sarcini Proiectarea centrată pe utilizator

Software-ul este proiectat conform scopurilor producătorului, nu ale utilizatorului;

Atenţia este direcţionată spre tehnologie şi uşurinţa implementării,

Software-ul trebuie să mulţumească, să menajeze, să ajute utilizatorul, proiectarea bazându-se pe abilităţile şi nevoile reale ale utilizatorului, pe context, funcţii, sarcini;

Page 13: Curs Proiectarea Interfetelor Grafice

13

nu spre eficienţa utilizatorului (ergonomia acţiunilor lui);

Software-ul este focalizat pe caracteristici (feature-centric software), unele niciodată utilizate;

Software-ul devine mamut, incontrolabil

Proiectarea se realizează având în vedere cerinţele utilizatorului, nu cele ale producătorului;

Nu trebuie să se utilizeze un limbaj obscur, neînţeles de utilizator;

Software-ul abuzează de elementele grafice ale interfeţei (meniuri, ferestre, icon-uri, etc.)

Moduri de comunicare om - calculator prin intermediul interfetelor

Modurile de comunicare pot fi clasice, prin intermediul dispozitivelor tradiţionale

precum tastatura, monitorul, mouse-ul, boxele audio, joystick-ul, etc.

O altă modalitate este prin limbaj natural prin recunoaşterea textului, vocii şi a

gesturilor.

Un mod mai rapid de comunicare între utilizator şi computerul său şi-a făcut simţită

prezenţa o dată cu apariţia meniurilor.

Meniurile pot avea diverse forme, dimensiuni şi stiluri. Primul tip de interfaţă care

utilizează meniul avea la bază o aplicaţie al cărei rezultat era un meniul ale cărui opţiuni

ocupau întregul ecran. A apărut nevoia prezentării într-un mod mai estetic şi practic a

opţiunilor şi astfel s-a ajuns la o anumită grafică.

Interfaţa pe bază de bară de meniuri sau bară de acţiune dispusă în partea superioară a

ecranului sau a ferestrei cuprinde un set de acţiuni principale ce direcţionează utilizatorul

către alte potenţiale opţiuni din submeniuri cu deschidere în jos, în lateral sau mixt, în

cascadă.

O caracteristică a acestor meniuri este dinamicitatea; se pot prezenta într-un mod

diferit (tipul fontului, culoarea) anumite acţiuni care nu sunt momentan disponibile.

Cel mai recent stil îl constituie meniurile pop-up sau meniurile de context, deoarece

conţinutul depinde de contextul sarcinii pe care o are de îndeplinit utilizatorul. Aceste meniuri

conţin un set de acţiuni frecvente care sunt disponibile şi din bara de meniu.

Meniurile reprezintă un mod practic de a transforma viziunea designer-ului sistemului

într-o sumă de elemente pe care utilizatorul le poate vedea, înţelege şi folosi. Meniurile

furnizează o reprezentare vizuală a structurii sistemului sau a aplicaţiei şi opţiunile pe care le

are utilizatorul în fiecare moment.

Interfeţele viitoare au potenţialul de a furniza utilizatorului un spaţiu virtual care să-i

permită un mod de comunicare mai flexibil, mai natural cu mediul computaţional sau cu alţi

utilizatori, furnizând intrări şi primind răspunsuri, folosind echilibrat toate simţurile

Page 14: Curs Proiectarea Interfetelor Grafice

14

disponibile şi canalele de comunicare, în timp ce resursele umane şi cele ale sistemului sunt

optimizate.

Un design bun al interfeţei presupune o încărcare cât mai redusă a memoriei

utilizatorului. Faţă de interfeţele iniţiale (DOS), interfeţele grafice au avantajul de a furniza

informaţii şi indicaţii într-un mod grafic, prin elemente care au semnificaţie pentru utilizator

şi care completează astfel limitările memoriei umane.

Unul dintre principalele elemente ale interfeţelor grafice îl constituie meniurile, a

căror utilizare poate fi criteriul de bază în acceptarea sau respingerea unei interfeţe.

Prezentarea dinamică a opţiunilor potrivite pentru o anumită acţiune şi sublinierea

celor disponibile permit utilizatorilor explorarea interfeţei respective şi astfel identificarea

relaţiilor dintre obiecte şi acţiuni, care constituie un prim pas în procesul de învăţare.

O altă caracteristică a interfeţelor grafice este aceea că furnizează un feedback vizual

pentru a completa lipsurile caracteristice memoriei umane – de exemplu, dacă indicatorul

mouse-ului se găseşte pe o opţiune din bara de meniu, apare o zonă de informare de tip text,

care descrie acţiunea ce va rezulta în urma alegerii acelei opţiuni. Acest tip de informare este

de ajutor pentru acomodarea cu o interfaţă şi elimină necesitatea memorării de către utilizator

a unor informaţii în plus.

Interacţiunea utilizatorului cu interfaţa grafică

Tehnicile de interacţiune specifice interfeţelor grafice presupun atât utilizarea

tastaturii, cât şi a instrumentelor de indicare (a poziţiei pe ecran) pentru a putea manipula

informaţiile prezentate în interfaţă.

O altă caracteristică importantă a interfeţelor grafice este aceea că permite realizarea

de link-uri. Se pot realiza astfel documente compuse din alte documente, trecerea dintr-unul în

altul fiind uşor de realizat şi foarte rapidă. Se poate vorbi şi despre semantica interfeţelor

grafice: fiecare buton de control, icon, animaţiile şi sunetele trebuie să aibă o semnificaţie

pentru utilizator, pentru ca acesta să îşi atingă scopul.

Folosirea corectă a elementelor de mai sus trebuie să aibă ca răspuns din partea

utilizatorilor anumite corelaţii între elementele grafice din interfaţă şi acţiuni reale şi, în plus,

elementele prezentate într-un mod similar trebuie să aibă un efect similar pentru ca adaptarea

utilizatorului la modul de lucru să se facă cu eficienţă maximă.

Aplicatiile de sine statatoare se impart, dupa tipul interfetei cu utilizatorul in: a. Aplicatii de consola. Gen de interfata orientata pe caracter precum interfata sistemului de operare dos, sau interfata la livel de consola din UNIX.

Page 15: Curs Proiectarea Interfetelor Grafice

15

b. Aplicatii grafice (interfata grafica de tip fereastra). Aceste interfete folosesc GUI (Graphic User Interface). Interfaţa grafică cu utilizatorul (GUI), se referă la toate tipurile de comunicare vizuală între un program şi utilizatorii săi. Aceasta este o particularizare a interfeţei cu utilizatorul (UI), prin care vom înţelege conceptul generic de interacţiune între un program şi utilizatorii săi. TEHNOLOGIA JFC (SWING)

Tehnologia JFC (Java Foundation Classes) grupează un asamblu de facilităţi pentru

construirea de interfeţe grafice şi interactivitate în cadrul aplicaţiilor Java. Prima versiune a

bibliotecilor de clase a fost lansată în cadrul conferinţei JavaOne, în anul 1997.

Caracteristicile tehnologiei JFC

Caracteristică Descriere

Componente GUI Swing Componente GUI: Ferestre, dialoguri, meniuri, butoane, liste etc.

Suport pentru aspect Componentele grafice pot avea acelaşi aspect, independent de

platformă, sau aspecte corespunzătoare anumitor platfome

Suport pentru accesibilitate Inputul de la utilizator poate fi obţinut prin cititoare de ecran şi

monitoare Braille.

Grafică 2D

Permite încorporarea elementelor de grafică 2D, text, imagine în

aplicaţii şi applet-uri. De asemenea, include suport performant pentru

imprimare.

Suport Drag-and-Drop Extinde această facilitate, realizând comunicarea între aplicaţiile Java

şi cele native.

Internaţionalizare Permite dezvoltarea aplicaţiilor ce prelucrează text ce conţine

caractere corespunzătoare diferitelor limbi.

"Swing" reprezintă numele de cod al proiectului care a dezvoltat noile componente.

Neoficial, este frecvent folosit pentru a desemna JFC.

Biblioteca de clase care oferă servicii grafice se numeşte java.awt, AWT

fiind prescurtarea de la Abstract Window Toolkit şi este pachetul care care a suferit cele mai multe modificări în trecerea de la o versiune JDK la alta.

Structura de clase din Swing este asemănătoare cu cea din AWT, în sensul că toate componentele interfeţei grafice sunt derivate dintr-un singur părinte numit JComponent (care este derivat din clasa AWT Container).

Page 16: Curs Proiectarea Interfetelor Grafice

16

Pachetul de clase Swing reprezintă soluţia furnizată de Sun pentru crearea unor interfeţe utilizator grafice complet portabile pe orice platformă.

În Swing, toate numele claselor încep cu litera J, şi atunci când este posibil, numele este acelaşi cu cel al clasei AWT pe care o înlocuieşte.

În principiu, crearea unei aplicaţii grafice presupune următoarele lucruri: - crearea unei suprafete de afişare (jFrame)cum ar fi o fereastră) pe care vor fi aşezate obiectele grafice care servesc la comunicarea cu utilizatorul (butoane, controale de editare, texte, etc); - crearea şi aşezarea obiectelor grafice pe suprafata de afişare (la coordonatele x,y .....); - definirea unor acţiuni care trebuie să se execute în momentul când utilizatorul interacţionează cu obiectele grafice ale aplicatiei; - "ascultarea" evenimentelor generate de obiecte, în momentul interacţiunii cu utilizatorul şi executarea acţiunilor corespunzătoare aşa cum au fost ele definite.

Majoritatea obiectelor grafice sunt subclase ale clasei Component, clasa care defineşte generic o componentă grafică şi care poate interacţiona cu utilizatorul. Singura excepţie o constituie meniurile care descind din clasa MenuComponent.

Print-o componentă grafică se înţelege orice obiect care are o reprezentare grafică ce poate fi afişată pe ecran şi care poate interacţiona cu utilizatorul. Exemple de componente grafice sunt ferestrele, butoanele, bare de defilare etc. In general, toate componentele sunt definte de clase proprii ce se găsesc în pachetul java.awt, clasa Component fiind superclasa abstractă a tuturor acestor clase.

Crearea obiectelor grafice nu realizează automat şi afişarea lor pe ecran. Mai întâi ele trebuie aşezate pe o suprafaţă de afişare, care poate fi o fereastră sau suprafaţa unui applet, şi vor deveni vizibile în momentul în care suprafaţa pe care sunt afişate va fi vizibilă. O astfel de suprafaţă pe care se asează obiectele grafice reprezintă o instanţă a unei clase obţinută prin extensia clasei Container; din acest motiv suprafeţele de afişare vor mai fi numite şi containere. Clasa Container este o subclasă aparte a clasei Component, fiind la rândul ei superclasa tuturor suprafeţelor de afişare Java (ferestre, applet-uri, etc).

Page 17: Curs Proiectarea Interfetelor Grafice

17

Interfaţa grafică serveşte interacţiunii cu utilizatorul. De cele mai multe ori programul trebuie să facă o anumită prelucrare în momentul în care utilizatorul a efectuat o acţiune şi, prin urmare, obiectele grafice trebuie să genereze evenimente în funcţie de acţiunea pe care au suferit-o (actiune transmisă de la tastatură, mouse, etc.). Un eveniment este produs de o acţiune a utilizatorului asupra unui obiect grafic, deci evenimentele nu trebuiesc generate de programator, dar intr-un program trebuie specificat codul care se execută la aparitia unui eveniment.

Interceptarea evenimentelor se realizează prin intermediul unor clase de tip listener (ascultator, consumator de evenimente), clase care sunt definite în pachetul java.awt.event. In Java, orice componentă poate "consuma" evenimentele generate de o altă componenta grafică.

Componentele Swing Principalele componentele Swing definite in pachetul javax.swing.*;

Componentele Swing sunt derivate dintr-o singură clasă de bază, numită JComponent, care moşteneşte la rândul ei clasa Container din AWT. Putem schita corespondenta intre clasele AWT si Swing ca in figura 1

Page 18: Curs Proiectarea Interfetelor Grafice

18

Figura 1

Pe langa pachetul standard AWT, pachetul Swing adauga noi clase care permit

imbunatatirea interfetei realizate. In figura 2, sunt prezentate clasele noi introduse de catre SWING:

Page 19: Curs Proiectarea Interfetelor Grafice

19

Figura 2

Componentele prezentate, folosite pentru crearea interfeţelor grafice Swing pot fi grupate stfel: a

‐ Componente atomice

‐ JLabel, JButton, JCheckBox, JRadioButton, JToggleButton, JScrollBar, JSlider, JProgressBar, JSeparator

‐ Componente complexe ‐ JTable, JTree, JComboBox, JSpinner, JList, JFileChooser, ColorChooser,

JOptionPane

‐ Componente pentru editare de text

‐ JTextField, JFormattedTextField, JPasswordField, JTextArea, JEditorPane, JTextPane

Page 20: Curs Proiectarea Interfetelor Grafice

20

‐ Meniuri ‐ JMenuBar, JMenu, JPopupMenu, JMenuItem, JCheckboxMenuItem,

JRadioButtonMenuItem

Containere - reprezintă suprafeţe de afişare pe care pot fi plasate alte componente, eventual chiar alte containere. Superclasa componentelor de acest tip este Container, din modelul AWT.

Containere intermediare - reprezintă suprafeţe de afişare cu ajutorul cărora pot fi organizate mai eficient componentele aplicaţiei, putând fi imbricate. Acestea sunt:

JPanel, JScrollPane, JTabbedPane, JSplitPane, JLayeredPane, JDesktopPane, JRootPane

Jpanel este cel mai simplu container, avand aceeaşi funcţionalitate ca şi clasa Panel din AWT, fiind folosit pentru gruparea mai multor componente Swing şi plasarea lor împreună pe o altă suprafaţă de afişare. Gestionarul de poziţionare implicit este FlowLayout, acesta putând fi schimbat însă, chiar în momentul construirii obiectului JPanel, sau ulterior cu metoda setLayout. Adăugarea de componente se realizează ca pentru orice container, folosind metoda add( ).

JScrollPane este o clasă foarte importantă în arhitectura modelului Swing, deoarece oferă suport pentru derularea pe orizontală şi verticală a componentelor a căror reprezentare completă nu încape în suprafaţa asociată, nici o componentă Swing neoferind suport intrinsec pentru această operaţie.

Clasa JComponent este superclasa tuturor componentelor Swing, mai puţin a celor care descriu containere de nivel înalt JFrame, JDialog, JApplet. Deoarece JComponent extinde clasa Container, deci şi Component, ea moşteneşte funcţionalitatea generală a containerelor şi componentelor AWT, furnizând bineînţeles şi o serie întreagă de noi facilităţi.

Containere de nivel înalt

Un container top-level este un container care nu este inclus în nici un alt container. Din

acestea fac arte: p

‐ JFrame, JDialog, JWindow, JInternalFrame, JApplet Pentru a fi afişate pe ecran componentele grafice ale unei aplicaţii trebuie plasate pe o

suprafaţă de afişare (container). Fiecare componentă poate fi conţinută doar într-un singur container, adăugarea ei pe o suprafaţă nouă de afişare determinând eliminarea ei de pe vechiul container pe care fusese plasată. Deoarece containerele pot fi încapsulate în alte containere, o componentă va face parte la un moment dat dintr-o ierarhie. Rădăcina acestei ierarhii trebuie să fie un aşa numit container de nivel înalt, care este reprezentat de una din clasele JFrame, JDialog sau JApplet.

În general orice aplicaţie Java independentă bazată pe Swing conţine cel puţin un container de nivel înalt reprezentat de fereastra principală a programului, instanţă a clasei Jframe si una sau mai multe ferestre aditionale. Clasele care gestioneaza ferestrele in Swing sunt:

Clasa Jframe care permite crearea ferestrei aplicatiei, care contine bara de titlu, marginea, butoanele system: minimizare, maximizare si inchidere.

Page 21: Curs Proiectarea Interfetelor Grafice

Clasa JWindow care permite crearea unei ferestre simple, fara bara de titlu, meniu sau butoane sistem.

Clasa JDialog care permite crearea ferestrelor de dialog. Ferestrele de dialog pot fi modale sau nu. Ferestrele modale blocheaza focus-ul altor ferestre pana la inchiderea dialogului curent.

Pentru a crea ferestre de afisare a unor mesaje se poate utiliza direct o functie statica, fara a mai crea explicit un obiect tip dialog:

JOptionPane.showMessageDialog(frame, "Student la Informatica.");

Pentru ferestre de dialog standard exista clase specializate: JFileChooser si JColorChooser. Acestea pot fi utilizate pentru a selecta un fisier sau a alege o culoare.

Exemplu de cod pentru crearea unei ferestre principale:

Pentru

Pentru utiliza m APLIC imporimporclass A publ JF wi wi wi wi } }

ElemButoa

public static void main(String args[]) { JFrame win = new JFrame("Student la Informatica"); win.setSize(200, 200); win.show(); }

a accesa continutul unei ferestre se va folosi functia getContentPanel():

Container c = win.getContentPane()

21

a obtine inchiderea automata a aplicatiei atunci cand se apasa butonul de Close, se va

etoda:

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

AŢIE

t javax.swing.*; t java.awt.*; plic {

ic static void main(String args[]) { rame win = new JFrame("Aplicatia mea"); n.getContentPane().add( new JLabel("Utilizare swing!"));

n.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); n.pack(); n.show();

ente de control (widgets) ne

Page 22: Curs Proiectarea Interfetelor Grafice

22

Butoanele sunt elemente de control care, prin apasare, pot genera o actiune. Butoanele deriva din clasa JButton. In costructor primesc textul afisat pe buton. Prin metoda setMnemonic se pot asocia taste de apelare rapida (shortcut). Pentru a adauga un cuvant de comanda asociat butonului (cuvant ce va fi testat pentru efectuarea actiunii asociate) se foloseste metoda addActionCommand(). Exemplu de definire a unui buton JButton buton = new JButton("BUTON SWING!"); buton.setMnemonic('i'); buton.addActionCommand("butonulSwing"); // adaugarea unui buton pe o suprafata JPanel panouButon = new JPanel(); panouButon.add(buton); CheckBox Butoanele de marcaj sunt elemente de control care retin o anumita stare. In plus fata de butoanele simple, pentru ele se pot apela metodele setSelected (boolen marcat) pentru a stabili marcajul prin program, respectiv getSelected() pentru a testa starea marcajului. cb1 = new JCheckBox(“Optiune1"); cb1.setSelected(true); JPanel checkPanel = new JPanel(); checkPanel.setLayout(new GridLayout(0, 1)); //GridLayout Aşează componentele într-un grid bidimensional. checkPanel.add(cb1); RadioButton Butoanele radio sunt elemente de control care retin o anumita stare, la fel cu cele de marcaj. Deosebirea principala consta in faptul ca toate butoanele radio incluse in acelasi grup logic sunt mutual exclusive. Pentru gestionarea grupurilor de butoane radio se va folosi clasa ButtonGroup, respectiv metoda add() care adauga un buton la grup. Si pentru butoanele radio se pot apela metodele setSelected(boolen marcat) pentru a stabili marcajul prin program, respectiv getSelected() pentru a afla starea marcajului. // creare buton radio JRadioButton primulbuton = new JRadioButton(“BUTON 1”);

Page 23: Curs Proiectarea Interfetelor Grafice

23

primulbuton setActionCommand(“BUTON 1”); primulbuton.setSelected(true); JradioButton alt_doilea_buton = new JRadioButton(“BUTON 2”); alt_doilea_buton.setActionCommand(“BOTON 2”); … // definirea unui grup de butoane ButtonGroup grupbutoane = new ButtonGroup(); gropbutoane.add(primulbuton); gropbutoane.add(alt_doilea_buton); … // adaugarea butoanelor radio pe o suprafata Jpanel JPanel radioPanel = new JPanel(); radioPanel.setLayout(new GridLayout(0, 1)); radioPanel.add(primulbuton); radioPanel.add(alt_doilea_buton); APLICAŢIE import javax.swing.*; import java.awt.*; import java.awt.event.*; class Butoane extends JPanel { public Butoane() { JButton b1 = new JButton("ButonA"); JButton b2 = new JButton("ButonB"); this.setLayout(new GridLayout(1,0)); add(b1); add(b2); }} class CheckBoxuri extends JPanel { public CheckBoxuri() { JCheckBox cb1 = new JCheckBox("Optiune1"); cb1.setSelected(true); JCheckBox cb2 = new JCheckBox("Optiune2"); cb2.setSelected(true); JCheckBox cb3 = new JCheckBox("Optiune3"); cb3.setSelected(true); this.setLayout(new GridLayout(0,1)); add(cb1); add(cb2); add(cb3); }} class ButoaneRadio extends JPanel { public ButoaneRadio() { // Creare radio butoane JRadioButton butonAlb = new JRadioButton("Alb"); butonAlb.setActionCommand("Alb"); butonAlb.setSelected(true); JRadioButton butonRosu = new JRadioButton("Rosu"); butonRosu.setActionCommand("Rosu"); JRadioButton butonVerde = new JRadioButton("Verde");

Page 24: Curs Proiectarea Interfetelor Grafice

24

butonVerde.setActionCommand("Verde"); // Gruparea butoanelor ButtonGroup group = new ButtonGroup(); group.add(butonAlb); group.add(butonRosu); group.add(butonVerde); // Adaugarea butoanelor this.setLayout(new GridLayout(0,1)); add(butonAlb); add(butonRosu); add(butonVerde); }} public class Desen_aplicatie extends JFrame { public static void main(String args[]) { Desen_aplicatie app = new Desen_aplicatie(); Butoane panouButoane = new Butoane(); CheckBoxuri panouCheckBoxuri = new CheckBoxuri(); ButoaneRadio panouButoaneRadio = new ButoaneRadio(); JPanel panou = new JPanel(); panou.setLayout(new GridLayout(0,1)); panou.add(panouButoane); panou.add(panouCheckBoxuri); panou.add(panouButoaneRadio); panou.setBorder( BorderFactory.createEmptyBorder(20, 20, 20, 20)); app.getContentPane().add(panou); app.pack(); app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); app.show(); } }

ListBox ListBox-urile afiseaza liste de optiuni. Ele se compun dintr-un element care se ocupa de vizualizare (derivat din clasa JList), respectiv dintr-un element care se ocupa cu gestionarea continutului (derivat din ListModel). Interfata ListModel pune la dispozitie o metoda addElement() care permite adaugarea unei noi optiuni in lista.

Page 25: Curs Proiectarea Interfetelor Grafice

25

Constructorul clasei JList primeste un obiect de tip ListModel pe care il va afisa pe ecran. Pentru a avea la dispozitie bare de derulare asociate listei, aceasta va trebui inclusa intr-un element de tip JScrollPane (un panou derulant). Aditional listelor simple se pot defini si liste cu derulare (de tip ComboBox). Acestea afiseaza in mod obisnuit o singura optiune din lista iar pentru a accesa restul optinulor lista trebuie derulata de la un buton special. Listele derulante nu trebuie sa fie adaugate intr-un JScrollPane. ListModel listModel = new DefaultListModel(); listModel.addElement(“Linie1"); … JList list = new JList(listModel); list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION); // pentru selectii multiple se utiliyeaya parametrul MULTIPLE_INTERVAL_SELECTION list.setSelectedIndex(0); // primul element din lista este implicit selectat JScrollPane listScrollPane = new JScrollPane(list); -------- String[] culori = { "Alb", "Negru", "Rosu", "Verde", "Albastru" }; JComboBox listaCulori = new JComboBox(culori); listaCulori.setSelectedIndex(1); // selecteaza elementul 2 (Negru) listaCulori.setEditable(true); Elemente pentru editare text

Pentru a putea afisa, respectiv edita o linie de text se pot utiliza elemente de tip JTextField. Acestea permit afisarea si editarea unei linii de text, avand metode precum

setText() – stabileste textul afisat getText() – citeste textul introdus

Pentru a edita mai multe linii de text se poate folosi clasa JtextPane o subclasa a jEditorPane, care permite editarea si formatarea textului sau jTextArrea, care permite editarea de text neformatat. Gestionarea evenimentelor (listenere)

Aplicatiile cu interfete grafice sunt aplicatii orientate pe evenimente. Anumite evenimente sunt de nivel scăzut cum ar fi apăsarea şi eliberarea unei taste, mutarea cursorului mouse-lui sau apăsarea unui buton al acestuia, iar altele sunt de nivel înalt, cum ar fi selectarea unei opţiuni dintr-un meniu, apăsarea unui buton sau introducere de text într-un câmp.

Evenimentele de nivel înalt implică de fapt mai multe evenimente de nivel mai scăzut. De exemplu introducerea de text într-un câmp implică mutarea cursorului mouse-ului, apăsarea butonului mouse-ului sau apăsarea şi eliberarea mai multor taste.

Page 26: Curs Proiectarea Interfetelor Grafice

In gestionarea evenimentelor intervin obiecte de tip Listener si Event. Pentru a trata evenimentele ce apar intr-o aplicatie trebuie respectati pasii:

• Implementarea unei clase derivata dintr-o clasa Listener:

• Inregistrarea unei instante a clasei precedente pe post de listner pentru o componenta derivata din JComponent:

public class MyClass implements XXXListener { public void eveniment(XXXEvent e) { ...//tratarea evenimentului... }

oComponenta.addActionListener(instanceOfMyClass);

• Tratarea evenimentul de apasare pe un buton se va efectua utiliza clasa ActionListener:

class ListenerPtButon implements ActionListener { private int numClicks = 0; public void actionPerformed(ActionEvent e){ numClicks++; ((JButton)e.getSource()).setText(“Apasat: “ + numClicks); } } JButton butonulMeu = new JButton(“Apasa: 0”); butonulMeu. addActionListener(new ListenerPtButon());

Exemplu de cod pentru ListBox, TextArea si Listener: import javax.swing.*; import javax.swing.event.*; import java.awt.*; import java.awt.event.*; class ListBox1 extends JScrollPane { private JList list; public JList getList() { return list; } public ListBox1() { DefaultListModel listModel = new DefaultListModel(); listModel.addElement("Randul 1"); listModel.addElement("Randul 2"); listModel.addElement("Randul 3"); list = new JList(listModel); list.setVisibleRowCount(3); list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION); list.setSelectedIndex(0); setViewportView(list); }} class SelectieLista implements ListSelectionListener { private JTextArea consola; ListModel listModel; public SelectieLista(JTextArea output, ListModel model) { super(); consola = output;

26

Page 27: Curs Proiectarea Interfetelor Grafice

27

listModel = model; } public void valueChanged(ListSelectionEvent e) { boolean isAdjusting = e.getValueIsAdjusting(); ListSelectionModel lsm = (ListSelectionModel)e.getSource(); if(!isAdjusting) { int primulel = e.getFirstIndex(); int ultimulel = e.getLastIndex(); for (int i = primulel; i<=ultimulel; i++) if(lsm.isSelectedIndex(i)) consola.append("\nDomnule student ati selectat : "+listModel.getElementAt(i)); } }} public class liste1 extends JFrame { public static void main(String args[]) { liste1 app = new liste1(); ListBox1 panouLista = new ListBox1(); JTextArea consola = new JTextArea(); ListSelectionModel listSelectionModel = panouLista.getList().getSelectionModel(); listSelectionModel.addListSelectionListener( new SelectieLista(consola, panouLista.getList().getModel())); JPanel panou = new JPanel(); panou.setLayout(new GridLayout(0,1)); panou.add(panouLista); panou.add(new JScrollPane(consola)); panou.setBorder( BorderFactory.createEmptyBorder(20, 20, 20, 20)); app.getContentPane().add(panou); app.pack(); app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); app.show(); consola.append("Mesaj "); }}

Un frame este o fereastră cu scop general prin intermediul cărei utilizatorii interacţionează în mod obişnuit cu aplicaţia. Într-o aplicaţie există cel puţin un frame care va servi drept fereastra principală. Un dialog este o fereastră cu scop limitat destinată în primul rând afişării unor informaţii cum sunt mesajele de eroare sau pentru preluarea unor răspunsuri simple (standard) gen da sau nu.

Page 28: Curs Proiectarea Interfetelor Grafice

28

Corespunzător acestor tipuri de ferestre există două clase specifice Frame şi Dialog. Stabilirea principalelor trăsături pentru ferestrele tip frame se realizează pe baza următoarelor metode:

• setsize(lăţime, lungime) pentru stabilirea dimesiunilor; • setResizeable(true|flase) pentru a activa sau dezactiva posibilitatea

redimesionării ferestrei de către utilizator; • setTitle(“text”) pentru desemna un titlu afişat în bara superioară a

ferestrei; • setLocation(x, y) pentru a desemna originea colţului stânga-sus al

ferestrei, de remarcat faptul că originea (0, 0) de la care sunt consideraţi factorii x şi y este colţul stânga sus al cadrului superior şi nu cel din stânga-jos;

• setVisible(true|flase) pentru a afişa sau ascunde fereastra, echivalent cu metodele show() şi hide(), recomandate a fi înlocuite cu această metodă.

Menirea unui unui astfel de frame este să găzduiască obiectele GUI cu care va interacţiona utilizatorul aplicaţiei. Distribuirea, localizarea sau poziţionarea obiectelor într-o fereastră poate fi controlată folosind un anumit model de gestionare -layout manager- care este desemnat prin metoda setLayout(). Dacă se optează pentru poziţionarea absolută (fără nici un factor de relativizare a obiectelor funcţie de mărimea ferestrei de exemplu) atunci metoda setlayout() este apelată în felul următor: setLayout(null); În acest fel obiectele (butoane, căsuţe de text, grupuri de opţiuni etc.) vor fi afişate întotdeauna la coordonatele stabilite de programator. Spre exemplu poziţionarea şi dimensionarea unui boton de comandă (clasa java.awt.Button sau javax.swing.JButton în Swing) se realizează prin metoda: setBounds(x, y, lăţime, lungime); Plasarea unor componente GUI într-un cadru implică în Java două declaraţii sau specificaţii:

1. declararea în clasa derivată din Frame (sau JFrame) a membrilor care desemnează componentele grafice ce vor fi afişate la execuţie;

2. la instanţierea ferestrei respective (sau mai exact a clasei derivate din Frame) se va specifica explicit (în cadrul constructorului) instanţierea componentelor grafice şi apoi afişarea lor prin metoda add():

add(InstanţăButon); import javax.swing.*; import java.awt.*;

Page 29: Curs Proiectarea Interfetelor Grafice

29

import java.awt.event.*; public class frame extends JFrame implements ActionListener, WindowListener{ // Declar doua componente care vor apartine cadrului FrameTest Button b1; Button b2; // In constructorul FrameTest activez butoanele, fereastra coresponzatoare // cadrului FrameTest, obiectele receptoare pentru evenimetele butoanelor // si cele receptoare pentru evenimentele ferestrei public frame(){ // stabilsc titlul ferestrei this.setTitle("Frame Test"); // inregistrez obiectul care va trata evenimentele ferestrei // adica (insusi cadrul TestFrame) this.addWindowListener(this); setLayout(null); // instantiez butoanele, le stabilesc dimensiunile, // inregistrez obiectele care vor trata evenimentele lor (cadrul FrameTest) // si le activez in cadrul FrameTest b1 = new Button("OK"); b2 = new Button("Cancel"); b1.setBounds(50, 100, 50, 50); b2.setBounds(50, 180, 50, 50); b1.addActionListener(this); b2.addActionListener(this); add(b1); add(b2); // stabilesc dimensiunile ferestrei cadrului FrameTesti o afisez setSize(300, 300); setVisible(true); } // metoda in care tratez evenimentele butonului b1 care va inchide fereastra // si va incheia procesul de executie public void actionPerformed(ActionEvent event){ if (event.getSource().equals(b1)) setVisible(false); System.exit(0); } // Implementez metodele cerute de interfata WindowListener // la care se conformeaza obiectul care trateaza evenimentele ferestrei // (adica insusi cadrul FrameTest) public void windowActivated(WindowEvent event){} public void windowClosing(WindowEvent event){ System.exit(0); }

Page 30: Curs Proiectarea Interfetelor Grafice

30

public void windowClosed(WindowEvent event){} public void windowDeactivated(WindowEvent event){} public void windowIconified(WindowEvent event){} public void windowDeiconified(WindowEvent event){} public void windowOpened(WindowEvent event){} // metoda main care instantiaza cadrul TestFrame, afisind astfel fereastra // cu cele doua butoane public static void main(String[] args) { frame frm = new frame(); } }

Exemple de componente din biblioteca javax.swing

JButton Un simplu buton de comandă care poate fi apăsat printr-un click de mouse

JCheckBox Un buton care poate fi “bifat” JComboBox O listă drop-down clasică care poate conţine opţional şi un

camp textual editabil. Utilizatorul poate de asemenea selecta o valoare din listă care va fi afişată in câmpul textual

JFileChooser O componentă care asigură un mecanism simplu pentru selectarea unui fişier

JLabel O componentă care conţine un şir textual sau o imagine (nu reacţionează la evenimente de introducere/editare text)

JList O componentă care permite utilizatorului să selecteze unul sau mai multe dintre elementele care le conţine

JRadioButton Un buton de stare on/off. De obicei sunt organizate în grupuri dintre care unul singur poate fi selectat pe poziţia “on”

Page 31: Curs Proiectarea Interfetelor Grafice

31

JScrollPanel O componentă care gestionează o porţiune vizualizabilă prin derularea conţinutului în cadrul unui view

JSlider O componentă care permite utilizatorului să selecteze o valoare prin rularea unui indicator pe o scală (asemenea unui “potenţiometru”)

JTextArea O zonă care poate găzdui mai multe linii de text editabile sau nu

JTextField O zonă pentru introducerea unei singure linii de text JComponent este o subclasă a java.awt.Component şi va moşteni astfel multe dintre cele mai evidente proprietăţi ale acestei clase. Proprietăţile generice ale unei componente includ colorile pentru background şi foreground, locaţia în cadrul gazdă şi dimensiunea. Valorile acestora pot fi obţinute prin metodele: public Color getForeground () ; public Color getBackground () ; public Point getLocation () ; public Dimension getSize () ; public Rectangle getBounds() ; şi pot fi stabilite prin metodele: public void setForeground(Color.denculoare) - culoare text; public void setBackground(Color.denculoare)- culoare fundal; public void setLocation (Point p) ; public void setSize (Dimension d) ; public void setBounds(int x,int y,int Width,int Height) ; Color, point, Dimension şi Rectangle sunt clase AWT (definite în biblioteca java.awt). Clasa Color deţine un număr de referinţe de constante cum ar fi Color.red, Color.blue, Color.green. O instanţă a clasei Point reprezintă o poziţie relativă într-un spaţiu determinat prin coordonate x-y. Unităţile sunt în pixeli, iar originea (0, 0) înseamnă colţul din dreapta sus. Atributele unui Point pot fi accesate prin variabilele (membrii) publici x şi y de tip int. Acestă metodă are şi metode getX şi getY care returnează double, dar nu are metode setX şi setY. O instanţă a clasei Dimension încapsulează lăţimea şi înălţimea, de asemenea în pixeli. Atributele pot fi accesate la fel ca şi în cazul clasei Point prin membrii publici height şi width. La fel există metodele: public double getHeight() public double getWidth()

Page 32: Curs Proiectarea Interfetelor Grafice

32

O instanţă a clasei Rectangle specifică o zonă într-un spaţiu de coordonate, astfel: membrii height şi width specifică înălţimea respectiv lăţimea, iar membrii x respectiv y specifică coordonatele obiectului relativ la părintele său (cel care îl conţine).

Containere Un obiect care poate conţine componente se numeşte container. Acestea sunt modelate de către clasa abstractă java.awt.Container. Un aspect important, care simplifică lucrul cu intefeţele grafice, constă în faptul că această clasă este, la rândul ei, derivată din clasa Component. Prin urmare un Container poate conţine un alt Container. De asemenea clasa Swing JComponent este o subclasă a clasei Container. Cum orice JComponent poate conţine alte componente putem spune că:

• O componentă reprezintă un element distinct al unei interfeţe grafice utilizator, cum ar fi un buton, un câmp textual etc.

• Un container reprezintă o componentă a interfeţei grafice utilizator care poate conţine alte componente.

Componentă

Container

JComponent

are

Relaţiile Componentă Container JComponent

Cel mai simplu container este JPanel. Un JPanel este folosit în general ca o regiune simplă în care sunt aduse şi grupate o colecţie de alte componente. Componentele sunt adăugate unui container prin metoda add(). De exemplu setul următor de instrucţiuni creează un JPanel şi adaugă două butoane:

JPanel p = new JPanel; p.add(new JButton(”Ok”)); p.add(new JButton(”Cancel”));

Containere top-level

Page 33: Curs Proiectarea Interfetelor Grafice

33

Un container top-level este un container care nu este inclus în nici un alt container. Clasele Swing JApplet, JDialog, JFrame şi JWindow reprezintă containerele top-level din Swing. Container-ul standard pentru o aplicaţie de interfaţă grafică este JFrame.Un JFrame este o fereastră cu titlu şi margini bine definite care poate fi mutată, redimensionată, minimizată (iconificată) etc. De asemenea un JFrame poate avea o bară de meniu. Sunt însă două lucruri mai deosebite ce merită menţionate în legătură cu această clasă: deşi este o clasă derivată în primul rând din java.awt.Container nu este totuşi o subclasă a JComponent, iar în al doilea rând aceasta delegă responsabilitatea gestiunii componentelor sale unui alt obiect de tip JRootPane. Un JRootPane derivă din JComponent şi are ca principală responsabilitate gestionarea conţinutul unui alt container. Un astfel de obiect este un compozit incluzând printre altele un (panou) content pane care de obicei este un JPanel şi reprezintă aria de lucru dintr-un JFrame, excluzând titlul, marginile şi meniul. Lucrurile par destul de complicate însă ceea ce trebuie reţinut este faptul că un JFrame are un JRootPane care conţine un „panou de componente” (un „content pane”). Pentru a obţine referinţa panoului de componente al unui JFrame se apelează la metoda getContentPane() care returnează un obiect de tip java.awt.Container.

Adăugarea componentelor într-un JFrame După cum am arătat mai înainte, clasa JFrame este un container care îşi delegă responsabilitatea gestiunii componentelor sale unui JRootPane. Prin urmare pentru a adăuga un buton acesta trebui plasat de fapt pe „panoul de componente” cam în felul următor:

JFrame f = new JFrame("JFrame Test"); f.setSize(300, 200); f.setVisible(true); JButton b = new JButton("OK"); Container cp = f.getContentPane(); cp.add(b);

Adăugarea unei componente nu este şi condiţia suficientă pentru afişarea acesteia. Modul cum va fi „expusă” şi unde va fi expusă respectiva componentă cade în sarcina unui alt obiect cu care este echipat fiecare container, şi anume layoutManager-ul. Prin urmare un container delegă responsabilitatea poziţionării (dispunerii) şi dimensionării componentelor unui obiect de tip layout manager, care trebuie să implementeze interfaţa java.awt.LayoutManager. Această interfaţă specifică metodele tuturor tipurilor de layout manager. În unele cazuri este folosită interfaţa java.awt.LayoutManager2 care extinde interfaţa originală LayoutManager. Pentru accesarea şi configurarea propriului layout manager un container are la dispoziţie metodele getLayout şi setLayout:

Page 34: Curs Proiectarea Interfetelor Grafice

34

public LayoutManager getLayout(); public void setLayout(LayoutManager manager); Iată în continuare câteva exemple privind modul cum sunt afişate componentele folosind diverse tipuri LayoutManager: Exemplu import javax.swing.*; import java.awt.*; import java.awt.event.*; public class AfisareFrameFlowLayout { public static void main(String[] args) { JFrame f = new JFrame("Dispunere cu FlowLayout"); JButton b1 = new JButton("1"); JButton b2 = new JButton("2"); JButton b3 = new JButton("3"); JButton b4 = new JButton("4"); JButton b5 = new JButton("5"); Container cp = f.getContentPane(); cp.setLayout(new FlowLayout()); cp.add(b1); cp.add(b2); cp.add(b3); cp.add(b4); cp.add(b5); f.setSize(300, 100); f.setVisible(true); } } Rezultatul:

Page 35: Curs Proiectarea Interfetelor Grafice

35

Exemplu

import javax.swing.*; import java.awt.*; public class DisplayFrameBorderLayout { public static void main(String[] args) { JFrame f = new JFrame("Dispunere cu BorderLayout"); Container cp = f.getContentPane(); cp.setLayout(new BorderLayout()); cp.add(new JButton("Nord"), BorderLayout.NORTH); cp.add(new JButton("Sud"), BorderLayout.SOUTH); cp.add(new JButton("Est"), BorderLayout.EAST); cp.add(new JButton("Vest"), BorderLayout.WEST); cp.add(new JButton("Centru"), BorderLayout.CENTER); f.setSize(300, 200); f.setVisible(true); } }

Rezultatul:

Exemplu

import javax.swing.*; import java.awt.*; public class AfisareFrameGridLayout { public static void main(String[] args) { JFrame f = new JFrame("Dispunere cu GridLayout"); Container cp = f.getContentPane(); cp.setLayout(new GridLayout(3, 2)); cp.add(new JButton("1")); cp.add(new JButton("2")); cp.add(new JButton("3")); cp.add(new JButton("4")); cp.add(new JButton("5"));

Page 36: Curs Proiectarea Interfetelor Grafice

36

cp.add(new JButton("6")); f.setSize(300, 200); f.setVisible(true); } }

Rezultat:

Exemplu Modificările asupra grupului de componente dintr-un container după afişarea acestuia, va conduce la invalidarea containarului. Aceast fapt poate fi verificat prin metoda isValid() care va returna o valoare booleană. Revalidarea unui container echivalează cu reafişarea lui şi se realizează prin metoda validate(). public boolean isValid (); public void validate(); Exemplu

import java.awt.*; import javax.swing.*; public class DisplayFrameGridLayout { public static void main(String[] args) { JFrame f = new JFrame("Dispunere cu GridLayout"); Container cp = f.getContentPane(); cp.setLayout(new GridLayout(3, 2)); cp.add(new JButton("1")); cp.add(new JButton("2")); cp.add(new JButton("3")); cp.add(new JButton("4")); cp.add(new JButton("5")); cp.add(new JButton("6")); f.setSize(300, 200); f.setVisible(true); // adaugam inca doua butoane ceea ce va determina invalidarea

containerului // si necesitatea reafisarii lui cp.add(new JButton("7")); cp.add(new JButton("8")); if (!cp.isValid())

Page 37: Curs Proiectarea Interfetelor Grafice

37

// reafisam explicit containerul prin re-validarea lui cp.validate(); } }

Cu rezultatul:

Evenimente şi „ascultători” După cum am menţionat într-unul din paragrafele anterioare, interacţiunile interfeţelor utilizator grafice se bazează pe paradigma evenimentelor. Anumite evenimente sunt de nivel scăzut cum ar fi apăsarea şi eliberarea unei taste, mutarea cursorului mouse-lui sau apăsarea unui buton al acestuia, iar altele sunt de nivel înalt cum ar fi selectarea unei opţiuni dintr-un meniu, apăsarea unui “buton” (componenta grafică) sau introducere de text într-un câmp. Evenimentele de nivel înalt implică de fapt mai multe de nivel mai scăzut. De exemplu introducerea de text într-un câmp implică mutarea cursorului mouse-ului, apăsarea butonului mouse-ului şi apăsarea şi eliberarea mai multor taste. Iată câteva dintre categoriile de evenimente întâlnite: Categoria de evenimente

Descriere

Key event Apăsarea şi eliberarea tastelor Mouse event Apăsarea şi eliberarea butoanelor mouse-ului

Drag & drop Component event

Ascunderea, afişarea, redimensionarea sau mutarea unei componente

Container event Adăugarea sau îndepărtarea unei componente dintr-un container

Window event Deschiderea, închiderea, minimizarea (iconificarea), reconstituirea (deiconificarea), activarea, dezactivarea unei ferestre

Focus event Preluarea sau pierderea focus-ului de către o componentă Action event Eveniment de nivel înalt indicând o acţiune definită la nivelul

componentei (de exemplu un buton poate fi apăsat, un checkbox poate fi selectat, apăsarea tastei ENTER/RETURN pentru un câmp de text)

Item event Eveniment de nivel înalt care are loc atunci când un utilizator selectează un checkbox, buton radio sau opţiune dintr-o listă

Document event Generat de către un obiect TextComponent atunci când îi este

Page 38: Curs Proiectarea Interfetelor Grafice

38

modificat conţinutul Un aspect important de reţinut este faptul instanţele de tip Component reprezintă surse de evenimente, mai exact evenimentele au loc în contextul componentelor. Majoritatea evenimentelor sunt modelate având la bază clasa abstractă java.awt.Event, care ea însăşi este o subclasă a java.util.EventObject. Referinţa obiectului sursă al unui eveniment poate fi obţinută prin folosirea metodei getSource() a obiectelor de tip Event. public object getSource () ; Rolul layout-urilor şi container-elor în Swing În cele ce urmează revenim pentru moment la componente şi container-e. După cum am evidenţiat mai înainte, un control reprezintă un element afişabil pe ecran, un container reprezintă o zonă ce grupează fizic (conţine) controale şi/sau eventual alte container-e, iar o componentă am putea spune că reprezintă o unitate constructivă pentru interfeţele grafice Java luând forma concretă fie a controalelor fie a containerelor. Container-ele disponibile prin bibliotecile Swing sunt diferite de cele din biblioteca AWT fiind organizate pe mai multe straturi:

Straturile containerelor Swing

Aceste straturi pot fi descrise, pe scurt, astfel: • JRootPane reprezintă structura de date care conţine toate celelalte

“panouri” provenind din containerele Swing. • JLayeredPane gestionează “panourile” pentru meniu şi pentru

celelalte componente grafice. Prin urmare acest container conţine altele două: JMenuBar şi JContentPane. De asemenea, tot la acest nivel, apare şi noţiunea z-order, adică ordinea în care sunt stratificate componentele (care componente apar deasupra altora).

• JContentPane reprezintă un container Swing în care vor fi adăugate toate celelalte componente (controale sau alte container-e) şi la nivelul căruia este stabilită “politica” de dispunere a acestora (noţiunea de layout manager).

• JMenuBar va fi obiectul prin intermediul căruia sunt gestionate eventualele meniuri bară ataşate applet-ului sau frame-ului respective.

• JGlassPane reprezintă un container transparent care este aşezat peste toate celelalte componente şi container-e şi permite interceptarea evenimentelor legate mouse, precum şi posibilitatea schiţării unor obiecte grafice peste întregul conţinut fără să afecteze vreo componentă existentă.

Page 39: Curs Proiectarea Interfetelor Grafice

39

Principalele metode folosite în manipularea obiectelor JLabel: Metoda Acţiune String getText() Obţine Stringul afişat de către obiectul JLabel void setText(String text) Stabileşte printr-un String textul ce va fi afişat int getHorizontalAlignment() Obţine un întreg care indică modul de aliniere a

conţinutului etichetei relativ la axa x int getVerticalAlignment() Obţine un întreg care indică modul de aliniere a

conţinutului etichetei relativ la axa y Icon getIcon() Obţine obiectul Icon afişat de către obiectul

JLabel void setIcon(Icon icon) Stabileşte obiectul Icon afişată de componenta

JLabel Component getLabelFor() Obţine componenta care este etichetată folosind

obiectul JLabel void setLabelFor(Component c)

Stabileşte componenta care va fi etichetată cu obiectul JLabel

void setHorizontalAlignment(int alignament)

Stabileşte prin întregul specificat modul de aliniere relativ la axa x

void setVerticalAlignment(int alignament)

Stabileşte prin întregul specificat modul de aliniere relativ la axa y

Pentru a obţine un obiect JLabel care afişează un text simplu putem construi o astfel de etichetă ca în exemplul următor:

import java.awt.*; import javax.swing.*; public class ExempluJLabel extends JFrame{ public ExempluJLabel(){ Container cp = getContentPane(); JLabel jlabel = new JLabel("Student la Universitatea Titu Maiorescu"); cp.setLayout(new FlowLayout()); cp.add(jlabel); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(300, 100); } public static void main(String[] args) throws Exception{

UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");

new ExempluJLabel().show(); } }

Page 40: Curs Proiectarea Interfetelor Grafice

Iată rezultatul:

Câmpuri pentru text JTextField

Biblioteca SWING introduce, pentru a gestiona câmpurile care pot primi text din partea utilizatorilor, componenta JTextField ce lucrează asemănător cu java.awt.TextField (dar care nu este derivată din aceasta). java.lang.Object | ___ java.awt.Component | ___ java.awt.Container | ___ javax.swing.JComponent

| ___ javax.swing.text.JTextComponent | ___ javax.swing.JTextField Constructorii principali ai componentei JTextField sunt: Constructor Acţiune JTextField () Creează un nou câmp gol JTextField (int columns) Creează un nou obiect JTextField fără conţinut

de lungimea indicată (în coloane) JTextField(String text) Creează un nou obiect JTextField conţinând

textul specificat JTextField(String text, int columns)

Creează un nou obiect JTextField conţinând textul specificat şi având (afişând) lungimea indicată (în coloane)

Principalele metode ale componentei JTextField sunt următoarele: Metoda Acţiune String getText() Obţine String-ul conţinut în câmp void setText(String text) Stabileşte printr-un String textul ce va fi conţinut

de către obiectul JTextField int getHorizontalAlignment() Obţine un întreg care indică modul de aliniere

relativ la axa x void setHorizontalAlignment(int alignament)

Stabileşte prin întregul specificat modul de aliniere relativ la axa x

Dimension getPreferredSize()

Obţine dimensiunile (lăţime, lungime printr-un obiect de tip Dimension) preferenţiale

int getColumns() Obţine numărul de coloane pe care este afişat textul

void setColumns(int Stabileşte numărul de coloane pe care este afişat

40

Page 41: Curs Proiectarea Interfetelor Grafice

41

columns) textul Pentru a obţine un obiect JTextField putem proceda ca în exemplul următor: import java.awt.*; import javax.swing.*; public class test extends JFrame{ public test(){ Container cp = getContentPane(); JLabel jlabel = new JLabel("Student la Universitatea Titu Maiorescu"); cp.setLayout(new FlowLayout()); cp.add(jlabel); JTextField informatie = new JTextField(); //cp.setLayout(new FlowLayout()); cp.add(informatie); informatie.setText("Informatie cu JTextField"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(300, 100); } public static void main(String[] args) throws Exception{ UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel"); new test().show(); } } Rezultatul este:

Obiectele JtextField generează evenimente legate de apăsarea tastatelor şi un ActionEvent atunci când utilizatorul apasă tasta Enter/Return pentru a încheia introducerea textului şi eventual pentru a-l valida. Codul pentru implementarea modelului de evenimente legate de această componentă ar putea fi:

text.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e){ // secvenţa de cod ce trebuie executată la apariţia ecenimentului sau // apel la o eventuală metodă din cadrul părinte în care să fie tratat

explicit acest eveniment

Page 42: Curs Proiectarea Interfetelor Grafice

42

System.out.println("Informatia definita este: " + e.getActionCommand());

} });

care poate fi adăugat în metoda init() a clasei ExempluTextField (eventual la sfârşit, sau oricum după instanţierea clsei JTextField).

Butoane – AbstractButton şi JButton

În Swing, toate butoanele sunt derivate din clasa AbstractButton care furnizează baza pe care sunt construite toate clasele pentru butoane din Java. Iată ierarhia de moştenire pentru această clasă: java.lang.Object | ___ java.awt.Component | ___ java.awt.Container | ___ javax.swing.JComponent

| ___ javax.swing.AbstractButton Putem obţine un JButton astfel: import javax.swing.*; import java.awt.*; import java.awt.event.*; public class exemplu1 extends JFrame{ //JButton button = new JButton("Apasa"); JButton button = new JButton("Apasa", new ImageIcon("C:\\Documents and Settings\\My Documents\\My Pictures\\a1.jpg")); JTextField text = new JTextField(30); public exemplu1() { // stabilsc titlul ferestrei this.setTitle("test"); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); cp.add(button); cp.add(text); button.addActionListener(new ActionListener(){ public void actionPerformed(ActionEvent e){ text.setText("Ai apasat pe buton"); } }); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(300, 300); }

Page 43: Curs Proiectarea Interfetelor Grafice

43

public static void main(String[] args) throws Exception{ UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel"); new exemplu1().show(); } } Se poate observa că în metoda init(), după instanţierea clasei JButton, este apelată la un moment dat metoda addActionListener() pentru înregistrarea unui listener care să trateze evenimentele acestuia. De asemenea, un JButton poate afişa inclusiv o pictogramă dacă este construit astfel: JButton button = new JButton("Apasa", new ImageIcon("C:\\Documents and Settings\\My Documents\\My Pictures\\a1.jpg"));

Rezultatul este:

Butoane checkbox - JCheckBox

După cum se ştie, un checkbox reprezintă un control grafic care oferă posibilitatea selectării unei valori booleene, însoţit fiind de un text explicativ. Biblioteca Swing oferă pentru obţinerea unui astfel de buton clasa JCheckBox care anumite avantaje faţă de clasa similară din AWT, CheckBox, şi anume posibilitatea afişării unei imagini însoţitoare. java.lang.Object | ___ java.awt.Component | ___ java.awt.Container | ___ javax.swing.JComponent

| ___ javax.swing.AbstractButton

Page 44: Curs Proiectarea Interfetelor Grafice

44

|___ javax.swing.JToggleButton | ___ javax.swing.JCheckBox

Principalii constructori care pot fi folosiţi pentru instanţierea acestei clase sunt: Constructor Acţiune JCheckBox() JCheckBox(String text) JCheckBox(String text, Boolean selected)

Construieşte un JCheckBox ce afişează textul specificat şi indică dacă este, sau nu, selectat iniţial

JCheckBox(Icon image) JCheckBox(String text, Icon icon)

În ce priveşte metodele, manipularea acestor obiecte se face în principal prin setSelected(), isSelected(), setText(), getText() etc. moştenite din superclase, în special de la clasa JabstractButton.

Butoane radio – JRadioButton Butoanele radio se folosesc atunci când se doreşte construirea unui grup de butoane de opţiuni însă la un moment dat numai unul dintre ele să fie selectat. La fel ca şi în cazul checkbox-urilor, biblioteca Swing vine cu propria sa clasă JRadioButton pentru a obţine butoane de acest fel. Iată ierarhia de moştenire în acest caz: java.lang.Object | ___ java.awt.Component | ___ java.awt.Container | ___ javax.swing.JComponent

| ___ javax.swing.AbstractButton |___ javax.swing.JToggleButton

| ___ javax.swing.JRadioButton La fel ca în cazul checkkbox-urilor, constructorii clasei JRadioButton pemit crearea de butoane radio însoţite de text, imagini sau text şi imagini, şi specificarea stării de selectat/deselectat: Constructor Acţiune JRadioButton() JRadioButton(String text) JRadioButton(String text, Boolean selected)

Construieşte un JCheckBox ce afişează textul specificat şi indică dacă este, sau nu, selectat iniţial

JRadioButton(Icon image) JRadioButton(String text, Icon icon)

Page 45: Curs Proiectarea Interfetelor Grafice

45

Pentru a demonstra modul în care pot fi create şi folosite aceste butoane am construit exemplul următor: import javax.swing.*; import java.awt.*; import java.awt.event.*; public class exemplu1 extends JFrame{ JLabel jlabel; ButtonGroup grup; JRadioButton [] butoaneRadio; JRadioButton b1; public exemplu1() { Container contentPane = getContentPane(); jlabel = new JLabel(); jlabel.setIcon(new ImageIcon("C:\\flori\\p1.jpg")); contentPane.add(jlabel); grup = new ButtonGroup(); butoaneRadio = new JRadioButton[]{ new JRadioButton("help"), new JRadioButton("exit"), new JRadioButton("find"), }; contentPane.setLayout(new FlowLayout()); for (int i = 0; i < butoaneRadio.length; ++i){ grup.add(butoaneRadio[i]); contentPane.add(butoaneRadio[i]); butoaneRadio[i].addItemListener(new ItemListener(){ public void itemStateChanged(ItemEvent e){ refacere_imagine(e); } }); } butoaneRadio[0].setSelected(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(300, 300); } public void refacere_imagine(ItemEvent e){ if (butoaneRadio[0].isSelected()) jlabel.setIcon(new ImageIcon("C:\\flori\\p1.jpg")); //if (e.getItemSelectable() == butoaneRadio[1]) if (butoaneRadio[1].isSelected()) jlabel.setIcon(new ImageIcon("C:\\flori\\p2.jpg")); //if (e.getItemSelectable() == butoaneRadio[2]) if (butoaneRadio[2].isSelected()) jlabel.setIcon(new ImageIcon("C:\\flori\\p3.jpg"));

Page 46: Curs Proiectarea Interfetelor Grafice

46

} public static void main(String[] args) throws Exception{ UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel"); new exemplu1().show(); } } Rezultatul este:

Construirea unei fereastra principale a aplicaţiilor tip desktop cu meniuri Swing De regulă, ferestrele principale ale aplicaţiilor desktop reprezintă calea esenţială pentru accesul la funcţiile principale ale aplicaţiei. De regulă acest lucru realizat printr-un meniu însoţit, eventual, şi de o bară de instrumente. Crearea meniurilor Modelul orientat obiect al meniurilor în Swing are următoarele caracteristici:

- bară principală reprezintă o instanţă a clasei JMenuBar, sau, pentru meniurile contextuale, JPopUpMenu;

- meniurile accesebile din bara principală sunt obţinute din clasa JMenu; - elementele individuale ale unui menu (instanţă JMenu) sunt construite

pe baza clasei JMenuItem care are următoarele subclase: JCheckBoxMenuItem, JRadioButtonMenuItem şi JMenu. Prin urmare un element individual dintr-un meniu poate fi, la rândul său, un al submenu (instanţă JMenu);

Ca urmare definiţia celui mai simplu meniu ar putea fi următoarea: import java.awt.*;

Page 47: Curs Proiectarea Interfetelor Grafice

47

import javax.swing.*; import java.awt.event.*; public class MainMenuBar extends JMenuBar{ JFrame frmParent; public MainMenuBar() { JMenu fileMenu = new JMenu("File"); JMenu editMenu = new JMenu("Edit"); JMenu quitMenu = new JMenu("Quit"); // Meniul File: Open, Save, Close JMenuItem openItem = new JMenuItem("Open"); JMenuItem saveItem = new JMenuItem("Save"); JMenuItem closeItem = new JMenuItem("Close"); //Meniul Edit: Cut, Copy, Paste, Find (Find, Replace) JMenuItem cutItem = new JMenuItem("Cut"); JMenuItem copyItem = new JMenuItem("Copy"); JMenuItem pasteItem = new JMenuItem("Paste"); JSeparator separator1 = new JSeparator(); JMenu findMenu = new JMenu("Find"); JMenuItem findItem = new JMenuItem("Find"); JMenuItem replaceItem = new JMenuItem("Replace"); //Meniul Quit JMenuItem exitItem = new JMenuItem("Exit"); JMenuItem aboutItem = new JMenuItem("About"); fileMenu.add(openItem); fileMenu.add(saveItem); fileMenu.add(closeItem); editMenu.add(cutItem); editMenu.add(copyItem); editMenu.add(pasteItem); editMenu.add(separator1); findMenu.add(findItem); findMenu.add(replaceItem); editMenu.add(findMenu); editMenu.add(new JCheckBox("Bifa")); quitMenu.add(exitItem); quitMenu.add(aboutItem); add(fileMenu); add(editMenu);

Page 48: Curs Proiectarea Interfetelor Grafice

48

add(quitMenu); } } Pentru a dispune un meniu într-un formular, avem nevoie de o instanţă JFrame pentru bara de meniu, stabilită prin metoda setJMenuBar(). De exemplu clasa principala este: Import java.awt.*; import javax.swing.*; import java.awt.event.*; public class FormMain extends JFrame{ public FormMain() { this.setJMenuBar(new MainMenuBar()); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setSize(500, 500); this.setVisible(true); } public static void main(String[] args) { new FormMain(); } } va avea la runtime următorul rezultat:

TEME PRACTICE

Se vor testa cel putin 5 exemple din acest modul, se vor comenta şi vor fi incluse într-un “PROJECT” cu numele studentului.

Page 49: Curs Proiectarea Interfetelor Grafice

Modulu III Utilizare NETBEANS

Aplicatia 1 .Crearea unui nou proiect

NetBeans IDE Java Quick Start Tutorial

Acest ghid oferă o introducere foarte simplu şi rapid, pentru fluxul de lucru NetBeans IDE de mers pe jos vă prin crearea unui

simplu "Hello World" Java Console cerere. Odată ce aţi terminat cu acest tutorial, veti avea o cunoaştere generală a modului de a

crea şi rula aplicaţii în IDE.

Acest tutorial durează mai puţin de 10 minute.

După ce terminaţi acest tutorial, puteţi trece la trasee de învăţare, care sunt legate de la documentare, Training & pagina de sprijin.

Partii de învăţare prevăd tutoriale cuprinzătoare care evidenţiază o gamă mai largă de caracteristici IDE şi tehnici de programare

pentru o varietate de tipuri de aplicare . Dacă nu vrei să faci un "Hello World" aplicaţie, puteţi sări peste acest tutorial si sari direct

la trasee de învăţare.

• Configurarea de proiect

• Adăugarea Cod la Sursa Generated File

• Compilarea şi Running Cerere

• De constructii si Implementarea Cerere

• Etapele următoare

Pentru a completa acest tutorial, aveţi nevoie de următoarele produse software şi resurse.

Software-ul sau de Resurse Versiune Required

NetBeans IDE Versiunea 6.7

Java Development Kit (JDK) versiunea 6 sau versiunea 5

Configurarea de proiect

Pentru a crea un proiect IDE:

1. Start NetBeans IDE.

2. În IDE, alegeti File> New Project (Ctrl-Shift-N), aşa cum se arată în figura de mai jos.

49

Page 50: Curs Proiectarea Interfetelor Grafice

50

3. În expertul New Project, extindeţi categoria Java şi selectaţi aplicaţie Java aşa cum se arată în figura de mai jos. Apoi,

faceţi clic pe Next.

4. În numele şi locaţia de start a expertului, faceţi următoarele (după cum se arată în figura de mai jos):

o În domeniul Denumirea proiectului HelloWorldApp tip,.

o Lăsaţi Utilizare Pliant dedicate pentru stocarea caseta de selectare de Biblioteci neselectată.

o În Creaţi principal domeniu de clasă, helloworldapp.HelloWorldApp tip.

o Lasă Setare ca principale caseta de selectare de proiecte selectate.

Page 51: Curs Proiectarea Interfetelor Grafice

51

5. Faceţi clic pe Terminare.

Proiectul este creat şi a deschis în IDE. Ar trebui să vedeţi următoarele componente:

• Fereastra proiecte, care conţine o vizualizarea arborescentă a componentelor proiectului, inclusiv fişierele sursă, biblioteci

care depinde codul dvs., şi aşa mai departe.

• Fereastra Sursa Editor cu un fisier numit HelloWorldApp deschis.

• Fereastra Navigator, pe care o puteţi utiliza pentru a naviga rapid între elemente din cadrul clasei selectat.

Page 52: Curs Proiectarea Interfetelor Grafice

52

Adăugarea Cod la Sursa Generated File

Pentru ca tu ai plecat de la Crearea principale clasa caseta de selectare de selectat în expertul New Project, IDE a creat o clasă

schelet pentru tine. Puteţi adăuga "Hello World!" mesaj de la codul scheletului prin înlocuirea linie:

/ / Cod TODO aplicarea logica aici

cu linia:

System.out.println ( "Hello World!");

A memora modificarea prin alegerea Fişier> Salvare.

Fişierul ar trebui să arate ceva de genul mostra de cod de mai jos.

/ *

* Pentru a schimba acest şablon, alegeti Tools | Template-uri

* Şi deschide şablon în editor.

Page 53: Curs Proiectarea Interfetelor Grafice

53

* /

HelloWorldApp pachet;

public class HelloWorldApp (

public static void main (String [] args) (

System.out.println ( "Hello World!");

)

)

Compilarea şi Rularea programului

Din cauza Compilarea IDE pe caracteristica Salvare, tu nu trebuie să compilaţi manual proiectului dvs. pentru a rula în IDE. Când

salvaţi un fişier sursă Java, IDE automat compilează ea.

Pentru a rula programul:

• Alegeţi Run> Run Main Project (F6).

Figura următoare arată ceea ce ar trebui să vedeţi acum.

Felicitări! Lucrările Tale program!

Dacă există erori de compilare, acestea sunt marcate cu simbolurile roşu în marginile din stânga şi din dreapta a Editor Source.

Simbolurile, în marginea din stânga a indica erorile pentru liniile corespunzătoare. Simbolurile în marja de dreptul de a afişa toate

zonele din dosar care au erori, inclusiv erori, în linii care nu sunt vizibile. Aveţi posibilitatea să cursorul peste un semn de eroare

pentru a obţine o descriere a erorii. Aveţi posibilitatea să faceţi clic pe un simbol în marja de dreptul de a sări la linia cu eroarea.

De constructii si Implementarea Cerere

După ce aţi scris şi testa rula aplicaţia dvs., puteţi utiliza comanda "curate" şi Generare pentru a construi cererea dumneavoastră, în

vederea detaşării. Când utilizaţi Clean şi comanda Construirea, IDE opereaza un construi script care îndeplineşte următoarele

atribuţii:

Page 54: Curs Proiectarea Interfetelor Grafice

54

• Şterge orice dosar anterior elaborate, precum şi a altor construi ieşiri.

• Recompiles cerere şi construieşte o JAR fişier care conţine fişiere compilate.

Pentru a construi cererea dumneavoastră:

• Alegeţi alerga> "curate" şi Build principale ale proiectului (Shift-F11).

Puteţi vedea construi iesiri prin deschiderea fereastra Fişiere şi extinderea nodul HelloWorldApp. Bytecode compilat fişier

HelloWorldApp.class este în build/classes/helloworldapp subnode build/classes/helloworldapp Dislocabile JAR Un fişier

care conţine HelloWorldApp.class este în nodul dist

Page 55: Curs Proiectarea Interfetelor Grafice

55

Aplicatia 2 .Proiectarea unei GUI în NetBeans IDE

În acest tutorial veţi învăţa cum să:

• Utilizaţi GUI Builder Interface

• Creaţi un container GUI

• Adaugarea de componente

• Redimensionare Components

• Aliniaţi Componente

• Reglarea Componenta de ancorare

• Set Componenta Auto-Redimensionarea Behavior

• Edit Component Properties

Acest tutorial durează aproximativ 30 de minute.

Pentru a completa acest tutorial, aveţi nevoie de următoarele produse software şi resurse.

Software-ul sau de Resurse Versiune Required

NetBeans IDE versiunea 6.7, 6.5, 6.1 sau

Java Development Kit (JDK) versiunea 6 sau versiunea 5

Noţiuni de bază

GUI IDE lui Builder face posibil de a construi aspect profesional GUIs, fără o înţelegere profundă a managerilor de aspect. Puteţi

stabili formularele, prin plasarea componentelor în cazul în care le doriţi.

Crearea unui proiect

Deoarece toata dezvoltare Java în IDE are loc în cadrul proiectelor, va trebui mai întâi pentru a crea un nou proiect ContactEditor în

care pentru a stoca surse şi fişiere alt proiect. Un proiect IDE este un grup de fişiere sursă Java, plus datele sale asociate Meta,

inclusiv proiecte specifice de fişiere proprietăţi, o furnică construi script care controlează construi şi rula setări, şi un fişier de

project.xml unor hărţi Ant obiective pentru a IDE comenzi. În timp ce aplicaţii Java adesea consta din mai multe proiecte de IDE, în

sensul de acest tutorial, vom construi o aplicatie simpla, care este stocată în întregime într-un singur proiect.

Pentru a crea un proiect de ContactEditor:

1. Alege File> New Project. Alternativ, aveţi posibilitatea să faceţi clic pe pictograma Proiect Nou în bara de instrumente IDE.

2. În panoul de Categorii, selectaţi nodul Java şi în panoul de proiecte, alegeţi aplicaţie Java. Faceţi clic pe

Page 56: Curs Proiectarea Interfetelor Grafice

56

Următorul.

3. Introduceţi ContactEditor în domeniul Denumirea proiectului şi specificaţi locaţia proiectului.

4. Lăsaţi Utilizare Pliant dedicate pentru stocarea caseta de selectare de Biblioteci neselectată.

5. Asiguraţi-vă că Setare ca principale caseta de proiect este selectat şi clară Crearea principal domeniu de clasă.

6. Faceţi clic pe Terminare.

IDE creează dosarul ContactEditor pe sistemul dumneavoastră în locaţia desemnate. Acest dosar conţine toate fişierele proiectului asociate, inclusiv script-ul de Ant, foldere pentru stocarea surselor şi teste, precum şi un dosar pentru un proiect-metadate specifice. Pentru a vizualiza structura de proiect, utilizaţi fereastra IDE's Files.

Crearea unui container interfaţă grafică

După crearea noua aplicaţie, este posibil să fi observat că Pachetele dosarul Sursa în fereastra de Proiecte conţine un <default gol

package> nod. Pentru a începe construirea interfata noastra, avem nevoie de a crea un container Java în cadrul căruia vom plasa

componentele necesare alte GUI. În acest pas vom crea un recipient cu ajutorul componentei JFrame şi locul recipientul într-un

ambalaj nou.

Pentru a crea un container JFrame:

1. În fereastra Proiecte, faceţi clic dreapta pe nodul ContactEditor şi a alege nou> JFrame Form.

2. Introduceţi ContactEditorUI ca numele clasei.

3. Introduceţi my.contacteditor ca pachet.

4. Faceţi clic pe Terminare.

IDE creează forma ContactEditorUI şi clasa de ContactEditorUI în cadrul cererii ContactEditorUI.java şi deschide formularul ContactEditorUI În Generatorul GUI. Observaţi că pachetul my.contacteditor înlocuieşte implicit de pachet.

Să ne familiarizăm cu GUI Builder

Acum, că ne-am creat un nou proiect pentru a aplicaţiei noastre, sa ia un minut pentru a ne familiariza cu interfaţă GUI Builder lui.

Pentru a explora interfaţă GUI Builder cu un demo interactiv, faceţi clic pe Vizualizare pictograma Demo.

Page 57: Curs Proiectarea Interfetelor Grafice

57

Când ne-am adăugat recipient JFrame, IDE a deschis formularul de nou-create ContactEditorUI într-o filă Editor cu o bară de

instrumente care conţine mai multe butoane, aşa cum se arată în ilustraţie precedent. Formularul ContactEditor deschis, având în

vedere Builder GUI's Design si trei ferestre suplimentare, a apărut în mod automat de-a lungul marginilor IDE lui, permiţându-vă să

navigheze, să organizaţi şi edita forme GUI cum ai construi ei.

Windows Constructorul GUI diferitele includ:

• Design Area. Ferestrei Builder GUI's primare pentru crearea şi editarea forme Java GUI. Sursa a Barei de instrumente şi

butoanele de design comuta vă permit să vizualizaţi codul sursă al unei clase sau o vizualizare grafică a componentelor sale GUI.

Butoanele suplimentare bara de instrumente furnizează acces convenabil la comenzi comune, cum ar fi alegerea între Selecţia şi

moduri de conectare, alinierea componente, setarea pentru componente auto-redimensionare comportament, şi previewing forme.

• Inspector. Oferă o reprezentare a tuturor componentelor, atât vizuale şi non-vizuale, în cererea dumneavoastră ca o

ierarhie copac. Inspector oferă, de asemenea feedback vizual despre ceea ce componenta în arborele este în prezent în curs de

editare în Builder GUI, precum şi vă permite să organizaţi componente în panourile disponibile.

Page 58: Curs Proiectarea Interfetelor Grafice

58

• Palette. O listă personalizabil de componente disponibile care conţin file pentru a JFC / Swing, AWT, precum şi

componente JavaBeans, precum şi managerii de aspect. În plus, puteţi crea, eliminaţi, a rearanja categorii afişat în paleta de utilizând

Customizer.

• Proprietăţi de ferestre. Afişează proprietăţile din componenta selectat în Builder GUI, fereastra Inspector, fereastra

Proiecte, sau fereastra Files.

Dacă faceţi clic pe butonul Sursa, IDE afişează Java aplicaţiei codul sursă în Editorul cu secţii de cod care sunt generate automat de

către constructor GUI indicat de zonele de albastru, numit pazita Blocuri. Blocuri pazita sunt zone protejate care nu sunt editabile în

Vezi sursa. Aveţi posibilitatea să editaţi numai codul care figurează în zonele albe de Editor atunci când, în Vezi sursa. Dacă aveţi

nevoie pentru a face modificări la Codul într-un bloc pazita, făcând clic pe butonul Design revine editorului IDE la Builder GUI în

care puteţi efectua modificările necesare la forma. Când salvaţi modificările, actualizările IDE sursele fişierului.

Notă: Pentru dezvoltatorii de avansat, o Customizer Palette este disponibil care vă permite să adăugaţi elemente personalizate de la

JAR-uri, biblioteci, sau în alte proiecte la Palette.

Concepte de bază

GUI IDE lui Builder rezolvă problema de bază de Java crearea de GUI prin fluidizarea fluxului de lucru, de a crea interfeţe grafice,

eliberând dezvoltatorii de la complexitatea Swing manageri de aspect. Ea face acest lucru prin extinderea actuală NetBeans IDE

GUI Builder pentru a sprijini o simplă "Free Design" paradigma cu regulile de layout simplu, care sunt uşor de înţeles şi de folosit.

Pe măsură ce pune în formularul dvs., Generatorul mediu grafic oferă orientări vizual sugerând spaţierea optime şi de aliniere a

componentelor. În fundal, Builder GUI traduce deciziile de design într-un UI funcţionale care este implementat folosind managerul

de GroupLayout nou layout şi Swing alte construcţii. Pentru că foloseşte un model dinamic de aspect, GUI's construit cu Builder

GUI se comportă ca şi v-aţi aştepta la runtime, de adaptare pentru a acomoda orice modificările pe care le face fără a modifica

raporturile definite între componente. Ori de câte ori îl redimensionaţi forma, locales comutator, sau specifica un alt aspectul, GUI

reglează automat de a respecta uite ţintă şi Introduceri simt şi compensează.

Designul fără

În GUI IDE lui Builder, vă puteţi construi formularele dvs. pur şi simplu prin punerea componente în cazul în care doriţi să le ca şi

cum aţi folosit de poziţionare absolută. GUI Cifrele Builder în care atribute de aspect sunt necesare şi apoi generează codul pentru

tine în mod automat. Nu trebuie să te privesc cu introduceri, ancore, umple, şi aşa mai departe.

Automat Componenta de poziţionare (snapping)

Pe măsură ce adăugaţi componente de la o formă, Builder grafic oferă feedback vizual care ajută în componente de poziţionare

bazat pe sistemul de operare sa ne uitam si sa se simta. Generator grafic oferă sfaturi utile inline şi feedback-ul vizual în ceea ce

priveşte alte componente în cazul în care ar trebui să fie introduse pe formularul dvs., în mod automat se rupă componente în poziţia

de-a lungul liniilor directoare. Aceasta face ca aceste sugestii bazate pe poziţiile de componente care au fost deja introduse in forma,

permiţând în acelaşi timp padding să rămână flexibile, astfel încât arată diferit ţintă şi se simte face în mod corespunzător în timpul

rulării.

Page 59: Curs Proiectarea Interfetelor Grafice

59

Visual Feedback

Builder GUI prevede, de asemenea feedback-ul vizual în ceea ce priveşte componenta de ancorare şi înlănţuirea relaţii. Aceşti

indicatori vă permit să identifice rapid diversele relaţii de poziţionare şi componenta fixarea comportament care afectează modul în

GUI dvs. vor apărea atât şi să se comporte în timpul rulării. Aceasta viteza procesului de proiectare GUI, permiţându-vă să creaţi

rapid cu aspect profesional interfete vizuale pe care locul de muncă.

Sa incepem cu inceputul

Acum, că aţi familiarizat-vă cu interfaţă GUI Builder lui, este timpul să înceapă în curs de dezvoltare UI de aplicare noastre

ContactEditor. În această secţiune vom arunca o privire la utilizarea Palette IDE de a adăuga diferitelor componente GUI de care

avem nevoie pentru a forma nostru.

Vă mulţumim pentru Drum liber IDE a paradigmei de proiectare, tu nu mai trebuie să lupte cu managerii layout pentru a controla

dimensiunea şi poziţia a componentelor în termen de containere dumneavoastră. Tot ce trebuie sa faci este drag şi drop (sau

murături şi plop), componentele care aveţi nevoie pentru a forma dvs. de GUI aşa cum se arată în ilustraţii care urmează.

Adăugarea de componente: Noţiuni de bază

Deşi GUI IDE lui Builder simplifică procesul de creare a Java GUI, este adesea util să schiţeze aşa cum doriţi interfaţa

dumneavoastră de a privi înainte de a începe să se stabilească it afarã. Designeri interfaţă Mulţi consideră acest lucru o practică cele

mai bune "," tehnica, cu toate acestea, în sensul acestui tutorial puteti peek pur şi simplu, la modul în care formularul nostru de

completat ar trebui să arate, sărind înainte de secţiunea Examinarea dvs. de GUI.

Deoarece am adăugat deja un JFrame ca formularul nostru de top a lui recipient de nivel, următorul pas este de a adăuga o pereche

de JPanels care ne va permite să cluster componentele UI nostru folosind frontierele intitulata. Se referă la următoarele ilustraţii şi

anunţul "IDE's Pick şi a cădea în apă", atunci când realizarea acestui comportament.

Pentru a adăuga un JPanel:

1. În fereastra Palette, selectaţi componenta Panoul din categoria Swing, făcând clic pe şi de eliberare a butonul mouse-ului.

2. Mutaţi cursorul în colţul din stânga sus a formularului În Generatorul GUI. În cazul în care componenta este situată aproape de marginile containerului de sus şi stânga, liniile directoare orizontale şi verticale de aliniere par să indice marjele de preferat. Faceţi clic pe formularul de a plasa JPanel în această locaţie.

Componenta JPanel apare în formularul de ContactEditorUI cu portocaliu subliniind, ceea ce înseamnă că acesta este selectat, după cum se arată în ilustraţia următoare. Dupa lansarea butonul mouse-ului, indicatorii mici par să demonstreze relaţii de componenta de ancorare şi un nod corespunzător JPanel este afişat în fereastra de Inspector.

Page 60: Curs Proiectarea Interfetelor Grafice

60

Apoi, avem nevoie pentru a redimensiona JPanel pentru a face loc pentru componentele vom loc în ea un pic mai târziu, dar hai sa ia

un minut să subliniez un alt de vizualizare Generatorul GUI lui caracteristici prima. În scopul de a face acest lucru avem nevoie

pentru a deselecta JPanel tocmai le-am adăugat. Pentru ca nu am adăugat un titlu de frontieră încă, panoul dispare. Remarca, totuşi,

că, atunci când treci cursorul peste JPanel, marginile sale schimbare la lumina gri, astfel încât poziţia sa poate fi văzut în mod clar.

Ai nevoie doar să faceţi clic oriunde în cadrul componentei selectaţi din nou aceasta şi provoacă redimensionare mânere şi ancorarea

indicatori care să reapară.

Pentru a redimensiona JPanel:

1. Selectaţi JPanel tocmai l-aţi adăugat. De redimensionare mic patrat mânere reapare în jurul perimetrului componenta a lui.

2. Faceţi clic şi ţineţi redimensiona mâner pe marginea din dreapta a JPanel şi trageţi până la orientarea alinierea punctate apare apropiere de marginea formular.

3. De presă al redimensiona mânerul pentru a redimensiona componenta.

Componenta JPanel este extins la durata între marjele de containerului stânga şi dreapta, în conformitate cu recomandate offset, aşa cum se arată în ilustraţia următoare.

Page 61: Curs Proiectarea Interfetelor Grafice

61

Acum, că am adăugat un panou să conţină informaţii nostru Numele UI lui, avem nevoie să repetaţi procesul pentru a adăuga un alt

mod direct de mai jos prima pentru e-mail de informare. Referindu-se la următoarele ilustraţii, se repetă anterioare două sarcini,

acordând o atenţie pentru a poziţionare Generatorul GUI's sugerat. Observaţi că distanţa a sugerat verticală între JPanels doi este

mult mai restrâns decât că, la margini. După ce aţi adăugat JPanel al doilea, redimensionati-o astfel încât să umple rămase sub formă

de spaţiu pe verticală.

Page 62: Curs Proiectarea Interfetelor Grafice

62

Page 63: Curs Proiectarea Interfetelor Grafice

63

Pentru că vrem să se facă distincţia vizual funcţii în superioare şi inferioare ale GUI secţiunile noastre, avem nevoie pentru a adăuga

un titlu de frontieră şi pentru fiecare JPanel. În primul rând vom realiza acest lucru, folosind fereastra de Proprietăţi, apoi vom

încerca le folosind meniul pop-up.

Pentru a adăuga frontierele titlul de proprietate asupra JPanels:

1. Selectaţi JPanel de top în Builder GUI.

2. În fereastra de Proprietăţi, faceţi clic pe butonul elipsă (...) lângă proprietatea de frontieră.

3. In frontieră JPanel editorul care apare, selectaţi nodul TitledBorder în panoul disponibile Borders.

4. În panoul Proprietăţi de mai jos, introduceţi numele pentru titlul de proprietate.

5. Faceţi clic pe elipsa (...) lângă proprietatea Font, Bold selectaţi pentru stilul de font, şi introduceţi 12 pentru Dimensiune. Faceţi clic pe OK pentru a ieşi din dialog.

6. Selectaţi în partea de jos JPanel şi repetaţi paşii 2 până la 5, dar de data aceasta faceţi clic dreapta pe JPanel şi accesul Properties fereastră cu ajutorul meniul pop-up. Adresa de e-mail pentru titlul de proprietate.

Frontierele Intitulat, se adaugă la ambele componente JPanel. Adăugarea de Componente separate la formularul

Acum, avem nevoie să adăugaţi componente care va prezenta informatii reale de contact în lista noastre de contact. În cadrul

acestei responsabilităţi vom adăuga patru JTextFields că va afişa informaţiile de contact şi a JLabels care vor să le descrieţi. În timp

ce realizarea acestui, observaţi liniile directoare orizontale şi verticale care afişează GUI Builder, sugerând componenta preferat

spaţiere astfel cum sunt definite de către dvs. sistemului de operare uite si sa se simta. Acest lucru asigură faptul că GUI-ul este în

mod automat făcut respectând obiectivul sistemului de operare privim si sa se simta la rulare.

Pentru a adăuga un JLabel la formularul de:

1. În fereastra Palette, selectaţi componenta etichetă din categoria Swing.

2. Mutaţi cursorul peste Numele JPanel am adaugat mai devreme. În cazul în care apar linii directoare care să indice că JLabel este poziţionat în colţul din stânga sus al JPanel cu o marjă mică la marginile de sus şi din stânga, faceţi clic pentru a plasa etichetă.

The JLabel se adaugă la forma şi un nod corespunzător, reprezentând componenta se adaugă la fereastra Inspector.

Inainte de a merge mai departe, avem nevoie pentru a edita textul de afişare a JLabel tocmai le-am adăugat. Deşi aveţi posibilitatea

să editaţi componenta textul afişat în orice moment, cea mai uşoară cale este de a face acest lucru ca le adăugaţi.

Pentru a edita textul de afişare a unei JLabel:

1. Faceţi dublu clic pe JLabel pentru a selecta textul ei de afişare.

2. Numele primul tip: si apasati Enter.

Numele JLabel e nou este afişat şi lăţime componente reglează, ca urmare a edita.

Acum, vom adăuga o JTextField astfel încât să putem obţine o bucatica din caracteristică Builder GUI de valoarea iniţială de

aliniere.

Pentru a adăuga un JTextField la formularul de:

1. În fereastra Palette, selectaţi textul Câmp componenta din categoria Swing.

2. Mutaţi cursorul imediat de la dreptul de prenume: JLabel ne-am adăugat. Când orientarea orizontală pare să indice că iniţială a JTextField este aliniat cu cea a JLabel şi spaţierea între cele două componente este sugerat,

Page 64: Curs Proiectarea Interfetelor Grafice

64

cu o orientare verticală, faceţi clic pe la poziţia JTextField.

JTextField fixează în poziţie în formularul de aliniat cu valoarea iniţială JLabel lui, aşa cum se arată în ilustraţia următoare. Observaţi că JLabel mutat în jos, uşor în vederea alinierii cu valoarea iniţială mai înalt câmpul de text a lui. Ca de obicei, un nod reprezentând componenta se adaugă la fereastra Inspector.

Înainte de a trece mai departe, avem nevoie pentru a adăuga un JLabel suplimentare şi JTextField imediat la dreapta, ale celor

tocmai le-am adăugat, după cum se arată în ilustraţia următoare. De această dată intră Last Name: ca JLabel a textului de afişare şi

se lasă de text JTextFields "substituent aşa cum este pentru acum.

Pentru a redimensiona un JTextField:

1. Selectaţi JTextField tocmai le-am adăugat la dreapta a Last Name: JLabel.

2. Glisaţi marginea JTextField dreptul redimensiona mânerul spre marginea din dreapta a anexând JPanel.

3. În cazul în care liniile directoare verticale alinierea apar sugerând marja dintre câmpul de text şi marginea din dreapta a JPanel, eliberaţi butonul mouse-ului pentru a redimensiona JTextField.

Marginea JTextField dreptul fixează alinierea cu marja de JPanel's Edge a recomandat, aşa cum se arată în ilustraţia următoare.

Page 65: Curs Proiectarea Interfetelor Grafice

65

Adăugarea de multiple Componente la formularul

Acum, vom adăuga Titlu: şi Nick: JLabels care descriu două JTextFields că vom adăuga într-un minut. Vom alege şi de plop

componentelor în timp ce apăsaţi tasta Shift, pentru a le adăuga rapid la forma. Realizarea acestui În timp ce, din nou, observaţi că

Builder GUI afişează liniile orizontale si verticale care sugerează spaţierea preferat componenta.

Pentru a adăuga JLabels multiple pentru a forma:

1. În fereastra Palette, selectaţi componenta etichetă din categoria Swing, făcând clic pe şi de eliberare a butonul mouse-ului.

2. Mutaţi cursorul peste formularul de mai jos, direct prenume: JLabel am adaugat mai devreme. În cazul în care liniile directoare par să indice că marginea JLabel noului stânga este aliniat cu cel al JLabel de mai sus şi o marjă mică există între ele, Shift-click pentru a JLabel primul loc.

3. În timp ce încă mai apăsând tasta Shift, faceţi clic pe un alt loc pentru a JLabel imediat la dreapta din prima. A face anumite pentru a elibera tasta Shift înainte to poziţionarea JLabel al doilea. Dacă uitaţi să eliberaţi tasta Shift to înainte de poziţionare JLabel ultima, pur şi simplu apăsaţi tasta Escape.

The JLabels se adaugă la formularul de crearea unui al doilea rând, aşa cum se arată în ilustraţia următoare. Nodurile reprezentând fiecare componentă se adaugă la fereastra Inspector.

Înainte de a trece mai departe, avem nevoie pentru a edita numele JLabels ", astfel că vom putea vedea efectul aliniamente vom

stabili mai târziu.

Pentru a edita textul de afişare a JLabels:

1. Faceţi dublu clic pe JLabel prima pentru a selecta textul ei de afişare.

2. Titlu Tip: si apasati Enter.

3. Repetaţi paşii 1 şi 2, care intră Nickname: pentru proprietatea numele JLabel-al doilea.

Numele JLabels "noi sunt afişate în forma şi sunt deplasate ca urmare a lăţimi lor editate, după cum se arată în ilustraţia următoare.

Page 66: Curs Proiectarea Interfetelor Grafice

66

Adesea, este necesar să se adauge o componentă între componente care sunt deja plasate într-un formular. Ori de câte ori când

tente, Generatorul GUI automat ture-le pentru a face loc pentru noi componente.

Pentru a d terior, aşa cum se arată în următoarele două

ilustra

Pentru a i

Swing.

2. inaţi dificultăţi de poziţionare noul câmp de text,

aveţi posibilitatea să fixaţi-l la orientarea stânga JLabel Pseudonim aşa cum se arată în prima imagine de mai jos.

3. Faceţi clic pentru a plasa JTextField între Titlu: şi Nick: JLabels.

JTextField fixează în poziţie între cele două JLabels. Schimbările din extrema dreaptă JLabel spre dreapta a JTextField pentru a veni în sugerat orizontale de offset.

Introducerea Componente

adăugaţi o componentă între două componente exis

emonstra acest lucru, vom introduce un JTextField între JLabels am adăugat an

ţii.

nsera un JTextField între două JLabels:

1. În fereastra Palette, selectaţi textul Câmp componenta din categoria

Mutaţi cursorul peste Titlu: şi Nick: JLabels de pe rândul al doilea, astfel încât JTextField suprapunerile, câtşi este aliniat la liniile de bază ale acestora. Dacă întâmp

Ave c va afişa porecla fiecare contact pe partea

dreapta a formula

2. eaptă a etichetei Nickname şi faceţi clic pe la locul câmpul de text.

Pentru a r

1. Field etichetei le-aţi adăugat în sarcina anterior spre JPanel.

niile directoare verticale alinierea apar sugerând marja dintre câmpul de text şi marginile JPanel, eliberaţi butonul mouse-ului pentru a redimensiona JTextField.

m în ă mai trebuie să adăugaţi un JTextField suplimentare pentru a forma în care se

rului.

Pentru a adăuga un JTextField:

1. În fereastra Palette, selectaţi textul Câmp componenta din categoria Swing.

Mutaţi cursorul în partea dr

The JTextField fixează în poziţie de lângă JLabel în stânga acestuia.

edimensiona un JTextField:

Glisaţi redimensionare mânerele de la Nick: JTextdreapta a anexând

2. În cazul în care li

Page 67: Curs Proiectarea Interfetelor Grafice

Marginea JTextField dreptul fixează alinierea cu marja de JPanel's Edge recomandate şi Builder GUI conchide comportament adecvat redimensionare.

Moving Forward

Alinierea este unul dintre aspect

bucatica de caracteristici alinierea ID

ele cele mai fundamentale de a crea profesional-GUIs caută. În secţiunea precedentă am luat o

E lui în timp ce adăugând JLabel şi a componentelor JTextField la formularul nostru de

ContactEditorUI. Apoi, vom arunca o privire mai în adâncimea la caracteristicile de aliniere Generatorul GUI ca lucram cu diferitele

De fiecare dată când adăugaţi un element la un formular, Builder GUI în mod eficient aliniază-le, aşa cum rezultă din liniile

Uneori este necesar, cu toate acestea, pentru a specifica relaţii diferite între grupuri de componente,

de as n ntactEditor noastre, dar am făcut, nu le-a

alini c

Pen li

1.

2. Faceţi clic pe dreapta alinia, în coloana buton (

componente cu alte avem nevoie pentru a aplicaţiei noastre.

Componenta Aliniere

directoare de aliniere care apar.

eme ea. Mai devreme am adaugat patru JLabels de care avem nevoie pentru GUI Co

a. A um vom alinia două coloane ale JLabels, astfel încât marginile lor dreptul de linia de sus.

tru a nierea componente:

Selectaţi Primul nume: şi în titlul: JLabels pe partea stângă a formularului.

), În bara de instrumente. Alternativ, aveţi posibilitatea să

estora sunt aliniate. Relaţiile de ancorare sunt actualizate, indicând faptul că componentele au fost grupate.

Înainte de a terminat cu JTextFields am adaugat mai devreme, avem nevoie să vă asiguraţi că JTextFields doi vom introduce între

JLab su arginea din dreapta a

form u

Pentru a s

entru a selecta lor în Builder GUI.

şi a alege Auto Redimensionarea>

stabilite pentru a redimensiona orizontal la rulare. Liniile directoare aliniere şi indicatorii de ea de feedback vizual al relaţiilor componente.

Pentru a s

ricare dintre ele şi să alegeţi Set dimensiunea implicită din

The JTextFields sunt toate setate la aceeaşi lăţime şi indicatorii se adaugă la marginea de sus a fiecărei, omponente.

Acu v ite utilizatorilor să selecteze formatul de

infor e

Pentru a alinia o

faceţi clic dreapta fie una, şi alege Aliniaţi> dreapta în coloana din meniul pop-up.

3. Repetaţi acest lucru pentru Last Name: şi Nick: JLabels, de asemenea.

Poziţiile JLabels "schimbare, astfel încât marginile dreptul de a textului de afişare a ac

els nt setate pentru a redimensiona în mod corect. Spre deosebire de JTextFields doi că am întins la m

ular l nostru, introdus comportamentul componentelor "resizeability nu este setat automat.

eta componenta comportament resizeability:

1. Control-clic pe cele două componente introduce JTextField p

2. Cu atât JTextFields selectat, faceţi clic dreapta pe nici unul dintre ele orizontale din meniul pop-up.

JTextFields suntancorare sunt actualizate, furnizar

eta componente care urmează să fie de aceeaşi dimensiune:

1. Control-clic pe toate cele patru JTextFields în forma de a le selecta.

2. Cu JTextFields selectată, faceţi clic dreapta pe omeniul pop-up.

furnizarea de feedback vizual al relaţiilor c

m, a em nevoie pentru a adăuga un alt JLabel descrie JComboBox care va perm

mar a aplicaţiei noastre ContactEditor vor fi afişate.

JLabel la un grup de componente:

67

Page 68: Curs Proiectarea Interfetelor Grafice

68

1. onenta etichetă din categoria Swing.

2. Mutaţi cursorul de mai jos prenumele şi JLabels titlul de pe partea stângă a JPanel. În cazul în care orientarea pare să indice că marginea JLabel noului dreapta este aliniat cu marginile din dreapta a grupului de componente de mai sus (cele două JLabels), faceţi clic pentru a poziţia componenta.

The JLabel fixează într-un drept aliniat la poziţia cu coloana de JLabels de mai sus, aşa cum se arată în ilustraţia următoare. GUI actualizează Builder liniile de alinierea statutului indicând componente spaţierea, precum şi ancorarea relaţii.

În fereastra Palette, selectaţi comp

Ca şi în exemplele anterioare, faceţi dublu clic pe JLabel pentru a selecta textul ei de afişare şi apoi introduceţi Display Format:

Alinierea la momentul iniţial

introdus JTextField mai devreme, de exemplu,

iniţial sa a fost în mod automat aliniate la JLabels adiacente.

Acum, vom adăuga caseta combo care va permite utilizatorilor să selecteze formatul de informaţii pe care a aplicaţiei noastre

Cont d u cea a textului JLabel lui. Comunicarea,

din n li

Pentru a a

1. o Box componenta din categoria Swing.

2. Mutaţi cursorul imediat de la dreptul de JLabel tocmai le-am adăugat. Când orientarea orizontală pare să indice că valoarea iniţială JComboBox este aliniat cu linia de bază a textului în JLabel şi distanţa dintre cele două componente este sugerat, cu o orientare verticală, faceţi clic pe la poziţia caseta combo.

Componenta fixează într-o poziţie aliniat cu valoarea iniţială a textului în JLabel la stânga acestuia, după cum se arată în ilustraţia următoare. Generatorul GUI afişează liniile care indică statutul de componente spaţierea, precum şi ancorarea relaţii.

pentru numele afişat. Observaţi că atunci când JLabel fixează în poziţie, celelalte componente pentru a permite trecerea de text mai

lung de afişare.

Ori de câte ori le adăugaţi sau să mutaţi componente care include un text (JLabels, JTextFields, şi aşa mai departe), IDE sugerează

aliniamente care se bazează pe liniile de bază ale textului în componente. Când am

actE itor vor fi afişate. Aşa cum am adăuga JComboBox, vom alinia de bază sale c

ou, niile directoare de bază de aliniere care par a ne ajuta cu poziţionare.

linia la liniile de bază de componente:

În fereastra Palette, selectaţi Comb

Page 69: Curs Proiectarea Interfetelor Grafice

69

Pentru a redimensiona JComboBox:

1. Selectaţi ComboBox în Builder GUI.

2. Glisaţi redimensionare mâner pe marginea JComboBox dreptul spre dreapta, până la liniile directoare de aliniere apare sugerând preferat compensa între JComboBox şi margini JPanel.

Aşa cum se arată în ilustraţia următoare, marginea JComboBox dreptul fixează alinierea cu marja de JPanel's Edge recomandate şi lăţimea componenta este setată automat pentru a redimensiona cu formularul.

Modele de editare componenta este dincolo de domeniul de aplicare a acestui tutorial, asa ca, pentru

Trecerea în revistă a ceea ce am învăţat

Am ajuns un start bun clădire GUI noastre ContactEditor, dar hai sa iei câteva minute pentru recapitulare ceea ce am învăţat î

ce vom adăuga câteva mai multe dintre componentele interfata noastra cere.

Până acum ne-am concentrat pe adăugarea de componente pentru a GUI noastre ContactEditor folosind liniile directoare

n timp

alinierea

IDE de a ne ajuta cu poziţionare. Este important să se înţeleagă, totuşi, că o altă parte integrantă din plasarea componentei este de

această facilitate fără să o ştie. După cum sa menţionat anterior, ori

de câte ori când adăugaţi un element la un formular, IDE sugerează aspectul ţintă şi de poziţionare simt lui preferat cu liniile

Gen o izarea gesturi de flux de lucru tipic. Ori de câte

ori să ău re

înlănţuirea e, mai degrabă decât lupta cu detaliile de implementare complicate.

Pentru a a

ectaţi componenta etichetă din categoria Swing.

2. Mutaţi cursorul peste formularul de mai jos imediat E, cu JPanel partea de jos a lui titlu-mail. În cazul în care nel cu o marjă mică la marginile

de sus şi din stânga, faceţi clic pe la locul JLabel.

3.

nte, un nod corespunzător reprezentând componenta se adaugă la fereastra Inspector.

Pentru a a

ancorare. Deşi nu am discutat-o inca, v-aţi luat deja profita de

directoare. Odată plasate, componente noi sunt, de asemenea, ancorate la cel mai apropiat de margine de container sau componente

pentru a se asigura că relaţiile componente sunt menţinute în timpul rulării. În această secţiune, vom concentra pe realizarea

sarcinilor într-un mod mai simplificat subliniind totodată activitatea constructorul GUI este de a face în spatele scenei.

Adăugarea, Alinierea, precum şi ancorarea

erat rul GUI vă permite să se stabilească formularele rapid şi uşor prin raţional

ad gaţi un element la un formular, Builder GUI automat fixează-le în poziţiile preferate şi stabileşte relaţiile necesa

astfel încât vă puteţi concentra pe proiectarea form

dăuga, pentru a alinia, şi să editaţi textul de afişare a unei JLabel:

1. În fereastra Palette, sel

liniile directoare par să indice că este poziţionat în colţul din stânga sus al JPa

Faceţi dublu clic pe JLabel pentru a selecta textul ei de afişare. Apoi, de tip E-mail: si apasati Enter.

JLabel fixează în poziţia preferată în formă, ancorat la marginile de sus şi din stânga a anexând JPanel. La fel ca înai

dăuga un JTextField:

1. În fereastra Palette, selectaţi textul Câmp componenta din categoria Swing.

Page 70: Curs Proiectarea Interfetelor Grafice

70

2. etă ne-am adăugat. În cazul în care liniile şi a

a poziţia câmpul de text.

a JLabel. Nod sale corespunzătoare este, de asemenea, adaugă la fereastra Inspector.

TextField spre dreapta a anexând JPanel până la liniile directoare de aliniere extField şi margini JPanel.

arjele de preferat.

Acu v

Pentru a a

1.

2. directoare par să indice că marginile JList lui de sus şi din stânga sunt aliniate cu marjele de preferat de-a

JList fixează în poziţia desemnat de către liniile directoare aliniere şi nodul sale corespunzătoare este afişat în fereastra de Inspector. Comunicarea, de asemenea, că forma extinde pentru a acomoda JList nou adăugat.

ntru a afişa liste lungi de date, au de obicei nevoie de adăugarea unui JScrollPane. Ori de câte

ori când adăugaţi o componentă care necesită o JScrollPane, Builder GUI adaugă automat pentru tine. Deoarece JScrollPanes sunt

Acesta este adesea benefic pentru a stabili mai multe componente conexe, cum ar fi butoane în dialogurile modale, care urmează să

as vom adăuga patru JButtons pentru a forma

ContactEditor nostru care ne va permite să adăugaţi, să editaţi şi elimina intrările individuale din lista noastre de contact, aşa cum se

arată oane care urmează să fie de aceeaşi dimensiune astfel încât acestea să

poată ş

Pentru a ad

1.

4. . a între sugerat este respectat şi coerente. If you forget to

release the Shift key prior to positioning the last JButton, simply press the Escape key.

5. Set the display text for each JButton. (You can edit a button's text by right-clicking the button and choosing Edit Text. Or you can click the button, pause, and then click again.) Enter Add for the top button, Edit for the second, Remove for the third, and As Default for the fourth.

The JButton components snap into the positions designated by the alignment guidelines. The width of the buttons changes to accommodate the new names.

Mutaţi cursorul imediat de la dreptul de Adresa E-mail etichdirectoare par să indice că valoarea iniţială JTextField este aliniat cu linia de bază a textului în JLabelmarjei dintre cele două componente este sugerat, cu o orientare verticală, faceţi clic pentru

The JTextField fixează în poziţie cu privire la dreptul de E-mail Adresa: JLabel şi este legat l

3. Glisaţi redimensionare mânerul Japare sugerând compensa între JT

Marginea JTextField dreptul fixează la orientarea alinierea indicând m

m, a em nevoie pentru a adăuga JList care va afişa întregul ContactEditor noastre lista de contacte.

dăuga şi a redimensiona o JList:

În fereastra Palette, selectaţi componenta Lista din categoria Swing.

Mutaţi cursorul imediat de mai jos e-mail Adresa JLabel am adaugat mai devreme. În cazul în care liniile

lungul marginii JPanel de stânga şi JLabel de mai sus, faceţi clic pentru poziţia JList.

3. Glisaţi JList a redimensiona la mâner dreapta spre dreapta a anexând JPanel până la liniile directoare de aliniere par să indice că este aceeaşi lăţime ca şi JTextField de mai sus.

Din moment ce JLists sunt utilizate pe

componente non-vizuale, trebuie să se folosească de Inspector în scopul de a vizualiza sau edita orice JScrollPanes că Builder GUI

creat.

Componenta de calibrare

fie de aceeaşi dimensiune pentru consistenţă vizuale. Pentru a demonstra acest p

în următoarele ilustraţii. Apoi, vom stabili cele patru but

fi u or recunoscut ca oferind funcţionalitate conexe.

ăuga, pentru a alinia, şi să editaţi textul afişat de butoane multiple:

În fereastra Palette, selectaţi componenta Button.

2. Mutaţi JButton peste marginea din dreapta a e-mail Adresa JTextField în JPanel mai mici. În cazul în care liniile directoare par să indice că iniţială a JButton şi marginea din dreapta sunt aliniate cu cea a JTextField, Shift-click pentru a loc primul buton de-a lungul marginea JFrame dreptul. Lăţimea JTextField a diminuării populaţiei active pentru a veni în JButton atunci când eliberaţi butonul mouse-ului.

3. Mutaţi cursorul peste colţul din dreapta sus a JList în JPanel mai mici. În cazul în care liniile directoare par să indice că marginile JButton lui de sus şi dreapta sunt aliniate cu cea a JList, Shift-Click pentru locul al doilea buton de-a lungul marginii JFrame dreptul.

Adăugaţi două JButtons suplimentare de mai jos cele două pe care deja am adăugat pentru a crea o coloanăA face anumite poziţia JButtons, astfel încât distanţ

Page 71: Curs Proiectarea Interfetelor Grafice

71

Now that the buttons are positioned where we want them, we'll set the four buttons to be the same size for visual consistency as well

as to clarify that they are related functionally.

To set components to the same size:

1. Select all four JButtons by pressing the Control key while making your selection.

2. Right-click one of them and choose Same Size > Same Width from the pop-up menu.

The JButtons are set to the same size as the button with the longest name.

Indentation

Often it is necessary to cluster multiple components under another component such that it is clear they belong to a group of related

functions. One typical case, for example, is placing several related checkboxes below a common label. The GUI Builder enables you

to accomplish indenting easily by providing special guidelines suggesting the preferred offset for your operating system's look and

feel.

In this section we'll add a few JRadioButtons below a JLabel that will allow users to customize the way the application displays data.

Refer to the following illustrations while accomplishing this or click the View Demo link following the procedure to view an

interactive demonstration.

To indent JRadioButtons below a JLabel:

1. Add a JLabel named Mail Format to the form below the JList. Make certain the label is left aligned with the JList above.

Page 72: Curs Proiectarea Interfetelor Grafice

72

2. In the Palette window, select the Radio Button component from the Swing category.

3. Move the cursor below the JLabel that we just added. When the guidelines appear indicating that the JRadioButton's left edge is aligned with that of the JLabel, move the JRadioButton slightly to the right until secondary indentation guidelines appear. Shift-click to place the first radio button.

4. Move the cursor to the right of the first JRadioButton. Shift-click to place the second and third JRadioButtons, being careful to respect the suggested component spacing. Make certain to release the Shift key prior to positioning the last JRadioButton.

5. Set the display text for each JRadioButton. (You can edit a button's text by right-clicking the button and choosing Edit Text. Or you can click the button, pause, and then click again.) Enter HTML for the left radio button, Plain Text for the second, and Custom for the third.

Three JRadioButtons are added to the form and indented below the Mail Format JLabel.

Now we need to add the three JRadioButtons to a ButtonGroup to enable the expected toggle behavior in which only one radio

button can be selected at a time. This will, in turn, ensure that our ContactEditor application's contact information will be displayed

in the mail format of our choosing.

To add JRadioButtons to a ButtonGroup:

1. In the Palette window, select the Button Group component from the Swing category.

2. Click anywhere in the GUI Builder design area to add the ButtonGroup component to the form. Notice that the

Page 73: Curs Proiectarea Interfetelor Grafice

ButtonGroup does not appear in the form itself, however, it is visible in the Inspector's Other Components area.

3. Select all three of the JRadioButtons in the form.

4. In the Properties window, choose buttonGroup1 from the buttonGroup property combo box.

Three JRadioButtons are added to the button group.

Making the Final Adjustments

We've managed to rough out our ContactEditor application's GUI, but there are still a few things remaining to do. In this section,

we'll take a look at a couple of other typical layout tasks that the GUI Builder streamlines.

De finisare Up

Now we need to add the buttons that will enable users to confirm the information they enter for an individual contact and add it to

the contact list or cancel, leaving the database unchanged. In this step, we'll add the two required buttons and then edit them so that

they appear the same size in our form even though their display text are different lengths.

To add and edit the display text of buttons:

1. If the lower JPanel is extended to the bottom edge of the JFrame form, drag the bottom edge of the JFrame down. This gives you space between the edge of the JFrame and the edge of the JPanel for your OK and Cancel buttons.

2. In the Palette window, select the Button component from the Swing category.

3. Move the cursor over the form below the E-mail JPanel. When the guidelines appear indicating that the JButton's right edge is aligned with the lower right corner of the JFrame, click to place the button.

4. Add another JButton to the left of the first, making certain to place it using the suggested spacing along the JFrame's bottom edge.

5. Set the display text for each JButton. Enter OK for the left button and Cancel for right one. Notice that the width of the buttons changes to accommodate the new names.

6. Set the two JButtons to be the same size by selecting both, right-clicking either, and choosing Same Size > Same Width from the pop-up menu.

The JButton components appear in the form and their corresponding nodes are displayed in the Inspector window. The JButton components' code is also added to the form's source file which is visible in the Editor's Source view. Each of the JButtons are set to the same size as the button with the longest name.

The last thing we need to do is delete the placeholder text in the various components. Note that while removing placeholder text after

roughing out a form can be a helpful technique in avoiding problems with component alignments and anchoring relationships, most

developers typically remove this text in the process of laying out their forms. As you go through the form, select and delete the

placeholder text for each of the JTextFields. We'll leave the placeholder items in both the JComboBox and JList for a later tutorial.

Previewing Your GUI

Now that you have successfully built the ContactEditor GUI, you can try your interface to see the results. You can preview your

form as you work by clicking the Preview Form button ( ) in the GUI Builder's toolbar. The form opens in its own window,

allowing you to test it prior to building and running.

73

Page 74: Curs Proiectarea Interfetelor Grafice

74

Page 75: Curs Proiectarea Interfetelor Grafice

75

MODULU IV

Lucru ca baze de date in JAVA

Aplicaţiile care folosesc baze de date sunt, în general, sunt aplicaţii complexe folosite pentru gestionarea unor informatii de dimensiuni mai mari într-o maniera sigură si eficientă.

O bază de date reprezintă o modalitate de stocare a unor informatii (date) pe un suport extern, cu posibilitatea regăsirii acestora. Uzual, o bază de date este memorată într-unul sau mai multe fişiere. Crearea unei baze de date - se face cu aplicaţii specializate oferite de producătorul tipului respectiv de bază de date. Accesul la o baza de date - Se face prin intermediul unui driver specific tipului respectiv de bază de date. Acesta este responsabil cu accesul efectiv la datele stocate, fiind legatura între aplicaţie şi baza de date. JDBC (Java Database Connectivity) este o interfaţă standard SQL de acces la baze de date. JDBC este constituită dintr-un set de clase si interfeţe scrise în Java, furnizând mecanisme standard pentru proiectanţii aplicatiilor de baze de date.

Pachetul care oferă suport pentru lucrul cu baze de date este java.sql. Folosind JDBC este usor să transmitem secvenţe SQL către baze de date relaţionale.

Cu alte cuvinte, nu este necesar să scriem un program pentru a accesa o baza de date Oracle, alt program pentru a accesa o baza de date Sybase şi aşa mai departe. Este de ajuns să scriem un singur program folosind API-ul JDBC şi acesta va fi capabil să trimită secvente SQL bazei de date dorite.

Bineînţeles, scriind codul sursă în Java, ne este asigurată portabilitatea programului. Deci, iată două motive puternice care fac combinaţia Java - JDBC demnă de luat în seamă.

Fiind robust, sigur, usor de folosit, usor de înteles, Java este un excelent limbaj pentru a dezvolta aplicaţii de baze de date. Tot ceea ce-i lipseste este modalitatea prin care aplicatiile Java pot comunica cu bazele de date. Aici vine însa JDBC-ul care oferă acest mecanism.

In linii mari, JDBC face trei lucruri: stabileşte o conexiune cu o baza de date, trimite secvenţe SQL, prelucrează rezultatele . Conectarea la o baza de date

Procesul de conectare la o bază de date implica două operatii:

- încarcarea în memorie a unui driver corespunzător - realizarea unei conexiuni propriu-zise

O conexiune (sesiune) la o bază de date reprezintă un context prin care sunt trimise secvenţe SQL şi primite rezultate. Intr-o aplicaţie pot exista mai multe conexiuni simultan la baze de date diferite sau la aceeasi baza.

Clasele si interfetele responsabile cu realizarea unei conexiuni sunt: - clasa DriverManager, ce se ocupă cu înregistrarea driverelor ce vor fi folosite în aplicatie - interfata Driver, pe care trebuie să o implementeze orice clasa ce descrie un driver clasa DriverPropertyInfo - interfata Connection, descrie obiectele ce modelează o conexiune propriu-zisă cu baza de date

Page 76: Curs Proiectarea Interfetelor Grafice

76

Incarcarea în memorie a unui driver

Primul lucru pe care trebuie să-l facă o aplicaţie în procesul de conectare la o baza de date este să încarce în memorie clasa ce implementeaza driver-ul necesar comunicării cu respectiva baza de date. Acest lucru poate fi realizat prin mai multe modalitati:

1. DriverManager.registerDriver(new sun.jdbc.odbc.JdbcOdbcDriver()); 2. Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); 3. System.setProperty("jdbc.drivers", "sun.jdbc.odbc.JdbcOdbcDriver"); 4. java -Djdbc.drivers=sun.jdbc.odbc.JdbcOdbcDriver Specificarea unei baze de date

Odată ce un driver JDBC a fost încarcat în memorie, acesta poate fi folosit la stabilirea unei conexiuni cu o bază de date. Având în vedere faptul că pot exista mai multe drivere înregistrate în memorie, trebuie să avem posibilitea de a specifica pe lângă identificatorul bazei de date si driverul ce trebuie folosit.

Aceasta se realizează prin intermediul unei adrese specifice, numită JDBC URL, ce are urmatorul format:

jdbc:sub-protocol:identificator_baza_de_date

Câmpul sub-protocol denumeşte tipul de driver ce trebuie folosit pentru realizarea conexiunii si poate fi odbc, oracle, sybase, db2 şi aşa mai departe. Identificatorul bazei de date este un indicator specific fiecărui driver care specifică baza de date cu care aplicaţia doreşte să interactioneze. In functie de tipul driver-ului acest identificator poate include numele unei maşini gazdă, un număr de port, numele unui fişier sau al unui director, etc.

Realizarea unei conexiuni

Metoda folosită pentru realizarea unei conexiuni este getConnection din clasa DriverManager si poate avea mai multe forme:

Connection c = DriverManager.getConnection(url); Connection c = DriverManager.getConnection(url, username, password); Connection c = DriverManager.getConnection(url, dbproperies);

O conexiune va fi folosită pentru: - crearea de secvenţe SQL ce vor fi folosite pentru interogarea sau actualizarea bazei - aflarea unor informaţii legate de baza de date (meta-date) Clasa Connection asigură suport pentru controlul tranzacţiilor din memorie către baza de date prin metodele commit, rollback, setAutoCommit . Efectuarea de secvente SQL

Odată facută conectarea cu DriverManager.getConection(), se poate folosi obiectul Connection rezultat pentru a se crea un obiect de tip Statements, cu ajutorul căruia putem trimite secvente SQL către baza de date. Cele mai uzuale comenzi SQL sunt cele folosite pentru: - interogarea bazei de date (SELECT)

Page 77: Curs Proiectarea Interfetelor Grafice

77

- actualizarea bazei de date (INSERT, UPDATE, DELETE)

Connection c = DriverManager.getConnection(url); Statement s = c.createStatement(); ResultSet r = s.executeQuery ("SELECT * FROM un_tabel ORDER BY o_coloana"); s.executeUpdate("DELETE * FROM un_tabel");

Metoda executeQuery trimite interogari SQL către baza de date şi primeşte răspuns într-un obiect de tip ResultSet. Obţinerea şi prelucrarea rezultatelor Interfaţa ResultSet String query = "SELECT cod, nume FROM localitati ORDER BY nume"; ResultSet r = s.executeQuery( query ); while (r.next()) { System.out.println (r.getString ("cod") + "," + r.getString ("nume") ); } Interfaţa ResultSetMetaData ResultSet r = s.executeQuery(" SELECT * FROM localitati" ); ResultSetMetaData rsmd = r.getMetaData(); System.out.println("Coloane: " + rsmd.getColumnCount()); Declaraţii

Declaraţiilor sunt susţinute de interafaţa Statement şi subclasele sale PreparedStatement şi CallableStatement.

Interfaţa Statement

Defineşte metode pentru executarea declaraţiilor SQL care nu conţin parametrii de marcaj (markers)

Realizarea unei conexiuni se face astfel:

Connection con = DriverManager.getConnection(url, user, password); Dacă se utilizează driverul JDBC-ODBC Bridge, URL-ul JDBC va începe cu

jdbc:odbc. Cealaltă parte a URL-ului este numele sursei de date sau a sistemului de baze de date.

Crearea unei declaraţii se face:

Statement stmt = con.createStatement(); Fiecare obiect conexiunepoate crea mai multe declaraţii. Astfel pentru obiectul

anterior se poate adăuga:

Statement stmt1 = con.createStatement(); Statement stmt2 = con.createStatement();

Page 78: Curs Proiectarea Interfetelor Grafice

78

Executarea obiectelor Statement depinde de tipul declaraţiei SQL ce trebuie efectuată. Dacă obiectul Statement este o interogare, se returnează un obiect ResultSet prin metoda executeQuery().

Această metodă creează obiectul ResultSet care conţine datele returnate de interogare. Obţinerea unor date din tabele se face:

Statement stmt = con.createStatement(); ResultSet rs = stmt.executeQuery(” select Nume, Prenume from Tabel ”); while( rs.next()) { ... }

Utilizarea metodei execute() este condiţionată de existenţa unui string SQL. În acest

caz actulizează fie un cont, fie un obiect ResultSet . Valoarea returnată este true dacă primul rezultat este un obiect ResultSet şi false dacă

se actualizează un cont. Pentru crearea unui tabel se poate utiliza secvenţa:

stmt.executeUpdate(” CREATE TABLE Tabel (Nume char(20), Prenume char(20), Adresa char (20), matr int , anul_de_studiu int) ”);

Aplicatie pentru crearea unei tabele intr-o baza de date Access.

import java.sql.*; public class creare { public static void main(String args[]) { Connection con; // The connection to the database. try{ Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); con = DriverManager.getConnection("jdbc:odbc:stud"); Statement stmt = con.createStatement(); stmt.executeUpdate("CREATE TABLE produse" + "(cod_p INTEGER not null primary key," + "nume_produs VARCHAR(50)," + "cod_furnizor INTEGER," + "denumire_furnizor VARCHAR(50)," + "data_intrare DATE, pret INTEGER, cantitate FLOAT,"+ "EMAIL_ADDRESS VARCHAR(50))"); } catch(ClassNotFoundException e){ System.out.println(e.toString()); } catch(SQLException e){ System.out.println(e.toString()); } } }

Probleme propuse Sa se realizeze o interfata cu care se realizeaza adaugarea de inregistrari in

tabela “cursuri”.

Page 79: Curs Proiectarea Interfetelor Grafice

79

Rezolvare

.........

Connection dB=null; ResultSet results=null; String sql; String s1= jTextField1.getText(); String s2= jTextField2.getText(); String s3= jTextField3.getText(); int i,j; i=Integer.parseInt(s1); j=Integer.parseInt(s3); String url="jdbc:odbc:Facultate"; String d; try { Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); } catch(ClassNotFoundException e) { System.out.println("Nu s-a putut incarca driver-ul"); } try{ dB = DriverManager.getConnection(url); PreparedStatement pstmt = dB . prepareStatement ("INSERT INTO Cursuri(id_curs,nume_curs,nr_credite)" + "Values('" + i + "','" + s2 + "','" + j + "');"); pstmt.executeUpdate(); // System.out.println("Inregistrarea a fost adaugata cu succes."); jLabel4.setText(" Inregistrarea a fost adaugata cu succes"); } catch(SQLException e) { System.err.println("SQLException: " + e); }

2. Sa se realizeze o interfata cu ajutorul careia se cauta folosind un ID, un

student, in tabela Studenti.

Page 80: Curs Proiectarea Interfetelor Grafice

80

Rezolvare

.........

Connection dB=null; ResultSet results=null; String sql; String s1=jTextField1.getText(); String url="jdbc:odbc:Facultate"; String num,d="",d1=""; int i,j=0,cr=0; i=Integer.parseInt(s1); System.out.println(i); try { Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); } catch(ClassNotFoundException e) { System.out.println("Nu s-a putut incarca driver-ul"); } try { dB = DriverManager.getConnection(url); Statement stmt=dB.createStatement(); results=stmt.executeQuery ("SELECT nume,credite FROM Studenti WHERE "+"(nr_matricol='" +s1+ "') "); while(results.next()) { d=results.getString("nume"); d1=results.getString("credite"); cr=Integer.parseInt(d1); } jTextField2.setText(d); jTextField3.setText(d1); } catch(SQLException e) { System.err.println("SQLException: " + e); } 3 . Sa se realizeze o interfata, ca in figura alaturata, astfel incat fiecare buton sa contina si actiunile corespunzatoare.

Page 81: Curs Proiectarea Interfetelor Grafice

81

4. Studiu de caz. Conectarea la o bază de date MySQL

MySQL este un popular sistem Open Source de gestionare a bazelor de date relaţionale

(RDBMS), frecvent utilizate în aplicaţii de web, datorită vitezei sale, flexibilitate şi fiabilitate.

MySQL angajează SQL, sau pentru accesarea şi de prelucrare a datelor

conţinute în bazele de date.

Structured Query Language,

Durata estimată: 30 minute

Continut

• Configurarea MySQL server Proprietăţi

• Pornirea server MySQL

• Crearea şi Conectarea la baza de date

• Crearea tabelele bazei de date

• Lucrul cu tabelul de date

• Rularea unui script SQL

• A se vedea de asemenea,

Pentru a urma acest tutorial, aveţi nevoie de următoarele produse software şi resurse.

Software-ul sau de Resurse Versiune Required

NetBeans IDE 6.5 sau 6.7 Java Version

Java Development Kit (JDK) Versiunea 6 sau versiunea 5

Baza de date MySQL Versiunea 5.x

Notă: Acest ghid presupune că aveţi deja RDBMS MySQL instalat si configurat pe computer. Dacă instalaţi pentru prima dată, vă

rugăm să consultaţi documentaţia oficială MySQL pentru ajutor.

Configurarea MySQL server Proprietăţi

NetBeans IDE 6.7 vine bundled cu suport pentru RDBMS MySQL. Înainte de a putea accesa baza de date MySQL Server în

NetBeans IDE, trebuie să configuraţi MySQL proprietăţile Server.

1. În fereastra Servicii, extindeţi nodul Baze de date, faceţi clic dreapta pe MySQL server nodul si alegeti Properties.

MySQL server Proprietăţi deschide caseta de dialog.

Page 82: Curs Proiectarea Interfetelor Grafice

2. IDE localhost intră ca numele de gazdă implicit de server şi 3306 ca număr implicit serverul de port. Dacă această

informaţie este corectă, introduce numele de utilizator Administrator (dacă nu este afişat).

Notă: Aveţi nevoie de acces administrative, pentru a putea crea şi de a elimina baze de date.

3. Introduceţi parola de administrator. Implicit este setat la gol.

Notă: O parola-martor poate fi, de asemenea, o parolă.

4. Faceţi clic pe fila Administrare Proprietăţi din partea de sus a casetei de dialog.

Fila Admin Proprietăţi este apoi afişat, permiţându-vă să introduceţi informaţii pentru controlul MySQL server.

5. În calea / URL-ul pentru a admin domeniul instrument, tip sau răsfoiţi la locaţia a cererii dvs., cum ar fi MySQL

Administrare Admin Tool MySQL, phpMyAdmin, sau alt web-bază unelte de administrare.

Notă: mysqladmin este instrumentul de MySQL admin găsit în folderul bin din directorul de instalare MySQL. Este un

instrument de linie de comandă şi nu Ideal pentru utilizarea cu IDE.

Tip de nici un argument pentru instrumentul admin în domeniul Argumente.

6. În cale pentru a porni de comandă, tastaţi sau răsfoiţi la locaţia de comanda a începe MySQL. Pentru a găsi comanda

început, căutaţi mysqld în folderul bin din directorul de instalare MySQL.

Notă: binar recomandat pentru Unix şi NetWare este mysql_safe Comandă începe pot varia, de asemenea, în cazul în

care MySQL a fost instalat ca parte a unei instalaţii AMP.

Tip de nici un argument pentru comanda începe în domeniul Argumente.

7. Din cale pentru a opri câmpul de comandă, tastaţi sau răsfoiţi la locaţia de oprire comanda MySQL. Aceasta este, de

obicei calea spre mysqladmin în folderul bin din directorul de instalare MySQL. În cazul în care comanda este

mysqladmin în domeniul Argumentele, de -u root stop de a acorda permisiuni de root pentru oprirea serverului.

8. Când aţi terminat, fila Proprietăţi Admin ar trebui să semene cu figura de mai jos. Dacă sunteţi satified cu configuraţia

dvs., faceţi clic pe OK.

82

Page 83: Curs Proiectarea Interfetelor Grafice

83

Pornirea serverului MySQL

După ce asigurându-se că MySQL Server Bază de date se execută pe maşina dvs., faceţi clic dreapta pe Colecţii de date> MySQL

nod Server în fereastra Servicii şi alegeţi Connect.

Page 84: Curs Proiectarea Interfetelor Grafice

84

Atunci când sa extins, nodul MySQL server afişează toate bazele de date disponibile MySQL.

Crearea şi Conectarea la baza de date Instanţă

Un mod comun de a interacţiona cu bazele de date se face printr-un editor SQL. NetBeans IDE are un editor de built-in SQL pentru

acest scop. Editor SQL este, în general, accesibile prin intermediul Comandamentului Execute opţiune din meniul clic dreapta din

nodul conectare (sau de noduri copil nod conexiune's). Acum, că sunteţi conectat la serverul de MySQL, puteţi crea o instanţă nouă

bază de date utilizând Editorul SQL. În sensul acestui tutorial, va crea o instanţă numit MyNewDatabase:

1. În fereastra Servicii, faceţi clic dreapta pe nodul MySQL Server şi alegeţi creez baza de date.

Creaţi MySQL Bază de date deschide caseta de dialog.

2. În Creare MySQL Bază de date caseta de dialog, tastaţi numele bazei de date noi. Vom folosi MyNewDatabase pentru

acest tutorial. Lasă caseta de selectare neselectată în acest moment.

Notă: Puteţi acorda, de asemenea, acces deplin la un utilizator dat. În mod implicit, numai utilizatorul admin are

permisiunile pentru a efectua anumite comenzi. Drop jos listă vă permite să atribuiţi aceste permisiuni unui utilizator

specificat.

3. Faceţi clic pe OK.

Page 85: Curs Proiectarea Interfetelor Grafice

Bază de date nouă apare sub MySQL server nod în fereastra Servicii.

Crearea tabelele bazei de date

Acum, că aţi conectat la MyNewDatabase, puteţi începe explorarea cum să creaţi tabele, popula-le cu date, şi modifica datele

menţinută în tabele. Acest lucru vă permite să aruncaţi o privire mai atentă la funcţionalitatea oferite de Explorer Baza de date,

precum şi un sprijin NetBeans IDE pentru fişiere SQL.

MyNewDatabase este în prezent gol. În IDE, este posibil să adăugaţi un tabel de baza de date, fie utilizând Crează masă de

dialog, sau de către le-a introdus o interogare SQL şi rularea direct de la Editor SQL. Aici puteţi explora ambele metode:

1. Utilizând Editorul de SQL

2. Utilizarea Creaţi Table Dialog

Utilizând Editorul de SQL

1. În baza de date Explorer, extindeţi nodul conexiune MyNewDatabase ( ), Precum şi faptul că există trei subfoldere:

Mese, Vizualizari şi proceduri. Alegeţi Execute Command din dosarul tabelele din baza de date Explorer. O pânză-martor

se deschide în Editor SQL în fereastra principală ..

În NetBeans IDE 6.7 Beta, atunci când vă extindeţi-un nod în baza de date conexiune, noduri schemă apar mai multe.

2. În editorul SQL, tastaţi în interogare de mai jos. Aceasta este o definiţie tabel pentru tabelul de consilier care eşti pe cale

de a crea.

3. CREATE TABLE Consilier (

4. SMALLINT id UNSIGNED NOT NULL AUTO_INCREMENT,

5. VARCHAR Prenumele (50),

6. VARCHAR nickname (50),

7. VARCHAR NumeDeFamilie (50),

8. de telefon VARCHAR (25),

9. VARCHAR de e-mail (50),

10. memberSince DATA DEFAULT '0000-00-00 ',

11. PRIMARY KEY (id)

);

Notă: Interogări format în Editorul SQL sunt analizat şi executat în Structured Query Language (SQL). SQL aderă la

stricte reguli de sintaxă care ar trebui să fie familiarizat cu atunci când se lucrează într-un editor IDE lui. La execută o

interogare, feedback-ul de la motorul de SQL este generat în fereastra de ieşire indică dacă execuţia a avut succes sau nu.

12. Pentru a executa interogarea, fie faceţi clic pe Run SQL ( ), Buton pe bara de sarcini din partea de sus (Ctrl-Shift-E),

sau faceţi clic dreapta în cadrul Editor SQL şi alegeţi Run Declaratie. IDE genereaza tabelul de consilier în baza de date,

şi primiţi un mesaj similar cu următorul în fereastra Output.

85

Page 86: Curs Proiectarea Interfetelor Grafice

86

13. Pentru a verifica modificările, faceţi clic dreapta pe nodul tabelele din baza de date Explorer şi alegeţi Refresh.

Actualizează Actualizează opţiune UI Explorer bazei de date componentă a stării actuale a bazei de date specificate.

Reţineţi că nodul nou tabel Consilier ( ) Afişează acum în conformitate cu tabelele din baza de date explorer. Dacă

vă extindeţi tabelul de nod puteţi vedea coloanele (câmpurile) le-aţi creat, incepand cu cheia primară ( ).

Lucrul cu tabelul de date

În scopul de a lucra cu datele de masă, puteţi face uz de Editor SQL în NetBeans IDE. Prin rularea interogări SQL pe o bază de

date, puteţi adăuga, modifica şi şterge datele menţinute în structuri de baza de date. Pentru a adăuga un nou record (RL) la tabel

Consilier, faceţi următoarele:

1. Alegeţi Execute Command din dosarul tabelele din baza de date Explorer. O pânză-martor se deschide în Editor SQL în

fereastra principală.

2. În editorul SQL, tastaţi în interogare de mai jos.

3. INSERT INTO Consilier

VALUES (1, 'Ricky "," "The Dragon" "," Steamboat', '334 612-5678 ',' [email protected] ',

'1996-01-01')

4. Pentru a executa interogarea, faceţi clic dreapta în cadrul Editor SQL şi alegeţi Run Declaratie. În fereastra de iesire,

puteţi vedea un mesaj care indică faptul că interogarea a fost executat cu succes.

5. Pentru a verifica faptul că nou record a fost adăugată la tabelul de consilier, în baza de date Explorer, faceţi clic dreapta

pe tabelul de nodul Consilier şi alegeţi vizualizarea de date. Un nou SQL Editor panoul se deschide în fereastra

principală. Când alegeţi vizualizarea de date, o interogare pentru a selecta toate datele din tabelul este generat automat în

regiunea superioară a Editor SQL. Rezultatele declaraţie sunt afişate într-o vizualizare tabel în regiunea inferioară. În

acest exemplu, afişează tabelul de consilier. Reţineţi că un rând nou a fost adăugat cu datele pe care tocmai aţi furnizat de

interogare SQL.

Page 87: Curs Proiectarea Interfetelor Grafice

87

Rularea unui script SQL

O altă modalitate de a gestiona datele tabel, în NetBeans IDE este prin rularea unui script de externe, SQL direct în IDE. Dacă aţi

creat un script de SQL în altă parte, aveţi posibilitatea să deschideţi pur şi simplu în NetBeans IDE şi a alerga it în Editorul de SQL.

Pentru scopuri demonstrative, ifpwafcad.sql descărcaţi şi a salva it într-o locaţie de pe computer. Acest script creează două tabele

similar cu ceea ce tocmai aţi creat de mai sus (Consilier şi sub rezerva), şi imediat le populează cu date.

Pentru ca script-ul suprascrie aceste tabele în cazul în care acestea există deja, a şterge Consilier şi tabele Subiect acum, astfel,

devine evident că tabele noi sunt create atunci când rularea script-ului. Pentru a şterge tabele:

1. Faceţi clic dreapta pe nodul selectat tabelul din baza de date Explorer şi alegeţi Delete.

2. În Confirmare ştergeri obiect de dialog care se afişează, faceţi clic pe Da. Reţineţi că nodul de masă este în mod automat

eliminat din baza de date Explorer.

Notă: Puteţi şterge tabelul de mai mult decât înainte de acest Apare caseta de dialog.

Pentru a executa script-ul SQL pe MyNewDatabase:

1. Alegeti File> Open File din meniul IDE principal. În browser-ul de fişiere naviga la locaţia unde aţi salvat anterior

ifpwafcad.sql şi faceţi clic pe Open. Script-ul se deschide automat în Editorul de SQL.

2. A face conexiunea la MyNewDatabase sigur că este selectat din meniul drop-down de conectare în bara de instrumente

din partea de sus a editorului.

3. Faceţi clic pe Run SQL ( ), Buton pe task bar Editor SQL lui. Script-ul este executat împotriva baza de date selectată,

precum şi orice feedback-ul este generat în fereastra de iesire.

4. Pentru a verifica modificările, faceţi clic dreapta pe nodul conexiunea MyNewDatabase în fereastra Durata şi alegeţi

Refresh. Actualizează Actualizează opţiune UI Explorer bazei de date componentă a stării actuale a bazei de date

specificate. Reţineţi că cele două tabele noi de la script-ul SQL acum o afişaţi ca noduri tabelul de la MyNewDatabase

în Explorer baza de date.

5. Alegeţi vizualizarea de date de la meniul clic dreapta a unui nod tabel selectat pentru a vedea datele conţinute în tabele

noi. În acest mod, puteţi compara datele de tabel cu datele cuprinse în script-ul SQL pentru a vedea că ele se potrivesc.

Page 88: Curs Proiectarea Interfetelor Grafice

88

Modulul V. APPLET-URI. Un applet reprezintă un program Java care gestionează o suprafaşă de afişare care poate fi încărcată în pagini de Web. Appleturile Java au extensia class şi se utilizează în general pentru a insera în pagini web aplicaţii, animaţii, jocuri etc. Diferenţa exenţială dintre o aplicaţie şi un applet este că un applet nu poate fi executat independent aşa cum rulează o aplicaţie, el va fi executat prin intermediul browserului în care este încarcata pagina Web ce contine appletul respectiv. O aplicatie independenta este executata prin apelul interpretorului java, având ca parametru numele clasei principale a aplicatiei, clasa principala fiind cea care contine metodă main. Ciclul de viata al unui applet este complet diferit, fiind dictat de evenimentele generate de către browser la vizualizarea documentului HTML ce contine appletul. Pachetul care ofera suport pentru crearea de appleturi este java.applet.Limbajul Java oferă clase dedicate acestor tipuri de aplicaţii cum ar fi: java.applet.Applet şi javax.swing.Japplet. Executia unui applet începe în momentul în care un browser afiseaza o pagina Web în care este inclus appletul respectiv. Etapele pentru încărcare a unui apllet în browser sunt:

• Incarcarea in memorie – este realizata de o instanta a clasei principale a appletului şi încarcata în memorie;

• Initializarea - apeleaza metodă init cere permite initializarea diverselor variabile, citirea unor parametri de intrare etc;

• Pornirea - utilizeaza apelata metodă start; • Executia propriu-zisa - reprezinta interactiunea dintre utilizator şi

componentele afisate pe suprafata appletului; • Oprirea temporara – daca utilizatorul paraseste pagina Web în care rulează

appletul este apelata metodă stop a acestuia, oferindu-se astfel posibilitatea să se opreasca temporar cât timp nu este vizibil, pentru a nu consuma inutil din timpul procesorului. Acelasi lucru se întâmpla daca fereastra browserului este minimizata. In momentul când pagina Web ce contine appletul devine activa, se reapeleaza metodă start.

• Oprirea definitiva - închiderea instantelor browserului folosit pentru vizualizare; appletul este eliminat din memorie şi va fi apelata metodă destroy a acestuia, pentru a-i permite să elibereze resursele detinute. Apelul metodei destroy este întotdeauna precedat de apelul lui stop.

Metodele specifice appleturilor(init, start, stop şi destroy) sunt apelate automat de browser şi nu trebuiesc apelate explicit.

init teoretic, aceasta metodă ar trebui să se apeleze o singura data, la prima afisare a appletului în pagina, dar la unele browsere, este posibil ca ea să se apeleze de mai multe ori.

start se folosescre imediat dupa initializare cat şi de fiecare data când appletul redevine activ, dupa o oprire temporara.

stop când appletul nu mai este vizibil (pagina Web nu mai este vizibila, fereastra browserului este minimizata etc) dar şi înainte de metodă destroy.

destroy se apeeaza la închiderea ultimei instante a browserului ce a încarcat în memorie clasa principala a appletului.

Page 89: Curs Proiectarea Interfetelor Grafice

89

Structura unui applet este import java.applet.Applet; import java.awt.*; import java.awt.event.*; public class StructuraApplet extends Applet { public void init() { } public void start() { } public void stop() { } public void destroy() { } public void paint(Graphics g) { } } Exemplu de fişier sursă care are extensia java şi reprezinta un applet. import java.applet.*; import java.awt.*; public class imagini extends Applet { private Image imagine; public void init() { imagine =getImage(getDocumentBase(), ‘‘i.jpg”); } public void paint(Graphics g) {boolean b=g.drawImage(imagine, 200,20,200,100,this); this.setBackground(Color.CYAN); g.drawString(”Aplicatie Applet”,200, 140); } } În urma operaţiei de compilare rezultă fişierul cu extensia .class care este încarcat în pagina şi interpretat de browser. Vezi figura 5.1 şi 5.2.

Page 90: Curs Proiectarea Interfetelor Grafice

90

Figura 5.1 Applet rulat în Netbeans

Figura 5.2 Applet încarcat în browser

Codul sursă al fişierului HTML este cel de mai jos. Fişierul a fost generat de către aplicaţia Netbeans, dar acesta putea să fie scris şi de către utilizator. Principalul element al acestui fişier este eticheta <APPLET codebase=‘‘classes” code=‘‘aa/imagini.class” width=350 height=200></APPLET> care are tributele: codebase, code, with şi height.

Page 91: Curs Proiectarea Interfetelor Grafice

91

<HEAD> <TITLE>Applet HTML Page</TITLE> </HEAD> <BODY> <!-- *** GENERATED applet HTML launcher - DO NOT EDIT IN 'BUILD' FOLDER *** If you need to modify this HTML launcher file (e.g., to add applet parameters), copy it to where your applet class is found in the SRC folder. If you do this, the IDE will use it when you run or debug the applet. Tip: To exclude an HTML launcher from the JAR file, use exclusion filters in the Packaging page in the Project Properties dialog. For more information see the online help. --> <H3><HR WIDTH=‘‘100%”>Applet HTML Page<HR WIDTH=‘‘100%”></H3> <P> <APPLET codebase=‘‘classes” code=‘‘aa/imagini.class” width=350 height=200></APPLET> </P> <HR WIDTH=‘‘100%”><FONT SIZE=-1><I>Generated by NetBeans IDE</I></FONT> </BODY> </HTML> În figura 5.1 se poate observa pricipalele metode specifice unui Applet. Un applet nu poate să:

• citească sau scrie documente pe calculatorul client; • deschidă conexiuni cu alte maşini , decât pe cea de pe care provine – host; • pornească programe încărcate pe maşina client • citeasca diverse proprietati ale sistemului de operare al clientului

Exemplu de Applet care conţine 3 variabile a, b şi c ale căror valori vor fi transmise prin intermediu etichetei <param> folosită în carul etichetei <APPLET>. import java.applet.*; import java.awt.*; public class GetParam extends Applet { String a,b,c; public void init(){ if((a=getParameter(”arg1”))==null) a=‘‘nu exista aceste parametru a in documentul testat”; if((b=getParameter(”arg2”))==null) b=‘‘nu exista aceste parametru b in documentul testat”; if((c=getParameter(”arg3”))==null) c=‘‘nu exista aceste parametru c in documentul testat”; if((a=getParameter(”arg1”))==null) a=‘‘nu exista aceste parametru a in documentul testat”; } public void paint(Graphics g) { g.drawString(”a=‘‘+a,20,20); g.drawString(”b=‘‘+b,20,40); g.drawString(”c=‘‘+c,20,60); } }

Page 92: Curs Proiectarea Interfetelor Grafice

92

Prin încarcarea în browser a fişierului .class rezultă imaginea din figura 5.3

Cosul sursă a fişierului HTML în care se transmit valorile paramentrilor este: <HTML> <HEAD> </HEAD> <BODY> <APPLET codebase=‘‘classes” code=‘‘GetParam.class” width=‘‘50%” height=‘‘50%”> <param name=‘‘arg1” value=‘‘primul parametru”> <param name=‘‘arg2” value=‘‘valoare 2”> <param name=‘‘arg3” value=‘‘valoare 3”> </APPLET> </BODY> </HTML> Aplicatii Sa se testeze exemplele urmatoare, sa se personalizeze si apoi sa se explice cel putin 10 metode si proprietati folosite in realizarea acestora.

Exemplu 1 import java.applet.Applet; import java.lang.*; import java.awt.*; import java.awt.event.ActionListener; import java.awt.event.*; public class listacomplexa extends Applet implements ActionListener{ private List lista; private Button buton; public void init() {lista=new List(3,true); lista.add("red"); lista.add("blue"); lista.add("green"); lista.add("yellow"); add(lista); buton=new Button("Afiseaza"); add(buton); buton.addActionListener(this);

Page 93: Curs Proiectarea Interfetelor Grafice

93

} public void actionPerformed(ActionEvent e) {if(e.getSource()==buton) {String[] sel=lista.getSelectedItems(); String sir=" "; sir=sir+sel[0]+" "+sel[1]+" "+sel[2]; showStatus(sir); } } } Exemplu 2 import java.applet.Applet; import java.awt.*; import java.awt.event.*; public class listasimpla extends Applet implements ItemListener{ private Choice lista; public void init() {lista=new Choice(); lista.add("red"); lista.add("green"); lista.add("blue"); add(lista); lista.addItemListener(this); } public void itemStateChanged(ItemEvent e) {if(e.getSource()==lista) {String selectat=e.getItem().toString(); showStatus("Starea"+" "+selectat); } }

}

Exemplu 3 import java.applet.Applet; import java.awt.*; import java.awt.event.*; import java.awt.Graphics; public class panza extends Applet { private Canvasnou canvas=new Canvasnou(); public void init() {canvas.setBackground(Color.gray); canvas.setSize(200,200); add(canvas); }

Page 94: Curs Proiectarea Interfetelor Grafice

94

public class Canvasnou extends Canvas { public void paint(Graphics g) { g.drawString("mesaj",15,15);} } }

Exemplu 4 import java.applet.Applet; import java.awt.event.ActionListener; import java.awt.event.*; import java.awt.*; public class text extends Applet implements ActionListener{ private TextArea mesaj; private Button text,afisare; public void init(){ mesaj=new TextArea(5,5); add(mesaj); text=new Button("selectie"); add(text); text.addActionListener(this); afisare=new Button("afisare"); add(afisare); afisare.addActionListener(this); } public void actionPerformed(ActionEvent e) {if(e.getSource()==text){ String textselectat=mesaj.getSelectedText(); String sir="sirul selectat este"+textselectat; showStatus(sir); } if(e.getSource()==afisare){ String texttot=mesaj.getText(); String sir="sirul este"+texttot; showStatus(sir); } }

Exemplu 5 package p1; import java.applet.Applet; import java.awt.Color; import java. awt.Graphics; public class triunghi extends Applet{ public void paint (Graphics g)

Page 95: Curs Proiectarea Interfetelor Grafice

95

{g.setColor(Color.blue); deseneaza_triunghi(g,20,20,10,11); g.drawString("Aria este"+ aria_triunghi(10,11),30,30); g.setColor(Color.magenta); deseneaza_triunghi(g,100,100,60,70); g.drawString("Aria este"+ aria_triunghi(60,70),150,180); } private void deseneaza_triunghi(Graphics g, int bottomx, int bottomy, int baza, int inaltime) {int rightx = bottomx + baza; int topx = bottomx + baza/2; int topy = bottomy + inaltime; g.drawLine(bottomx, bottomy, rightx, bottomy); g.drawLine(rightx, bottomy, topx, topy); g.drawLine(topx, topy, bottomx, bottomy); } private void deseneaza_dreptunghi(Graphics g){ g.drawRect(10,10,30,30); } private float aria_triunghi(int baza, int inaltime) { float aria = (baza * inaltime)/2; return aria; } } }

Page 96: Curs Proiectarea Interfetelor Grafice

96

Modulul VI. Java Server Pages (JSP) Tehnologia Java Server Pages (JSP) este cea mai populară metodă de a crea interfețe

Web pentru aplicațiile care rulează pe platforma Java, creată de Sun. Ea se bazează pe tehnologia numită Java Servlets fiind, de fapt, o completare a acesteia in ideea creării cât mai facile a paginilor Web dinamice.

Punctul central al tehnologiei o reprezintă așa-numitele pagini JSP care sunt, practic, fișiere text care combina descrieri HTML cu cod Java. Paginile JSP sunt gestionate si accesibile prin intermediul unui server de aplicații. Acesta primește cereri venite prin HTTP de la un browser Web. Dacă o cerere referă o pagină JSP, serverul prelucrează local pagina respectivă și, în funcție de conținutul acesteia, generează dinamic o pagină HTML pe care o trimite, ca răspuns, browser-ului. Este important de reținut faptul că toate prelucrările legate de paginile JSP se fac pe partea de server, acestea nefiind niciodată transmise in forma originală către client. In plus, trebuie reținut faptul ca serverul de aplicații include si o mașină virtuală Java in care rulează atât codul Java întâlnit in paginile JSP cât si obiectele inițiate de acesta. Procesul de prelucrare pe partea de server a paginilor JSP presupune, de fapt, crearea unor clase Java Servlet care urmează regulile scrise in pagina JSP și care includ codul Java din acestea. Clasele astfel generate sunt apoi compilate si rulate in mașina virtuală amintită.

Un alt element important este că orice aplicație Web JSP trebuie să fie instalata

(deployed) in serverul de aplicații înainte de a putea fi rulata. Instalarea presupune copierea paginilor JSP si a claselor Java folosite de acestea în locații bine stabilite de către serverul de aplicație utilizat, eventual intr-o formă arhivată de tip .jar (Java Archive) sau .war (Web Archive).

Un JSP este un document Web care specifică cum va fi prelucrată o cerere și modul de generare a unui răspuns. O pagină JSP conține o parte statică, care reprezintă un șablon al documentului care se generează, și una dinamică, dată de elemente specifice JSP. Acestea sunt:

• Directive standard; • Acțiuni standard; • Elemente de scripting; • Tag-uri proprii.

Dacă servlet-urile sunt clase care generează documentele Web, JSP-urile sunt

documente Web care conțin secvențe de cod Java. De aceea, JSP-urile sunt considerate ca o extensie a paginilor Web obișnuite. Această tehnologie este similară cu PHP și ASP.NET.

Avantajul adus de JSP față de servlet-uri îl constituie ușurința dezvoltării. Serverul Web

se ocupă de transformarea acestora în servlet-uri și apoi de compilarea lor. Acest lucru se realizează fie la încărcarea aplicației de către serverul Web, fie la prima cerere a paginii JSP. Având în vedere faptul că un JSP este transformat in servlet, putem spune că JSP-ul este o extensie a servlet-urilor.

Tehnologia JSP, permite definirea de biblioteci, de noi tag-uri (similare celor din

XHTML) de către programator. Aceste biblioteci pot fi utilizate ulterior și în cadrul altor aplicații. Mai mult, se separă rolurile programatorului și designerului: programatorul va stabili care sunt tag-urile, iar designerul le va include în documentele Web, acesta nu va mai lucra cu cod Java. Astfel, se separăm partea de funcționalitate (motorul aplicației) de partea de vizualizare (interfața cu utilizatorul).

Page 97: Curs Proiectarea Interfetelor Grafice

97

O aplicație Web poate conține atât servlet-uri cât și JSP-uri. Recomandarea este ca paginile JSP să fie stocate în directorul web al aplicației în momentul dezvoltării.

Dacă oricărui document Web îi schimbăm extensia în jsp, va deveni un document JSP valid.

Elemente de bază Pentru inserarea de elemente JSP se pot utiliza marcatori XML sau specifici JSP. In

practică, se folosesc mai mult cei specifici JSP, datorită ușurinței de utilizare. Formatul XML oferă avantajul de a putea valida și procesa pagina JSP cu un procesor XML obișnuit.

Fișierele care conțin elemente specifice JSP se numesc pagini JSP, iar paginile JSP care sunt totodată și documente XML se numesc documente JSP. Pentru documentele JSP se mai folosește si extensia jspx.

Comentariile în JSP sunt de forma: <%-- comentariu --%> Spre deosebire de comentariile X(HT)ML, acestea nu vor fi incluse în pagina generată.

Mai mult, interiorul comentariilor JSP nu este procesat.

Directive Directivele sunt mesaje către containerul JSP și nu generează output (informații pentru

răspuns). Sintaxa pentru directive este următoarea: <%@ directive … %> sau <jsp:directive.directiva … />

Directiva page poate fi utilizată pentru a importa pachete și clase Java (la fel ca instrucțiunea import), pentru a stabili o sesiune, a indica adresa paginii pentru eroare sau pentru a indica dacă pagina curentă este pagină de raportare a erorilor.

Atributele cele mai des utilizate ale directivei page sunt următoarele: • import – Specifică lista pachetelor și claselor care vor fi incluse pentru pagina

curentă. Separatorul utilizat este virgula, iar pachetele implicite sunt java.lang.*, javax.servlet.*, javax.servlet.jsp.* și javax.servlet.http.*.

• session – Indică dacă se utilizează sesiuni HTTP. Valoarea implicită este true. • buffer – Stabilește dimensiunea buffer-ului pentru ieșire, exprimată in kiloocteți.

Valoarea implicita este de cel puțin 8, iar sufixul kb este obligatoriu. În cazul în care nu se dorește utilizarea unui buffer, se va folosi none. Buffer-ele sunt utilizate pentru creșterea performanțelor operațiunilor cu dispozitivele periferice în general. În cazul paginilor JSP, este recomandat lucrul fără buffer sau golirea frecventă a acestuia atunci când aplicația client necesită recepționarea imediată a datelor generate.

• autoFlash – Indică dacă buffer-ul se golește automat. Valoarea implicita este true. • info – Stabilește o descriere a paginii curente. Aceasta se poate obține din clasa

transformată în urma apelului metodei Servlet.getServletInfo( ). • isErrorPage – Stabilește dacă pagina curentă este utilizată pentru raportarea erorilor.

Doar în cazul afirmativ va fi disponibilă variabila exception, care va furniza informații referitoare la eroarea apărută. Valoarea implicită este false.

• errorPage – Indică url-ul paginii pentru tratarea excepțiilor neprinse. • ContentType – Stabilește tipul MIME pentru documentul generat de către JSP.

Tipul implicit este text/html. • pageEncoding – Stabilește setul de caractere utilizat pentru scrierea paginii JSP. În

cazul în care setul specificat nu este disponibil, se va utiliza ISO-8859-1. Directiva include permite inserarea altor fișiere în paginile JSP. Aceasta este utilă

pentru inserarea mediilor de navigare, a antetului și subsolului paginilor comune pentru întregul site (sau pentru mai multe pagini). Astfel, se poate administra mult mai ușor site-ul, întrucât se evită duplicarea datelor: o modificare într-un singur fișier va fi vizibilă în mai

Page 98: Curs Proiectarea Interfetelor Grafice

98

multe pagini ale site-ului. Se pot include și fișiere JSP, iar acestea, la rândul lor, vor fi procesate.

Singurul atribut al directivei include este file și acesta indică locația fișierului ce se dorește a fi inclus, de exemplu: <%@include file=”antet.html” %>

Directiva taglib permite includerea unei biblioteci de tag-uri definite de programator. Se specifică URI-ul corespunzător bibliotecii de tag-uri (atribut uri) și prefixul utilizat în pagina Web (atributul prefix).

Declarații

Marcatorii pentru declarații permit specificarea de atribute și metode pentru clasa servlet-ului generat. Sintaxa este următoarea: <%! declarații …. %> sau, în format XML:

< jsp:declaration> declarații </jsp:declaration> Exemple de declarații: <%! int lungime %> sau <%! int getLungime( ) {return

lungime;} %> Expresii

Expresiile JSP permit inserarea în fluxul de ieșire a unei valori rezultate în urma evaluării unei expresii Java. Sintaxa este: <%= expresieJava %> sau, în format XML <jsp:expression> expresieJava </jsp:expression>. Expresia nu trebuie să se termine cu punct și virgulă. Exemplu: <%= (new java.util.Date( ) ).toLocalString( ) %>. Această expresie inserează data curentă. Scriplet-uri

Pentru utilizarea de cod Java se vor folosi scriplet-uri, pentru că în același fișier vor exista atât codul corespunzător documentului Web (pentru partea de vizualizare), cât și cod Java. În locul lor se pot utiliza tag-uri definite în biblioteci proprii. Exemplu de scriplet:

<%String categorie=request.getParameter(”categorie”); categorii=baza_date.obtineCategorii( ); %>

Inițializarea și terminarea unui JSP Mai întâi se executa metoda jspInit( ) – utilizată pentru inițializarea datelor, iar ultima

metodă este jspDestroy( ) – folosită pentru eliberarea resurselor. Domenii de vizibilitate

Pentru formularea răspunsului pentru navigatoarele Web se face apel la o serie de obiecte. Acestea sunt create în cadrul paginii JSP sau sunt predefinite și pot avea următoarele domenii de vizibilitate:

• pagină (engl., page) – obiectele sunt vizibile doar în cadrul paginii curente; • cerere (engl., request) – obiectele pot fi accesate pe tot parcursul rezolvării cererii: în

pagina curentă, în paginile care sunt incluse și în paginile la care s-a realizat redirectarea; • sesiune (engl., session) – obiectele vor fi disponibile de-a lungul întregii sesiuni; • aplicație (engl., application) – obiectele sunt vizibile în toată aplicația și pentru

toate sesiunile. Obiecte implicite

Tehnologia JSP pune la dispoziția programatorilor o serie de obiecte implicite. Acestea sunt prezentate în tabelul de mai jos:

Page 99: Curs Proiectarea Interfetelor Grafice

99

Tabelul 1. Obiectele tehnologiei JSP

Obiect Tip Domeniu de vizibilitate Descriere

out javax.servlet.jsp.JspWriter pagină

Obiect utilizat pentru scriere în fluxul de ieșire

request javax.servlet.ServletRequest cerere Ține informații la cererea formulată

response javax.servlet.ServletResponse pagină Ține informații referitoare la răspunsul construit

session javax.servlet.http.HttpSession sesiune Informații referitoare la sesiunea curentă

pageContext javax.servlet.jsp.PageContext pagină Contextul paginii JSP curente

page java.lang.Object pagină Referință la pagina curentă

application javax.servlet.ServletContext aplicație Informații despre aplicație

exception java.lang.Throwable pagină Excepția neprinsă. Doar în paginile de tratare a erorilor

Clasa JspWriter este o clasă abstractă și derivată din java.io.Writer și conține în plus

următoarele metode: • print( ) și println( ) – pentru afișarea tipurilor primitive, a șirurilor de caractere și a

obiectelor; • newLine( ) – introduce caracterul pentru trecerea la o linie nouă; • clear( ) și clearBuffer( ) – sunt folosiți pentru ștergerea informațiilor din buffer; • flush( ) – golește buffer-ul trimițând datele la client; • isAutoFlush( ) – indică dacă buffer-ul este golit automat; • getRemaining( ) – returnează numărul de octeți din buffer care așteaptă să fie

trimisi; • getBufferSize( ) – returnează dimensiunea buffer-ului exprimată în octeți; • close( ) – inchide fluxul. De asemenea, clasa PageContext este abstractă și extinde clasa JspContext. Cea mai

utilizată metodă este getServletContext( ), care permite accesarea contextului servlet-ului obținut în urma transformării paginii JSP curente.

Page 100: Curs Proiectarea Interfetelor Grafice

100

MODULUL VII. ALTE APLICATII 1. Se citeste numarul zilei si se afiseaza ziua corespunzatoare

codul sursa asociat butonului Transformare este: private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { int nrZi; nrZi=Integer.parseInt(jTextField1.getText()); switch(nrZi) { case 1: jTextField2.setText("Luni"); break; case 2: jTextField2.setText("Marti"); break; case 3: jTextField2.setText("Miercuri"); break; case 4: jTextField2.setText("Joi"); break; case 5: jTextField2.setText("Vineri"); break; case 6: jTextField2.setText("Sambata"); break; case 7: jTextField2.setText("Duminica"); break; default: jTextField2.setText("Nu ati dat o zi a saptamanii valida! (1-7)"); break; } } codul sursa asociat butonului Clear este: private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) { jTextField1.setText(""); jTextField2.setText(""); } codul sursa asociat butonului Exit este: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) { System.exit(0); }

Page 101: Curs Proiectarea Interfetelor Grafice

101

2. O aplicatie de tip calculator

Setul de comenzi atasate butoanelor este: private void jButton5ActionPerformed(java.awt.event.ActionEvent evt) { float nr1,nr2,rezultat; nr1=Float.parseFloat(jTextField1.getText()); nr2=Float.parseFloat(jTextField2.getText()); rezultat=1; for(int i=1;i<=nr2;i++) rezultat=rezultat*nr1; jTextField3.setText(String.valueOf(rezultat)); } private void jButton4ActionPerformed(java.awt.event.ActionEvent evt) { float nr1,nr2,rezultat; nr1=Float.parseFloat(jTextField1.getText()); nr2=Float.parseFloat(jTextField2.getText()); rezultat=nr1/nr2; jTextField3.setText(String.valueOf(rezultat)); } private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) { float nr1,nr2,rezultat; nr1=Float.parseFloat(jTextField1.getText()); nr2=Float.parseFloat(jTextField2.getText()); rezultat=nr1*nr2; jTextField3.setText(String.valueOf(rezultat));

Page 102: Curs Proiectarea Interfetelor Grafice

102

} private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) { float nr1,nr2,rezultat; nr1=Float.parseFloat(jTextField1.getText()); nr2=Float.parseFloat(jTextField2.getText()); rezultat=nr1-nr2; jTextField3.setText(String.valueOf(rezultat)); } private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { float nr1,nr2,rezultat; nr1=Float.parseFloat(jTextField1.getText()); nr2=Float.parseFloat(jTextField2.getText()); rezultat=nr1+nr2; jTextField3.setText(String.valueOf(rezultat)); } private void jButton6ActionPerformed(java.awt.event.ActionEvent evt) { jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText(""); } 3. Aplicatie de convertire grade Celsius in Fahrenheight

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { int temp; temp=(int)(Double.parseDouble(jTextField1.getText())*1.8+32); jLabel2.setText(temp+" Fahrenheit");

Page 103: Curs Proiectarea Interfetelor Grafice

103

4. Scrieti setul de comenzi pentru realizarea unei ferestre de dimensiune 300, 100 care va arata ca in figura alaturata.

import javax.swing.*; import java.awt.*; public class a1 { public static void main(String[] args) { JFrame f = new JFrame("Implementarea Inteferetelor Grafice"); JButton b1 = new JButton("1"); JButton b2 = new JButton("2"); JButton b3 = new JButton("3"); JButton b4 = new JButton("4"); JButton b5 = new JButton("5"); Container cp = f.getContentPane(); cp.setLayout(new FlowLayout()); cp.add(b1); cp.add(b2); cp.add(b3); cp.add(b4); cp.add(b5); f.setSize(300, 100); f.setVisible(true); } } 5. Scrieţi setul de comenzi pentru realizarea unei aplicaţii Java care va creea o fereastră ca cea din figura alăturată. Explicaţi instrucţiunile folosite pentru definirea elementelor JButton şi JRadioButton

import javax.swing.*; import java.awt.*; import java.awt.event.*; class Butoane extends JPanel { public Butoane() { JButton b1 = new JButton("Seria A"); JButton b2 = new JButton("Seria B"); this.setLayout(new GridLayout(1,0)); add(b1); add(b2); } } class ButoaneRadio extends JPanel { public ButoaneRadio() {

Page 104: Curs Proiectarea Interfetelor Grafice

104

// Creare radio butoane JRadioButton butonAlb = new JRadioButton("Sambata 10-18"); // butonAlb.setSelected(true); JRadioButton butonRosu = new JRadioButton("Duminica 10-18"); // Gruparea butoanelor ButtonGroup group = new ButtonGroup(); group.add(butonAlb); group.add(butonRosu); // Adaugarea butoanelor add(butonAlb); add(butonRosu); } } public class Desen_Aplicatie extends JFrame { public static void main(String args[]) { Desen_Aplicatie app = new Desen_Aplicatie(); Butoane panouButoane = new Butoane(); ButoaneRadio panouButoaneRadio = new ButoaneRadio(); JPanel panou = new JPanel(); panou.add(panouButoane); panou.add(panouButoaneRadio); app.getContentPane().add(panou); app.pack(); app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); app.show(); } } 6. Problema propusa: sa se realizeze interfata de mai jos si sa se scrie actiunile corespunzatoare butoanelor din aceasta.

Page 105: Curs Proiectarea Interfetelor Grafice

105

Bibliografie

1. Stefan Tanasa, Cristian Olaru, Stefan Andrei, "Java de la 0 la expert", Editura Polirom, 2003

2. Jim Keogh – Java fara mistere, Ed Rosetti Educational, 2004 3. E. Hewitt, Java SOA Cookbook, O’Reilly, 2009. 4. ***, Java 2 Platform, Enterprise Edition Specification, Sun Microsystems, Tech.

Rep., 2003; 5. N. Kassem, A. Vijendran, and Rajiv.Mordani, Java API for XML Messaging

(JAXM), Sun Microsystems, 6. http://download.oracle.com/javase/tutorial/uiswing/ 7. http://oreilly.com/catalog/9780596004088 8. http://oreilly.com/catalog/9780596004088/preview#preview 9. http://www.oracle.com/technetwork/java/index.html 10. http://www.netbeans.org.

Page 106: Curs Proiectarea Interfetelor Grafice

106

Nota finală care se va acorda fiecărui student va conţine următoarele componente în procentele menţionate: - colocviu final 60% - lucrari practice/ proiect, etc. 30% (fiecare student, va realiza un “PROJECT” care va cuprinde minim 15 aplicatii practice, selectate din cele 7 module ale suportului de curs. Aplicatiile vor fi “//comentate” si personalizate.

- teme de control 10% (la alegere, se va rezolva, un studiu de caz, de la cele 8 adrese web-enumerate mai jos. Explicarea modului de lucru, se va face intr-un document de forma nume_student.pdf)

1. http://netbeans.org/kb/docs/java/quickstart-gui.html 2. http://netbeans.org/kb/docs/java/gui-db.html 3. http://netbeans.org/kb/docs/java/gui-db-custom.html 4. http://netbeans.org/kb/docs/web/applets.html 5. http://netbeans.org/kb/docs/web/security-webapps.html 6. http://netbeans.org/kb/docs/web/mysql-webapp.html 7. http://netbeans.org/kb/docs/web/jsf20-intro.html 8. http://netbeans.org/kb/docs/web/jsf20-support.html

Page 107: Curs Proiectarea Interfetelor Grafice

107

Modele bilete examen

Exemplu 1

1. Caracterizati pachetul JDK(1 pct). 2. Caracterizaţi structura de clase care fac parte din pachetul Swing (1 pct). 3. Enumeraţi principalele componentele Swing definite in pachetul javax.swing.* şi

explicaţi rolul acestora (1 pct) 4. Care sunt clasele din Swing utilizate pentru definirea ferestrelor şi ce rol au

acestea (1 pct)? 5. Scrieti setul de comenzi pentru realizarea unei ferestre de dimensiune 300, 150

care va arata ca in figura alaturata (1pct).

6. Definiţi noţiunea de Clasa (class) în Java şi explicaţi elementele care apar în

cadrul acesteia (0,5 pct). 7. Definiţi noţiunea de Interfaţă (interface) în Java şi explicaţi elementele care apar

în cadrul acesteia (0,5 pct). 8. Presupunând ca am proiectat o interfaţă ca în figura alăturată, scrieţi setul de

comenzi corespunzatoare butoanelor din figura, ştiind ca a, b şi c sunt de tip real. Butonul Clear va avea rolul de a anula valorile din casetele de text, iar butonul Exit va inchide fereastra(3 pct).

9.

Page 108: Curs Proiectarea Interfetelor Grafice

108

Exemplu 2

1. Definiţi noţiunea de Interfaţă (interface) în Java şi explicaţi elementele care apar în cadrul acesteia (1 pct).

2. Explicaţi rolul metodelor setSize, setResizeable, setTitle, setLocation, setVisible pentru ferestrele de tip JFrame cât şi semnificaţia parametrilor (1 pct).

3. Enumeraţi principalele componentele Swing definite in pachetul javax.swing.* şi explicaţi rolul acestora (1 pct)

4. Scrieti setul de comenzi prin care se realizeaza conectarea la baza de date produse si apoi se defineste tabela produs cu structura: cod_p (intreg si cheie primara), denumire_produs(text 40), furnizor (text 30), data_fabricatiei (data calendaristica) si pret_produs (intreg 5). (1.5 pct).

5. Scrieti setul de comenzi pentru butonul „Covert” – ce are rolul de a transforma

grade Celsius (preluate intr-un JTextField) in grade Fahrenheight, rezultatul conversiei afisandu-se intr-o eticheta (Jlabel) (1.5pct).

6. 7. Presupunând ca am proiectat o interfaţă ca în figura alăturată, scrieţi setul de

comenzi corespunzatoare butoanelor din figura, ştiind ca l1,l2,l3 şi nr 4 sunt de tip real. Butonul clear va avea rolul de a anula valorile din casetele de text, iar butonul close va inchide fereastra(3 pct).