Delphi - Menük használata IntraWeb-es alkalmazásokban

IntraWeb 5. rész

forráskód letöltése
Ebben a részben a menük készítésével és az objektumok dinamikus létrehozásával foglalkozunk. Megismerkedünk az IWMenu komponens használatával. Készítünk egy alkalmazást, amelyben nyomógombokat, CheckBox-okat és címkéket hozunk létre, dinamikusan. A komponensek megjelenítését pedig menüből vezéreljük.
Hozzunk létre egy új IntraWeb Stand Alone Application-t. A View Unit ikon segítségével válasszuk ki az IWUnit1-et.
IntraWeb-es menü létrehozására az IW Standard paletta IWMenu komponense szolgál. Ez a komponens azonban nem képes önálló módon létrehozni egy menüt. A menüket ugyanúgy kell megszerkesztenünk, mint eddig. Helyezzünk el a formMain-en egy MainMenu komponenst, a Standard palettáról. Kattintsunk duplán a komponensen, majd hozzuk létre a szükséges menüpontokat.
A főmenü álljon most két menüpontból: Home, Komponensek. A Home-on belül legyen egy Nyitó oldal menüpont. A Komponensek menüben a következő menüpontok szerepeljenek: Button, Label, CheckBox.
Miután megszerkesztettük a menüt, helyezzünk el a Form-on az IW Standard palettáról egy IWMenu komponenst. AttachedMenu tulajdonságában adjuk meg a MainMenu1 objektumot. Ezáltal az IWMenu1 a MainMenu1 tartalmát fogja megjeleníteni. Az IWMenu komponens funkciója, hogy meghatározza a weblapon a menü helyét, valamint lehetőséget biztosítson annak formázására.
Ellentétben a hagyományos MainMenu komponenssel, az IWMenu bárhol elhelyezhető a weblapon. Ez azt jelenti, hogy akár a lap közepén is készíthetünk egy főmenüt.
Az almenüpontok tulajdonságait a MenuItemStyle tulajdonságban állíthatjuk be. Az itt megadott beállítások az összes almenüpontra érvényesek.
Az Animation értékét igazra állítva a menü fokozatosan jelenik meg. A Border tulajdonság értéke szabályozza, hogy a menüpont be legyen keretezve, vagy nem. A Color értéke a menüpontok háttérszínét jelenti. A HighLightColor és HighLightTextColor annak a menüpontnak a háttér és betű színét jelenti, amely éppen az egérkurzor alatt van.
A fő menüpontok tulajdonságait a MenuStyle tulajdonságon keresztül módosíthatjuk. Ez ugyanolyan lehetőségeket biztosít, mint a MenuItemStyle.
Az Orientation értékének módosításával lehetőségünk van vízszintes és függőleges menük használatára is. Amikor ennek értékét módosítjuk, az előbb említett MenuItemStyle és MenuStyle tulajdonságok értékét nekünk kell módosítanunk, úgy, hogy minden menüpont elférjen.
Az olyan fő menüpontok, amelyek nem tartalmaznak almenüpontokat, nem jelennek meg a weboldalon.
A menü tényleges képét csak akkor láthatjuk, ha futtatjuk az alkalmazást. A komponens, szerkesztési időben nem igazán követi a változásokat.
A Form-on helyezzünk el egy IWRegion komponenst, rajta egy felirattal. Ez fogja most képviselni a nyitóoldalt.
Már tapasztalhattuk, hogy a Delphi szerkesztőjében létrehozott Form méretének semmi jelentősége nincs, a böngésző ablaka ugyanis akkora lesz, amekkorára beállítjuk.
A példaprogramban a komponensek menü menüpontjaira kattintva megjelenítünk minden komponensből 10 darabot, úgy hogy azok két oszlopban jelenjenek meg. Az első 5 elem a Form tartományán belül, a második 5 pedig azon kívül.
A TformMain osztályban hozzuk létre az alábbi deklarációkat.
Buttons: array[1..10] of TIWButton;
Labels: array[1..10] of TIWLabel;
CheckBoxes: array[1..10] of TIWCheckBox;
A komponenseket futási időben hozzuk létre a formMain OnCreate eseményében. Az OnCreate-ben hozzuk létre az összes objektumot, majd Visible értéküket állítsuk hamisra. Amikor rákattintunk majd egy menüpontra, akkor láthatóvá tesszük a megfelelő elemeket.
A Form-on helyezzünk el egy IWButton és egy IWCheckBox komponenst. Futtassuk a programot, majd töröljük le a komponenseket. Ez arra volt jó, hogy a uses listába bekerüljenek a megfelelő unit-ok nevei.
Egy nyomógombot az alábbi formában hozzunk létre.
for i:=1 to 5 do begin
  Buttons[i]:=TIWButton.Create(Self);
  Buttons[i].Left:=Width-80;
  Buttons[i].Top:=50+i*30;
  Buttons[i].Visible:=False;  for i:=1 to 5 do begin
...
Itt nem működik az alábbi megoldás.
Buttons[i]:=TButtons.Create(Nil);
Buttons[i].Parent:=Self;
A nyomógombok mintájára hozzuk létre a másik két tömb elemeit is. A tömbök 6-10 eleminek Left értékét állítsuk Width+80, azaz a Form tartománya fölé.
A Form Destroy metódusában szabadítsuk fel az objektumok által lefoglalt memóriaterületeket.
for i:=1 to 10 do begin
  Buttons[i].Free;
  Labels[i].Free;
  CheckBoxes[i].Free;
end;
A MainMenu1 objektumban hozzuk létre az egyes menüpontok OnClick eseményeit. A metódusok tartalma a következő legyen.
IWRegion1.Visible:=False;
for i:=1 to 10 do begin
  Buttons[i].Visible:=True;
  Labels[i].Visible:=False;
  CheckBoxes[i].Visible:=False;
end;
Az egyes menüpontoknak megfelelően állítsuk be az elemek láthatóságát. A fenti kód a Button menüponthoz tartozó OnClick.
Mentsük el az alkalmazást, majd futtassuk. Ha kipróbáljuk az egyes menüpontokat, látható, hogy a Form tartományán kívül eső objektumok is megjelennek.

IntraWeb cikksorozat