Áttérés egy vizuális/grafikus program- fejlesztői környezetre (minimális tudnivalók) Szlávi Péter ELTE Informatika Szakmódszertani Csoport

Slides:



Advertisements
Hasonló előadás
Grafikus felhasználó felület Windows alatt
Advertisements

Grafikus tervezőrendszerek programozása 10. előadás.
A Windows használata Bevezetés.
Delphi A VB felhasználó barátságát kombinálja a C++ tág lehetőségeivel és sebességével. RAD - Rapid Application Development; „Vizuális nyelv”; 4GL nyelv:
1. WINDOWS BEVEZETÉS.
A Java programozási nyelvSoós Sándor 1/17 Java programozási nyelv 8. rész – Grafikus felhasználói felület Nyugat-Magyarországi Egyetem Faipari Mérnöki.
Az algoritmizálás oktatás egy lehetséges útja: Visual Basic
Operációs rendszerek Bevezetés.
© Kozsik Tamás Beágyazott osztályok A blokkstrukturáltság támogatása –Eddig: egymásba ágyazható blokk utasítások Osztálydefiníciók is egymásba.
Delphi A VB felhasználó barátságát kombinálja a C++ tág lehetőségeivel és sebességével. A VB felhasználó barátságát kombinálja a C++ tág lehetőségeivel.
Csala Péter ANDN #4. 2 Tartalom  C# - ban előre definiált típusok  Változók  Változókkal műveletek  Elágazás  Ciklus.
UNIVERSITY OF SZEGED D epartment of Software Engineering UNIVERSITAS SCIENTIARUM SZEGEDIENSIS Programozás II. 6. Gyakorlat const, static, dinamikus 2D.
STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}
Grafika a programban Készítette: Pető László. Bevezetés Valójában nem a célobjektumra rajzolunk, hanem annak festővászon területére (canvas). Csak olyan.
A Windows grafikus felülete
Microsoft Windows A Windows fejlődése, általános jellemzése – 2. dia
Alapok 2013/2014, őszi szemeszter gyakorlati foglalkozás Automatizálási tanszék.
1. IS2PRI2 02/96 B.Könyv SIKER A KÖNYVELÉSHEZ. 2. IS2PRI2 02/96 Mi a B.Könyv KönyvelésMérlegEredményAdóAnalitikaForintDevizaKönyvelésMérlegEredményAdóAnalitikaForintDeviza.
Delphi programozás alapjai
V 1.0 Szabó Zsolt, Óbudai Egyetem, Haladó Programozás Eseménykezelés ismétlés Névtelen metódusok (anonymous methods)
Készítette: Keszthelyi Zsolt
Kliensoldali Programozás
Delphi programozás Delphi programozás SRTNB előadás - Borland Delphi – fontosabb komponensek tárgyalása Nagyváradi Anett.
Delphi programozás alapjai Nagyváradi Anett PTE PMMK MIT.
Delphi programozás SRTNB előadás – a fejlesztőkörnyezet
Delphi programozás 8. ELŐADÁS ADO ActiveX Data Objects.
Egyszerű webes alkalmazás fejlesztése
VFP Form programozás Form szerkesztő elemei vezérlő elemek
Multimédiás programok készítése Macromedia Director rendszerben 2. előadás Készítette: Kosztyán Zsolt
V 1.0 OE-NIK HP 1 Programozási Paradigmák és Technikák Eseménykezelés Névtelen metódusok (anonymous methods)
V 1.0 ÓE-NIK, Programozás I. A Microsoft Visual Studio 2010 használata.
Formanyomtatványok létrehozása Dreamweaverrel E-business 6. előadás.
Elemzések, jelentések készítése
Szabó Péter Szenzor rendszer PC oldali grafikus kezelő felületének tervezése és megvalósítása Önálló laboratórium beszámoló Intelligens rendszerek BSc.
Alprogramok deklarációja, definíciója és meghívása Páll Boglárka.
Vizuális alkalmazások a FoxProban Páll Éva Boglárka.
1.4. Fordítás, szerkesztés, az objektumkönyvtár használata.
1 Hernyák Zoltán Programozási Nyelvek II. Eszterházy Károly Főiskola Számítástudományi tsz.
1 Hernyák Zoltán Programozási Nyelvek II. Eszterházy Károly Főiskola Számítástudományi tsz.
1 Hernyák Zoltán Web: Magasszintű Programozási Nyelvek I. Eszterházy.
Delphi Készítette: Rummel Szabolcs Elérhetőség:
A képernyő kezelése: kiíratások
APEX BMF, II. félév.
Turbo Pascal Indítás: C:\LANGS\Turbo Pascal Turbo Pascal.
Visual Basic 2008 Express Edition
A gyakorlatok munkakörnyezete
Elnevezések, ciklusok, feltételvizsgálat
1. Feladat Hozzunk létre egy olyan programot amely számokat ír ki és a felhasználónak időre be kell gépelni ezeket.
HTML 2. Űrlapok
HF MINTA 2012/2013. ősz. HF Minta  Objektum-orientált program  „Adatvezérelt” alkalmazás írása  Fájl kezelés (olvasás, írás)  Menü készítése  5-6.
További lehetőségek Weblapok programozása. Nyelvek csoportosítása Leíró nyelv (HTML, XML, …) Programozási nyelv  Szerver oldali (PHP, ASP, …)  Kliens.
RAD Studio XE5: menük felépítése
Fontos tudnivalók A MATLAB egy fajta objektummal dolgozik (Mátrix)
Számítógépes Grafika 4. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
A Visual Basic és a programozás oktatása
Java web programozás 5..
Grafikus programozás Készítette: Csernok László
Szebb és használhatóbb programok Vezérlőelemek dinamikus felhelyezése.
1. TÖBBABLAKOS APPLIKÁCIÓK
TÁMOP /1-2F Informatikai gyakorlatok 11. évfolyam Windows Forms alkalmazás készítése Czigléczky Gábor 2009.
TÁMOP /1-2F JAVA programozási nyelv NetBeans fejlesztőkörnyezetben I/13. évfolyam Osztályok, objektumok definiálása és alkalmazása. Saját.
Alapok Gyakorlat 2015/16 őszi szemeszter Automatizálási tanszék.
Erőforrások strukturálása Készítette: Szentirmai Róbert (minden jog fenntartva)
LA C++ programozás Windows környezetben Alkalmazott Informatikai Tanszék MŰSZAKI INFORMATIKA dr.Dudás László 24./0. lA menü elkészítése lA programkód megírása.
Alkalmazásfejlesztés gyakorlat
Cím elrendezés alcím.
JavaScript a böngészőben
Folyamatok.
B M Java Programozás 5. Gy: Java alapok IT A N Adatkezelő 1.rész
FORMOK, ABLAKOK.
Előadás másolata:

Áttérés egy vizuális/grafikus program- fejlesztői környezetre (minimális tudnivalók) Szlávi Péter ELTE Informatika Szakmódszertani Csoport

 Áttérés egy 4GL programfejlesztői környezetre2 Tartalom 11 A 4GL lényege 1.1 Egy mondatban… 1.2 A A grafikus kezelőfelület elemei és „szervei” 1.3 A működés „filozófiája” 22 Ablakkellékek és események 33 Grafikus környezet és OOP 44 Az „újszerű” programozási stílusról 55 Programfelépítés 66 GUI 77 Praktika 7.1 A kezdő lépések 7.2 A legfontosabb grafikus eszközök osztályai a palettákon 7.3 Pozitív és negatív praktikák

 Áttérés egy 4GL programfejlesztői környezetre3 1 A 4GL lényege ?4GL? 1.1 Egy mondatban… Grafikus (operációs rendszer) környezeten keresztüli programfejlesztés.

 Áttérés egy 4GL programfejlesztői környezetre4 1 A 4GL lényege 1.2 A grafikus kezelőfelület elemei és „szervei” Alapelemek Beavatkozó szervek Elvárások

 Áttérés egy 4GL programfejlesztői környezetre5 1 A 4GL lényege 1.3 A működés „filozófiája” 1.a „főprogram” feladata: ablak felépítése, kirajzolása (minden ablakkellékkel), és ese- ményfigyelés, továbbá valamilyen esemény esetén a megfelelő eseménykezelő aktivi- zálása. 2.az eseménykezelő elvégzi az eseménykor végrehajtandó feladatokat.

 Áttérés egy 4GL programfejlesztői környezetre6 2 Ablakkellékek és események Egy „szerényen dekorált” ablak címkesor; bezáró gomb, minima- lizáló gomb, teljes képernyőre kinyitó gomb; gördítő sávok; keret a méretezéshez.

 Áttérés egy 4GL programfejlesztői környezetre7 2 Ablakkellékek és események Egy „kellékekben gazdag” ablak Füllel kiválasztható oldalak; konstans szövegek; lenyíló listák; választó- és egyéb gombok; kép. A beállítás sorrendje a felhaszná- lóra van bízva.

 Áttérés egy 4GL programfejlesztői környezetre8 3 Grafikus környezet és OOP ? OOP ? grafikus „kellékek” objektumok A grafikus „kellékek” (ablakok, ikonok, gombok, menük stb.) objektumok. Ui.: oRendelkeznek számos jellemzővel. oTartoznak hozzájuk események által kiváltott, fela- datfüggetlen és -függő tevékenységek.

 Áttérés egy 4GL programfejlesztői környezetre9 4 Az „újszerű” programozási stílusról Mennyiben más ez? megterveznikommunikációs felületét 1. meg kell tervezni az alkalmazás kommunikációs felületét (ablakok, ablakösszetevők), azaz a GUI-t (osztály + „objektum-topológia”: mi, hol, mekkora, milyen … legyen); eseményeket 2.a kezeléssel összefüggő (várt) eseményeket (mi, mikor aktivizálódjon), és kiviteleznieseménykezelőkműködését 3. kivitelezni a megfelelő eseménykezelők működését (mi, hogyan működjön).

 Áttérés egy 4GL programfejlesztői környezetre10 5 Programfelépítés A szükséges (leíró) fájlok: főprogramMaga a főprogram (forrás és kód). osztályAz egyes ablakkellékek osztályát (leírását és eseménykezelőit) tartalmazó programegységek: unitok (forrás és kód). típusokTovábbi, a hagyományos programozás is megkívánta, legfőképpen típusokat (pl. listát, sort stb.) megvalósító programegységek: unitok (forrás és kód).

 Áttérés egy 4GL programfejlesztői környezetre11 5 Programfelépítés Továbbiak: AblakleíróAblakleíró (minden egyeshez, külön-külön): mik és milyen jellemzőkkel vannak az adott ablakon. MenüleíróMenüleíró (minden egyes ablakra került menü- höz): milyen a menüstruktúra, mely eljárások tartoznak az egyes menüpontokhoz.

 Áttérés egy 4GL programfejlesztői környezetre12 5 Programfelépítés 1. példa: projekt_0.exe: az alkalmazás maga projekt_0.lpi: a projekt xml leírása unit1.lfm, ~.lrs: az osztály leírása (LazarusForm/-Resource) unit1.pas: az osztály Pascal leírása projekt_0.lpr az alkalmazás pascal főprogramja

 Áttérés egy 4GL programfejlesztői környezetre13 5 Programfelépítés unit1.lfm: object Form1: TForm1 Caption = '0. programom' ClientHeight = 300 ClientWidth = 400 PixelsPerInch = 96 Position = poDesktopCenter HorzScrollBar.Page = 399 VertScrollBar.Page = 299 Left = 290 Height = 300 Top = 149 Width = 400 end

 Áttérés egy 4GL programfejlesztői környezetre14 5 Programfelépítés unit1.lrs: object Form1: TForm1 Caption = '0. programom' ClientHeight = 300 ClientWidth = 400 PixelsPerInch = 96 Position = poDesktopCenter HorzScrollBar.Page = 399 VertScrollBar.Page = 299 Left = 290 Height = 300 Top = 149 Width = 400 end { This is an automatically generated lazarus resource file } LazarusResources.Add('TForm1','FORMDATA',[ 'TPF0'#6'TForm1'#5'Form1'#7'Caption' +#6#12'0. programom'#12'ClientHeight' +#3','#1#11'ClientWidth'#3#144#1#13 +'PixelsPerInch'#2'`'#8'Position' +#7#15'poDesktop' +'Center'#18'HorzScrollBar.Page' +#3#143#1#18'VertScrollBar.Page' +#3'+'#1#4'Left'#3'"'#1#6'Height' +#3','#1#3'Top'#3#149#0#5'Width' +#3#144#1#0#0 ]);

 Áttérés egy 4GL programfejlesztői környezetre15 5 Programfelépítés projekt_0.lpr: {$mode objfpc}{$H+} uses Interfaces, // this includes the LCL widgetset Forms { add your units here }, Unit1; begin Application.Initialize; Application.CreateForm(TForm1, Form1);Form1 Application.Run; end.

 Áttérés egy 4GL programfejlesztői környezetre16 5 Programfelépítés unit1.pas: unit Unit1; {$mode objfpc}{$H+} interface uses Classes, SysUtils, LResources, Forms, Controls, Graphics, Dialogs; type { TForm1 } TForm1 = class(TForm) private { private declarations } public { public declarations } end; »»» »»» var Form1: TForm1; implementation { TForm1 } initialization {$I unit1.lrs}unit1.lrs end.

 Áttérés egy 4GL programfejlesztői környezetre17 5 Programfelépítés 2. példa: az előbbi minimálisan bővítve

 Áttérés egy 4GL programfejlesztői környezetre18 5 Programfelépítés unit1.lfm: object Form1: TForm1 Caption = '0. programom' … Width = 400 object Vege: TButton BorderSpacing.OnChange = nil BorderSpacing.OnChange = nil Caption = 'Vége' Caption = 'Vége' OnClick = VegeClick OnClick = VegeClick TabOrder = 0 TabOrder = 0 Left = 295 Left = 295 Height = 34 Height = 34 Hint = 'Kilépés' Hint = 'Kilépés' Top = 243 Top = 243 Width = 73 Width = 73 end end end

 Áttérés egy 4GL programfejlesztői környezetre19 5 Programfelépítés unit1.pas: unit Unit1; {$mode objfpc}{$H+} interface uses Buttons Classes, SysUtils, LResources, Forms, Controls, Graphics, Dialogs, Buttons; type { TForm1 } Vege: TButton; TForm1 = class(TForm) Vege: TButton; procedure VegeClick(Sender: TObject); procedure VegeClick(Sender: TObject); private { private declarations } public { public declarations } end; »»» »»» var Form1: TForm1; implementation { TForm1 } procedure TForm1.VegeClick( Sender: TObject); begin ShowMessage('Sikeresen kilépett.'); close end; initialization {$I unit1.lrs} end.

 Áttérés egy 4GL programfejlesztői környezetre20 5 Programfelépítés 3. példa: menütmemó „tisztességesebb”, klasszikus alkalmazás, amely menüt és két „memó”-t tartalmaz, de semmi „feladatfüggőt” elvégzőt nem; a menüpontok is éppen csak jelzik az elvégzendő részfeladatot: beolvasás, feldolgozás, kiírás:

 Áttérés egy 4GL programfejlesztői környezetre21 5 Programfelépítés Néhány screenshot a futásáról:

 Áttérés egy 4GL programfejlesztői környezetre22 5 Programfelépítés

 Áttérés egy 4GL programfejlesztői környezetre23 5 Programfelépítés unit1.lfm: object EgyszeruEsTipikus: TEgyszeruEsTipikus Caption = 'EgyszeruEsTipikus' ClientHeight = 280 ClientWidth = 400 Menu = MainMenu1 … object LabelBe: TLabel BorderSpacing.OnChange = nil Caption = 'Paraméterek:' Color = clNone Left = 21 Height = 17 Top = 30 Width = 67 end … object MemoBe: TMemo BorderSpacing.OnChange = nil Lines.Strings = ( 'Ide kerülnek a beolvasott ' 'paraméterek.' '1 paraméter = 1 sor.' ) ReadOnly = True ScrollBars = ssAutoBoth TabOrder = 0 Left = 21 Height = 206 Hint = 'Paraméterértékek' Top = 54 Width = 165 End … object MainMenu1: TMainMenu object MenuItem1: TMenuItem Caption = '&Vezérlés' object MenuItem4: TMenuItem Caption = ' Paraméter&beolvasás ' ShortCut = OnClick = MenuItem4Click end … end

 Áttérés egy 4GL programfejlesztői környezetre24 5 Programfelépítés unit1.pas: unit Unit1; {$mode objfpc}{$H+} interface uses MenusStdCtrls … Menus, StdCtrls; type { TEgyszeruEsTipikus } TEgyszeruEsTipikus = class(TForm) LabelBe: TLabel; LabelBe: TLabel; MemoBe: TMemo; MemoBe: TMemo; LabelKi: TLabel; LabelKi: TLabel; MemoKi: TMemo; MemoKi: TMemo; MainMenu1: TMainMenu; MainMenu1: TMainMenu; MenuItem1: TMenuItem; (* Vezérlés -- Főmenü *) MenuItem1: TMenuItem; (* Vezérlés -- Főmenü *) MenuItem4: TMenuItem; (* Paraméterbeolvasás *) MenuItem4: TMenuItem; (* Paraméterbeolvasás *) … procedure MenuItem4Click( Sender: TObject); procedure MenuItem4Click( Sender: TObject); … private { private declarations } public { public declarations } end; var EgyszeruEsTipikus: TEgyszeruEsTipikus; implementation { TEgyszeruEsTipikus } procedure TEgyszeruEsTipikus.Menu Item4Click(Sender: TObject); (* Paraméterbeolvasás *) (* Paraméterbeolvasás *)begin (* itt olvassuk be a paramétereket *) (* itt olvassuk be a paramétereket *) MenuItem2.Enabled:=True; (* a Feldolgozás most már kiválasztható *) MenuItem2.Enabled:=True; (* a Feldolgozás most már kiválasztható *) MenuItem6.Enabled:=False; (* Paraméterbeovasás után az Ered- ménykiírás nem választható ki *) MenuItem6.Enabled:=False; (* Paraméterbeovasás után az Ered- ménykiírás nem választható ki *) ShowMessage('A paramétereket beolvastuk.'); ShowMessage('A paramétereket beolvastuk.'); end; … initialization {$I unit1.lrs} end.

 Áttérés egy 4GL programfejlesztői környezetre25 6 GUI A GUI „munka közben”: Menü- és eszköz-sor Object inspector Source editor Messages Form

 Áttérés egy 4GL programfejlesztői környezetre26 7 Praktika 7.1 A kezdő lépések 1.A Lazarus elindítása 2.New + Application 3.Az eszközpalettáról kiválasztjuk a kívánt (grafikus) eszközöket, 4.beállítjuk kezdő állapotukat, 5.kiválasztjuk a kívánatos eseményeket, s elkészítjük az eseménykezelő eljárás kódját, 6.kimentjük (azaz Save As a megfelelő alkönyvtárba) 7.lefordítjuk, futtatjuk (Run + Run = F9)

 Áttérés egy 4GL programfejlesztői környezetre27 7 Praktika 7.2 A legfontosabb grafikus eszközök osztá- lyai a palettákon Standard komponens-paletta: TMain, TButton, TLabel, TEdit, TMemo, TCheckBox, TCheckGroup, TListbox, TRedioButton, TRadioGroup

 Áttérés egy 4GL programfejlesztői környezetre28 7 Praktika Additional komponens-paletta: TStringGrid – szövegek mátrixos elrendezésben Common Control komponens-paletta: TPageControl – fülekkel lapozható „füzet”

 Áttérés egy 4GL programfejlesztői környezetre29 7 Praktika 7.3 Pozitív és negatív praktikák … Lazarus „nem-szeretemségei, szerencsét- lenségei” és egyéb tanácsok … Saját névkonvenció (pl. lbBe: TLabel, mmBe:TMemo) Ha lehet, ne nyomkövessünk! Utólag ne változtassunk a kontrolok nevén! Fordítás (nyomkövetés) közben nem tanácsos a formot mozgatni (minimalizálni)!