Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
laboratoare:laborator03 [2015/03/10 13:41]
Andrei Roșu-Cojocaru [Resurse Utile]
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 ===== ===== Clase Android utilizate pentru definirea unei interfețe grafice =====
Line 45: Line 45:
 </​code>​ </​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 }} {{ :​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: Î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:​paddingRight="​@dimen/​activity_horizontal_margin"​
   android:​paddingTop="​@dimen/​activity_vertical_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   <​EditText
Line 325: Line 342:
 AutoCompleteTextView coursesAutoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.courses_auto_complete_text_view);​ 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);​ 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). 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. **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>​ **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>​ </​code>​
  
Line 917: Line 934:
   * **Application Name** - //Phone Dialer//   * **Application Name** - //Phone Dialer//
   * **Project Name** - //​PhoneDialer//​   * **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)   * **Minimum Required SDK** - API 16: Android 4.1 (Jelly Bean)
   * **Target SDK** - API 16: Android 4.1 (Jelly Bean)   * **Target SDK** - API 16: Android 4.1 (Jelly Bean)
Line 966: Line 983:
 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. 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 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);   * 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:   - 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&​400 }} {{ :​laboratoare:​laborator03:​eclipse07.png?​nolink&​400 }}
Line 1012: Line 1029:
  
 **7.** ​ Să se încarce modificările realizate în cadrul depozitului '​Laborator03'​ de pe contul Github personal, folosind un mesaj sugestiv. <​code>​ **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>​ </​code>​
  
laboratoare/laborator03.1425987684.txt.gz · Last modified: 2017/02/20 20:44 (external edit)
CC Attribution-Share Alike 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0