Minden sokat változott... Programozás alapjai II. (11. ea) C++ Grafikus felületek és a C++ Hogyan működnek? X display = munkahely felépítése

Minden sokat változott... Programozás alapjai II. (11. ea) C++ Grafikus felületek és a C++ Szeberényi Imre BME IIT

<[email protected]>

MŰEGYTEM 1782 C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

-1C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

Grafikus megjelenítő se volt mindig

Hogyan működnek ?

• Annak ellenére, hogy a 60-as években már volt grafikus megjelenítő elterjedésükre még várni kellett. (egér: 1963) • A mai értelemben vett grafikus felhasználói felületek (GUI) a 80-as években alakultak ki. • X Window, MS Windows, Mac OS, ...

• Objektum szemlélet (widget, gadget) • Eseményvezérelt (objektumok eseményekkel kommunikálnak) • A felhasználói felület tervezése és a program logikája gyakran elválik (külön módosítható) • Első elterjedt grafikus rendszer a UNIX szabványos grafikus felülete az X Window rendszer, amit objektum szemléletű, de nem OO nyelven írták (C-ben)

C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

-3-


© BME-IIT Sz.I.

2010.05.04.

-2-

-4-

X display = munkahely felépítése

X window rendszer fogalmai • Kliens = a szolgáltatást igénybe vevő. • Egy adott berendezés (gép) egyszerre elláthat szerver funkciókat is, és kliens programokat is futtathat. • X szerver = az X display-t működtető, a kliensek számára grafikus szolgáltatást nyújtó program.


© BME-IIT Sz.I.

2010.05.04.

-5-


© BME-IIT Sz.I.

2010.05.04.

-6-

1

X rendszer szoftver architektúrája

X szerver feladatai • Engedje meg több kliens egyidejű hozzáférését a display-hez. • Értelmezze a hálózati üzeneteket, amit a kliensek küldenek. • A kezelői inputot küldje el a kliens programnak. • Nyújtson kétdimenziós rajzolási primitíveket. • Kezeljen komplex adatstruktúrákat, mint pl. window, font, icon, cursor, grafikus kontextus stb, melyekre egyszerűen ID-vel lehet hivatkozni. C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

-7-

Eseményvezérelt alkalmazás


© BME-IIT Sz.I.

HOST:SERVER.SCR alakú azonosító stringgel történik, amit vagy explicit kap a megfelelő Xlib rutin, vagy az explicit megadás hiányában a DISPLAY környezeti változóból veszi. – HOST: A szervert futtató számítógép hálózati azonosítója (név vagy cím). – SERVER: Az adott hoston futó szerver azonosító száma (0. az első szerver). – SCR: A kívánt screen sorszáma (0. az első).

• Nem a program vezérli a felhasználót, hanem a felhasználó a programot

• Például: © BME-IIT Sz.I.

2010.05.04.

-8-

Kapcsolódás a szerverhez

• Inicializálás: Kapacsolódás a szerverhez, window-k létrehozása, szerver erőforrások lefoglalása és attribútumaik beállítása. • Eseményhurok: a programhoz érkező események feldolgozása.


2010.05.04.

-9-


Egyszerű X program

bubuka.iit.bme.hu:0.0 © BME-IIT Sz.I.

2010.05.04.

- 10 -

Események kezelése

int main() { Display *display; Window wMain; XEvent event; if ((display = XOpenDisplay(NULL)) == NULL) { fprintf(stderr, ”Can't connect\n");exit(1); } wMain = XCreateSimpleWindow(display, DefaultRootWindow(display), 0, 0, width, height, borderWidth, border, bacgkground);

XSelectInput(display, wMain, ExposureMask | KeyPressMask | ButtonPressMask | események StructureNotifyMask); XMapWindow(display, wMain); while(1) { XEvent

event;

kiválasztása

eseményhurok

XNextEvent(display, &event); switch (event.type) { case ConfigureNotify: ... break;

további inicializálások, gc, eseménymaszk, ablakok ... XMapWindow(display, wMain); események while(1) XNextEvent(display, &event); ....... kezelése XCloseDisplay(display);

események felismerése

} C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

- 11 -


© BME-IIT Sz.I.

2010.05.04.

- 12 -

2

Lehet egyszerűbben ?

Események kezelése /2 case Expose: ... XDrawString(display, wMain, gc, ..... ... break; rajzolás case KeyPress: case ButtonPress: XUnloadFont(display, font_info->fid); XFreeGC(display,gc); XCloseDisplay(display); exit(1); } }

• Az X toolkit intrinsic, mint "OO motor" szolgáltatásaira épülő toolkit segítségével. – Athena, OpenLook, Motif, CDE, KDE ...

• Objektum orientált (pl. C++) nyelvhez kapcsolódó könyvtárak / toolkitek alkalmazásával – Agar, CEGUI, CLX, dlib C++, FLTK, FOX, GLUI, GTK+, IUP, Juce Lgi, Qt, Quinta, Tk, TnFOX, Ultimate++, VCF, wxWidgets, YAAF, XForms, XVT

}

erőforrások felszabadítása C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

- 13 -

Toolkit


© BME-IIT Sz.I.

Core

– label, button, radiobutton, checkbox, editbox, buletinboard, scrollbar, stb.

Composite

• Az objektumok közös őssel rendelkeznek (widget, v. gadget). • Származtatással újabb objektumok hozhatók létre. • Az objektumok kommunikálnak az alkalmazással és az X szerverrel. © BME-IIT Sz.I.

2010.05.04.

- 15 -

Contraint

Label

WendorShell

Managed

PushButton

TopLevelShell

BuletinBoard


Set

new

Get

Callback

- 16 -

Transzl.

Widget

Widget

Widget

Események

Események

Események

osztály

X szerver

eseményhurok

© BME-IIT Sz.I.

2010.05.04.

Alkalmazás

hello = XtCreateManagedWidget("hello", xmLabelWidgetClass,topLevel, NULL, 0);


© BME-IIT Sz.I.

Komunikációs sémák

#include <stdio.h> #include <X11/Intrinsic.h> publikus header #include <Xm/Label.h> main(int argc, char *argv[]) { Widget topLevel, hello; topLevel = XtInitialize(argv[0], "Motifhello", NULL, 0, &argc, argv);

}

Primitive

WMshell

Motif hello

XtRealizeWidget(topLevel); XtMainLoop();

- 14 -

Motif toolkit hierarchia (részlet)

• Objektum típusokat definiál, melyekkel megvalósíthatók a szokásos GUI elemek


2010.05.04.

2010.05.04.

- 17 -


© BME-IIT Sz.I.

2010.05.04.

- 18 -

3

FOX toolkit • • • • •

FOX hello

C++ alapú átgondolt (...) kis méretű platform független (X, MS, Mac) számos ma szokásos megoldás

int main(int argc, char *argv[]){ FXApp application("Hello","FoxTest"); application.init(argc,argv); FXMainWindow *main=new FXMainWindow(&application, "Hello",NULL,NULL,DECOR_ALL);

application.create(); main->show(PLACEMENT_SCREEN);

© BME-IIT Sz.I.

}

2010.05.04.

- 19 -

eseményhurok


FOX eseménykezelés

esemény

• Függvények egységes üzenetformátumot kapnak: – long cbFv(FXObject* sender, FXSelector sel, void *ptr); 2010.05.04.

- 21 -


Objektum hierarchia példa MouseListener

2010.05.04.

- 20 -

• C++ alapú, jobban kihasználja a C++ lehetőségeit • átgondolt • kis méretű • platform független (X, MS, Mac) • makróktól mentes • OpenGL integráció • GNU http://www.rawmaterialsoftware.com

FXDEFMAP(myWindow) myWindowMap[]={ FXMAPFUNC(SEL_COMMAND, myWindow::ID_QUIT, myWindow::cbFv),

© BME-IIT Sz.I.

© BME-IIT Sz.I.

JUCE toolkit

• Események kezelését makrókkal felépített táblák segítik. -> callBack függvények


szerver oldalon

return application.run();

http://www.fox-toolkit.org/ C++ programozási nyelv

üzenet

new FXButton(main,"&Hello Fox!", NULL, &application, FXApp::ID_QUIT);

– perzisztencia, – úszó dobozok, – buborék tippek

© BME-IIT Sz.I.

2010.05.04.

- 22 -

JUCE hello class JUCEHelloApplication :public JUCEApplication { HelloWorldWindow* helloWorldWindow; public:

MessageListener

void initialise (const String& commandLine) { helloWorldWindow = new HelloWorldWindow(); }

Component TopLevelWindow

void shutdown() { delete helloWorldWindow; } };

ResizableWindow

START_JUCE_APPLICATION (JUCEHellodApplication)

DocumentWindow C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

- 23 -


© BME-IIT Sz.I.

2010.05.04.

- 24 -

4

FLTK toolkit

JUCE hello /2 class HelloWorldContentComponent :public Component { public: void paint (Graphics& g) { // paint üzenet g.fillAll (Colours::white); g.setColour (Colours::black); interfész g.setFont (20.0f, Font::bold); jelleg g.drawText (T("Hello World!"), 0, 0, getWidth(), getHeight(), Justification::centred, false); } }; class HelloWorldWindow :public DocumentWindow { public: HelloWorldWindow() :DocumentWindow ( T("Hello World"), Colours::yellow, DocumentWindow::allButtons, true ) { setContentComponent ( new HelloWorldContentComponent()); setVisible (true); }; C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

- 25 -

• C++ alapú, kihasználja a C++ lehetőségeit • kis méretű • FLUID (Fast Light User-Interface Designer) • platform független (X, MS, MAc) • makróktól mentes • OpenGL integráció, GLUT kompatibilis • GNU • uCFLTK mikrokontrollerekhez http://www.fltk.org C++ programozási nyelv

FLTK hello

© BME-IIT Sz.I.

2010.05.04.

• • • • • •

– Phyton, C#, Ruby, Ada, Perl, PHP, Haskell

• Migrációs lehetőségek (MFC, Motif) http://www.qtsoftware.com - 27 -


© BME-IIT Sz.I.

2010.05.04.

- 28 -

2010.05.04.

- 30 -

MS Windows • Szintén a 80-as évek elején indult • Hasonló alapelvek:

#include #include int main(int argc, char *argv[]) { QApplication app(argc, argv);

– eseményvezérlés – raszter orientált grafika – objektum orientált szemlélet

QPushButton hello("Hello world!"); connect(&hello, SIGNAL(clicked()),&app, SLOT(quit())); hello.resize(100, 30);

• Fő különbségek: – X nem része az OS-nek – X hálózatorientált – X szerver/kliens megközelítés

hello.show(); return app.exec(); }

© BME-IIT Sz.I.

- 26 -

C++ alapú kiegészítő utasítások → előfeldolgozó platform független (X, MS, MAc) OpenGL integráció, GLUT kompatibilis 2009-től LGPL, QPL, és üzleti licence számos további nyelv:

Qt hello


2010.05.04.

Qt toolkit

class Hello :public Fl_Window { static void quit(Fl_Widget*,void*) {// privát m. exit(0); } public: Hello(int w, int h, const char *n=0) :Fl_Window(w, h, n) { Fl_Button *bt = new Fl_Button(10, 10, 100, 25, "Exit"); bt->callback(quit); // cb. fv. összerendelés callback(quit); show(); // megjelenítés } }; int main() { Hello hel(400, 200, "Hello"); return Fl::run(); // eseménykezelés indul } C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

- 29 -


© BME-IIT Sz.I.

5

MS windows program szerkezete

MS windows eseménykezelés

WinMain(......) { //inicializálások // ablak mint "objektum" regisztrálása // menü, kurzor, icon, méret, szín, eseménykezelő, ... RegisterClass(.....); // létrehozás InitInstance(.....) ; // üzenetek feldolgozása: while (GetMessage(&msg, NULL, 0, 0)) { TranslateMessage(&msg); DispatchMessage(&msg); } }

WndProc(...) { .... switch (message) { case WM_PAINT: hdc = BeginPaint(hWnd, &ps); .... EndPaint(hWnd, &ps); break; case WM_DESTROY: PostQuitMessage(0); break; ..... } V. Studio: new project → visual c++ → win32 project


© BME-IIT Sz.I.

2010.05.04.

- 31 -


Mire jó még a C++?

2010.05.04.

- 33 -

callBack újra GombCallback

Gomb

végpontok

callBack()

cb.obj.ref.

© BME-IIT Sz.I.

2010.05.04.

- 34 -

class GombCallback { // callback funkcióhoz public: virtual void callBack() = 0; // virtuális cb. függvény }; class Gomb { // felhasználói felület objektuma GombCallback &cb; // objektum referencia public: Gomb (GombCallback &t) :cb(t) {}// referencia inic. void Nyom() { cb.callBack(); } // megnyomták .... };

Virtuális fv.

callBack() Könnyű ilyenné konvertálni

Funkciójában ebből származik


Kapcsoló megvalósítása

Drót

Kapcsoló

- 32 -

WApplication *createAppl(const WEnvironment& env){ WApplication *appl = new WApplication(env); appl->setTitle("Hello world!"); appl->root()->addWidget( new WText(L"
Hello, World!
")); WPushButton *Button = new WPushButton(L"Quit", appl->root()); Button->clicked.connect(SLOT(appl, WApplication::quit)); return appl; } int main(int argc, char **argv){ return WRun(argc, argv, &createApplication); }

http://www.webtoolkit.eu © BME-IIT Sz.I.

2010.05.04.

Wt hello

• Annak ellenére, hogy még mindig változó nyelv, eléggé széles körben használják. • Egy érdekes példa a Wt (Web Toolkit) • Segítségével teljesen C++-ban írhatunk meg egy web alkalmazást, ami minden szokásos dolgot tartalmazhat pl. sessionkezelést is. • Nem kell ismerni egyéb technológiát mint pl: HTML, CSS, Java, php, stb.


© BME-IIT Sz.I.

Megvalósítás C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

- 35 -


© BME-IIT Sz.I.

2010.05.04.

- 36 -

6

signal/slot mechanizmus

Kapcsoló megvalósítása/2 class Kapcsolo :public Drot, public GombCallback { int be; // állapot public: void ki(); void be(); void callBack() { if (be) ki(); else be(); } // callback }; ... Kapcsolo k1; Gomb g1(k1); // kapcsoló és a callBack fv. összerendelése


© BME-IIT Sz.I.

2010.05.04.

Egyes könyvtárak (boost, Qt) külön mechanizmust vezettek be a callBack függvények és a callback horgok (callBackHook) összerendelésére. Pl: struct Hello { void operator()() { cout << "Hello" << endl; } }; boost::signal sig; Hello hello; sig.connect(hello); sig(); - 37 -


signal/slot mechanizmus/2

© BME-IIT Sz.I.

2010.05.04.

- 38 -

Fejlesztés támogatása

• Ez a mechanizmus világosabban lehetővé teszi a callBack függvények összerendelését. • Paraméterezhető pl:

• • • •

boost::signal sig; cout << sig(1, 2);

Sok állomány → egy alkalmazás Hogyan és melyiket kell lefordítani? Melyik változat az legutolsó? IDE (integrált fejlesztő eszköz) – fordítást belső eszközzel támogatja (nyelvet ismeri) – verziókövetést külső eszközzel

• Önálló univerzális eszközök – nem csak az adott nyelvhez C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

- 39 -


make

- 40 -

Makródefiníció: makró_név = string Szabályok: cél1 [cél2] :[:] [feltétel1...] [;parancsok] [#...] [parancsok][#...]

– makró definíciók, – függőségi információk (szabályok és implicit szabályok) – végrehajtható parancsok – megjegyzések © BME-IIT Sz.I.

2010.05.04.

Makefile szerkezete

• Egy szöveges leírás (Makefile), és az állományok módosítási ideje alapján végrehajtja cél (program, dokumntáció stb.) előálításához szükséges parancsokat. • Makefile:


© BME-IIT Sz.I.

2010.05.04.

- 41 -


© BME-IIT Sz.I.

2010.05.04.

- 42 -

7

make példa prog: cél x.o:

make példa/2

feltételek x.o y.o z.o cc x.o y.o z.o -o prog x.c x.h cc -c x.c y.c x.h cc -c y.c z.c cc -c z.c

y.o: z.o:

OBJECTS = x.o y.o z.o HEADS = x.h prog: $(OBJECTS) $(CC) $(OBJECTS) -o prog $(OBJETS): $(HEADS)

parancs

.c.o: $(CC) -c $< implicit szabály miatt a .o-k egyértelműen előállíthatók.

!!!!!! A parancsok előtt van !!!!! C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

- 43 -

make változatok

© BME-IIT Sz.I.

© BME-IIT Sz.I.

2010.05.04.

- 44 -

Verziókezelő rendszerek • Együtt kezelik különböző verziókat. Nincs szükség számtalan, változatos nevű állományra. • Vannak operációs rendszerek, melyek ehhez támogatást adnak, de.... • Segítik a verziók adminisztrálását (kötelező megjegyzés)

Számos változata és kiegészítése van: • make (eredeti) • BSD make • GNU make • nmake (Microsoft) • CMake – cross platform make



– SCCS – RCS – CVS – SVN 2010.05.04.

- 45 -

Verziókezelő rendszerek/2


(admin, get, delta) (rcs, ci, co) (init, checkout, add, update, commit, ...) (hasonlít a cvs-hez, webes felület is) © BME-IIT Sz.I.

2010.05.04.

- 46 -

Verziókezelő rendszerek/3

Jellemző életciklus: R.L.b.l

• SCCS – Source Code Control System – fájl szemlélet, AT&T implementáció

1.3.2.2

1.3.2.1

• RCS – Revision Control System – fáj szemlélet, GNU implementáció

1.1

1.2

1.3

1.3.1.1

2.1

• CVS – Concurrent Versions System

4.12

– projekt szemlélet, GNU implementáció – hálózatorientált, kliens-szerver felépítés is

• SVN – Subversion

1.3.1.2

– CVS-hez hasonló, talán átgondoltabb, projekt szemlélet, hatékonyabb hálózatkezelés, kliensszerver felépítés C++ programozási nyelv

© BME-IIT Sz.I.

2010.05.04.

- 47 -


© BME-IIT Sz.I.

2010.05.04.

- 48 -

8

CVS ill. SVN a gyakorlatban 1. 2. 3. 4. 5. 6. 7.

SVN példa

install, tár (repository) létrehozása, jogok beállítása szerver indítása (nem feltétlenül kell) projekt állományainak létrehozása import checkout commit ha van konfliktus: – – –

update resolved commit


© BME-IIT Sz.I.

2010.05.04.

- 49 -

Hozzunk léte közösen egy programot, ami kiírja a résztvevők nevét. A projekt kezdő változata már svn alá van vonva (1-4 lépések). repository elérése: http://svn.iit.bme.hu/proga2 könyvtár (modul) neve: nevsor Jani is be szeretné írni a listába a nevét: jani: svn checkout http://svn.iit.bme.hu/proga2/nevsor Password for 'jani': A nevsor/adat.h A nevsor/adat.cpp A nevsor/Makefile A nevsor/nevsor.cpp Checked out revision 6. C++ programozási nyelv

SVN példa/2

jani: svn diff -r HEAD:PREV itt megkapja a két verzió közötti eltérést C++ programozási nyelv

2010.05.04.

jani: svn resolved nevsor.cpp Resolved conflicted state of 'nevsor.cpp' jani: svn commit –m "Jani beirva" Sending nevsor.cpp Transmitting file data . Committed revision 8. - 51 -


SVN kulcsszavak

2010.05.04.

- 52 -

http://svn.iit.bme.hu/proga2 ill. proga2_user hozzáférés: akinek van ural2 témaszáma jelszó: ural2: ~szebi/bin/svn_passwd svn kliens az ural2-n: ~szebi/bin/svn grafikus svn kliens: http://tortoisesvn.net/ http://www.syntevo.com/smartsvn/index.html pluginek: Eclipse, JDeveloper, NetBeans, Visual Studio hasznos linkek: http://subversion.tigris.org http://svnbook.red-bean.com http://svn.iit.bme.hu

/** * Nagy nevsor svn-nel * $Date: 2008-05-03 11:11:22 +0200 (Sat, 03 May 2008) $ */ © BME-IIT Sz.I.

© BME-IIT Sz.I.

SVN homokozó az IIT-n

Célszerű használni kulcsszavakat, így a a forrásban automatikusan frissített kommentek helyezhetők el. − Date, LastChangedDate − Revision, LastChangedRevision, Rev − Author, LastChangedBy − HeadURL, URL. − Id Helyettesítésüket engedélyezni kell pl: svn propset svn:keywords "Date"


- 50 -

konfliktus feloldása: nevek.push_back(new Adat("Kápolnai Richárd", "K2B", 0)); <<<<<<< .mine nevek.push_back(new Adat("Jani Jani", "K1X", 0)); ======= nevek.push_back(new Adat("Nagy Ákos", "K1D", 0)); >>>>>>> .r7

jani: svn update C nevsor.cpp Updated to revision 7. jani: ls nevsor* nevsor.cpp nevsor.cpp.mine nevsor.cpp.r6 nevsor.cpp.r7 jani: vi nevsor.cpp

© BME-IIT Sz.I.

2010.05.04.

SVN példa/3

jani: cd nevsor jani: vi nevsor.cpp jani: svn commit –m "Jani beirva" Sending nevsor.cpp svn: Commit failed (details follow): svn: Your file or directory 'nevsor.cpp' is probably out-of-date ... jani: svn log -r HEAD itt megkapja a legutolsó log üzenetet

© BME-IIT Sz.I.

2010.05.04.

- 53 -


© BME-IIT Sz.I.

2010.05.04.

- 54 -

9

Minden sokat változott... Programozás alapjai II. (11. ea) C++ Grafikus felületek és a C++ Hogyan működnek? X display = munkahely felépítése

Recommend Documents

Hello, World!