Differences

This shows you the differences between two versions of the page.

--- laboratoare:laborator03 [2015/03/09 10:14]
Andrei Roșu-Cojocaru
+++ laboratoare:laborator03 [2017/02/20 20:54] (current)
@@ Line 1: / Line 1: @@
-====== Laborator 03. Proiectarea Interfețelor Grafice (I) ======
+====== Laborator 03. Proiectarea Interfețelor Grafice ======
 ===== Clase Android utilizate pentru definirea unei interfețe grafice =====
@@ Line 9: / Line 9: @@
 Clasa ''android.view.View'' reprezintă baza pentru construirea oricărei interfețe grafice dintr-o aplicație Android. Ea definește o zonă rectangulară a dispozitivului de afișare (ecran), majoritatea controalelor grafice și a mecanismelor de dispunere a conținutului fiind derivate din aceasta.
-{{ :laboratoare:laborator03:tipuri_de_controale_grafice.png?nolink&300 }}
+{{ :laboratoare:laborator03:tipuri_de_controale_grafice.png?nolink&500 }}
 **1.** Cele mai multe **elemente grafice** sunt definite în pachetul ''android.widget'', fiind implementate controale care implementează cele mai multe dintre funcționalitățile uzuale (etichete, câmpuri text, controale pentru redarea de conținut multimediat - imagini, filme -, butoane, elemente pentru gestiunea datei calendaristice și a timpului).
@@ Line 45: / Line 45: @@
 </code>
-Mediul de dezvoltare Eclipse pune la dispoziția programatorilor atât un utilitar conținând biblioteci de controale, în care interfața grafică poate fi definită prin operații de tip drag-and-drop, cât și un editor text în care proprietățile acestor elemente pot fi specificate manual. Schimbările realizate într-una dintre aceste ferestre sunt transpuse automat și în cealaltă, astfel încât modificările din mediul vizual generează etichetele XML corespunzătoare, în timp ce efectul unor proprietăți stabilite în fișierul XML poate fi vizualizat imediat în editorul grafic.
+Atât mediul integrat de dezvoltare Android Studio cât și mediul integrat de dezvoltare Eclipse pun la dispoziția programatorilor atât un utilitar conținând biblioteci de controale, în care interfața grafică poate fi definită prin operații de tip drag-and-drop, cât și un editor text în care proprietățile acestor elemente pot fi specificate manual. Schimbările realizate într-una dintre aceste ferestre sunt transpuse automat și în cealaltă, astfel încât modificările din mediul vizual generează etichetele XML corespunzătoare, în timp ce efectul unor proprietăți stabilite în fișierul XML poate fi vizualizat imediat în editorul grafic.
+{{ :laboratoare:laborator03:androidstudio_graphical_layout.png?nolink&650 }}
+În **Android Studio**, utilitarul vizual poate fi accesat din panoul //Design//, putând fi specificate (prin selecția dintr-o listă) dispozitivul mobil pentru care se proiectează interfața grafică, orientarea ecranului (precum și alte moduri în care se poate găsi acesta), tema aplicației (stilul folosit), activitatea căreia îi este asociat, localizarea precum și nivelul de API.
+În cadrul bibliotecii de controale, organizarea elementelor grafice se face prin împărțirea lor în mai multe categorii:
+  * mecanisme de dispunere a conținutului (//Layouts//);
+  * forme de bază (//Widgets//);
+  * câmpuri text (//Text Fields//);
+  * controale grafice ce pot conține alte componente(//Containers//);
+  * elemente pentru gestiunea datei calendaristice și a timpului (//Date & Time//);
+  * componente complexe de interacțiune cu utilizatorul (//Expert//);
+  * obiecte definite de utilizator (//Custom//);
+Structura interfeței grafice (ierarhia de controale grafice) poate fi (pre)vizualizată, pentru fiecare obiect în parte indicându-se identificatorul său (dacă este definit) și tipul (între paranteze rotunde), în secțiunea //Component Tree//.
+Pentru fiecare control grafic, atributele sale pot fi gestionate în secțiunea //Properties//, fiind afișate toate proprietățile pe care le poate avea (proprii sau moștenite de la părinte), împreună cu valorile pe care le poate lua, utilizatorul putând alege dintre acestea.
 {{ :laboratoare:laborator03:eclipse_graphical_layout.png?nolink&650 }}
-Utilitarul vizual poate fi accesat din panoul //Graphical Layout//, putând fi specificate (prin selecția dintr-o listă) dispozitivul mobil pentru care se proiectează interfața grafică, orientarea ecranului (precum și alte moduri în care se poate găsi acesta), tema aplicației (stilul folosit), activitatea căreia îî este asociat, localizarea precum și nivelul de API.
+În **Eclipse**, utilitarul vizual poate fi accesat din panoul //Graphical Layout//, putând fi specificate (prin selecția dintr-o listă) dispozitivul mobil pentru care se proiectează interfața grafică, orientarea ecranului (precum și alte moduri în care se poate găsi acesta), tema aplicației (stilul folosit), activitatea căreia îî este asociat, localizarea precum și nivelul de API.
 În cadrul bibliotecii de controale, organizarea elementelor grafice se face prin împărțirea lor în mai multe categorii:
@@ Line 75: / Line 92: @@
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
-  tools:context="ro.pub.cs.systems.pdsd.lab03.examples.layoutsample1.LayoutSample1Activity" >
+  tools:context="ro.pub.cs.systems.eim.lab03.examples.layoutsample1.LayoutSample1Activity" >
   <EditText
@@ Line 325: / Line 342: @@
 AutoCompleteTextView coursesAutoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.courses_auto_complete_text_view);
-String[] suggestions = {"vlsi", "pdsd", "ts", "std", "so2", "idp", "ia", "scad", "pw", "ecom"};
+String[] suggestions = {"vlsi", "eim", "ts", "std", "so2", "idp", "ia", "scad", "pw", "ecom"};
 ArrayAdapter<String> coursesArrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, suggestions);
@@ Line 898: / Line 915: @@
 Se dorește implementarea unei aplicații Android, conținând o singură activitate, care să ofere utilizatorilor funcționalitatea necesară pentru formarea unui număr de telefon (PhoneDialer).
-{{ :laboratoare:laborator03:phone_dialer_portrait.png?nolink&300 }}
+{{ :laboratoare:laborator03:phonedialer_portrait.png?nolink&300 }}
 **1.** În contul Github personal, să se creeze un depozit denumit 'Laborator03'. Acesta trebuie să conțină unui fișier ''README.md'', un fișier ''.gitignore'' specific unei aplicații Android și un fișier ''LICENSE'' care să descrie condițiile pentru utilizarea aplicației.
@@ Line 907: / Line 924: @@
 **2.** Să se cloneze într-un director de pe discul local conținutul depozitului la distanță astfel creat. În urma acestei operații, directorul Laborator03 va trebui să se conțină fișierele ''README.md'', ''.gitignore'' care indică tipurile de fișiere (extensiile) ignorate și ''LICENSE''. <code>
-student@pdsd2015:~$ git clone https://www.github.com/perfectstudent/Laborator03
+student@eim2016:~$ git clone https://www.github.com/perfectstudent/Laborator03
 </code>
@@ Line 917: / Line 934: @@
   * **Application Name** - //Phone Dialer//
   * **Project Name** - //PhoneDialer//
-  * **Package Name** - ''ro.pub.cs.systems.pdsd.lab03.phonedialer''
+  * **Package Name** - ''ro.pub.cs.systems.eim.lab03.phonedialer''
   * **Minimum Required SDK** - API 16: Android 4.1 (Jelly Bean)
   * **Target SDK** - API 16: Android 4.1 (Jelly Bean)
@@ Line 962: / Line 979: @@
   * 2 obiecte de tip ''ImageButton'' pentru operaţiile de formare a numărului de telefon, respectiv de închidere.
-Pentru dispunerea controalelor în cadrul interfeței grafice se va folosi un mecanism de tip ''LinearLayout'' cu orientare verticală, iar tastatura virtuală va fi realizată printr-un obiect de tip ''GridLayout'' cu 6 linii și 3 coloane.
+Se pot folosi următoarea arhivă conținând resursele grafice necesare: {{ :laboratoare:laborator03:graphical_resources.zip }}.
-{{ :laboratoare:laborator03:phone_dialer_landscape.png?nolink&600 }}
+Pentru dispunerea controalelor în cadrul interfeței grafice se va folosi un mecanism de tip ''LinearLayout'' cu orientare verticală, iar tastatura virtuală va fi realizată printr-un obiect de tip ''GridLayout'' cu 6 linii și 3 coloane.
-**5.** În clasa ''PhoneDialerActivity'' din pachetul ''ro.pub.cs.systems.pdsd.lab03.phonedialer'', să se implementeze o clasă ascultător pentru tratarea evenimentelor de tip apăsare de buton.
+**5.** În clasa ''PhoneDialerActivity'' din pachetul ''ro.pub.cs.systems.eim.lab03.phonedialer'', să se implementeze o clasă ascultător pentru tratarea evenimentelor de tip apăsare de buton.
   * pentru butoanele ce conțin cifre sau caracterele ''*'' / ''#'', se va adăuga simbolul corespunzător la numărul de telefon care se dorește format;
   * pentru butonul de corecție, se va șterge ultimul caracter (în cazul în care numărul de telefon nu este vid);
@@ Line 1001: / Line 1018: @@
   - să se definească, în directorul ''res/layout-land'' o interfață grafică adecvată acestei configurații a dispozitivului de afișare:
-{{ :laboratoare:laborator03:phone_dialer_landscape.png?nolink&600 }}
+{{ :laboratoare:laborator03:phonedialer_landscape.png?nolink&600 }}
-În Eclipse Luna SR1a (4.4.1), se creează un nou subdirector ''layout-land'' în directorul ''res'' (din meniul contextual afișat cu right click, se selectează //New// → //Folder//, indicându-se locația la care se dorește să fie plasat și denumirea sa):
+În Eclipse Mars 1 (4.5.1), se creează un nou subdirector ''layout-land'' în directorul ''res'' (din meniul contextual afișat cu right click, se selectează //New// → //Folder//, indicându-se locația la care se dorește să fie plasat și denumirea sa):
-{{ :laboratoare:laborator03:eclipse07.png?nolink&300 }}
+{{ :laboratoare:laborator03:eclipse07.png?nolink&400 }}
-{{ :laboratoare:laborator03:eclipse08.png?nolink&300 }}
+{{ :laboratoare:laborator03:eclipse08.png?nolink&400 }}
 Ulterior se copiază conținutul fișierului ''activity_phone.dialer.xml'' prin operații de tip copy-paste și se realizează modificările necesare.
 **7.**  Să se încarce modificările realizate în cadrul depozitului 'Laborator03' de pe contul Github personal, folosind un mesaj sugestiv. <code>
-student@pdsd2015:~/Laborator03$ git add PhoneDialer/*
+student@eim2016:~/Laborator03$ git add PhoneDialer/*
-student@pdsd2015:~/Laborator03$ git commit -m "implemented taks for laboratory 03"
+student@eim2016:~/Laborator03$ git commit -m "implemented taks for laboratory 03"
-student@pdsd2015:~/Laborator03$ git push origin master
+student@eim2016:~/Laborator03$ git push origin master
 </code>
 ===== Resurse Utile =====
+[[https://github.com/pdsd2015/Laborator03/tree/master/samples|Cod Sursă Exemple]]\\
 [[http://ptgmedia.pearsoncmg.com/images/9780321940261/samplepages/0321940261.pdf|Joseph ANNUZZI, Jr, Lauren DARCEY, Shane CONDER, Introduction to Android Application Development - Developer's Library, 4th Edition, Addison-Wesley, 2013]] - capitolele 7, 8\\
 [[http://www.bignerdranch.com/we-write/android-programming/|Bill PHILLIPS, Brian HARDY, Android Programming. The Big Nerd Ranch Guide, Pearson Technology Group, 2013]] - capitolul 8\\