wtorek, 22 grudnia 2009

QML i Declarative UI

Tworzenie interesów użytkownika to bardzo trudne zadanie, szczególnie jak tworzy się tak jak strony internetowe. Zazwyczaj tworzy się jakiś framework UI i kompiluje się do jakiejś postaci binarnej. Na przykład piszesz kod w ActionScript 3, ale do opisu UI używasz składni MXML a skompiluje się to do postaci binarnego SWF . Piszesz kod interfejsu w XAML ale i tak efektem końcowym kompilacji jest plik wykonywalny.
Tworzenie interfejsu strony internetowej polega na pisaniu odpowiednich skryptów JavaScript i kodów CSS oraz HTML. Zaletą takiego podejścia jest to że można dynamicznie zmieniać zawartość interfejsu. Czy przeniesienie takiego mechanizmu do tworzenia aplikacji komputerowych i na komórki pozwoli na szybsze tworzenie efektywnego interfejsu użytkownika?

Jak można zauważyć duża popularność języków opisów deklaratywnego pozwoliło na oddzielenie prac nad wyglądem aplikacji od jej logiki. XAML czy MXML są językami deklaratywnymi które są potem przekształcane w odpowiedni kod do kompilacji. Natomiast próbą przeniesienia mechanizmu obsługi interfejsu aplikacji tak jak działa strona internetowa czy poprzez parsowanie i kompilację kodu skryptowego dzięki mechanizmowi JIT. Od dłuższego czasu Qt Nokia pracuje nad Qt Declarative UI. Jest to biblioteka która pozwala przy pomocy języka deklarytywnego QML bazującego na CSS3 i skryptów JavaScript budować layout aplikacji.

Ściągamy ftp://ftp.trolltech.com/qml/qt-4.6.0-declarative.zip
Wypakowujemy to w e:\qt-4.6.0-declarative
Otwieraramy QtCreatora 4.6 i importujemy plik declarative.pro następnie go otwieramy i na koncu kodu dodajemy

*-g++*: CONFIG += create_prl

Potem otwieram camand prompt który ustawia MinGW
wchodzę na e:\qt-4.6.0-declarative\src\declarative
i generuję pliki makefile

qmake

następnie generuje binaria dla wersji release i debug

mingw32-make all

pozostaje potem jeszcze przegranie plików

mingw32-make install kopiuje tylko wersję debug

E:\qt-4.6.0-declarative\src\declarative\.obj\QtDeclaratived4.dll
do E:\qt-everywhere-opensource-src-4.6.0\bin\QtDeclaratived4.dll
E:\qt-4.6.0-declarative\src\declarative\.obj\libQtDeclaratived4.a
do E:\qt-everywhere-opensource-src-4.6.0\lib\libQtDeclaratived.a

a także sami skopiujemy wersję release
E:\qt-4.6.0-declarative\src\declarative\.obj\QtDeclarative4.dll
do E:\qt-everywhere-opensource-src-4.6.0\bin\QtDeclarative4.dll
E:\qt-4.6.0-declarative\src\declarative\.obj\libQtDeclarative4.a
do E:\qt-everywhere-opensource-src-4.6.0\lib\libQtDeclarative.a
E:\qt-4.6.0-declarative\src\declarative\.obj\QtDeclarative.prl
do E:\qt-everywhere-opensource-src-4.6.0\lib\QtDeclarative.prl
E:\qt-4.6.0-declarative\src\declarative\.obj\QtDeclaratived.prl
do E:\qt-everywhere-opensource-src-4.6.0\lib\QtDeclaratived.prl

Na koniec potrzebne jest przekazanie plików nagłówkowych. Zaznaczamy poniższy kod i wklejamy do w oknie konsoli.

xcopy /E /Y ..\..\include\QtDeclarative %QTDIR%\include\QtDeclarative

Następnym krokiem będzie skompilowanie narzędzia interpertacji kodu QML czyli pliku qmlviewer.exe

W okno konsoli wpisujemy

cd ..\..\tools\qmlviewer

następnie

qmake

a potem w celu wygenerowania pliku qmlviewer.exe wpisujemy

mingw32-make release

Następnie kopiujemy plik E:\qt-4.6.0-declarative\bin\qmlviewer.exe tam gdzie mamy plik QtDeclarative4.dll czyli do E:\qt-everywhere-opensource-src-4.6.0\bin\qmlviewer.exe

Potem możemy otworzyć nowy projekt QML w QtCreatorze kliknąc w zakładkę Projekt oraz wskazać ścieżkę dla qmlviewer.exe czyli E:\qt-everywhere-opensource-src-4.6.0\bin\qmlviewer.exe

Mając już przygotowane Declarative zainstalowane API
warto przejrzeć przykłady z
E:\qt-4.6.0-declarative\examples\declarative

Jedyne wprowadzenie do Declarative UI to strona
oraz dokumentacja
Wygląda na to że w przyszłości będziemy tworzyć aplikacje QML na komórki z Symbianem
co widać na przykładzie kodów New Qt APIs Technology Preview 2 - Mobility Project
(instrukcja do tego jak to zainstalować jest na wiki i na forum)

Kiedy Ci ludzie odpoczną? Ciekawy jestem czy uda mi się skompilować qmlviewer w XM 5800.

Brak komentarzy: