Wprowadzenie do tworzenia zaawansowanych interfejsów graficznych: QGraphics View Framework vs. QML. Jakub Bogacz. Patryk Górniak

Transkrypt

1 Wprowadzenie do tworzenia zaawansowanych interfejsów graficznych: QGraphics View Framework vs. QML Jakub Bogacz Software Engineer Tieto, Patryk Górniak Software Engineer Tieto,

2 Spis tre ci Krótkie przypomnienie Wst p do tworzenia graficznych interfejsów QGraphics View Framework

3 Krótkie przypomnienie

4 Czym jest QT Multiplatformowa biblioteka C++ Stworzona przez firm Trolltech, która zosta a przej ta (2008 rok) przez Noki Na licencji LGPL Przeznaczona g ównie do tworzenia interfejsów u ytkownika Du e wsparcie dla tworzenia aplikacji na urz dzenia mobilne G ówny sk adnik Maemo 5 oraz MeeGo Fundamentem biblioteki jest mechanizm sygna ów oraz slotów

5 Historia QT 1995 pierwsza wersja biblioteki (sprzedanych 18 licencji) 1997 u ycie Qt jako podstawowej biblioteki w KDE 1999 Qt Qt 3.0 wspierana równie dla MacOS 2005 Qt 4.0 wydane na licencji GPL 2007 Qt dla Javy (Qt Jambi) 2008 Nokia przejmuje Trolltech Stycze 2009 Qt 4.5 na licencji LGPL, wstrzymano rozwój Qt Jambi

6 Sloty i sygna y czyli krótkie przypomnienie - podstawy signals: void clicked(); public slots: void buttonclicked(); QObject::connect(&a, SIGNAL(clicked), &b, SLOT(buttonClicked)

7 Sloty i sygna y czyli krótkie przypomnienie - przyk ad #include <QObject> class Counter: public QObject { Q_OBJECT public: Counter() { m_value = 0; } int value() const { return m_value; } public slots: void setvalue(int value); signals: void valuechanged(int newvalue); private: int m_value; };

8 Sloty i sygna y czyli krótkie przypomnienie - przyk ad void Counter::setValue(int value) { if (value!= m_value) { m_value = value; emit valuechanged(value); } } Counter a, b; QObject::connect(&a, SIGNAL(valueChanged(int)), &b, SLOT(setValue(int)));

9 Wst p do tworzenia graficznych interfejsów

10 Metody tworzenia interfejsów ytkownika Interfejsy ytkownika Interfejsy standardowe Interfejsy niestandardowe Komponenty QGraphics View Framework QML

11 Przyk ady standardowych interfejsów u ytkownika

12 Przyk ady niestandardowych interfejsów u ytkownika

13 Historia QCanvas: Qt 2.3( ) Qt 4.2( ) QGraphics View Framework: Qt 4.2( ) -? QML (Qt Quick): Qt 4.7( ) -?

14 Dost pno Komputery z zainstalowanymi bibliotekami QT Urz dzenia mobilne z systemami: Symbian S60 3rd Edition, Feature Pack 1 Nokia 5700 Nokia 6120 Nokia E51 Nokia E63 Nokia N76 Nokia N95 Symbian S60 3rd Edition, Feature Pack 2 Nokia 5320 Nokia 5730 Nokia 6220 Classic Nokia E52 Symbian S60 5th Edition, oraz nowsze wersje systemu Nokia 5250 Nokia 5530 Nokia N97 Maemo 5 Nokia N900 MeeGO

15 QGraphics View Framework

16 QGraphics View Framework - wst p

17 QGraphicsScene Przechowywanie i zarz dzanie obiektami QGraphicsItem: Dodawanie: additem(), addtext(), addelipse(), addpath(), addrect() Pobieranie i usuwanie: item(), itemat(), remove(), removeat() Przekazywanie zdarze, a w szczególno ci obs ugi myszki i klawiatury do elementów sceny Konstruktor: QGraphicsScene::QGraphicsScene ( const QRectF & scenerect, QObject * parent = 0) QGraphicsScene::QGraphicsScene ( qreal x, qreal y, qreal width, qreal height, QObject * parent = 0 )

18 QGraphicsView Reprezentuje scen i odpowiada za jej wy wietlanie. Niezale nej wielko ci od sceny któr ma reprezentowa. Najwa niejsze metody: setscene() maptoscene(), mapfromscene(), itemat() show() hide()

19 Poka my scen #include <QApplication> #include gui.h int main(int argc, char *argv[]) { QApplication a(argc, argv); Gui* g = new Gui(); } return a.exec();

20 Poka my scen cd.. Gui::Gui(QObject *parent) : QObject(parent) { scene = new QGraphicsScene(0,0, 500, 500); scene->setbackgroundbrush(qbrush(qt::black)); view = new QGraphicsView(); view->setscene(scene); view->show(); }

21 Poka my scen cd..

22 QGraphicsItem Reprezentuje pojedynczy obiekt na scenie. Odbiera zdarzenia myszki oraz klawiatury (je eli ich obs uga zostanie zaimplementowana). virtual void paint ( QPainter * painter, const QStyleOptionGraphicsItem * option, QWidget * widget = 0 ) virtual QRectF boundingrect()

23 Rysujemy w asny obiekt trójk t void PictureItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) { QPen pen(qt::white); pen.setwidth(4); painter->setpen(pen); } //Rysujemy trójk t painter->drawline(0, 0, 0, 100); painter->drawline(0, 0, 60, 50); painter->drawline(0, 100, 60, 50);

24 Rysujemy w asny obiekt trójk t QRectF PictureItem::boundingRect() const { return QRectF(0,0, 60, 100); }

25 Dodajemy trójk t do sceny Gui::Gui { rightbutton = new PictureItem(); rightbutton->setx(scene->width() rightbutton->boundingrect().width()); rightbutton->sety(scene->height()/2 - rightbutton->boundingrect().height()/2); scene->additem(rightbutton) }

26 Rysujemy w asny obiekt trójk t cd..

27 Dodajemy drugi trójk t Gui::Gui { leftbutton = new PictureItem(); leftbutton->setx(leftbutton-> boundingrect().width()); leftbutton->sety ((leftbutton>boundingrect().height() + scene->height())/2); leftbutton->rotate(180); scene->additem(leftbutton) }

28 Oto nasz efekt

29 Dodajemy obs ug myszki void PictureItem:: mousepressevent(qgraphicsscenemouseevent *event) { Q_UNUSED(event); } void PictureItem:: mousereleaseevent(qgraphicsscenemouseevent *event) { Q_UNUSED(event); emit clicked(); }

30 Wy wietlamy zdj cie PhotoItem::PhotoItem(QString pathtofile, QGraphicsObject *parent) : path(pathtofile), QGraphicsObject(parent) { //QPixmap pixmap = new QPixmap(); //QRectF rectangle rectangle.setrect(0,0, 300, 300); //nasza dodatkowa metoda updatepixmap(); }

31 Wy wietlamy zdj cie cd.. void PhotoItem::updatePixmap() { pixmap->load(path); scaledpixmap = pixmap->scaled (rectangle.size(), Qt::KeepAspectRatio); } QRectF PhotoItem::boundingRect() const { return rectangle; }

32 Wy wietlamy zdj cie cd.. void PhotoItem::paint(QPainter *painter,..,..) { painter->fillrect(rectangle, Qt::black); int x = (rectangle.width() scaledpixmap.width())/2; int y = (rectangle.height() scaledpixmap.height())/2; } painter->drawpixmap(x,y, scalledpximap.width(), scalledpximap.height(), scalledpximap);

33 Wy wietlamy zdj cie cd.. //Slot void PhotoItem::setCurrentPhoto(QString pathtofile) { path = pathtofile; updatepixmap(); update(rectangle); }

34 Logika galerii Klasa o nazwie CGallery Sloty: void on_nextbutton_clicked(); void on_prevbutton_clicked(); Sygna y void currentimage(qstring); void previmage(qstring); void nextimage(qstring); Publiczna zmienna QStringList filelist;

35 Pod czamy... Gui::Gui(...) { gallery = new CGallery(); photoitem = new PhotoItem( gallery->filelist.first()); photoitem->setx(100); photoitem->sety(100); scene->additem(photoitem); }

36 Efekty naszej pracy..

37 Pod czamy dalej... Gui::Gui { scene->additem(photoitem); connect(leftbutton, SIGNAL(clicked()), gallery, SLOT(on_prevButton_clicked())); connect(rightbutton, SIGNAL(clicked()), gallery, SLOT(on_nextButton_clicked())); connect(gallery, SIGNAL(currentImage(QString)), photoitem, SLOT(setCurrentPhoto(QString))); }

38 Co z pozosta ymi sygna ami? void Gui::setVisibleLeftButton(QString path) { if (path.isempty()) leftbutton->setvisible(false); } Gui::Gui(...) { connect(w, SIGNAL(prevImage(QString)), this, SLOT(setVisibleLeftButton(QString))); connect(w, SIGNAL(nextImage(QString)), this, SLOT(setVisibleRightButton(QString))); }

39 Jakub Bogacz Software Engineer Tieto, Patryk Górniak Software Engineer Tieto,