Differences

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

--- laboratoare:laborator03 [2015/03/09 09:23]
Andrei Roșu-Cojocaru [Controale pentru monitorizarea progresului]
+++ 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 265: / Line 265: @@
 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&400 }}
+{{ :laboratoare:laborator03:text_samples.png?nolink&300 }}
 === TextView ===
@@ Line 343: / 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).
-{{ :laboratoare:laborator03:button_samples.png?nolink&400 }}
+{{ :laboratoare:laborator03:button_samples.png?nolink&300 }}
 === Button ===
@@ Line 523: / 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''.
-{{ :laboratoare:laborator03:date_time_samples.png?nolink&400 }}
+{{ :laboratoare:laborator03:date_time_samples.png?nolink&300 }}
 === DatePicker ===
@@ Line 649: / Line 649: @@
 ==== Alte Tipuri de Controale Grafice ====
-{{ :laboratoare:laborator03:other_control_samples.png?nolink&400 }}
+{{ :laboratoare:laborator03:other_controls_samples.png?nolink&300 }}
 === NumberPicker ===
@@ Line 730: / Line 730: @@
 </code>
-{{ :laboratoare:laborator03:linear_layout_horizontal_sample.png?nolink&700 }}
+{{ :laboratoare:laborator03:linear_layout_horizontal_sample.png?nolink&600 }}
-{{ :laboratoare:laborator03:linear_layout_vertical_sample.png?nolink&400 }}
+{{ :laboratoare:laborator03:linear_layout_vertical_sample.png?nolink&300 }}
 ==== AbsoluteLayout ====
@@ Line 751: / Line 751: @@
     * ''layout_toLeftOf'', ''layout_toRightOf'', ''layout_above'', ''layout_below''.
-{{ :laboratoare:laborator03:relative_layout_sample.png?nolink&700 }}
+{{ :laboratoare:laborator03:relative_layout_sample.png?nolink&600 }}
 ==== FrameLayout ====
@@ Line 767: / 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).
-{{ :laboratoare:laborator03:frame_layout_sample.png?nolink&400 }}
+{{ :laboratoare:laborator03:frame_layout_sample.png?nolink&300 }}
 ==== TableLayout ====
@@ Line 841: / Line 841: @@
 </code>
-{{ :laboratoare:laborator03:table_layout_sample.png?nolink&400 }}
+{{ :laboratoare:laborator03:table_layout_sample.png?nolink&300 }}
 ==== GridLayout ====
@@ Line 855: / Line 855: @@
 <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&700 }}
+{{ :laboratoare:laborator03:grid_layout_sample.png?nolink&600 }}
 ==== ScrollView ====
@@ Line 896: / Line 896: @@
 ===== Activitate de Laborator =====
+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&400 }}
+{{ :laboratoare:laborator03:phone_dialer_portrait.png?nolink&300 }}
-{{ :laboratoare:laborator03:phone_dialer_landscape.png?nolink&700 }}
+**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.
-{{ :laboratoare:laborator03:github01.png?nolink&400 }}
+{{ :laboratoare:laborator03:github01.png?nolink&500 }}
-{{ :laboratoare:laborator03:github02.png?nolink&400 }}
+{{ :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 }}
@@ Line 921: / Line 1009: @@
 {{ :laboratoare:laborator03:eclipse08.png?nolink&400 }}
-  - Să se creeze o fereastră (activitate) care să aibă următoarea structură {{ :laboratoare:lab03-activitatedelaborator.jpg?nolink }}
+Ulterior se copiază conținutul fișierului ''activity_phone.dialer.xml'' prin operații de tip copy-paste și se realizează modificările necesare.
-  - 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.
+**7.**  Să se încarce modificările realizate în cadrul depozitului 'Laborator03' de pe contul Github personal, folosind un mesaj sugestiv. <code>
-  - Să se adauge un eveniment pe primul buton astfel încât la apăsare, acesta să primească o altă culoare.
+student@pdsd2015:~/Laborator03$ git add PhoneDialer/*
-  - Să se modifice evenimentul astfel încât butonul să dispară.
+student@pdsd2015:~/Laborator03$ git commit -m "implemented taks for laboratory 03"
-  - 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.
+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]] - capitolul 8\\