Kategoria

Kurs Qt

[Kurs Qt] Komunikacja ze stronami www

W dzisiejszym dość krótkim i prostym z założenia programie nauczymy się w jaki sposób nasz program może komunikować się ze stronami www.

Do dzisiejszego programu wykorzystamy serwis cube scrambler, którego zadaniem jest tworzenia algorytmu do mieszania kostki Rubika.

Przygotowanie


Co warto zaznaczyć trzeba nieco nasz projekt przygotować przed rozpoczęciem właściwej pracy.

W pliku pro doklejamy linię kodu:

QT += webkit webkitwidgets

Musimy także zaincludować nowe biblioteki (QWebElement oraz QWebFrame):

Następnie z paska narzędzi Qt Creator‚a wybieramy Build -> run qmake. Jest to wymagane po każdym manualnym modyfikowaniu plików *.pro.

Może się też zdarzyć w dalszej części tego kursu, że nie będziesz mógł wczytać strony, będzie to wymagało doinstalowania dodatkowych plików (niestety nie pamiętam dokładnie natury błędu więc jedynie co mogę zrobić to odsyłać was do google’a, ewentualnie zachęcam do podzielenia się tym błędem w komentarzu, abym mógł dopisać tutaj jego rozwiązanie).

Dopełnienie wprowadzenia


 

Dodam jeszcze tutaj serię linii, z których można skorzystać, aby przyspieszyć wczytywanie strony (wklejamy je do konstruktora MainWindow):

Przygotowanie sygnałów i slotów


Kolejną rzeczą jaką musimy zrobić to przygotować sygnały: wciśnięcia przycisku oraz drugi, który będzie nam mówił o tym czy załadowano już stronę.

Pierwszy generujemy poprzez stworzenie go poprzez kliknięciu PPM na nasz przycisk->Go to slot…->clicked().

Drugi dodamy manualnie poprzez dodanie go w pliku nagłówkowym mainwindow, gdzie w prywatnych slotach dodajemy void zaladowano().

Przy okazji dodajemy wraz z plikiem nagłówkowym QWebView obiekt tej klasy w QWebView webView.

Następnie w pliku cpp tej klasy w konstruktorze łączymy nasz slot, który ma coś robić po wczytaniu strony.

connect(&webView,SIGNAL(loadFinished(bool)),this,SLOT(zaladowano()) );

Pierwszy slot: wczytywanie strony


Pierwszy slotem, który coś wykona będzie wciśnięcie przycisku, gdzie napiszemy prosty kod, którego zadaniem będzie rozpoczęcie wczytywania strony. Kod jest na tyle dobrze skomentowany, że nie będę go tłumaczył jeszcze tutaj.

Drugi slot: wczytano stronę, pobieranie danych ze strony


Ten slot jest aktywowany gdy już zostanie wczytana strona, może to chwilę potrwać, a program może się w tym momencie lekko przywiesić. Co ważne aby ten kod działał poprawnie musimy zostawić JavaScript włączone, więc z tych linii co podałem na samym początku, że mogą przyspieszyć wczytanie strony musimy usunąć (tą właśnie od JavaScript).

Jeżeli się zastanawiacie, skąd wiedziałem jak się nazywa element od scramble’a na stronie to przypominam, że kod HTML jest jawny co oznacza, że każdy może go zobaczyć. Więc wystarczy że klikniecie PPM na interesującym was obiekcie i wybierzecie zbadaj element.

Poprzez wyszukanie odpowiednich atrybutów otrzymujemy zawartość pomiędzy szukanymi przez nas tagami.

Edytowanie elementów


Mimo, że nasz program tego nie wykorzysta to nieco wspomnę o edytowaniu wartości elementów. Polecam także zajrzeć do dokumentacji, gdzie wszystko jest ładnie opisane.

W przypadku zmienienia wartości jakiegoś elementu (np textboxa) musimy na początku znaleźć go tak jak w przypadku wczytywania elementów, następnie modyfikujemy jego wartość w następujący sposób:

Nie jest to specjalnie skomplikowane, uruchamianie skryptu (czytaj przycisku) wygląda podobnie:

To tyle ode mnie, oczywiście kod jest już dostępny w wersji na [GitHub].

[Kurs Qt] Instalacja Qt Creator’a i pierwszy program

Instalacja


Instalacja Qt Creator’a jest raczej dość standardowa (w przypadku Linuksa zapraszam pod ten link), pobieramy Qt Creator a następnie dość długo czekamy bo nawet kilkadziesiąt minut. Po zainstalowaniu polecam chociaż przejrzeć sobie przykłady dostępne wewnątrz IDE, ponieważ są dość „życiowe” tzn są dość pomocne i pokazują na użytecznych przykładach działanie Qt. W przypadku Linuksa odsyłam do kolejnej lekcji, a następnie powrót tutaj.

 

 

Edytor


Zaraz po uruchomieniu naszym oczom powinien się ukazać ekran powitalny, z którego mamy dostęp do kilku opcji m. in. do utworzenia nowego projektu, wczytania, otworzeniu ostatnio wczytywanego projektu, itd.

Oprócz tego mamy dostęp do przykładów (Examples), które są dość mocno opisane, a także kursów (Tutorials), które są w postaci tekstowej lub wideo.

 

Kolejną zakładką jest Edit, która przenosi nas do edytora kodu, na start mamy wygenerowanych kilka plików o czym pomówimy sobie nieco szerzej nieco później, w każdym razie tutaj spędzamy stosunkowo najwięcej czasu, dlatego polecam zmienić sobie w opcjach skórkę edytora na ciemną (Tools -> Options… ->Text Editor -> Color Scheme).

 

W Design zajmujemy się stroną estetyczną programu, tzn możemy w dowolny sposób wstawiać do programu elementy, np pola do wprowadzania tekstu itp.

Do tej zakładki wchodzimy poprzez dwukrotne kliknięcie mainwindow.ui w Edit.

 

Projects jest ostatnią zakładką, która może nam się przydać w tym kursie. Tutaj możemy zmienić opcje dotyczące budowania aplikacji, gdy np. nie chcemy zmienić tych ustawień globalnie, a tylko i wyłącznie dla tego projektu.

 

Zaczynamy!


Czas zacząć nasz poradnik, dzisiaj napiszemy sobie prosty program, który po wciśnięciu przycisku zmienia na nim napis.

Do dzieła wybieramy z ekranu startowego opcję New Project. Z dostępnych opcji wybieramy Applications -> QT Widgets Application i następnie wpisujemy nazwę projektu. Kolejne opcje pozostawiamy bez zmian i klikamy już do końca Next.

Jeżeli przejdziemy do Edit to możemy, że zostały utworzone pliki:

kursQT.pro który będziemy edytować jeżeli będziemy chcieli dodać standardowo nie dołączone bezpośrednio do projektu moduły QT, np Bluetooth.

mainwindow.ui to plik, w którym jest zapisywany „wygląd” naszej aplikacji.

main.cpp to plik, którego nie będziemy modyfikowali, zajmuje się on uruchomieniem aplikacji.

Klasa mainwindow, czyli klasa którą będziemy modyfikowali i dla nas to ona jest pierwszym modyfikowalnym miejscem (a nie main.cpp), bo ona jest uruchamiana zaraz po włączeniu programu.

Przejdźmy teraz do zakładki Design, poprzez dwukrotne kliknięcie mainwindow.ui:

Możemy tutaj wyróżnić sześć głównych elementów:

  1. listę elementów, które dodajemy do okna przez przeciągnięcie ich i opuszczenie na oknie (2), trzeba sobie uświadomić że to nie są wszystkie elementy, bo niektóre trzeba użyć poprzez napisanie kodu, ale te dostępne tutaj powinny nam wystarczyć
  2. okno robocze, które możemy dowolnie modyfikować, widoczne kropki są jedynie pomocnicze i mówią nam gdzie można ustawić elementy
  3. hierarchia obiektów na scenie
  4. właściwości zaznaczonego obiektu, które możemy modyfikować
  5. 6. (na obrazku zapomniałem dodać 5) edytor akcji, a także sygnałów i slotów (o sygnałach i slotach powiemy sobie za chwilę).

 

Zanim umieścimy przycisk to usuńmy jeszcze automatycznie utworzony pasek narzędzi, czyli w Hierarchii Obiektów (3) klikamy PPM na mainToolBar -> Remove Toolbar.

Teraz znajdźmy na liście obiektów (1) w sekcji Buttons: Push Button i przeciągnijmy go na nasze okno. Zmieńmy także wyświetlany przez niego tekst poprzez kliknięcie na niego 2 razy LPM i ustawmy: „Hello World”. Możemy to także zrobić poprzez kliknięcie go i znalezienie we właściwościach obiektu (4) opcji text.

Nadszedł najwyższy czas aby wspomnieć coś o działaniu sygnałów i slotów, które są dość ważnym elementem w pisaniu aplikacji za pomocą Qt.

Czym jest sygnał? Jest to wydarzenie, które może być dość ważne dla programu, sygnał zostaje wysłany jeżeli użytkownik np. wciśnie przycisk.

Z kolei slot jest „odpowiedzią” na wysłany sygnał czyli uruchomieniem jakiejś funkcji np do zmiany tekstu przycisku, schematycznie to może wyglądać tak:

sygnał: kliknięto przycisk, a więc użyj przypisanego do niego slota, a więc zmień tekst.

W praktyce wygląda to tak:

Podałem w tym kodzie też przykład jak należy rozumieć ten zapis, ale nie wolno tego robić za pomocą if’ów. Sam system sygnałów i slotów jest nieco skomplikowany dlatego aby nie zadręczać was nadmiarem wiedzy, będę starał się tłumaczyć wszystko w miarę potrzeb. Tutaj daje jedynie informację że takie coś istnieje i jak wygląda połączenie slotu z sygnałem.

Jednak my głównie będziemy korzystali z makr, dzięki czemu nie będziemy używali connect, a kompilator zrobi to za nas, a więc do roboty:

Jeżeli klikniemy PPM na nasz przycisk i wybierzemy Go to slot, a następnie clicked() to zostaniemy przeniesieni do edytora gdzie możemy od razu bez potrzeby łączenia funkcji i sygnału przystąpić do pracy nad kodem, który ma się wykonać gdy zostanie kliknięty przycisk.

Widzimy tutaj, że aby dostać się do naszego przycisku musimy użyć wskaźnika ui->nazwa_obiektu->właściwość. W if’ie sprawdzamy wartość tekstu tak aby tekst zmieniał się na zmianę albo na „Hello World”, abo „Witaj Świecie”.

Mówiąc szczerze t nie ma tutaj nic trudnego i w ten sposób napisaliśmy nasz pierwszy program! Po kliknięciu na zieloną strzałkę Run (Ctrl + R) pojawi się nasze okno:

Zdaję sobie sprawę, że poradnik tego typu w formie tekstowej może być średnio wygodny i tego typu wiedzę najlepiej przekazuje się w formie wideo dlatego być może kolejna lekcja pojawi się właśnie w tej innej nowej wersji.

To tyle jeżeli chodzi o tą lekcję, przypominam o systemie komentarzy, dajcie znać jak się wam podoba pomysł kursu Qt.