Á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)!