←Powrót do listy treści

Licznik – stan i obsługa dotyku

Stan aplikacji – zmienna licznika

Aby aplikacja „pamiętała” aktualną wartość licznika, potrzebujesz zmiennej w obiekcie View. W Monkey C dodajesz pole do klasy i ustawiasz je w initialize():

class CounterAppView extends WatchUi.View {
    private var _counter;

    function initialize() {
        View.initialize();
        _counter = 0;
    }

    function onUpdate(dc) {
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_BLACK);
        dc.clear();
        var tekst = _counter.toString();
        dc.drawText(dc.getWidth() / 2, dc.getHeight() / 2,
                    Graphics.FONT_LARGE, tekst,
                    Graphics.TEXT_ALIGN_CENTER | Graphics.VERTICAL_ALIGN_CENTER);
    }
}
  • _counter – przechowuje aktualną wartość licznika (zaczynamy od 0).
  • _counter.toString() – zamiana liczby na tekst, bo dc.drawText oczekuje stringa.

Na razie ekran zawsze pokazuje wartość _counter, ale nie zmienia się – brakuje reakcji na wejście użytkownika.

Obsługa dotyku i przycisków – onSelect

W Connect IQ widok może implementować onSelect(). System wywołuje go, gdy użytkownik dotknie ekranu (lub naciśnie wybrany przycisk, np. „Enter”). W środku zwiększysz licznik i poprosisz o odświeżenie ekranu.

Gdzie dodać onSelect? W tej samej klasie co onUpdate – w pliku widoku (np. CounterAppView.mc w folderze source/). Wpisz nową funkcję wewnątrz klasy CounterAppView, np. zaraz po onUpdate(dc):

function onUpdate(dc) {
    dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_BLACK);
    dc.clear();
    var tekst = _counter.toString();
    dc.drawText(dc.getWidth() / 2, dc.getHeight() / 2,
                Graphics.FONT_LARGE, tekst,
                Graphics.TEXT_ALIGN_CENTER | Graphics.VERTICAL_ALIGN_CENTER);
}

function onSelect() {
    _counter = _counter + 1;
    WatchUi.requestUpdate();
}
  • _counter = _counter + 1 – zwiększenie licznika o 1.
  • WatchUi.requestUpdate() – informuje system, że trzeba ponownie narysować ekran; wkrótce zostanie wywołane onUpdate(dc) z aktualną wartością.

Po dodaniu onSelect() uruchom aplikację na emulatorze: za każdym dotknięciem (lub naciśnięciem akcji) liczba na ekranie powinna rosnąć.

Powrót – onBack

Aby użytkownik mógł wyjść z aplikacji (np. przyciskiem „Wstecz”), możesz zaimplementować onBack() i wywołać WatchUi.popView():

function onBack() {
    WatchUi.popView(WatchUi.SLIDE_IMMEDIATE);
}

Dzięki temu naciśnięcie „Wstecz” zamyka widok i wraca do menu zegarka.

Podsumowanie – pełna aplikacja Counter

  • Stan – zmienna _counter w View, inicjalizowana w initialize().
  • Rysowanie – w onUpdate(dc) rysujesz _counter.toString() na środku ekranu.
  • Wejście – w onSelect() zwiększasz _counter i wywołujesz WatchUi.requestUpdate().
  • Wyjście – w onBack() wywołujesz WatchUi.popView().

Masz gotową, prostą aplikację Counter. W kolejnej lekcji: testowanie na emulatorze i na urządzeniu oraz publikacja w Connect IQ Store.

Wszystkie treściZajęcia