2024-2025/Lab/Mod1/Lab1/1.2.2 Pierwsza Aplikacja - Java.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "e36c78c0-7fb4-471d-8934-e8bea184d378",
   "metadata": {},
   "source": [
    "# CounterApp"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b133e78d-6216-49da-a40f-1c4137eaf552",
   "metadata": {},
   "source": [
    "Przejdźmy do utworzenia pierwszej aplikacji i stwórzmy prosty licznik. "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b31bfb3e-e2fa-4b07-aa3b-bb816fe4d43e",
   "metadata": {},
   "source": [
    "<img src=\"https://media0.giphy.com/media/Lh9I3cXP2VdH1sFrsc/giphy.gif?cid=790b7611d0829bffb2f61d086d037fcf87f9b0f805ef3b33&rid=giphy.gif&ct=g\" width=\"200\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4dc9ae53-acf8-4bd9-a5ed-84ba09bf963c",
   "metadata": {},
   "source": [
    "Rozpoczniemy od utworzenia interfejsu zawierającego jeden `Button` i pole `TextView`. Przechodzimy do pliku `activity_main.xml`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8b246821-5380-4b8d-8bd9-3d7078772a70",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<LinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    android:orientation=\"vertical\"\n",
    "    tools:context=\".MainActivity\">\n",
    "\n",
    "    <TextView\n",
    "        android:id=\"@+id/show_count\"\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"0dp\"\n",
    "        android:layout_weight=\"1\"\n",
    "        android:text=\"0\"\n",
    "        android:textSize=\"250sp\"\n",
    "        android:gravity=\"center\"\n",
    "        android:textStyle=\"bold\"/>\n",
    "\n",
    "    <Button\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:text=\"Count Up\"/>\n",
    "</LinearLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3b9a72e9-c95e-4a9c-ae50-02bae2f6b10a",
   "metadata": {},
   "source": [
    "Zauważmy kilka nowych elementów:\n",
    "- `android:id` - jest identyfikatorem przez który możemy odnosić się do tego elementu w kodzie\n",
    "- `gravity` - wyśrodkowanie elementu"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0cc116b7-0bbf-4fa6-943d-89759608cbfb",
   "metadata": {},
   "source": [
    "Przejdźmy teraz do pliku `MainActivity.java` w którym implementujemy funckjonalność głównej aktywności i dodajmy obsługę zdarzenia `onClick`. W pierwszej kolejności musimy utworzyć pole reprezentujące `TextView`. Musimy również powiązać pole `showCount` z elementem layoutu o id `show_count`. Robimy to wywołując metodę `findViewById` - jest to jedna z wielu dostępnych opcji."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cde93aab-855d-426c-8c44-91f344beed73",
   "metadata": {},
   "outputs": [],
   "source": [
    "private TextView showCount;\n",
    "\n",
    "@Override\n",
    "protected void onCreate(Bundle savedInstanceState) {\n",
    "    super.onCreate(savedInstanceState);\n",
    "    setContentView(R.layout.activity_main);\n",
    "\n",
    "    showCount = findViewById(R.id.show_count);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "62e6d344-c103-424b-9bbf-55e4098fa01b",
   "metadata": {},
   "source": [
    "Zwróćmy uwagę na wywołanie metody `findViewById`, jako argument przyjmuje ona id typu `Int`. Klasa `R` w Androidzie jest generowana automatycznie podczas kompilacji projektu i zawiera odwołania do zasobów aplikacji, takich jak pliki `xml`, pliki graficzne, stringi, style i wiele innych. Klasa `R` jest często używana do odwoływania się do zasobów aplikacji w kodzie Java lub Kotlin.\n",
    "\n",
    "Klasa `R` jest podzielona na wiele kategorii, takich jak `R.drawable`, `R.layout`, `R.string`, `R.color` i wiele innych. Każda kategoria odpowiada innemu typowi zasobu w aplikacji. Na przykład, `R.drawable` zawiera odwołania do plików graficznych, `R.layout` zawiera odwołania do plików `xml` z opisem interfejsu użytkownika, a `R.string` zawiera odwołania do ciągów tekstowych używanych w aplikacji."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "16c9d213-5ffb-4559-ba1a-ac7451df0cf0",
   "metadata": {},
   "source": [
    "Następnie dodajmy zmienną reprezentującą stan licznika"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bbef4953-0510-4668-a221-7da42adb4e51",
   "metadata": {},
   "outputs": [],
   "source": [
    "private int count;"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c4b6408c-9d99-4255-ab4c-8ac2664d1477",
   "metadata": {},
   "source": [
    "Kolejnym krokiem jest wyświetlenie tekstu, w tym celu wywołujemy metodę `setText`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "71c5e335-ecc8-4ca9-8002-fa1a3e75b335",
   "metadata": {},
   "outputs": [],
   "source": [
    "@Override\n",
    "protected void onCreate(Bundle savedInstanceState) {\n",
    "    super.onCreate(savedInstanceState);\n",
    "    setContentView(R.layout.activity_main);\n",
    "\n",
    "    showCount = findViewById(R.id.show_count);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "93f4fb59-d5db-44a9-a8a2-c1541345c891",
   "metadata": {},
   "source": [
    "Ostatnim krokiem jest dodanie implementacji metody `countUpButton`. W ciele klasy `MainActivity` dodajemy pole reprezentujące nasz przycisk (musimy również nadać mu id w pliku layoutu)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9e2c3bd3-8c59-4666-86e3-629ae21aed8e",
   "metadata": {},
   "outputs": [],
   "source": [
    "private Button increaseButton;"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "229f0774-4e87-4b0d-8fc2-6abb74aee343",
   "metadata": {},
   "source": [
    "Następnie dodajemy kod obsługujący zdarzenie `onClick`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a7b974c1-da35-4ba0-b962-35d73a1bf5a2",
   "metadata": {},
   "outputs": [],
   "source": [
    "@Override\n",
    "protected void onCreate(Bundle savedInstanceState) {\n",
    "    super.onCreate(savedInstanceState);\n",
    "    setContentView(R.layout.activity_main);\n",
    "\n",
    "    showCount = findViewById(R.id.show_count);\n",
    "    increaseButton = findViewById(R.id.increase_button);\n",
    "\n",
    "    if (showCount != null)\n",
    "        showCount.setText(String.valueOf(count));\n",
    "\n",
    "    if (increaseButton != null)\n",
    "        increaseButton.setOnClickListener(view -> {\n",
    "            count++;\n",
    "            showCount.setText(String.valueOf(count));\n",
    "        });\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "abebb1b4-c480-42de-9ebb-d141eba0c22c",
   "metadata": {},
   "source": [
    "Na tym etapie możemy zbudować projekt."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6fa53086-2649-4c93-8b6c-9e7e6e55acd5",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-6.failiem.lv/thumb_show.php?i=e73zs4cbf&view\" width=\"200\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "dcc73ba5-f309-427e-bec7-32e95edef7ec",
   "metadata": {},
   "source": [
    "### `Bundle`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "05c8a6b7-0d02-4d07-971d-1581e65d5543",
   "metadata": {},
   "source": [
    "Zwróćmy uwagę że przy zmianie orientacji urządzenia stan licznika jest resetowany"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "89168eab-e1ea-4b64-87e0-9463a7784bba",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-5.failiem.lv/thumb_show.php?i=auy6zck7f&view\" width=\"200\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f7240680-d2fe-4a3b-a69d-210e6a3dfb11",
   "metadata": {},
   "source": [
    " Jest to związane z cyklem życia aktywności - aktywność jest niszczona i odtwarzana przy każdej zmianie konfiguracji. Możemy dane zachować przy pomocy obiektu typu `Bundle`. Zwróćmy uwagę na sygnaturę metody `OnCreate(savedInstanceState: Bundle?)` - przyjmuje ona jeden argument, to właśnie w nim możemy przekazać dane których nie chcemy utracić. Jest to typ zerowalny, ponieważ przy pierwszym uruchomieniu i wywołaniu metody `OnCreate` obiekt `Bundle` zawsze będzie miał wartość `null`."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "98849dbe-bed9-4ef5-8253-386533f4c2b6",
   "metadata": {},
   "source": [
    "W pierwszym kroku musime zapisać dane które chcemy zachować i spakować je do obiektu `Bundle`. W tym celu mamy specjalną metodę którą możemy nadpisać w klasie `MainActivity` - metoda nazywa się `onSaveInstanceState`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5ed6a21a-a42b-4dfa-bfa5-22e6fcc4f950",
   "metadata": {},
   "outputs": [],
   "source": [
    "@Override\n",
    "protected void onSaveInstanceState(@NonNull Bundle outState) {\n",
    "    super.onSaveInstanceState(outState);\n",
    "\n",
    "    outState.putInt(\"counter_state\", count);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "05a0cb4d-aa67-4ad2-bf76-ca8a01cfebd8",
   "metadata": {},
   "source": [
    "Do obiektu typu `Bundle` (standardowo nazywanym `outState` w metodzie `onSaveInstanceState`) możemy dodać dowolną liczbę danych za pomocą odpowiednich metod, tutaj chcemy przekazać stan licznika, więc używamy metody `putInt`. Metoda ta przyjmuje dwa argumenty:\n",
    "- klucz typu `String` który jest unikalnym identyfikatorem\n",
    "- wartość typu odpowiadającemu wywoływnej metodzie - tutaj wykorzystując metodę `putInt` wartość będzie typu `int`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ba8f2950-98f3-44d7-9586-59eb030efe82",
   "metadata": {},
   "source": [
    "Za każdym razem przy zmianie konfiguracji urządzenia metoda `onSaveInstanceState` jest wywoływana automatycznie. Dane możemy odebrać w metodzie `OnCreate`, która przyjmuje argueemnt typu `Bundle` (nie jest to jedyna możliwość - jest również metoda `onRestoreinstanceState`). Aby rozpakować przekazane dane do zmiennej `count` przypisujemy wartość wyciągniętą z argumentu `savedInstanceState` - pamiętając o sprawdzeniu czy `Bundle` nie ma wartości `null`. Posiada ją zawsze przy pierwszym uruchomieniu. Do metody `OnCreate` dodajemy kod"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "abf4aa8e-a17d-4c65-8208-4a6b80ae38de",
   "metadata": {},
   "outputs": [],
   "source": [
    "if (savedInstanceState != null)\n",
    "    count = savedInstanceState.getInt(\"counter_state\");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a1f148ca-a73c-4562-84be-8128bf64e1fb",
   "metadata": {},
   "source": [
    "Tutaj istotna jest kolejność wywołań - wpierw próbujemy przypisać do `count` wartość z `savedInstanceState`, jeżeli to się nie uda wartość `count` pozostaje domyślna. Wartość wyjmujemy za pomocą analogicznej do `putInt` metody `getInt`, która przyjmuje jeden argument - jest to unikalny. Oczywistym jest że klucz w metodach `putInt` i `getInt` musi być ten sam. Dopiero wtedy wykonujemy aktualizację pola `showCount` (**TextView**)."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "741f396f-edb0-49d3-b947-3cd853a9c83e",
   "metadata": {},
   "source": [
    "Przy prawidłowej implementacji stan licznika powinien być zachowany w przypadku wystąpienia zdarzenia rotacji."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3fae2b0b-d61a-4c34-93b3-b7ad49e573ac",
   "metadata": {},
   "source": [
    "### `ViewBinding`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fccc6067-af85-49d3-b779-bde7eb6c249d",
   "metadata": {},
   "source": [
    "Ostatnim elementem naszej pierwszej aplikacji będzie wykorzyystanie `ViewBinding` do połączenia elementów laoutu z odpowiednimi polami w klasie `MainActivity`."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "32cca303-74d3-45bc-974f-cfa11c5af9c3",
   "metadata": {},
   "source": [
    "Metoda `findViewById` jest jednym ze sposobów uzyskania dostępu do elementów interfejsu użytkownika w Androidzie. Metoda ta służy do wyszukiwania elementu na podstawie jego identyfikatora, który jest zdefiniowany w pliku `XML` z opisem interfejsu użytkownika. Metoda ta zwraca obiekt typu `View`, który można następnie rzutować na odpowiedni typ elementu interfejsu użytkownika, np. `EditText` lub `Button`.\n",
    "\n",
    "`ViewBinding` to narzędzie wprowadzone przez Android Studio w wersji 3.6, które umożliwia wygodniejsze i bezpieczniejsze odwoływanie się do elementów interfejsu użytkownika w kodzie aplikacji. `ViewBinding` generuje klasę `Binding` dla każdego pliku `XML` z opisem interfejsu użytkownika, która zawiera odwołania do wszystkich elementów interfejsu użytkownika zdefiniowanych w tym pliku.\n",
    "\n",
    "W przeciwieństwie do metody `findViewById`, która jest wrażliwa na błędy podczas rzutowania obiektu `View` na konkretny typ elementu interfejsu użytkownika, `ViewBinding` zwraca już gotowe obiekty typu konkretnej klasy elementu interfejsu użytkownika. Ponadto, `ViewBinding` automatycznie generuje klasy `Binding` dla każdego pliku `XML` z opisem interfejsu użytkownika i odwołania do elementów interfejsu są odbywają się za pomocą bezpiecznych nullowalnych pól, co pozwala uniknąć problemów związanych z `NullPointerException`.\n",
    "\n",
    "Używanie `ViewBinding` jest zwykle uważane za lepsze rozwiązanie niż użycie metody `findViewById`, ponieważ jest to bardziej bezpieczne i wygodne rozwiązanie. Jednak zastosowanie `ViewBinding` wymaga dodatkowej konfiguracji projektu i wygenerowania odpowiednich klas `Binding` dla plików `XML` z opisem interfejsu użytkownika."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3b50326c-0daf-4eff-bcfc-47cce70c9cbb",
   "metadata": {},
   "source": [
    "Rozpoczniemy od dodania odpowiedniego wpisu do pliku `build.gradle(Module)`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a3644d97-358d-4eba-9572-f14b00c496b0",
   "metadata": {},
   "outputs": [],
   "source": [
    "android {\n",
    "    ...\n",
    "    buildFeatures {\n",
    "        viewBinding = true\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a20cf9d2-079e-4a05-b572-d0156e371b1e",
   "metadata": {},
   "source": [
    "Przejdźmy do klasy `MainActivity`, w pierwszym kroku musimy utworzyć instancję automatycznie utworzonej klasy - plik do którego się odnosimy nosi nazwę `activity_main.xml`, więc klasa będzie nosić nazwę `ActivityMainBinding`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "404ed828-b622-42b0-8eb9-882ab72daec6",
   "metadata": {},
   "outputs": [],
   "source": [
    "private ActivityMainBinding binding;\n",
    "\n",
    "@Override\n",
    "protected void onCreate(Bundle savedInstanceState) {\n",
    "    super.onCreate(savedInstanceState);\n",
    "    //setContentView(R.layout.activity_main);\n",
    "    binding = ActivityMainBinding.inflate(getLayoutInflater());\n",
    "    setContentView(binding.getRoot());"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e90bfde9-66bf-4557-a2b0-5f6089fd292d",
   "metadata": {},
   "source": [
    "`ActivityMainBinding` to klasa, która została wygenerowana automatycznie przez system `ViewBinding` na podstawie pliku `XML` z opisem interfejsu użytkownika (layoutu). Metoda `inflate` z klasy `ActivityMainBinding` tworzy obiekt typu `ActivityMainBinding`, który zawiera odwołania do wszystkich elementów interfejsu użytkownika zdefiniowanych w pliku `XML`.\n",
    "\n",
    "`getLayoutInflater()` jest wykorzystywany do utworzenia obiektu `ActivityMainBinding`. `getLayoutInflater()` zwraca obiekt, który umożliwia tworzenie obiektów z plików `XML` z opisem interfejsu użytkownika."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3094dd5d-f265-482e-a8f9-0310413ca836",
   "metadata": {},
   "source": [
    "Następnie możemy pozbyć się dwóch pól"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5ee30bf1-3985-4a71-b23d-72755aae86f5",
   "metadata": {},
   "outputs": [],
   "source": [
    "//    private TextView showCount;\n",
    "//    private Button increaseButton;"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5d06263d-8c45-480d-b317-c141496c881a",
   "metadata": {},
   "source": [
    "Metoda `setContentView(R.layout.activity_main)` ustawia widok za pomocą pliku `XML` z opisem interfejsu użytkownika, który jest przechowywany w folderze `res/layout`. W tym przypadku, system Android odczytuje plik `activity_main.xml` z folderu `res/layout` i wstawia go jako widok do głównego okna aplikacji.\n",
    "\n",
    "Natomiast metoda `setContentView(binding.getRoot())` ustawia widok, używając obiektu klasy `ActivityMainBinding`, który został utworzony przy użyciu `ViewBinding`. Ta metoda odwołuje się do właściwości `root` obiektu `ActivityMainBinding`, która reprezentuje najwyższy poziom widoku (najczęściej jest to `ConstraintLayout`, lub najbardziej *\"zewnętrzny\"* element layoutu), który został utworzony przez `ViewBinding`."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "eee2e3d9-f39c-4790-b1d6-31b6166bada4",
   "metadata": {},
   "source": [
    "Teraz przez `binding` możemy odnosić się do wszystkich pól zdefiniowanych (i posiadających `id`) w pliku `activity_main.xml`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "688ee1e2-aad4-48a2-b2e0-f11ff82ba53a",
   "metadata": {},
   "outputs": [],
   "source": [
    "@Override\n",
    "protected void onCreate(Bundle savedInstanceState) {\n",
    "    super.onCreate(savedInstanceState);\n",
    "//  setContentView(R.layout.activity_main);\n",
    "    binding = ActivityMainBinding.inflate(getLayoutInflater());\n",
    "    setContentView(binding.getRoot());\n",
    "\n",
    "//  showCount = findViewById(R.id.show_count);\n",
    "//  increaseButton = findViewById(R.id.increase_button);\n",
    "\n",
    "    if (savedInstanceState != null)\n",
    "        count = savedInstanceState.getInt(\"counter_state\");\n",
    "\n",
    "    binding.showCount.setText(String.valueOf(count));\n",
    "\n",
    "    binding.increaseButton.setOnClickListener(view -> {\n",
    "        count++;\n",
    "        binding.showCount.setText(String.valueOf(count));\n",
    "    });\n",
    "}"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Kotlin",
   "language": "kotlin",
   "name": "kotlin"
  },
  "language_info": {
   "codemirror_mode": "text/x-kotlin",
   "file_extension": ".kt",
   "mimetype": "text/x-kotlin",
   "name": "kotlin",
   "nbconvert_exporter": "",
   "pygments_lexer": "kotlin",
   "version": "1.8.0-RC"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}