programowanie

Uruchamianie aplikacji JavaFX w Kotlinie

Posted on 11 kwietnia 20221 komentarz

Zastanawialiście się kiedyś, czy da się uruchomić aplikację JavaFX w Kotlinie? Da się i – wbrew pozorom – nie jest to wcale trudne. Załóżmy, że mamy klasę JavaFX, taką jak poniżej:

package assets;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class ClassTemplate extends 

Application {
   
    @Override
    public void init() {
    }

    @Override
    public void start(Stage stage) {
        try {
            StackPane root = new StackPane();
            Scene scene = new Scene(root, 300, 200);
            stage.setScene(scene);
            stage.setTitle(this.getClass().getName());
            stage.setOnCloseRequest(e -> Platform.exit());
            stage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public void stop() {
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

Teraz wystarczy użyć automatycznego tłumaczam dostępnego w IntelliJ IDEA. Po poprawieniu Int na Double i uporządkowaniu sekcji importów, otrzymamy kod taki jak poniżej:

package assets

import javafx.application.Application
import javafx.application.Platform
import javafx.event.EventHandler
import javafx.scene.Scene
import javafx.scene.layout.StackPane
import javafx.stage.Stage

class ClassTemplate : Application() {
    override fun init() {}
    override fun start(stage: Stage) {
        try {
            val root = StackPane()
            val scene = Scene(root, 300.0, 

200.0)
            stage.scene = scene
            stage.title = this.javaClass.name
            stage.onCloseRequest = EventHandler { Platform.exit() }
            stage.show()
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }

    override fun stop() {}

    companion object {
        @JvmStatic
        fun main(args: Array<String>) {
            launch(*args)
        }
    }
}

To jednak nie wystarczy – jeśli spróbujemy ten kod uruchomić, otrzymamy błąd:

Powodem jest błędne tłumaczenie metody main uruchamiającej aplikację. Po poprawieniu kodu klasa powinna wyglądać tak:

package assets

import javafx.application.Application
import javafx.application.Platform
import javafx.event.EventHandler
import javafx.scene.Scene
import javafx.scene.layout.StackPane
import javafx.stage.Stage

class ClassTemplate : Application() {
    override fun init() {}
    override fun start(stage: Stage) {
        try {
            val root = StackPane()
            val scene = Scene(root, 300.0, 

200.0)
            stage.scene = scene
            stage.title = this.javaClass.name
            stage.onCloseRequest = EventHandler { Platform.exit() }
            stage.show()
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }

    override fun stop() {}

    companion object {
        @JvmStatic
        fun main(args: Array<String>) {
            launch(ClassTemplate::class.java, *args)
        }
    }
}

Zauważcie, że zmienił się tylko parametr metody launch(). Teraz kod powinien uruchomić się poprawnie. Oczywiście dla porządku metodę main możemy wyłączyć poza klasę, tak jak widać poniżej:

package assets

import javafx.application.Application
import javafx.stage.Stage
import javafx.scene.layout.StackPane
import javafx.scene.Scene
import java.lang.Exception
import kotlin.jvm.JvmStatic

class ClassTemplate2 : Application() {
    override fun init() {}
    override fun start(stage: Stage) {
        try {
            val root = StackPane()
            stage.scene = Scene(root, 300.0, 200.0)
            stage.show()
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }

    override fun stop() {}
}
fun main(args: Array<String>) {
    Application.launch(ClassTemplate2::class.java, *args)
}

W ten sposób można oczywiście “przetłumaczyć” dowolną klasę JavaFX na Kotlina.

Errata do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

Posted on 11 kwietnia 20222 komentarze

W rozdziale 30 książki wkradł się drobny błąd w pliku Listing30_08, spowodowany usunięciem biblioteki SWT z JavaFX. Opcja SWT pozostała jednak w wyliczeniu ConditionalFeature. Klasa powinna wygladać następujaco:

package rozdzial30;

import javafx.application.Application;
import javafx.application.ConditionalFeature;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Listing30_08 extends Application {

    public static void main(String[] args) {

        Application.launch(args);
    }

    @Override
    public void start(Stage stage) {
        try {
            ConditionalFeature[] cfs = ConditionalFeature.values();
            for (ConditionalFeature cf : cfs) {
                if(cf.name()!="SWT") {
                    System.out.println(cf.name() + ": "
                            + Platform.isSupported(cf));
                }
            }
            StackPane root = new StackPane();
            Scene scene = new Scene(root, 300, 200);
            stage.setScene(scene);
            stage.setTitle(this.getClass().getName());
            stage.setOnCloseRequest(e -> Platform.exit());
            stage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Aktualność książki “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”

Posted on 17 kwietnia 20212 komentarze

Tekst książki jest aktualny na dziś, czyli 17 kwietnia 2021, przy uwzględnieniu uwag z poniższego artykułu.

Od czasu wydania mojej i taty książki, o której pisałam w artykule Kulisy powstania książki “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”, pojawiły się kolejne wersje Javy i JavaFX troszkę się zmieniła (o tych zmianach możesz przeczytać w tekście Zmiany w JavaFX od JavaFX 9). Mimo to książka jest nadal aktualna, a ponieważ chcemy, żebyście mogli z niej swobodnie i wygodnie korzystać, wykorzystując najnowszą wersję JDK, w tym artykule opisujemy zmiany i udostępniamy zaktualizowane kody.

Zmiany w rozdziale 30 – Nashorn

“Rozdział 30. Nashorn”, poświęcony wersji JavaScript “Nashorn”, przeznaczonej dla JDK, stracił rację bytu w dniu 15 września 2020, wraz z pojawieniem się JDK 15, z którego Nashorn został ostatecznie usunięty. Z czasem jednak pojawiły się zmodularyzowane biblioteki Nashorn 15.3, których można używać poprzez Maven albo niezależnie od niego.

Biblioteka Nashorn 15.3

Tutaj znajdziesz plik IdeaIntellij z aktualnymi kodami dotyczącymi Nashorna i FXML, a tutaj potrzebne pliki JAR. Projekt zawiera kody do rozdziału 30 i komplet kodów do rozdziału 34, w tym również te przykłady, które nie wymagają użycia biblioteki Nashorn. Konieczne jest stworzenie biblioteki nashorn, którą można utworzyć z załączonych plików JAR, wymagane jest też JDK oraz JavaFX – najlepiej w wersji 17.0.1.

Zmiany w rozdziale 34 – FXML

W tym rozdziale pojawia się kilka przykładów, pokazujących obsługę przycisków przy użyciu JavaScript Nashorn. W związku z usunięciem Nashorna, przykłady te od wersji JDK 15 przestały działać. Ponieważ jednak obecnie ponownie można używać Nashorna, można również używać FXML.

Zmiany w rozdziale 36 – modularyzacja

“Rozdział 36. Modularyzacja” tylko pośrednio dotyczy JavaFX. Kiedy pisaliśmy książkę, było to zagadnienie nowe, wymagające dokładniejszego omówienia. Dzisiaj wszyscy ten temat znają, a w Internecie jest mnóstwo dobrych materiałów przybliżających związane z nim problemy. Dlatego gdybyśmy wydawali nową wersję książki, ten rozdział zostałby prawdopodobnie usunięty. Mimo to wszystko, co w nim powiedziano, jest nadal aktualne.

Zmiany w kodzie

Kod projektu został przejrzany, sprawdzony i zweryfikowany zgodnie z powyższymi uwagami. Zmiany w kodzie w stosunku do wersji pierwotnej są następujące:

Ścieżki do plików obrazków, które zaczynały się od ‘src/’, teraz zaczynają się od ‘JavaFX9/src/’ ze względu na zmiany w układzie modułów.
Usunięto Rozdział 30. “Nashorn” ze względu na usunięcie tego języka z JDK.
W przypadku urli ścieżka zmienia się z:
URL url = this.getClass().getClassLoader().getResource("JavaFX9/src/resources/html/alert.html");
na:
URL url = this.getClass().getResource("/resources/html/alert.html");
Z powodu usunięcia języka Nashorn usunięto pliki:
- Listing34_05.java oraz /resources/listing34_05.fxml
- Listing34_06.java oraz /resources/listing34_06.fxml
- Listing34_07.java oraz /resources/listing34_07.fxml
- Listing34_08.java oraz /resources/listing34_08.fxml
- Listing34_12.java oraz /resources/listing34_12.fxml
Folder ‘math’ dołączono do projektu jako moduł.
W module ‘math’ dodano brakujący folder ‘assets’
Pominięto projekty od Rozdzial36_1 do Rozdzial36_6. Nie wymagają one poprawek i można je ściągnąć ze strony Helionu.

Nowy kod

Poprawiony i zaktualizowany kod w postaci projektu IntelliJ IDEA możecie ściągnąć stąd:

Aktualny projekt dla IntelliJ Idea
OpenJDK 15.0.2 oraz JavaFX 15.0.1

Aktualny projekt dla IntelliJ Idea
OpenJDK 16 oraz JavaFX 16

UWAGA!
Jeżeli korzystacie z Google Chrome, przy pobieraniu mogą się pojawić ostrzeżenia o treści: “Plik JavaFX9.zip jest rzadko (albo: nie jest często) pobierany i może być niebezpieczny”. Możecie je zignorować – w plikach nie ma nic niebezpiecznego, a ostrzeżenie pojawia się ze względu na to, że zip zawiera pliki *.iml, charakterystyczne dla projektów IntelliJ IDEA, które są rzadko przesyłane.

Jeżeli w IntelliJ Idea będzie środowisko o nazwie “15” (czyli Open JDK 15.0.2) oraz biblioteka globalna o nazwie “javafx” (JavaFX 15.0.1), nie będziecie mieć problemu z importem projektu.

Do projektu trzeba dodać (tak jak się dodaje bibliotekę) dwa pliki *.jar obecne w folderze src/resources/jars.

W pliku do ściągnięcia nie umieszczano materiałów dotyczących rozdziału 36. Nie wymagały one żadnej zmiany i właściwie są już mało użyteczne, choć wciąż aktualne. Jeśli potrzebujesz – możesz użyć kodów dostępnych na stronie książki w Wydawnictwie Helion.

Nasza książka o JavaFX

Nasza książka o JavaFX już dostępna na stronie Helionu. Bardzo ją Wam polecam. Mimo że dotyczy Javy 9, jest kompatybilna z najnowszą wersją JavaFX, z uwzględnieniem zmian, o których czytaliście w powyższym tekście. Jest napisana przystępnym językiem, tłumaczy zagadnienia w prosty, jasny sposób i pozwala szybko nauczyć się korzystania z funkcjonalności JavaFX. Można ją traktować jako podręcznik, czytając krok po kroku, ale też nic nie stoi na przeszkodzie, by korzystać z niej, szukając konkretnych zagadnień.

Zamów książkę “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”

Oprócz książki Helion udostępnia też pliki z kodami źródłowymi. Warto je pobrać, bardzo się przy nich napracowaliśmy, ale w efekcie powstał kod, który ułatwia zrozumienie treści znajdujących się w książce. Wszystkie kody można uruchomić i zobaczyć w praktyce, jak działają poszczególne elementy JavaFX. Pliki znajdują się tutaj:

Pobierz materiały dodatkowe do książki “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”

W sprzedaży jest już też dostępna nowa, zaktualizowana wersja książki, zgodna z wersją JavaFX 17:

Zamów książkę “JavaFX. Tworzenie graficznych interfejsów użytkownika”

Errata do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

Kody do nowej książki znajdziecie tutaj:

Pobierz materiały dodatkowe do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

A jeśli chcielibyście ściągnąć sobie pełny projekt IntelliJ IDEA z kodami przykładów, to jest dostępny tutaj:

Pobierz projekt IntelliJ IDEA z materiałami do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

Kod w Kotlinie można ściągnąć stąd:

Pobierz projekt IntelliJ IDEA z materiałami do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika” w Kotlinie

Jeśli chciałbyś wiedzieć, jak zamienić kod JavaFX na Kotlina, to instrukcja znajduje się w tym artykule.

Zmiany w JavaFX od JavaFX 9

Posted on 17 kwietnia 20212 komentarze

Zmiany w JavaFX 10

W JavaFX 10 nie było żadnych zmian w stosunku do Java 9. JavaFX została jedynie przeniesiona z Oracle do OpenJFX.

Zmiany w JavaFX 11

JavaFX 11 stała się zestawem modułów oddzielonych od JDK 11, wymaga jednak obecności przynajmniej OpenJDK 10, a najlepiej JDK 11, które jest rekomendowane.

Od tej wersji autonomiczne (standalone) moduły javafx.* są ładowane przez ładowarkę klas aplikacji i domyślnie nie wymagają zezwoleń (permissions). Aplikacje, które mają być uruchamiane z menedżerem bezpieczeństwa muszą specyfikować plik polityki bezpieczeństwa używając “-Djava.security.policy”, a także udzielając pozwolenia na każdy moduł javafx.*.

Więcej informacji na ten temat znajdziesz na stronie JDK-8210617.

W tej wersji naprawiono też niektóre błędy i wprowadzono szereg rozszerzeń, ich listę znajdziesz tu: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 11.

Najważniejszą zmianą jest dodanie FX Robot API z klasą javax.scene.robot. Robot w module javafx.graphics.

Zmiany w JavaFX 12

W wersji JavaFX 12 brak przełomowych zmian. Listę rozszerzeń i naprawionych błędów znajdziesz tutaj: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 12.

Warte zauważenia jest dodanie obsługi File API oraz FileReader w WebView.

Zmiany w JavaFX 13

Ta wersja nie wnosi nic szczególnie istotnego. Lista rozszerzeń i naprawionych błędów znajduje się tu: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 13.

Zmiany w JavaFX 14

W wersji JavaFX 14 nadal brak przełomowych zmian. Listę rozszerzeń i naprawionych błędów znajdziecie tutaj: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 14.

Warte zauważenia jest wprowadzenie obsługi HTTP/2 do WebView.

Zmiany w JavaFX 15

Również i w tej wersji nie pojawiło się nic szczególnie istotnego. Listę rozszerzeń i naprawionych błędów dla JavaFX 15 znajdziecie tu: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 15, a dla JavaFX 15.0.1 tu: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 15.0.1.

Zmiany w JavaFX 16

Listę rozszerzeń i naprawionych błędów dla JavaDX 16 znajdziecie tutaj: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 16.

W tej wersji pojawia się dość istotna zmiana: od teraz JavaFX musi być załadowana z modułów umieszczonych na ścieżce modułów (MODULEPATH). Nie może być ładowana ze ścieżki klas (CLASSPATH).

Oprócz tych zmian w JavaFX 16 pojawił się też odkryty przez nas błąd. Do wykonania kodu tworzenia migawek zawierajacych linię
BufferedImage bi = SwingFXUtils.fromFXImage(wi, null);
wymagane są moduły java.desktop i javafx.swing. Niestety, ‘module-info.java’ wyrzuca komunikat pokazany na obrazku poniżej:

Usunięcie linii dotyczącej ‘java.desktop’ niczego nie zmienia, ale kod mimo wszystko się wykonuje. Prawdopodobną przyczyną komunikatu jest błąd w module ‘javafx.swing’. Problem występuje tylko w JavaFX 16, we wcześniejszych wersjach JavaFX się nie pojawia.

Zmiany w JavaFX 17

W tej wersji nie pojawiło się nic istotnego. Pełną listę zmian znajdziecie tutaj: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 17. Natomiast listę zmian dla wersji 17.0.0.1 i 17.0.1 można zobaczyć tu: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 17.0.0.1 i 17.0.1.

Zmiany w JavaFX 18

W tej wersji brak istotnych zmian. Pełną listę nowości znajdziecie tutaj: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 18.

Zmiany w JavaFX 19

Nie ma istotnych zmian w tej wersji. Pełną listę nowości znajdziecie tutaj: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 19.

Zmiany w JavaFX 20

W JavaFX 20 weszły w życie dwie ważne zmiany:

1) JavaFX 20 wymaga obecności JDK 17+.

2) W FXML silnik JavaScript jest domyślnie ustawiony na disabled. Aby użyć kodu JavaScript w FXML, oprócz dodania odpowiedniej biblioteki, należy ustawić zmienną systemową -Djavafx.allowjs=true. Najlepiej zmienną ustawić na true w metodzie init, a na false w metodzie stop.

Inne języki skryptowe nie wymagają żadnych zmian. Pełną listę nowości znajdziecie tutaj: lista naprawionych błędów oraz lista rozszerzeń dla JavaFX 20.

Nasza książka o JavaFX

Nasza książka o JavaFX już dostępna na stronie Helionu. Bardzo ją Wam polecam. Mimo że dotyczy Javy 9, jest kompatybilna z najnowszą wersją JavaFX, z uwzględnieniem zmian, o których czytaliście w powyższym tekście – ich realizację znajdziecie w artykule Aktualność książki “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”. Książka jest napisana przystępnym językiem, tłumaczy zagadnienia w prosty, jasny sposób i pozwala szybko nauczyć się korzystania z funkcjonalności JavaFX. Można ją traktować jako podręcznik, czytając krok po kroku, ale też nic nie stoi na przeszkodzie, by korzystać z niej, szukając konkretnych zagadnień.

Zamów książkę “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”

Pobierz materiały dodatkowe do książki “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”

W sprzedaży jest już też dostępna nowa, zaktualizowana wersja książki, zgodna z wersją JavaFX 17:

Zamów książkę “JavaFX. Tworzenie graficznych interfejsów użytkownika”4

Errata do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

Kody do nowej książki znajdziecie tutaj:

Pobierz materiały dodatkowe do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

A jeśli chcielibyście ściągnąć sobie pełny projekt IntelliJ IDEA z kodami przykładów, to jest dostępny tutaj:

Pobierz projekt IntelliJ IDEA z materiałami do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

Kod w Kotlinie można ściągnąć stąd:

Pobierz projekt IntelliJ IDEA z materiałami do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika” w Kotlinie

Jeśli chciałbyś wiedzieć, jak zamienić kod JavaFX na Kotlina, to instrukcja znajduje się w tym artykule.

I would love to change the world

Posted on 19 sierpnia 20182 komentarze

“I would love to change the world, but they won’t give me the source code”.

Czytaj dalej

Dziewczyny kodują, czyli powieści dla przyszłych programistek

Posted on 30 lipca 2018Zostaw komentarz

Reshma Saujani, założycielka organizacji Girls Who Code, napisała, że

“[…] brakuje książek, które opisywałyby, jak to jest być dziewczyną programistką. Zawsze powtarzam, że nie można stać się kimś, kogo w życiu się nie widziało. Ani o kim nic się nie czytało. Musimy czytać o dziewczynach takich jak my, żeby mieć odwagę próbować nowych rzeczy!” – “Kod przyjaźni”, s. 5-6).

Cóż, teraz już nie brakuje – książki Stacii Deutsch “Kod przyjaźni” i “Przyjaciółki rządzą” wypełniają tę lukę, a sądząc z komunikatu na końcu drugiego tomu serii, będzie ona kontynuowana.

O czym są te książki?

Książeczki z serii “Dziewczyny kodują” to powieści dla dziewczynek w wieku 10 – 12 lat. Opowiadają o czterech (a w drugim tomie – pięciu) przyjaciółkach, które zaczęły się uczyć kodowania. A jednocześnie przemycają pewną dawkę wiedzy programistycznej – głównie dotyczącej sposobów myślenia, ale też pseudokodu i terminologii. Książki są ciekawe, a bohaterki zróżnicowane – co jest bardzo ważne, bo pokazuje, że “programować każdy może”. Narratorką każdej z książek jest inna dziewczynka z tej samej grupy, co pozwala przyjrzeć się stworzonemu światu z różnych perspektyw.

W pierwszym tomie dziewczynki znajdują tajemnicze listy, w których otrzymują zadania do wykonania. Zadania są oczywiście związane z programowaniem – listy zapisane są pseudokodem. Jednocześnie czytelniczka jest ostrożnie wprowadzana w tajniki myślenia programistycznego oraz podstawowych elementów pseudokodu. W kolejnym tomie dziewczynki biorą udział w hakatonie – konkursie programistycznym, w którym ich zadaniem jest zaprogramować robota tak, by przeszedł przez labirynt. Jednocześnie pojawiają się kolejne terminy oraz prezentowany jest sposób, w jaki tworzy się oprogramowanie.

Trochę zastrzeżeń

Chociaż książki są dobrze napisane i nie zawierają błędów merytorycznych, pewne moje zastrzeżenia budzi tłumaczenie elementów pseudokodu na polski. Pojawia się ono tylko w pierwszym tomie – był to trudny wybór tłumaczki, która musiała zdecydować się albo na formę angielską, która mogłaby być niezrozumiała dla nieznającej angielskiego dziewczynki, albo na formę polską, która jednak odbiera temu fragmentowi część wymiaru edukacyjnego. W drugim tomie w analogicznej sytuacji pojawia się już słówko angielskie.

Drugie moje zastrzeżenie to trochę zbyt skomplikowany język, którym napisana jest jedna z definicji pod koniec książki – nie jestem pewna, czy czytająca dziewczynka zrozumie o co chodzi. To jednak są drobiazgi.

Czy warto podarować dziewczynce książkę z serii “Dziewczyny kodują”?

Książki same w sobie przedstawiają pewną wartość merytoryczną, przekazują podstawową wiedzę zarówno o podstawowych terminach związanych z kodowaniem, jak i o potrzebnym do tego sposobie myślenia. Są też ciekawe. Nie to jednak stanowi o ich wartości. Moim zdaniem najważniejsze jest to właśnie, co powiedziała cytowana wyżej Reshma Saujani – pokazują, że programowanie jest także dla dziewczynek, i że może być dla nich świetną zabawą. I że może się nim zajmować każdy. Nieważne, czy jest dziewczynką, czy chłopcem, typem strojnisi czy sportsmenki. Kodować każdy może.

Książki burzą też mit samotnego, niechętnego ludziom programisty-ekscentryka i pokazują, że programowanie to tak naprawdę często praca zespołowa. A tym samym zachęcają dziewczynki do podjęcia pierwszych prób. I to właśnie liczy się dla mnie w tych powieściach najbardziej.

Wszystkie cytaty w tekście pochodzą z książkek Stacii Deutsch “Kod przyjaźni” i “Przyjaciółki rządzą” z serii “Dziewczyny kodują”. Tł. K. Rosłan, Warszawa 2017.

Jak stworzyć rekina w HTML, czyli pływające rozwijane okienko

Posted on 15 lipca 2018Zostaw komentarz

Widzisz to pływające rozwijane okienko w dolnym prawym rogu? Pokażę ci dziś, jak stworzyć podobne.

Stworzymy nasz element z wykorzystaniem HTML i CSS. Jeśli masz bloga na WordPressie, będzie ci łatwiej, bo pokażę ci, co dokładnie zrobić, żeby okienko pojawiło się gdzie trzeba. Ale nie martw się – pokazane kody da się wykorzystać na każdej platformie, będziesz tylko musiał samodzielnie ustalić, gdzie należy je dodać.

Ustawiamy okienko we właściwym miejscu

Może ci się wydać zabawne, że zaczniemy od ustawiania okienka, którego jeszcze nie mamy. Ale wierz mi, tak będzie łatwiej 🙂

Okienko ustawimy za pomocą CSS. Ponieważ chcemy mieć możliwość łatwego tworzenia innych pływających okienek, dodamy nasz kod do szablonu strony, a nie do pojedynczego elementu.

Na początek wybierz w menu WordPress pozycję Wygląd i w podmenu Personalizacja, tak jak widać na poniższym obrazku. Twoje menu może się troszkę różnić od mojego, na pewno będzie miało inne kolory, może też mieć troszkę inną zawartość, ale pozycja Personalizacja na pewno w nim jest.

Zostaniesz przeniesiony do nowego ekranu, który po prawej stronie będzie pokazywać twoją stronę główną, a po lewej – kolumnę z ustawieniami, która może (ale nie musi) wyglądać podobnie do poniższej:

Znajdź pozycję Dodatkowy CSS (powinna być gdzieś na końcu) i kliknij na nią

Zobaczysz puste okienko, podobne do poniższego. W tym okienku wpiszemy nasz kod CSS.

Kod CSS ustawiający okienko

Wpisz w okienko lub skopiuj i wklej poniższy kod. Zaraz go sobie objaśnimy.

#latajace_okienko {
  position: fixed;
  Width: auto;
  bottom: 0;
  right: 0;
  float: right;
}

Nie zapomnij nacisnąć przycisku Opublikuj umiejscowionego na górze ekranu (twój może mieć inny kolor).

#latajace_okienko jest nazwą, za pomocą której będziemy informować element HTML, że ma użyć tego właśnie kodu. Znaczek # jest konieczny, ale nazwa po nim może być dowolna, nie może tylko zawierać spacji ani innych znaków specjalnych. No i trzeba ją zapamiętać, żeby potem móc się do niej odwoływać 🙂

Właściwość position – pozycja okienka

position: fixed; mówi o pozycji okienka – oznacza, że będzie się ono wyświetlało zawsze w tym samym miejscu, nawet jeśli strona będzie przewijana. Dokładnie tak, jak dzieje się z okienkiem zaprezentowanym na tej stronie. Jeśli chcesz się dowiedzieć, jakie inne pozycje można wpisać zamiast fixed, możesz zajrzeć tutaj, jednak jeśli wybierzesz inną pozycję, twoje okienko nie będzie pływać.

Właściwości Width i Height – wielkość okienka

Kolejny element – Width: auto; – odpowiada za szerokość okienka. Wartość auto oznacza, że szerokość okienka dopasuje się do jego zawartości. Jeśli chcesz, żeby okienko zajmowało całą szerokość ekranu, wpisz zamiast auto wartość 100% (nie zapomnij o średniku na końcu!). Jeśli wpiszesz 50%, okienko będzie miało szerokość połowy ekranu. Możesz też wpisać szerokość w pikselach, np. 150px. Więcej informacji możesz znaleźć tutaj.

W podobny sposób można ustawić wysokość okienka za pomocą linijki Height: auto;. Nie będziemy jednak tego robić, ponieważ wartość auto jest wartością domyślną (czyli taką, która ustawia się, jeśli w ogóle nie wpiszemy tej linijki). Linijki Width: auto; również moglibyśmy nie wpisywać, ponieważ chcemy aby nasze okienko automatycznie dopasowywało się do zawartości – podałam ją tylko po to, żebyście wiedzieli, jak można zmienić wielkość okienka. Działanie właściwości Height jest analogiczne do działania Width – więcej informacji znajdziesz tutaj.

Właściwości bottom, top, right i left – marginesy

Linijki bottom: 0; i right: 0; odpowiadają za odległość okienka od krawędzi ekranu – bottom mówi o odległości od dołu ekranu, right od prawej strony, można również w analogiczny sposób ustawić właściwość top, odpowiadającą za odległość od góry, i left – od lewej strony ekranu. Ponieważ nasze okienko ma się znajdować w dolnym prawym rogu, ustawiamy tylko te dwie pierwsze wartości.

Odległości te można ustawić podając wartość w taki sam sposób, jak ustawialiśmy to w przypadku właściwości Width i Height – szczegóły znajdziesz w opisach właściwości: bottom, top, right i left.

Właściwość float – położenie okienka

Wreszcie doszliśmy do ostatniej właściwości – float: right;. Oznacza ona położenie okienka – niezależnie od tego, w którym miejscu strony zostanie zapisany kod okienka, ono i tak będzie przyciągnięte do prawej strony ekranu. Zamiast right można oczywiście wpisać left – więcej informacji znajdziesz tutaj.

Tworzymy okienko

Otwórz teraz wpis, w którym chcesz dodać okienko. Jeśli pracujesz w trybie wizualnym, musisz przełączyć się na tekstowy – służy do tego przycisk widoczny u góry po prawej stronie. Powinieneś widzieć takie menu jak poniżej:

Teraz przejedź na dół wpisu i wklej kod:

Po uruchomieniu podglądu strony powinieneś zobaczyć mały, różowy kwadracik w dolnym prawym rogu ekranu, który przy scrollowaniu zostaje zawsze w tym samym miejscu – o taki: . To jest nasze okienko, do którego będziemy wkładać kolejne elementy. Na razie jednak przyjrzyjmy się temu, co już mamy.

Tag <div> i jego atrybuty

Słowem tag albo znacznik w języku HTML określa się element pomiędzy znaczkami < >. Otwarcie tagu wygląda tak: <div>, a jego zamknięcie – tak: </div>. Zamiast słówka div umieszczona jest nazwa tego konkretnego tagu. Każdy tag musi być otwarty i zamknięty, przy czym zamknięcia i otwarcia muszą mieścić się jedno w drugim, jak w szkatułce, np. tak: <div><b></b></div>. Jeśli umieścimy je np. tak: <div><b></div></b>, nie będą działały. Jeśli chcesz dowiedzieć się więcej na temat podstaw HTML, kilknij tutaj

Tag <div> określa sekcję dokumentu – zawartością sekcji będzie wszystko to, co znajdzie się między <div> a </div>.

Wewnątrz tagu można wpisać atrybuty, które będą odnosiły się do całej zawartości tagu. Umieszcza się je wewnątrz otwarcia tagu, np. taki zapis: <div id=”latajace_okienko”> oznacza, że tag <div> ma atrybut id o wartości latajace_okienko.

Omówimy sobie teraz poszczególne atrybuty naszego pływającego okienka i ich znaczenie.

Atrybut id

Atrybut id nadaje nazwę naszej sekcji div. Mówi też o tym, że do tej sekcji należy zastosować kod CSS, który tworzyliśmy wyżej, dzięki czemu nasze okienko będzie trzymało się w tym samym miejscu okna przeglądarki, niezależnie od zmian pozycji scrolla.

Atrybut class=”entry-meta”

Ta wartość atrybutu class zapewnia, że zawartość sekcji nie należy do głównej treści wpisu. Nie będę tego bliżej wyjaśniać. W każdym razie kod działałby również bez tego atrybutu, jednak powinien on się w nim znaleźć.

Atrybut style

Atrybut style pozwala na używanie CSS bezpośrednio w kodzie html. Zauważ, że cała zawartość atrybutu znajduje się w cudzysłowie.

W naszym wypadku ustawiamy text-decoration: none;, co oznacza, że tekst nie będzie miał dodatkowych podkreśleń – jeśli interesuje cię sposób ustawiania tej wartości, szczegóły znajdziesz tutaj.

Następnie ustawiamy wielkość czcionki na standardową poprzez wpisanie font-size: 1em; – 1em oznacza wielkość domyślną, 2em wielkość dwa razy większą niż domyślna itp. Można ustawiać również wartości ułamkowe, np. 0.5em

W podobny sposób ustawiamy prawy margines (margin-right: 3em;) i padding, czyli odstęp między tekstem a końcem brzegiem ramki tekstu (padding: 0.5em;)

Za pomocą text-align: center; ustawiamy sposób przyciągania tekstu – w tym wypadku do środka, można również zamiast center użyć left (wyrównanie do lewej), right (wyrównanie do prawej) lub justify (wyrównanie do prawej i lewej jednocześnie).

Kolor tła ustawiamy przy użyciu background-color: #ed0cf4;. Jest to kolor różowy, podany za pomocą kodu heksadecymalnego. Niektóre podstawowe kolory można podawać również za pomocą angielskich nazw, np. background-color: white. Więcej informacji o kodach kolorów znajdziesz tutaj.

Tag <details> – rozwijalne okienko

Skoro już mamy nasze pływające okienko, warto by dodać do niego jakąś zawartość. Chcemy, żeby było ono rozwijane, tzn. żeby po kliknięciu pokazywało dodatkową zawartość. Służy do tego tag <details>. Wrzucimy go do wnętrza naszego znacznika <div> w sposób pokazany poniżej:

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;"> 
   </details>
</div>

Po podejrzeniu strony powinniśmy zobaczyć takie okienko:

Po jego kliknięciu zmieni się tylko kierunek trójkącika – nic się nie wydarzy, bo jeszcze nic nie włożyliśmy do środka. Można tam wstawić dowolny element HTML. My wstawimy sobie przycisk.

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;"> 
      <button type="button">Jestem przyciskiem!</button>
   </details>
</div>

Jak widzisz, teraz po kliknięciu na strzałkę przycisk się pojawia, a po ponownym kliknięciu – znika. Gdybyśmy chcieli, żeby nasze okienko pokazywało się otwarte i zamykało dopiero po kliknięciu, musimy dodać atrybut open do znacznika <details>:

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;" open> 
      <button type="button">Jestem przyciskiem!</button>
   </details>
</div>

Tag <summary> – tytuł rozwijalnego okienka

Jeśli chcemy zmienić tekst “Szczegóły” na jakiś inny, trzeba dodać znacznik <summary> wewnątrz <details>, o tak:

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;" open> 
      <summary>Tytuł</summary>
      <button type="button">Jestem przyciskiem!</button>
   </details>
</div>

Teraz jednak zniknęła nam strzałka pokazująca, czy element jest otwarty, czy zamknięty. Żeby ją przywrócić, trzeba dodać do znacznika <summary> atrybut style=”display: list-item;”

<div id="latajace_okienko" class="entry-meta" style="text-decoration: none; font-size: 1em; margin-right: 3em; background-color: #ed0cf4; padding: 0.5em; text-align: center;">
   <details style="margin: 0; padding: 0;" open> 
      <summary style="display: list-item;">Tytuł</summary>
      <button type="button">Jestem przyciskiem!</button>
   </details>
</div>

W ten sposób stworzyliśmy pływające rozwijalne okienko. Pobaw się nim teraz. Pozmieniaj położenie, kolory, zawartość. Sprawdź, co da się zrobić, a co nie. Gdybyś miał jakieś pytania – pisz w komentarzu.

* * *

Zwrócono mi uwagę, że kod stworzony w ten sposób trzeba by kopiować do każdego wpisu z osobna i że lepszy byłby do tego plugin (wtyczka). Oczywiście można używać wtyczek, ale one zajmują więcej pamięci. Mój kod można wykorzystać do stworzenia jednorazowego okienka w pojedynczym wpisie. Można też wkleić go w odpowiednim miejscu szablonu strony, aby okienko pojawiało się w każdym wpisie lub w określonych kategoriach wpisów. Ja tak właśnie zrobiłam. Jednak ze względu na wielość szablonów nie będę pisała instrukcji jak to zrobić – musi Ci wystarczyć informacja, że kodu można użyć wszędzie tam, gdzie można użyć HTML-a.

Kolejny zarzut, jaki się pojawił, to że niektóre atrybuty wpisałam w HTML zamiast wszystkie dać w CSS. Zrobiłam tak z dwóch powodów. Jeden to taki, że chciałam pokazać, że atrybuty można wrzucać i tu, i tu. Drugim powodem było to, że chciałam, żeby mój kod był uniwersalny i żebym mogła go wykorzystywać w wielu miejscach bez modyfikacji. Dlatego te atrybuty, które miały dotyczyć wszystkich okienek, są w CSS, a te, które miały dotyczyć tego konkretnego – w HTML.

Kulisy powstania książki “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”

Posted on 14 kwietnia 20182 komentarze

Wydawnictwo Helion właśnie wydało kolejną książkę. Żadna niespodzianka, prawda? Książka nosi tytuł “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”. Też mało zaskakujący, jeśli zna się profil wydawnictwa. Co więc jest w tej książce niezwykłego? To znaczy oprócz tego, że jest świetna i pozwala w łatwy sposób nauczyć się programować? W sumie nic… poza tym, że jest mojego i mojego taty autorstwa 🙂 .

Pracowaliśmy nad nią przez wiele pełnych wyrzeczeń miesięcy. I oto wreszcie jest! I można ją zamówić w przedsprzedaży na tej stronie. Można też przeczytać darmowy fragment książki, żeby się przekonać, czy faktycznie jest dla Was interesująca.

Jak to się zaczęło

Pomysł książki narodził się bardzo dawno temu, chyba jeszcze w 2015 roku, w głowie mojego taty. Długi czas sobie tam siedział, powoli moszcząc się i urządzając, wypływał od czasu do czasu w rozmowach, ale nie spieszyło mu się. Aż wreszcie, mniej więcej na wiosnę 2017 roku, dojrzał. Książka zaczęła powstawać, początkowo jedynie jako zestaw kodów autorstwa taty. Wtedy wydawało nam się, że to właśnie jest najgorsza część roboty. Tata napisał kody i krótkie, ogólne ich opisy, zarysy zagadnień, które miały zostać poruszone. Jest tego dużo, jak możecie się przekonać, więc prace trochę trwały. Zaplanował też strukturę książki, choć potem trochę ją jeszcze zmienialiśmy.

Wreszcie, mniej więcej w połowie kwietnia 2017 roku, surowe teksty i kody trafiły do mnie. Jednocześnie skontaktowaliśmy się z wydawnictwem Helion, proponując im wydanie naszej książki. Odzew był bardzo szybki i pozytywny – piszcie! Wydawnictwo chciało wiedzieć, kiedy książka będzie gotowa. Przewidywałam, że zajmie to sporo czasu – trzeba było jeszcze napisać większość tekstu, a także sformatować go zgodnie z wymogami wydawnictwa, poza tym wiedzieliśmy już, że na jesieni wyjdzie Java 9 i będzie trzeba poprawić i uzupełnić kody (pierwowzór książki powstał jeszcze w Javie 8), więc podałam jako termin koniec 2017 roku. Wydawało mi się, że to duży zapas czasowy. Jakże się myliłam!

Swoją część pracy rozpoczęłam mniej więcej w tym samym czasie, w którym skontaktowaliśmy się z wydawnictwem. Początkowo nie przykładałam się bardzo, bo wydawało mi się, że jest dużo czasu, poza tym była piękna pogoda, więc uznałam, że intensywniej wezmę się za to na jesieni.

Wyścig z czasem

Na jesieni okazało się, że czasu jest za mało! Rozpoczął się wyścig z czasem. Wymienialiśmy z tatą od kilkunastu do kilkudziesięciu połączeń dziennie. Roboty był ogrom. Musiałam zrozumieć napisane kody, czasem je przerobić lub zarządzić ich przerobienie. Ale przede wszystkim napisać i uporządkować tekst – tak, żeby był czytelny i zrozumiały, żeby nie mający doświadczenia czytelnik wiedział, jak i po co używać danej konstrukcji. Wpleść w ten tekst kody tak, by wyjaśniały, co trzeba, a jednocześnie były zgodne z wymogami wydawnictwa. I wreszcie sformatować to wszystko, co samo w sobie też zajmowało sporo czasu.

Były momenty, kiedy oboje mieliśmy dość. Kiedy ja płakałam, a tata rzucał w gniewie słuchawką. Kiedy krzyczałam – ze zmęczenia i frustracji – a tata próbował mnie uspokoić. Ale prace posuwały się naprzód. Zbyt wolno. Termin gonił. W listopadzie rozmawiałam z szefem pod kątem ewentualnego urlopu bezpłatnego, bo coraz bardziej byłam przekonana, że nie zdążę. Rezygnowałam niemal ze wszystkiego, odrzucałam zaproszenia od przyjaciół, zaniedbywałam swoje zwierzaki, skracałam rozmowy telefoniczne, jedyną przyjemnością, na jaką sobie pozwalałam, były warsztaty teatralne, warsztaty improwizacji i bibliodrama. Miałam wyrzuty sumienia, ale musiałam mieć jakąś odskocznię.

To była wyczerpująca, ciężka praca, zajmująca każdą wolną chwilę. Soboty, niedziele, wieczory. Po ośmiu godzinach siedzenia przy komputerze wracałam do domu, by znów siąść przed komputerem do pracy. Nie powtórzyłabym tego, nie dałabym rady. Ale było warto.

Początek końca, czyli demoniczny korektor

Pod koniec grudnia, kilka dni przed terminem (dzięki rezygnacji z dołączenia do książki pewnych dodatkowych elementów) wysłałam finalną wersję książki do wydawnictwa. Myślałam, że to koniec problemów. Ale znów się myliłam.

Wymiana maili z przedstawicielką wydawnictwa przebiegała pomyślnie i bezproblemowo. Problemy zaczęły się dopiero, kiedy dotarliśmy do etapu korekty. Korektor bardzo mi się naraził, od samego początku. Wysłał mi teksty do korekty w poniedziałek. Tego samego dnia napisałam mu grzecznie, że sprawdziłam, ile dałam radę, a resztę doślę w piątek i w weekend (kolejne trzy dni miałam wracać bardzo późno). A on, że nie mogę, bo on ma termin i że zaraz wyśle mi jeszcze drugą połowę materiałów. Cóż… nie miałam zamiaru rezygnować dla niego ze swoich planów i spraw ani zarywać nocy (i tak już zbyt krótkich), więc napisałam do wydawnictwa, że proszę o przesunięcie mu terminu, skoro się nie wyrabia. Na co uzyskałam grzeczną odpowiedź, że oczywiście, mam pracować w swoim tempie i nie przejmować się nadgorliwym panem, który najwyraźniej nie otrzymał dokładnych informacji o zasadach współpracy.

Nie wiem, czy był to efekt tej kłótni, czy osobowości korektora, ale to nie był koniec problemów. Korektor uparł się, że musi dokonać jak najwięcej zmian, wobec tego robił dziwne rzeczy w rodzaju zamiany wszystkich “stworzyć” na “utworzyć” i odwrotnie – w miejscach, gdzie nie było to niczym uzasadnione. Dwukrotnie dokonał sobie samodzielnej zmiany kodu, który w efekcie stracił całkowicie sens i przestał się kompilować (przestawił nawiasy, usunął słowko new w deklaracji nowego obiektu itp.). Na szczęście sprawdzałam tekst odesłany mi po korekcie, obserwując wszystkie zmiany, a nie jedynie przeglądając komentarze. Nie mam pewności, czy czegoś nie przepuściłam, bo byłam już zmęczona, a wiadomo, że uwaga wtedy szwankuje. Ale mam nadzieję, że nie.

Nareszcie koniec!

I wreszcie nadszedł dzień, kiedy mogłam odetchnąć z ulgą. Książka była gotowa. Pozostały już tylko drobnostki, w postaci przejrzenia gotowej makiety książki czy zaakceptowania stworzonej przez grafika okładki. Książka jest dostępna na stronie Helionu. Bardzo ją Wam polecam. Mimo że dotyczy Javy 9, jest kompatybilna z najnowszą wersją JavaFX, z uwzględnieniem zmian, o których możesz przeczytać w tekście o zmianach w JavaFX – ich realizację znajdziecie w artykule Aktualność książki “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”. Wiele godzin mojej i taty pracy nie poszło na marne – książka jest napisana przystępnym językiem, tłumaczy zagadnienia w prosty, jasny sposób i pozwala szybko nauczyć się korzystania z funkcjonalności JavaFX. Można ją traktować jako podręcznik, czytając krok po kroku, ale też nic nie stoi na przeszkodzie, by korzystać z niej, szukając konkretnych zagadnień. Było ciężko, ale efekt naprawdę wart jest polecenia.

Zamów książkę “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”

Pobierz materiały dodatkowe do książki “JavaFX 9. Tworzenie graficznych interfejsów użytkownika”

Co się zmieniło?

Jak pewnie wiecie, Java jest co jakiś czas aktualizowana i pojawiają się nowe jej wersje. Jeśli popatrzycie tylko na numerki, to można odnieść wrażenie, że książka jest już dawno nieaktualna. Ale to nieprawda. Owszem, trochę rzeczy się zmieniło – ale wcale nie aż tak dużo. I choć nie planujemy w najbliższym czasie wydawania kolejnej wersji książki, to chcemy, żebyście wciąż mogli korzystać z zawartych w niej informacji. Dlatego specjalnie dla Was zamieściliśmy informacje o zmianach w Java FX od JavaFX 9 aż do najnowszej wersji, a także zaktualizowaliśmy kody i opisaliśmy zmiany dotyczące samej książki.

Nowa wersja książki

W sprzedaży jest już też dostępna nowa, zaktualizowana wersja książki, zgodna z wersją JavaFX 17:

Zamów książkę “JavaFX. Tworzenie graficznych interfejsów użytkownika”

Errata do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

Kody do nowej książki znajdziecie tutaj:

Pobierz materiały dodatkowe do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

A jeśli chcielibyście ściągnąć sobie pełny projekt IntelliJ IDEA z kodami przykładów, to jest dostępny tutaj:

Pobierz projekt IntelliJ IDEA z materiałami do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika”

Kod w Kotlinie można ściągnąć stąd:

Pobierz projekt IntelliJ IDEA z materiałami do książki “JavaFX. Tworzenie graficznych interfejsów użytkownika” w Kotlinie

Jeśli chciałbyś wiedzieć, jak zamienić kod JavaFX na Kotlina, to instrukcja znajduje się w tym artykule.

Nowe wiaderko, czyli jak zaktualizować Android Studio

Posted on 19 sierpnia 2017Zostaw komentarz

Od czasu do czasu w Android Studio pojawiają się okienka takie jak poniższe:

Oznacza to, że pojawiła się nowa aktualizacja Android Studio albo elementów SDK Androida (jeśli nie pamiętasz, co to jest, zajrzyj do wpisu o uruchamianiu Android Studio. Żeby tę nową aktualizację zainstalować, naciśnij na niebieski link ze słowem “Update”. Otworzy Ci się okienko informujące, co zostanie zaktualizowane, o takie:

Jeśli klikniesz na “Release Notes”, będziesz mógł przyjrzeć się dokładniej, co się zmieniło. Oprócz tego możesz aktualizację zignorować (przycisk “Ignore This Update”) – wówczas ta aktualizacja nie pokaże Ci się już nigdy więcej jako wyskakujące okienko (ale wciąż będziesz mógł wykonać ją ręcznie). Kolejną opcją jest odłożenie aktualizacji (przycisk “Remind me later”) – dzięki temu informacja o aktualizacji pojawi się ponownie przy kolejnym uruchomieniu Android Studio. I wreszcie – możesz po prostu od razu zainstalować aktualizację, klikając “Update Now”.

Po wybraniu tej ostatniej opcji otworzy Ci się kolejne okienko:

W tym okienku będziemy akceptować kolejne licencje. Oczywiście wypadałoby je najpierw chociaż przejrzeć 😉 Kliknij w białe kółeczko obok słowa “Accept” w dole okna. Teraz kolejno wybierz pozostałe elementy z listy po lewej stronie. Wystarczy wybrać te główne. Na każdy z nich trzeba kliknąć i wybrać opcję “Accept”. Kiedy zaakceptujesz już wszystkie, przycisk “Next” stanie się aktywny, jak na poniższym obrazku:

Kliknij na “Next”. Otworzy się okienko podobne do poniższego:

Teraz pozostaje Ci tylko czekać. To może potrwać krótko albo długo – wszystko zależy od wielkości aktualizacji. Pasek postępu może długo stać w miejscu albo wielokrotnie cofać się do początku – nie przejmuj się tym. Poczekaj cierpliwie, aż przycisk “Finish” stanie się aktywny. Możesz kliknąć przycisk “Background” – powinien on sprawić, że okno zniknie, a pobieranie będzie się odbywało w tle. Jednak nie polecam jego naciskania – kiedy próbowałam go użyć, aplikacja po prostu się zawiesiła i konieczny był reset Android Studio.

Jeśli w trakcie instalacji pojawią się jakieś dodatkowe okna z ustawieniami, co się czasem zdarza, w większości przypadków najbezpieczniej pozostawić je bez zmian, klikając “Next” bądź “Finish”. No chyba że wiesz co robisz wprowadzając daną zmianę 🙂 Kiedy wreszcie aktualizacja się zakończy, kliknij przycisk “Finish”.

W kolejnej lekcji przyjrzymy się dokładniej stworzonemu w poprzedniej lekcji programowi i spróbujemy go zmodyfikować, a potem uruchomić. Na razie możesz wyłączyć aplikację, klikając krzyżyk w górnym rogu okna albo wybierając z menu File -> Exit. Jeśli pojawi Ci się pytanie “Are you sure you want to exit Android Studio?”, potwierdź chęć wyjścia, klikając “Exit”.

Nasza pierwsza babka z piasku – tworzymy pierwszą aplikację na Androida

Posted on 7 sierpnia 2017Zostaw komentarz

Teraz, kiedy już zainstalowaliśmy i przygotowaliśmy nasze środowisko, możemy nareszcie stworzyć naszą pierwszą aplikację 🙂

Tworzymy nowy projekt

Wyszukaj Android Studio. Jeśli nie wiesz, jak to zrobić, zajrzyj do wpisu o instalacji środowiska, gdzie znajdziesz instrukcję – tylko tym razem musisz szukać słów “Android Studio”. Uruchom aplikację, klikając na nią. Otworzy Ci się okienko takie, jak widzisz poniżej:

Pierwsza, zaznaczona domyślnie na niebiesko pozycja, służy do stworzenia nowego projektu. Pozostałe pozwalają na różne sposoby otworzyć istniejący już projekt. O tym będziemy jeszcze mówić w przyszłości, na razie wybieramy “Start a new Android Studio project”, klikając na tym właśnie napisie.

Powinieneś zobaczyć następujący ekran:

Pola są już wypełnione, ale trochę je zmienimy. W polu “Application Name” wpisujemy nazwę, którą chcemy nadać naszej aplikacji. Nie powinna być zbyt długa, ale mogą w niej być polskie litery, spacje albo myślniki. To jest ta nazwa, która pojawi się pod ikonką naszej aplikacji, kiedy już ją uruchomimy na telefonie. W informatyce pierwsza aplikacja zwykle nazywa się “Hello world”, ale my nazwijmy ją sobie po polsku – “Witaj”. Wpisz tę nazwę w pole “Application Name”.

Domena firmy a nazwa pakietu

Kolejne pole, “Company domain”, jest przeznaczone na nazwę firmy, która publikuje daną aplikację. Na razie wpisz tu po prostu swoje imię, najlepiej z małej litery. Zauważ, że kiedy zmieniasz tekst w tym polu, zmienia się też szary tekst poniżej, obok napisu “Package name”. Ta wartość jest bardzo ważna, jeśli tworzymy aplikację, którą będziemy chcieli umieścić w sklepie Google Play, ponieważ stanie się częścią linka, po którym będzie można aplikację wyszukać. Na razie nie jest dla nas istotna. Można ją zmienić, klikając niebieski przycisk “Edit” po prawej stronie. Nie wolno w niej używać innych znaków niż litery, cyfry, kropki i dolne podkreślniki. Zresztą jeśli spróbujesz wpisać tam niewłaściwe wartości, aplikacja ostrzeże Cię za pomocą czerwonego komunikatu w dole okna. Zostawmy to pole niezmienione.

Wsparcie C++ nas nie interesuje, będziemy programować w typowym dla Androida języku czyli w Javie, dlatego zostawiamy checkbox “Include C++ support” niezaznaczony.

Lokalizacja projektu

Ostatnie pole, “Project location”, pozwala na wybranie miejsca na dysku, w którym będzie przechowywana nasza aplikacja. Możesz je zostawić niezmienione albo wybrać inne, klikając przycisk z trzema kropkami po prawej stronie pola. Ja lubię trzymać swoje aplikacje w jednym miejscu, dlatego zmieniłam sobie miejsce przechowywania aplikacji na swoje własne.

Po zmianach Twój ekran powinien wyglądać podobnie do tego:

Kliknij przycisk “Next”.

Wybór wersji Androida

Na tym ekranie będziemy wybierać, w jakich wersjach Androida aplikacja ma się uruchamiać. Zostawimy tu wartości domyślne. Zaznaczona jest pozycja “Phone and tablet”, a więc nasza aplikacja będzie działała na telefonach i na tabletach. Pozycja “Wear” pozwala stworzyć aplikację na zegarki z Androidem, “TV” – na telewizory, a “Android Auto” – dla samochodów posiadających system Android. W naszym kursie skupimy się wyłącznie na aplikacjach na telefony i tablety, dlatego po prostu kliknij “Next”. Może Ci się pojawić ekran pobierania – jeśli tak się stanie, odczekaj aż skończy i ponownie kliknij “Next”.

Wybór typu aktywności

Zobaczysz okienko, pozwalające wybrać typ aktywności:

Aktywność (Activity) jest to podstawowy element pozwalający na działanie aplikacji. O jej znaczeniu i poszczególnych typach powiemy sobie w przyszłości, na razie pozostaw zaznaczony typ “Empty Activity” i kliknij “Next”. Pojawi się ekran pozwalający na nadanie nazw stworzonym plikom:

O samych aktywnościach również jeszcze sobie powiemy – na razie wystarczy, jeśli będziecie wiedzieć, że aktywność jest miejscem, gdzie programuje się działania aplikacji. Główna aktywność aplikacji (bo może ich być kilka) zwyczajowo nosi nazwę MainActivity, dlatego zostawimy ją domyślną (mimo że można ją zmienić). Ważne jest, żeby w tym polu nie dawać spacji i zaczynać nazwę z wielkiej litery – nakazują to zasady dobrego tworzenia kodu. Nazwy zwyczajowo nadawane są po angielsku, ale nic nie stoi na przeszkodzie, żeby używać polskich.

Drugie pole, “Layout Name”, odpowiada za nazwę pliku, w którym będzie się znajdować graficzna część aplikacji. Przy tworzeniu kolejnych programów będziemy ją zmieniać, na razie jednak nie ma takiej potrzeby, więc ją również zostawimy domyślną.

Pole “Backwards Compatibility” pozwala na używanie w aplikacji kodu zrozumiałego zarówno dla starszych, jak i nowszych wersji Androida – pozostawimy je zaznaczone. Gdybyśmy je odznaczyli, musielibyśmy w niektórych przypadkach pisać różne kody dla różnych wersji systemu.

Kliknij “Finish”.

Czekamy, aż projekt się stworzy

Teraz trzeba będzie trochę poczekać – Android Studio musi stworzyć aplikację według wytycznych, które podaliśmy mu w poprzednich krokach. Nie denerwuj się, to może trwać dosyć długo. W końcu powinien Ci się pojawić ekran taki jak poniżej:

Zamknij okienko “Tip of the day”, klikając “Close” albo krzyżyk w jego górnym rogu. W dolnym prawym rogu ekranu zobaczysz okienko z tekstem “Help improve Android Studio[…]”. Jeśli klikniesz niebieski napis “I agree”, do zespołu tworzącego Android Studio będą wysyłane anonimowe informacje o tym, w jaki sposób korzystasz z aplikacji. Jeśli nie chcesz udostępniać im tych informacji, kliknij “I don’t agree”. Ja zwykle wolę nie udostępniać więcej danych, niż to konieczne, nawet jeśli są anonimowe.

A w kolejnej lekcji…

W kolejnej lekcji dowiemy się, jak zaktualizować elementy Android Studio jeśli zajdzie taka potrzeba. Na razie możesz wyłączyć aplikację, klikając krzyżyk w górnym rogu okna albo wybierając z menu File -> Exit. Jeśli pojawi Ci się pytanie “Are you sure you want to exit Android Studio?”, potwierdź chęć wyjścia, klikając “Exit”.