Kurs Qt – część 10 – WebKit

Matthew @ 2010-08-06 — Kategorie: Kurs Qt, Programowanie, Qt, Techblog

Połowa wakacji za nami, więc żeby ten czas nie okazał się całkiem bezproduktywny – kolejna część kursu Qt. Na warsztat weźmiemy WebKita i w 15 minut stworzymy własną przeglądarkę internetową. OK, może nie w 15 i nie będzie to coś co zasłuży na miano pełnoprawnej przeglądarki internetowej – co najwyżej na wersję Alfa, ale pozwoli nam się zaprzyjaźnić z używaniem WebKita w Qt. Ale żeby nie było całkiem biednie, dodamy jeden killer feature, czyli zapisywanie wyrenderowanych stron jako obrazki.

Plik main.cpp wygląda standardowo, więc zamiast się nad nim rozwodzić (każdy kto czyta ten kurs powinien już sobie sam napisać), przejdziemy od razu dalej. Mianowicie, do pliku projektu (to ten z nazwą naszego projektu i rozszrzeniem .pro), który będziemy musieli zmienić w taki sposób, aby móc używać WebKita. Wystarczy, że znajdzie się w nim taka linijka:

Po tym zabiegu, możemy się zabrać za pisanie naszej głównej klasy, która będzie wyglądała tak:

Dwoma, nowymi klasami, które przyjdzie nam wykorzystać w tym projekcie są QWebView (linia 28.) – jest to widget wyświetlający stronę www. Zapewnia nam on praktycznie całą obsługę przeglądarki od strony silnika (zarówno silnika renderującego czy JS) jak i mechanizmów przeglądarki (jak historia). Jednak interfejs nadal musimy stworzyć sami. Klasa QUrl (linia 33.) przechowuje wszelkiego rodzaju urle. Nie tylko te zaczynające się od http:// ale różnież wskazujące na nasze zasoby lokalne (file://). Teraz czas się zapoznać z definicją metod naszej klasy. Z racji, że kod w większości jest trywialny i każdy, na tym etapie, powinien być w stanie napisać go sam, pokażę tylko co ciekawsze fragmenty:

Tutaj, przypisujemy zmiennej, która trzyma aktualny adres www, który odwiedzamy, naszą stronę domową, która będzie wyświetlana przy każdym uruchomieniu aplikacji.

Dalej tworzymy obiekt klasy QWebView oraz ustawiamy url z którego ma być pobrana i wyświetlona strona. Tę samą funkcję spełnia metoda load(). Natomiast, jeżeli mamy gotowy kawałek kodu html, to możemy wykorzystać metodę setHtml() do wyrenderowania go i wyświetlenia.

Ponieważ, QWebView, dostarcza nam praktycznie gotowego komponentu do wyświetlania stron, wystarczy połączyć go sygnałami i slotami, z interfejsem, tak aby mieć w prosty i szybki sposób gotową aplikację. Żeby móc robić zrzuty stron, musimy namęczyć się trochę bardziej:

Najpierw musimy utworzyć obiekt klasy QImage, który będzie przechowywał nasz wyrenderowany obrazek, nadając mu parametry jak wielkość i format (linia 5.). Wymiary obrazku będą zależały od strony oraz samej wielkości okna. Szerokość będzie odpowiadała szerokości strony w oknie (czyli, jeżeli rozszerzymy okno to obrazek będzie szerszy), zaś wysokość będzie odpowiadała faktycznej wysokości strony. Teraz musimy zapamiętać wymiary „wyświetlane” w oknie strony (linia 10.), czyli wielkość obszaru na którym jest renderowana strona. Następnie zmienić wymiary obszaru wyświetlania strony (linia 11.) do takich jakie faktycznie ma strona (trochę to brzmi pokrętnie, ale nie potrafię znaleźć na to w miarę prostego wytłumaczenia, mam nadzieję że jest to w miarę intuicyjne). Następnie renderujemy stronę do obiektu klasy QImage, który utworzyliśmy wcześniej, poprzez obiekt klasy QPainter, który jest w klasie QImage zawarty (linia 8.). Informujemy paintera, że tworzenie obrazka już się zakończyło (linia 13.) oraz przywracamy wcześniejsze wymiary obszaru wyświetlania strony (linia 17). Jeżeli tego nie zrobimy to przestaniemy mieć możliwość przewijania strony.
I w ten prosty sposób mamy narzędzie do robienia zrzutów całych stron. Można by się jeszcze popracować nad tym i dodać możliwość robienia zrzutu określonego fragmentu strony.

To wszystko co przygotowałem tym razem. Przez najbliższy miesiąc-dwa nie należy się spodziewać, że powstaną jakieś nowe części kursu. Chciałbym się skupić na projekcie inżynierskim, ostatniej sesji wrześniowej przez inżynierką. Zamiast pisać o Qt będę więcej pisał w Qt. Jak również przygotuję kurs UML. Myślę że w okolicach października – listopada możecie się spodziewać rozszerzenia istniejących części kursu Qt (a nie wykluczone, że części połówkowych (np. 6.5), które miałyby uzupełnić wiedzę która nie zmieściłaby się w „całych” częściach. I jak zawsze, na koniec repozytorium git z którego można ściągnąć przykładowy kod z tej części kursu./p

Komentarze:

A gdzie screen gotowej aplikacji? :>

Jak tam fooaudio? :-)

@bigfun: no masz już, nooo… maruda :P

@Piotrek: planowałem wydać wersję 0.2 11 sierpnia, ale potężna obsuwa mi się zrobiła i nie zawarłem wszystkiego co chciałbym. Ale za to jest przepisane i dodawanie nowej funkcjonalności powinno być w miarę łatwe. Również obciążenie procesora spadło znacząco.

Szkoda że nie aktualizujesz GIT’a :/

@Piotrek: nie ma sensu, bo albo nie da się go skompilować albo ma tak okrojoną funkcjonalność (do tej pory nie ma zapisu playlist i są tracone przy wyjściu z programu), że przeklinałbyś na czym świat stoi że używać takiego bubla.

możesz wrzucić gdzieś aktualną kompilowalną wersję ? PLIS.

@hans: Aktualna wersja (które nie powinna różnić się niczym od tego co jest w kursie) jest do ściągnięcia z gita: git://github.com/matthewpl/qt10.git Ew. zipa można pobrać z githuba: https://github.com/matthewpl/qt10

a jak można z poziomu QTCreatora można dolinkować jakieś liby?

Witam.
Czy webkit z qt to jest ten sam słynny webkit z którego korzysta Chrome czy to tylko względnie przypadkowa zbieżność nazw?
Pozdrawiam

Webkit w QT bazuje na otwartym Webkicie, ktory napedza chrome.

Dodaj komentarz:

 

Subscribe without commenting