Differences

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

--- laboratoare:laborator03 [2015/03/08 23:43]
Andrei Roșu-Cojocaru [Resurse Utile]
+++ laboratoare:laborator03 [2015/03/10 13:41] (current)
Andrei Roșu-Cojocaru [Resurse Utile]
@@ 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&400 }}
+{{ :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 211: / Line 211: @@
 |< 100% 25% 20% 55% >|
 ^       **ATRIBUT**       ^  **TIP OBIECT**  ^                                **DESCRIERE**                                       ^
-| ''layout_width''        | View / ViewGroup | lățimea obiectului                                                                 |
+| ''layout_width''        | ''View'' / ''ViewGroup'' | lățimea obiectului                                                                 |
-| ''layout_height''       | View / ViewGroup | înălțimea obiectului                                                               |
+| ''layout_height''       | ''View'' / ''ViewGroup'' | înălțimea obiectului                                                               |
-| ''layout_marginTop''    | View / ViewGroup | spațiu suplimentar ce trebuie alocat în partea de sus a obiectului                 |
+| ''layout_marginTop''    | ''View'' / ''ViewGroup'' | spațiu suplimentar ce trebuie alocat în partea de sus a obiectului                 |
-| ''layout_marginBottom'' | View / ViewGroup | spațiu suplimentar ce trebuie alocat în partea de jos a obiectului                 |
+| ''layout_marginBottom'' | ''View'' / ''ViewGroup'' | spațiu suplimentar ce trebuie alocat în partea de jos a obiectului                 |
-| ''layout_marginLeft''   | View / ViewGroup | spațiu suplimentar ce trebuie alocat în partea din stânga a obiectului             |
+| ''layout_marginLeft''   | ''View'' / ''ViewGroup'' | spațiu suplimentar ce trebuie alocat în partea din stânga a obiectului             |
-| ''layout_marginRight''  | View / ViewGroup | spațiu suplimentar ce trebuie alocat în partea din dreapta a obiectului            |
+| ''layout_marginRight''  | ''View'' / ''ViewGroup'' | spațiu suplimentar ce trebuie alocat în partea din dreapta a obiectului            |
-| ''layout_gravity''      | View             | modul de poziționare a elementelor componente în cadrul unui container             |
+| ''layout_gravity''      | ''View''             | modul de poziționare a elementelor componente în cadrul unui container             |
-| ''layout_weight''       | View             | proporția pe care o are controlul, raportată la întregul conținut al containerului |
+| ''layout_weight''       | ''View''             | proporția pe care o are controlul, raportată la întregul conținut al containerului |
-| ''layout_x''            | View / ViewGroup | poziția pe coordonata x                                                            |
+| ''layout_x''            | ''View'' / ''ViewGroup'' | poziția pe coordonata x                                                            |
-| ''layout_y''            | View / ViewGroup | poziția pe coordonata y                                                             |
+| ''layout_y''            | ''View'' / ''ViewGroup'' | poziția pe coordonata y                                                             |
 Unele dintre aceste proprietăți pot fi specificate și pentru containerele în care sunt cuprinse controalele, derivate din clasa ''android.view.ViewGroup''.
@@ Line 264: / Line 264: @@
 Android pune la dispoziția programatorilor un set complet de controale de tip text, dintre care cele mai utilizate sunt ''TextView'', ''EditText'', ''AutoCompleteTextView'' și ''MultiCompleteTextView''.
+{{ :laboratoare:laborator03:text_samples.png?nolink&300 }}
 === TextView ===
@@ Line 324: / Line 326: @@
 String[] suggestions = {"vlsi", "pdsd", "ts", "std", "so2", "idp", "ia", "scad", "pw", "ecom"};
-ArrayAdapter<String> coursesArrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_utem_1line, suggestions);
+ArrayAdapter<String> coursesArrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, suggestions);
 coursesAutoCompleteTextView.setAdapter(coursesArrayAdapter);
@@ Line 341: / Line 343: @@
 În Android pot fi utilizate mai multe tipuri de butoane, între care ''Button'' (buton ce are atașat un text), ''ImageButton'' (buton ce are atașată o imagine), ''ToggleButton'', ''CheckBox'' și ''Switch'' (controale ce pot avea două stări - selectat sau nu), ''RadioButton'' / ''RadioGroup'' (grupuri de butoane ce pot avea două stări - selectat sau nu, asigurându-se totodată excluziunea mutuală între acestea).
-TODO: imagini cu diferite tipuri de butoane
+{{ :laboratoare:laborator03:button_samples.png?nolink&300 }}
 === Button ===
@@ Line 521: / Line 523: @@
 Majoritatea bibliotecilor de controale pun la dispoziția dezvoltatorilor componente pentru gestiunea informațiilor legate de data calendaristică și timp. În Android, cele mai frecvent uzitate elemente de acest tip sunt ''DatePicker'', ''TimePicker'', ''AnalogClock'' și ''DigitalClock''.
-TODO: imagini cu diferite tipuri de controale pentru gestiunea datei si a timpului
+{{ :laboratoare:laborator03:date_time_samples.png?nolink&300 }}
 === DatePicker ===
@@ Line 579: / Line 581: @@
 SDK-ul de Android oferă mai multe controale care pot fi utile în monitorizarea progresului: bară de progres (''ProgressBar'') sau bară de căutare (''SeekBar''), precum și alte obiecte pentru a indica diferite forme de activitate.
+{{ :laboratoare:laborator03:progress_monitoring_samples.png?nolink&600 }}
 === ProgressBar ===
@@ Line 644: / Line 648: @@
 ==== Alte Tipuri de Controale Grafice ====
+{{ :laboratoare:laborator03:other_controls_samples.png?nolink&300 }}
 === NumberPicker ===
@@ Line 669: / Line 675: @@
 <note>În Android, denumirea de layout este utilizată și pentru fișierele de resurse care definesc interfața grafică corespunzătoare unei activități, a unui fragment sau a unui alt element din interfața grafică, plasate în ''/res/layout'' (respectiv în ''/res/layout-land''). Acestea nu trebuie însă confundate cu tipurile de controale care gestionează mecanismul de dispunere a diferitelor elemente grafice în cadrul interfeței.</note>
-Cele mai utilizate tipuri de grupuri de componente vizuale sunt ''LinearLayout'', ''AbsoluteLayout'', ''RelativeLayout'', ''FrameLayout'', ''ScrollLayout'', ''TableLayout'' și ''GridLayout''.
+Cele mai utilizate tipuri de grupuri de componente vizuale sunt ''LinearLayout'', ''AbsoluteLayout'', ''RelativeLayout'', ''FrameLayout'', ''TableLayout'' și ''GridLayout''.
 <note>Există și alte tipuri de controale derivate din pachetul ''android.view.ViewGroup'', care au rolul de containere pentru anumite colecții de informații, cu care utilizatorul poate interacționa în mod direct: ''ListView'', ''GridView'', ''ScrollView'', ''ImageSwitcher''.</note>
@@ Line 724: / Line 730: @@
 </code>
-TODO: ilustrare linear layout
+{{ :laboratoare:laborator03:linear_layout_horizontal_sample.png?nolink&600 }}
+{{ :laboratoare:laborator03:linear_layout_vertical_sample.png?nolink&300 }}
 ==== AbsoluteLayout ====
@@ Line 742: / Line 750: @@
     * ''layout_alignTop'', ''layout_alignBottom'', ''layout_alignLeft'', ''layout_alignRight'';
     * ''layout_toLeftOf'', ''layout_toRightOf'', ''layout_above'', ''layout_below''.
+{{ :laboratoare:laborator03:relative_layout_sample.png?nolink&600 }}
 ==== FrameLayout ====
@@ Line 757: / Line 767: @@
   * ''foregroundGravity'', precizând poziționarea resursei de tip grafic care va fi afișată peste conținutul interfeței grafice (putând avea valorile ''top'', ''bottom'', ''left'', ''right'', ''center_vertical'', ''fill_vertical'', ''center_horizontal'', ''fill_horizontal'', ''center'', ''fill'', ''clip_vertical'', ''clip_horizontal'' sau combinații ale acestora, realizate prin intermediul operatorului ''|'', pe biți).
-==== ScrollLayout ====
+{{ :laboratoare:laborator03:frame_layout_sample.png?nolink&300 }}
-''ScrollLayout'' este un mecanism de dispunere a elementelor din interfața grafică utilizat pentru cazul în care dimensiunile acesteia depășesc posibilitățile de afișare ale dispozitivului mobil. Acesta poate avea o singură componentă care este de regulă tot un obiect de tip layout.
 ==== TableLayout ====
@@ Line 833: / Line 841: @@
 </code>
-TODO: exemplu tablelayout
+{{ :laboratoare:laborator03:table_layout_sample.png?nolink&300 }}
 ==== GridLayout ====
@@ Line 846: / Line 854: @@
 <note tip>Deși a fost introdus începând cu nivelul de API 14, mecanismul de dispunere a conținutului ''GridLayout'' poate fi utilizat și în aplicațiile Android folosind un SDK corespunzător nivelului de API 7, folosind biblioteca de suport v7 (revizie ulterioara versiunii 13).</note>
+{{ :laboratoare:laborator03:grid_layout_sample.png?nolink&600 }}
+==== ScrollView ====
+''ScrollView'' este un mecanism de dispunere a elementelor din interfața grafică utilizat pentru cazul în care dimensiunile acesteia depășesc posibilitățile de afișare ale dispozitivului mobil. Acesta poate avea o singură componentă care este de regulă un obiect de tip layout.
 ===== Adaptarea interfeței grafice în funcție de orientarea ecranului =====
@@ Line 882: / Line 896: @@
 ===== Activitate de Laborator =====
-  - Să se creeze o fereastră (activitate) care să aibă următoarea structură {{ :laboratoare:lab03-activitatedelaborator.jpg?nolink }}
+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).
-  - Să se insereze spații între butoane.
-  - Să se mărească dimensiunile butoanelor, folosind o valoare absolută, menținând textul din cadrul acestora centrat.
+{{ :laboratoare:laborator03:phone_dialer_portrait.png?nolink&300 }}
-  - Să se adauge un eveniment pe primul buton astfel încât la apăsare, acesta să primească o altă culoare.
-  - Să se modifice evenimentul astfel încât butonul să dispară.
+**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.
-  - Să se trateze pentru toate butoanele evenimentul de apăsare, astfel încât pe ecran să se afișeze textul butonului care a fost apăsat cel mai recent.
+{{ :laboratoare:laborator03:github01.png?nolink&500 }}
+{{ :laboratoare:laborator03:github02.png?nolink&500 }}
+**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
+</code>
+**3.** În directorul Laborator03 de pe discul local, să se creeze un proiect Eclipse denumit //PhoneDialer// (se selectează //File// → //New// → //Project//, iar apoi //Android Application Project//).
+{{ :laboratoare:laborator03:eclipse01.png?nolink&400 }}
+Se indică detaliile proiectului:
+  * **Application Name** - //Phone Dialer//
+  * **Project Name** - //PhoneDialer//
+  * **Package Name** - ''ro.pub.cs.systems.pdsd.lab03.phonedialer''
+  * **Minimum Required SDK** - API 16: Android 4.1 (Jelly Bean)
+  * **Target SDK** - API 16: Android 4.1 (Jelly Bean)
+  * **Compile With** - API 16: Android 4.1 (Jelly Bean)
+  * **Theme** - Holo Light with Dark Action Bar
+{{ :laboratoare:laborator03:eclipse02.png?nolink&400 }}
+Vor fi precizate și alte detalii legate de configurare:
+Procesul de configurare a proiectului implică și precizarea următoarelor informații:
+  * necesitatea de a se crea o pictogramă implicită pentru aplicația aferentă proiectului;
+  * necesitatea de a se crea o activitate (corespunzătoare unei ferestre a aplicației aferente proiectului);
+  * caracterul de bibliotecă al proiectului;
+  * locația la care va fi plasat proiectul (în spațiul de lucru sau nu);
+  * atașarea proiectului la o zonă de lucru
+{{ :laboratoare:laborator03:eclipse03.png?nolink&400 }}
+În privința pictogramei asociate proiectului Android, se păstrează configurația implicită:
+{{ :laboratoare:laborator03:eclipse04.png?nolink&400 }}
+Se creează o activitate care inițial nu va conține nimic:
+{{ :laboratoare:laborator03:eclipse05.png?nolink&400 }}
+pentru care se precizează:
+  * denumirea activității - ''PhoneDialerActivity'';
+  * denumirea fișierului XML din ''res/layout'' în care va fi construită interfața grafică - ''activity_phone_dialer''.
+{{ :laboratoare:laborator03:eclipse06.png?nolink&400 }}
+**4.** În fișierul ''activity_phone_dialer'' din directorul ''res/layout'' se construiește interfața grafică folosind:
+  * editorul vizual (//Graphical Layout//)
+  * editorul XML (manual)
+Aceasta va conține:
+  * un obiect de tip ''EditText'', care nu poate fi editat manual de utilizator, în care se va afișa numărul de telefon;
+  * 10 obiecte de tip ''Button'' corespunzătoare celor 10 cifre (0..9);
+  * 2 obiecte de tip ''Button'' corespunzătoare caracterelor speciale ''*'' și ''#'';
+  * un obiect de tip ''ImageButton'' pentru operaţia de editare a numărului de telefon, prin revenirea la caracterul anterior, în cazul în care s-a greșit;
+  * 2 obiecte de tip ''ImageButton'' pentru operaţiile de formare a numărului de telefon, respectiv de închidere.
+Se pot folosi următoarea arhivă conținând resursele grafice necesare: {{ :laboratoare:laborator03:graphical_resources.zip }}.
+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.
+  * 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 apel, se va invoca intenția care realizează legătura telefonică <code java>
+Intent intent = new Intent(Intent.ACTION_CALL);
+intent.setData(Uri.parse("tel:"+phoneNumber));
+startActivity(intent);
+</code>
+  * pentru butonul de oprire, se va închide activitatea (se va apela metoda ''finish()'');
+<note tip>Se va defini o clasă internă cu nume, ce implementează interfața ''View.OnClickListener'' (implementează metoda ''public void onClick(View view)''. Instanța acesteia va fi utilizată pentru **toate** obiectele de tip buton din cadrul interfeței grafice.</note>
+**6.** Să se gestioneze corespunzător evenimentul de tip rotire a ecranului;
+  - să se blocheze tranziția între modurile portrait și landscape:
+    - în fișierul AndroidManifest.xml <code xml>
+<manifest ...>
+  <application ... >
+    <activity ...
+      android:screenOrientation="portrait"
+      ... />
+    <!-- ... -->
+  </application>
+</manifest>
+</code>
+    - programatic <code java>
+@Override
+protected void onCreate(Bundle onCreateInstanceState) {
+  super.onCreate(onCreateInstanceState);
+  setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
+  // ..
+}
+</code>
+  - 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 }}
+Î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):
+{{ :laboratoare:laborator03:eclipse07.png?nolink&400 }}
+{{ :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@pdsd2015:~/Laborator03$ git commit -m "implemented taks for laboratory 03"
+student@pdsd2015:~/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]]\\
+[[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\\
+[[http://www.amazon.com/Professional-Android-4-Application-Development/dp/1118102274|Reto MEIER, Professional Android for Application Development, John Wiley & Sons, 2012]] - capitolul 4\\
+[[http://books.google.ro/books/about/The_Android_Developer_s_Cookbook.html?id=Y4JR2yI2Fo0C&redir_esc=y|Ronan SCHWARZ, Phil DUTSON, James STEELE, Nelson TO, Android Developer's Cookbook, Building Applications with the Android SDK, 2nd Edition, Addison Wesley, 2013]] - capitolele 5, 6, 7, 8\\
 [[http://eu.wiley.com/WileyCDA/WileyTitle/productCd-1118199545.html|Wei Meng LEE, Beginning Android 4 Application Development, Wiley, 2012]]\\
 [[http://www.apress.com/9781430239307|Satya KOMATINENI, Dave MACLEAN, Pro Android 4, Apress, 2012]]\\