2022-2023/Lab/Lab1/1.3.2 - Kotlin - CounterApp.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "90b077e0-1e48-4010-b7c9-16e12f7e627f",
   "metadata": {},
   "source": [
    "## 1.3 CounterApp"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "aeb3367a-bd4e-4e15-8406-304afc71c98b",
   "metadata": {},
   "source": [
    "Przejdźmy do utworzenia pierwszej aplikacji i stwórzmy prosty licznik. "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "04006920-e94e-4fa8-8fbc-93b8a73b85c0",
   "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": "f6e315ce-b05d-4b5a-8d26-4ccf8de4e265",
   "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": "2ae45987-59f8-4ec6-8a84-dc0f7b8c9938",
   "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",
    "        android:onClick=\"countUpButton\"/>\n",
    "</LinearLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "38bc4a0e-d609-4516-9e28-c984e9beb6a2",
   "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\n",
    "- `android:onClick` - jedna z wielu możliwości dodania metody obsługi zdarzenia `onClick` - metoda nosi nazwę **countUpButton**, jej implementacja będzie znajdować się w pliku głównej aktywności"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "81b556ed-3cb8-4d83-ab5c-a44794640379",
   "metadata": {},
   "source": [
    "Przejdźmy teraz do pliku `MainActivity.kt` 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` - będzie to pole niemutowalne. Musimy również powiązać pole `showCount` z elementem layoutu `show_count`, robimy to wywołując metodę `findViewById` - jest to jedna z wielu dostępnym opcji. Ponieważ nash `showCount` jest niemutowalny inicjalizację wykonujemy przez delegat `by lazy`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cd9c83c2-4532-45d5-a5ae-c6be612b4adc",
   "metadata": {},
   "outputs": [],
   "source": [
    "private val showCount: TextView by lazy{findViewById(R.id.show_count)}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "14204fb3-c70c-473b-9655-7b3070172f6d",
   "metadata": {},
   "source": [
    "Następnie dodajmy zmienną reprezentującą stan licznika"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ba6bf06f-6544-4e2a-ae08-f31efa9e0380",
   "metadata": {},
   "outputs": [],
   "source": [
    "private var count = 0"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "203d9fca-1c1e-4c4c-8d9c-7bc2e5e9b3be",
   "metadata": {},
   "source": [
    "Kolejnym krokiem jest wyświetlenie tekstu, w tym celu wywołujemy metodę `setText`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7233d01d-da04-49d2-8fab-56323734aa1c",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onCreate(savedInstanceState: Bundle?) {\n",
    "    super.onCreate(savedInstanceState)\n",
    "    setContentView(R.layout.activity_main)\n",
    "\n",
    "    showCount.text = String.format(Locale.GERMAN, \"%,d\", count)\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "091598af-c60d-486c-8f34-7f2f36412141",
   "metadata": {},
   "source": [
    "Ostatnim krokiem jest dodanie implementacji metody `countUpButton`. W ciele klasy `MainActivity` dodajemy"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7f0703f5-19cd-41ca-807b-90190908c595",
   "metadata": {},
   "outputs": [],
   "source": [
    "fun countUpButton(view: View?) {\n",
    "    count++\n",
    "    showCount.text = count.toString()\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "153fb8d8-9ef0-4c33-b8ab-627ffe3465e6",
   "metadata": {},
   "source": [
    "Na tym etapie możemy zbudować projekt. Pełny kod źródłowy:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "00729979-a701-4e2b-8348-be8a633eb2ca",
   "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",
    "        android:onClick=\"countUpButton\"/>\n",
    "</LinearLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "56df1a5d-b017-448e-bdaf-165c78e87205",
   "metadata": {},
   "source": [
    "`MainActivity.kt`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4759df0f-dda3-4d6d-b5b8-89e0d1c35e4d",
   "metadata": {},
   "outputs": [],
   "source": [
    "package pl.edu.uwr.pum.counterappkotlin\n",
    "\n",
    "import android.os.Bundle\n",
    "import android.view.View\n",
    "import android.widget.TextView\n",
    "import androidx.appcompat.app.AppCompatActivity\n",
    "import java.util.*\n",
    "\n",
    "class MainActivity : AppCompatActivity() {\n",
    "\n",
    "    private var count = 0\n",
    "    private val showCount: TextView by lazy{findViewById(R.id.show_count)}\n",
    "\n",
    "    override fun onCreate(savedInstanceState: Bundle?) {\n",
    "        super.onCreate(savedInstanceState)\n",
    "        setContentView(R.layout.activity_main)\n",
    "\n",
    "        showCount.text = String.format(Locale.GERMAN, \"%,d\", count)\n",
    "    }\n",
    "\n",
    "    fun countUpButton(view: View?) {\n",
    "        count++\n",
    "        showCount.text = count.toString()\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bb137b3e-1f71-4ffa-ae6f-0ca9788ca4e5",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-6.failiem.lv/thumb_show.php?i=e73zs4cbf&view\" width=\"200\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f2d55343-fec6-439b-b3fb-7734ee126c3e",
   "metadata": {},
   "source": [
    "Zwróćmy uwagę że przy zmianie orientacji urządzenia stan licznika jest resetowany"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "92e4b38f-0303-4543-a023-9cbd9b2d843e",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-5.failiem.lv/thumb_show.php?i=auy6zck7f&view\" width=\"200\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0483d3b1-4b5b-47bd-b87c-5e9195d8a3f3",
   "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": "193708fe-aa68-456d-bacb-c8396d441653",
   "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": "479a6021-3770-47c3-93dc-67633baa4c87",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onSaveInstanceState(outState: Bundle) {\n",
    "    super.onSaveInstanceState(outState)\n",
    "    outState.putInt(\"counter_state\", count)\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6518999d-2843-4e1b-9cfa-6ddf91a93515",
   "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": "333c8af7-9974-408b-b52a-0bfa6b7c76de",
   "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": "0fdbcc60-6149-431b-b957-d664bd3e9463",
   "metadata": {},
   "outputs": [],
   "source": [
    "if (savedInstanceState != null)\n",
    "    count = savedInstanceState.getInt(\"counter_state\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a6fe242d-0a3a-4f8f-8ca3-f06bfb3d1e29",
   "metadata": {},
   "source": [
    "Tutaj istotna jest kolejność wywołań - wpierw próbujemy przypisać do `count` wartość z `savedInstanceState`, jeżeli to się nie uda wartoość `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**). Pełny kod metody `OnCreate`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "46a31f9d-6aba-4b3d-9e34-3c5214c00dbe",
   "metadata": {},
   "outputs": [],
   "source": [
    "override fun onCreate(savedInstanceState: Bundle?) {\n",
    "    super.onCreate(savedInstanceState)\n",
    "    setContentView(R.layout.activity_main)\n",
    "\n",
    "    if (savedInstanceState != null)\n",
    "        count = savedInstanceState.getInt(\"counter_state\")\n",
    "\n",
    "    showCount.text = String.format(Locale.GERMAN, \"%,d\", count)\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "64e79c50-321a-4a1e-96f5-3031b67940a2",
   "metadata": {},
   "source": [
    "Przy prawidłowej implementacji stan licznika powinien być zachowany w przypadku wystąpienia zdarzenia rotacji."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d575f4cf-f0bc-41dd-ac6e-c4d5d7455815",
   "metadata": {},
   "source": [
    "Pałny kod `MainActivity.kt`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "88899589-d0fc-485c-af9e-ac121b99f9d0",
   "metadata": {},
   "outputs": [],
   "source": [
    "package pl.edu.uwr.pum.counterappkotlin\n",
    "\n",
    "import android.os.Bundle\n",
    "import android.view.View\n",
    "import android.widget.TextView\n",
    "import androidx.appcompat.app.AppCompatActivity\n",
    "import java.util.*\n",
    "\n",
    "class MainActivity : AppCompatActivity() {\n",
    "\n",
    "    private var count: Int = 0\n",
    "    private val showCount: TextView by lazy{findViewById(R.id.show_count)}\n",
    "\n",
    "    override fun onCreate(savedInstanceState: Bundle?) {\n",
    "        super.onCreate(savedInstanceState)\n",
    "        setContentView(R.layout.activity_main)\n",
    "\n",
    "        if (savedInstanceState != null)\n",
    "            count = savedInstanceState.getInt(\"counter_state\")\n",
    "\n",
    "\n",
    "        showCount.text = String.format(Locale.GERMAN, \"%,d\", count)\n",
    "    }\n",
    "\n",
    "    fun countUpButton(view: View?) {\n",
    "        count++\n",
    "        showCount.text = count.toString()\n",
    "    }\n",
    "\n",
    "    override fun onSaveInstanceState(outState: Bundle) {\n",
    "        super.onSaveInstanceState(outState)\n",
    "        outState.putInt(\"counter_state\", 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
}