Welkom bij WeetHet!


Managed Web Hosting by Liquid Web

Jouw IP adres:
34.239.158.223
     
 
Pagina printen
- kies Landscape
Zoeken in de
WeetHet pagina's
WeetHet is being updated! - Current articles will slowly move to www.tweaking4all.com
Voor uitstekende webhosting welke zowel betrouwbaar als betaalbaar is adviseren wij: LiquidWeb

Op deze pagina ...

Op deze pagina bespreek ik de oplossing PopupMenuApplet door David Binard.

Een prima alternatief, hoewel niet gratis, is apPopupMenu van ApyCom.

Er zijn andere navigatie systemen, maar deze zijn helaas VEEL te DUUR voor een prive website, dus zolang mij geen gesponsorde applet wordt verstrekt, zal ik deze ook niet bespreken ...

HTML

Hoe werkt PopupMenuApplet?

Op mijn oude pagina vond je links bovenin een menu button, dit is het zelfde menu als wat er op dit moment gebruikt wordt op WeetHet, een voorbeeld;

Menu voorbeeld zoals er dit op mijn website voorheen uitzag.

Wat hebben we nodig ?

1. PopupMenuApplet.class
2. PopupGen.exe

Het bestand PopupMenuApplet.class heb je nodig om het menu zichtbaar te maken, plaats deze in dezelfde directory als waar je het HTML-bestand gaat plaatsen. Deze JAVA class is geschreven door David Binard, bezoek zijn pagina voor o.a. de sourcecode en/of nieuwe versies.

PopupGen.exe gebruiken we straks om het menu te genereren.

Laten we eerst beginnen met een afbeelding te maken voor de algemene "menu" knop.
Op deze internet pagina heb ik een afbeelding gebruikt welke onderdeel vormt van de kop van mijn oude webpagina:

Voorbeeld van een menu knopje

De dimensies van dit plaatje: 114 breed en 24 hoog.

Als alternatief kun je natuurlijk ook een simpele knop (rechthoekig) maken.
Laten we in dit voorbeeld er vanuit gaan dat het plaatje in dezelfde directory staat als het HTML-bestand, en dat het plaatje "button_menu.gif" heet.

Nu we een plaatje hebben voor de menu-knop, kunnen we alvast de HTML-code van de web-pagina aanpassen. Daarvoor gaan we een JAVA-applet inbinden door op de gewenste locatie van het menu de volgende code toe te voegen.

Merk op: width en height geven dus de breedte en hoogte van het menu-plaatje weer.

Laten we beginnen met de basis van de applet;

<APPLET
CODE = "PopupMenuApplet.class"
CODEBASE= "."
NAME= "PopupMenuApplet2"
WIDTH= "120"
HEIGHT= "34"
MAYSCRIPT
>

We geven hier aan dat we de JAVA klasse (class) "PopupMenuApplet.class" gaan gebruiken. De browser kan deze terug vinden in dezelfde directory als waar het HTML bestand staat, de "." geeft dit aan.

We geven de applet een herkenbare naam, hier bijvoorbeeld "PopupMenuApplet2".
Als laatste geven we aan hoe groot de applet dient te worden door gebruik te maken van width en height van het eerder genoemde plaatje (de applet hoeft niet groter te worden als het plaatje).

Natuurlijk is dit nog niet alles. We gaan nu de applet enkele parameters doorgeven voor o.a. de locatie van het plaatje maar ook hoe het menu eruit moet gaan zien.

Laten we eerst aangeven waar het plaatje staat, dit doen we door de volgende code erachter te zetten:

<PARAM NAME="IMG" VALUE="button_menu.gif">

Hier geven we de parameter (PARAM) met de naam "IMG" de waarde (VALUE) "button_menu.gif" mee.

Merk op: Deze parameters zijn bepaald door de JAVA applet, dit is dus specifiek voor deze JAVA class !!

Nu komt het moeilijke stuk: de menustructuur.

Om de applet zo universeel mogelijk te houden moest er een "handige" structuur bedacht worden om de menu-layout door te kunnen geven aan de applet. Laten we dit voor het gemak de "data-parameters" noemen.

Schrik niet (ik heb er een handig tooltje voor geknutseld, dus don't worry):

<PARAM NAME="DATA" VALUE="
{Welkom*welcome.htm*text}
{HR}
{Internet* {Introductie*internet.htm*text}
{HR}
{HTML*html.htm*text}
{HR}
{Navigatie Help*navigationhelp.htm*text}
{HR}
{Over deze webpagina ...* {Updates*updates.htm*text}
{Statistieken*statistics.htm*text}
{Software en de Auteur*about.htm*text}
}
">

Snappie ? Nee ? Geeft niet, want erg overzichtelijk is het niet...

De structuur is relatief simpel voor dit voorbeeld, maar de benodigde parameters zijn nogal pittig. Zo ziet de structuur er uit:

Welkom  

 
Internet >> Introductie
Navigatie Help

HTML
Over deze webpagina >> Updates
  Statistieken
  Software en de Auteur

*de submenu's hebben hier een aparte kleur om ze uit elkaar te kunnen houden - dit is natuurlijk niet het geval bij het werkelijke menu !

Om deze parameter eenvoudiger samen te stellen heb ik, zoals eerder vermeld, een klein programma geschreven. Ik moet toegeven dat het geen schoonheidsprijs zal winnen, maar het werkt ... en daar gaat het tenslotte om.

Het programma, de menu generator, kan hier worden gedownload.

Het programma genereerd de daarnet genoemde "data-parameters".

Wat hebben we nu nog meer nodig ?

We moeten de browser nog vertellen dat dit het einde van de Appler code is door een </APPLET> tag.

De gehele code voor een pagina zou er dan dus zo uit kunnen zien (de blauw gemarkeerde code heeft betrekking op het popupmenu):

<HTML>
<HEAD>
<TITLE>PopupMenu test pagina</TITLE>
</HEAD>
<BODY>

<APPLET
CODE = "PopupMenuApplet.class"
CODEBASE= "."
NAME= "PopupMenuApplet2"
WIDTH= "120"
HEIGHT= "34"
MAYSCRIPT
>

<PARAM NAME="IMG" VALUE="button_menu.gif">

<PARAM NAME="DATA" VALUE="
{Welkom*welcome.htm*text}
{HR}
{Internet* {Introductie*internet.htm*text}
{HR}
{HTML*html.htm*text}
{HR}
{Navigatie Help*navigationhelp.htm*text}
{HR}
{Over deze webpagina ...* {Updates*updates.htm*text}
{Statistieken*statistics.htm*text}
{Software en de Auteur*about.htm*text}
}
">

</APPLET>
</BODY>
</HTML>

Hoe werkt het PopupGen programma ?

Zoals ik al eerder vertelde; dit programma zal wel nooit een schoonheidsprijs winnen. Ik heb het speciaal voor deze website geschreven zodat ik niet te moe zou worden van het schrijven van de JAVA parameters.

Laten we beginnen met het downloaden van het programma en de zip-file uit te pakken (b.v. met Winzip).

Deze zip-file heeft slechts 1 bestand aan boord, te weten: PopupGen.exe.

Onderaan de pagina vind je een klein programma welke een dergelijk project converteerd naar een HTML tabel.

Het programma wordt gestart door een dubbel klik en het volgende scherm verschijnt:

PopupGen

Merk op: Als je met een resolutie gelijk aan of kleiner dan 800x600 werkt, zul je niet het gehele window kunnen zien ! Het window is namelijk 818x607 groot (dit i.v.m. overzicht houden over de menustructuur en de plaatsing van de knoppen).

Enkele "termen" vooraf:

Naam
Toepassing
Add Node
voegt een menu-item op hetzelfde niveau als het geslecteerde item toe
Add Subnode
voegt een sub menu-item van het geselecteerde item toe
Seperator
voegt een horizontale lijn aan het menu toe
Menu label
is de tekst van een menu-item
Menu URL
is de link waar dit item heen wijst, dus de pagina die verschijnt als men dit item kiest
URL target
is o.a. voor frames bedoeld om aan te geven waar de pagina geopend moet worden
Edit Node
leest de gegevens van het geselecteerd menu-item zodat deze bewerkt kunnen worden
Apply
wordt gebruikt om de wijzigingen (door eerst met Edit Node te werken) toe te passen
Delete Node
verwijderd het geselecteerde item
Save Project
opslaan van de structuur zodat we later gemakkelijk items kunnen toevoegen
Load Project
openen van een eerder gebouwde structuur
Generate
genereerde de benodigde JAVA PARAM code voor jouw webpagina
Expand All
alle submenu-items worden zichtbaar gemaakt (uitgeklapt)
Collapse All
alle submenu-items worden verborgen (ingeklapt)
Exit
verlaat het programma

Merk op: gebruik GEEN AANHALINGSTEKENS in een menu-titel!

Het programma begint met een leeg menu, mocht je nu al eerder een menu hebben gemaakt met PopupGen, dan zou je die nu kunnen inladen met "Load Project" om daar wijzigingen in aan te brengen.
Aangezien we dat nog niet hebben gedaan, gaan we nu het eerste menu bouwen. Hierbij nemen we het eerder vernoemde voorbeeld als leidraad

Laten we eerst het hoofdmenu toevoegen.

1. Vul in het veld "Menu label" de waarde "Welkom" in (de haakjes weglaten).
2. In het veld "Menu URL" vul je nu "welcome.htm" in.
3. Omdat we (op deze pagina) gebruik maken van frames en ik de pagina in het frame "text" wil zien, vullen we bij "URL target" de waarde "text" in.
4. Klik nu op "Add Node".

Merk op: Punt 3 is voor een pagina zonder frames niet nodig !

We zien het volgende verschijnen:

Stap 1, ons eerste menu-item

Je ziet meteen de waarden terug komen zoals je die ingevuld hebt, gescheiden door een sterretje ("*").

Dezelfde stappen (met andere waarden natuurlijk) herhalen we voor

Menu Label

Menu URL

URL Target

Internet

internet.htm

text

Navigatie Help

navigationhelp.htm

text

Over deze webpagina ...

about.htm

text

Met het volgende als resultaat:

Nu met toegevoegde items

We missen nu nog de horizontale strepen in het menu.

We hebben er 2 nodig: druk 2x op de "Seperator" knop.

De twee lijnen verschijnen nu,... echter op de verkeerde plaats:

Lijnen verkeerd geplaatst

Met de muis kunnen we nu deze lijnen verplaatsen door ze op de pakken en te slepen naar het menu-item waar ze voor moeten komen te staan. Klik dus een lijn aan met de linker muisknop en hou deze muisknop ingedrukt.

Beweeg nu met de muis naar het menuitem waar de streep voor moetn komen te staan en laat de muisknop los.

Doe dit ook voor de tweede streep.

Lijnen verplaatst ...

Laten we nu de submenu-items gaan toevoegen.

Klik daarvoor het menu-item aan met de linker muisknop zodat deze geselecteerd is.

1. Vul in het veld "Menu label" de waarde "Introductie" in.
2. In het veld "Menu URL" vul je nu "internet.htm" in.
3. Omdat we (op deze pagina) gebruik maken van frames en ik de pagina in het frame "text" wil zien, vullen we bij "URL target" de waarde "text" in.
4. Klik nu op "Add SubNode".

Merk op: Punt 3 is voor een pagina zonder frames niet nodig !

Ons eerste submenu-item !

Voor de voor de volgende items kun je nu twee kanten op.
1. Je selecteerd het nieuwe submenu-item en alle volgende items voeg je toe met "Add Node"
2. Je veranderd niets aan de selectie en voegt de volgende submenu-items met "Add SubNode" toe.

De keuze is geheel aan jou. Bij het toevoegen van een seperator (horizontale lijn) moet je rekenhouden met het feit dat deze altijd op hetzelfde niveau wordt toegevoegd ! Dus wil je een seperator in een submenu, kies dan eerst en item in het submenu en plaats dan pas de seperator.

Als je klaar bent met het menu, wordt het tijd om dit project op slaan met "Save Project".
Geef het een betekenisvolle naam, bijvoorbeeld menu_project.txt.

Een project file wordt opgeslagen in standaard ASCII tekst, je kunt die dus bekijken met een tekstverwerker of Notepad.

Afhankelijk van de diepte van een submenu worden er TABs voorgezet. Dus een submenu van het hoofdmenu wordt vooraf gegaan door 1 TAB, een submenu van een submenu door 2 TABs etc. Je kunt hier naar harte lust in rommelen, maar let op de opmaak ! (Met name voor vertaling van het menu erg handig)

Laten we nu de JAVA PARAM code genereren door op "Generate" te klikken.

Geef het bestand een herkenbare naam, b.v. menu_code.txt.

Merk op: Ook voor deze code geldt: het wordt in ASCII tekst opgeslagen.

Inbinden in de webpagina is relatief eenvoudig.

Open het gegenereerde bestand met notepad.

Selecteer alle regels en copieer het naar het clipboard (met CTRL+C of het menu "Edit"-"Copy").

Open nu (bijvoorbeeld met notepad of de HTML-editor) het HTML-bestand en zoek de locatie waar de applet staat.

In ons voorbeeld de blauw gemarkeerde tekst:

<HTML>
<HEAD>
<TITLE>PopupMenu test pagina</TITLE>
</HEAD>
<BODY>

<APPLET
CODE = "PopupMenuApplet.class"
CODEBASE= "."
NAME= "PopupMenuApplet2"
WIDTH= "120"
HEIGHT= "34"
MAYSCRIPT
>

<PARAM NAME="IMG" VALUE="button_menu.gif">

<PARAM NAME="DATA" VALUE="
{Welkom*welcome.htm*text}
{HR}
{Internet* {Introductie*internet.htm*text}
{HR}
{HTML*html.htm*text}
{HR}
{Navigatie Help*navigationhelp.htm*text}
{HR}
{Over deze webpagina ...* {Updates*updates.htm*text}
{Statistieken*statistics.htm*text}
{Software en de Auteur*about.htm*text}
}
">

</APPLET>
</BODY>
</HTML>

Sla het HTML bestand op, en je bent klaar met het menu....

Genereer een tabel gebaseerd op het menu

Als aanvulling heb ik nog even snel een programma in elkaar geknutseld wat van de project bestanden van een popup-menu ook nog eens een simpele HTML tabel kan maken. Het programma kun je hier downloaden. Deze optie heb ik erbij gezet om de website nog toegankelijk te houden voor de gebruikers waar het menu niet functioneerd. Het programma werkt releatief simpel.

Stap 1 is het maken van een project file met POPUPGEN.EXE (zoals hierboven uitgelegd wordt).

Vervolgens heb je een HTML file nodig waarin je een tag zet om aan te geven waar de tabel moet worden ingevoerd. De tag moet er als volgt uitzien: <!--MENU-->

PopupGen Overview

Stap 1, klik op de "Load Project" knop en selecteer een project file.

Stap 2, klik op de "Load HTML" knop en selecteer de HTML file waar de <!--MENU--> tag in staat.

Stap 3, klik op de "Create HTML" knop zodat de HTML tabel geplaatst wordt in de HTML code.

Stap 4, klik op de "Save HTML" knop om het resultaat op te slaan (zowel naam als locatie zijn vrij te kiezen).

 

 


Je bent nu al op de nederlandstalige pagina's Click here to switch to the English pages