Op deze pagina ...

Op deze pagina bespreek ik (kort) het gebruik van apPopupMenu van Apycom in combinatie met de apPopupGen applicatie. Dit is het Java applet wat ik voor mijn website op dit moment gebruik. Download apPopupmenu van de Apycom website, download apPopupGen hier. 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 ... Merk op: De huisige versie (datum: 4/23/2002) is 0.9.99.39 en biedt de mogelijkheid de menu-structuur (geoptimaliseerd) voor de "menuItemsFile" parameter. Er zijn ook een paar kleine bugs opgelost.

Merk op: Intussen heeft Apycom een versie 2 uitgebracht, hierbij zijn twee extra parameters toegevoegd. De eerste MOET gebruikt worden:

<param name="Copyright" value="Apycom Software - www.apycom.com">

De tweede maak het mogelijk de menu items uit een extern bestand te halen:

<param name="menuItemsFile" value="menuitems.txt">

Merk op: Als je 100% breedte wil gaan gebruiken kijk dan bij de 100%-fix pagina voor een oplosing. In de nieuwere versies (> 2.90) zou dit opgelost moeten zijn.

Net als voor mijn vorige menu heb ik hier weer een klein programma gemaakt die het bouwen en onderhouden van de menu-structuur vereenvoudigd. Onderhoud is daarbij de belangrijkste factor daar ik een website in twee talen heb ...

Ik zal proberen op korte termijn een kleine intro te schrijven zodat je sneller een idee krijgt van hoe apPopugen werkt. Vergeet echter niet dat ik het programma voor eigen gebruik gemaakt heb. Suggesties en commentaar zijn daarom wel welkom maar geen garantie voor aanpassingen.

Overzicht

De volgende inhoudsopgave geven de helpfiles weer zoals die bij het programma zitten:

(De items in dit overzicht representeren tevens de tab-bladen van het programma)

1. Generic Settings

2. Additional Settings

3. Menu Structure

4. Presetting

5. Code Generation

6. Preview Menu en algemene problemen

Preferences & About

apPopupGen Index - 1. Generic Settings

doel:

Hier kun je wat basis instellingen doen voor de weergave (cosmnetisch) van het menu.

opties:

Menu Dimensions

Ieder menu (wat dat betreft: ieder Java applet) heeft een voorgedefinieerde hoogte en breedte. Dit kan worden weergegeven in pixels (meest gebruikelijke) of een percentage (niet altijd even goed bij met name Internet Explorer). Vink "Use percentage" aan als je procenten wilt gebruiken ipv pixels.

Tip: pixels en percentages kunnen gemengd worden gebruikt, b.v.: width=100% height="20"

ButtonType

Hier definieren we het type knop, dus niet de menu-items. apPopupmenu kent 6 soorten knoppen:

Menu Orientation

Een menu kan horizontaal (zoals in Windows menus - waar de menu's naast elkaar staan) of vertikaal (waar de knoppen onder elkaar staan) worden weergegeven.

Horizontaal:

Vertikaal:

Text Alignment

Hier geven we de uitlijning van de knoppen-tekst weer: links, gecentreerd of rechts. Dit betreft alleen de knoppen dus niet de menu-items.

Menu Arrows

Menu-knoppen kunnen naast de tekst ook een pijltje weergeven om aan te geven dat er een menu onder ligt.

Deze optie wordt geactiveerd met "Show Arrows". De pijltjes kunnen 3D of gevuld (Solid) zijn.

Sound

apPopupMenu ondersteund ook geluiden wanneer een menu geopend wordt of de muis over een knop beweegt ("Mouseover").

Hier kun je het geluidsbestand opgeven (evt. gebruik makende van "Browse..."). Vergeet dan niet "Sound enabled" aan te vinken.

Waarschuwing: Voor de preview moet het geluid in dezelfde directory staan als apPopupgen anders kan de locale apPopupmenu.jar de juiste files niet vinden en zie je alleen een grijze balk!

apPopupGen Index - 2. Additional Settings

doel:

Hier stellen we tekst en kleuren in.

opties:

Menu Colors

Hier kun je de kleuren opgeven voor:

• Button achtergrond - Normaal
• Button achtergrond - Mouseover
• Button Tekst - Normaal
• Button Tekst - Mouseover

Kleuren dien te worden ingevoerd in hexadecimale waarden, volgens het formaat RRGGBB. De eerste twee bytes (RR) stellen de rood (R) waarde voor. Hetzelfde geldt voor GG (groen) en BB (blauw).

Persoonlijk reken ik niet zo vaak in hexadecimale waarden en al helemaal niet in RGB kleuren - er is daarom een klein knopje geplaatst die een kleuren-waaier opent zodat je daaruit kunt zoeken.

Menu headertext preview

Deze dummy knop geeft een ruwe "preview" van de knoppen.

Font

Hier selecteer je het te gebruiken lettertype: naam, grootte, stijl (normaal, vet, cursief of vet-cursief). Als je "Use systemfonts for menuitems", zal apPopupMenu het standaard systeem font gebruiken.

Tip: gebruik geen lettertypes die niet bepaald standaard zijn. Gebruik liever fonts zoals Helvetica, Arial, Veranda en Courier. Niet ieder systeem heeft namelijk deze exotische fonts.

Statusbar-string

Als een gebruiker over het menu beweegt met de muis kan er een tekst of link zichtbaar worden gemaakt. De tekst kan voor allen menu's gelden of er bestaat een tekst per menu-item (nl. de tekst van het item zelf).

apPopupGen Index - 3. Menu Structure

doel:

Hier bouwen we de structuur van het menu.
N.b.: het menu is vertically georienteerd ook al wordt jouw menu straks horizontaal.

opties:

Menu Tree window

Dit is het grote witte vierkant - als er nog geen menu-structuur bestaat.
Eenmaal items toegevoegd, kun je menu's en submenu's openen (fold/unfold) als ze sub-items hebben.

Verder kunnen hier menu's met behulp van sleur en pleur verplaatst worden.
Toevoegen en verwijderen van menu's gebeurt met de hieronder beschreven opties.

Label language 1 and 2

Zoals je misschien gezien hebt, mijn website ondersteund twee talen - engels en nederlands.
Doel van apPopupGen was o.a. eenvoudiger onderhoud en dan vooral ook voor beide talen.
Voer bij de titels van de menu-items/knoppen voor taal 1 links in en voor taal 2 rechts.
Als je maar 1 taal gebruikt, laat dan de rechtse leeg.

Merk op: voor de ondersteuning van een tweetallige website heb ik op mijn web-server 2 directories staan, een engelse (english) en een nederlandse (dutch) met een identieke inhoud voor wat betreft bestandsverdeling.

In het nu volgende voorbeeld heeft bijvoorbeeld foo.htm dezelfde inhoud in beide directories met het verschil dat in de ene de taal nederlands is en bij de andere engels.

\index.htm
\dutch\index.htm
\dutch\about.htm
\dutch\foo.htm
....
\english\index.htm
\english\about.htm
\english\foo.htm
....

Merk op: Niet alleen standaard letters en cijfers maar ook de meeste afwijkende tekens kunnen worden gebruikt: / \ & ' : etc. Vermijd echter het gebruik van comma's en en vierkante haken ([ en ]).

Hier kun je ook menu-dividers opgeven, voer simpel weg een min-teken ('-') in als titel in beide vakjes (2de wordt automatisch gevuld).

Link/Script

Hier kunnen we de url opgeven van de te openen pagina. Niet alleen links maar ook scripts worden ondersteund. Dat laatste is wat moeilijker.

Tip: Je moet voor script wel MAYSCRIPT activeren op de Presettings tab!

Target

Net als bij <A HREF=...> links kun je hier ook een "target" opgeven. Dit kan een standaard target zoals "_self" zijn (op de huidige pagina openen), "_blank" (openen in een nieuw window), of een frame naam, zoals bijvoorbeeld "text", zoals dus in een frameset gedefinieerd is.

Merk op: Je MOET hier een target invullen! Als het window in zichzelf geopend moet worden, kies dan het target "_self".

Image

apPopupMenu ondersteund afbeeldingen (kleine ikoontjes) in de menu-knoppen. Gebruik alleen GIF afbeeldingen!

Waarschuwing: Plaats afbeeldingen in de apPopupgen directory anders werkt de preview niet correct !

New Item

Toevoegen van een menu-utem of -knop.

New SubItem

Toevoegen van een sub-menu-item.

Unfold All

Vouw alle menu's en submenu's open - alle items worden nu zichtbaar.

Fold All

Klap alle menu's dicht - alleen de menu-knoppen blijven zichtbaar.

Load Tree

De menustructuur wordt opgeslagen in standaard platte tekst - iets anders als Apycom doet. Hier mee kun je ze inladen.

Save Tree

Opslaan van de menustructuur in standaard platte tekst.

Delete Item

Verwijder het geselecteerd item en diens subitems als die aanwezig mochten zijn .

Merk op: Alle sub-menu-items worden dus OOK gewist!

Merk op: er bestaat in dit programma niet zoiets als "ongedaan maken" !

Delete All

Verwijder het gehele menu.

Merk op: er bestaat in dit programma niet zoiets als "ongedaan maken" !

apPopupGen Index - 4. Presettings

doel:

Biedt de mogelijkheid wat extra instellingen voor het programma zelf te doen - bovendien kun je hier naar mijn website gaan.

opties:

HTML Basics

Pre/Post-applet lines

Met deze mogelijkheid kun je volledige HTML pagina's genereren door het toevoegen van post (voor) en post (na) HTML code. Tevens kun je de HTML code inladen met het knopje.

Tip: als je een tool gebruikt zoals Dreamweaver - dan kan ik alleen maar adviseren templates te gebruiken!

Merk op: Deze basis HTML is vereist voor het preview venster, de minima zijn:

Pre-applet HTML minimum:

Post-applet HTML minimum:

Image file basics

De gebruikte bestandsnamen voor afbeeldingen komt niet altijd overeen met die van jouw website, de volgende opties kunnen daarom gebruikt worden

• Use filename only
  Verwijs alleen naar de naam van het bestand.
• Use full path/filename
  Verwijs naar het volledige pad en bestandsnaam zoals jij die opgeeft (met bv Browse...).
• Use this default path
  Verwijs naar het bestand en gebruik altijd dit pad
  

Sound file basics

De gebruikte bestandsnamen voor geluidsbestanden komt niet altijd overeen met die van jouw website, de volgende opties kunnen daarom gebruikt worden

• Use filename only
  Verwijs alleen naar de naam van het bestand.
• Use full path/filename
  Verwijs naar het volledige pad en bestandsnaam zoals jij die opgeeft (met bv Browse...).
• Use this default path
  Verwijs naar het bestand en gebruik altijd dit pad

Applet code

In HTML zijn enkele aanvullende en/of verplichte parameters nodig voor een applet correct werkt. De meeste kun je hier vinden:

• MAYSCRIPT
  De Java applet kan scripts uitvoeren.
  
  
• Code
  Welk applet moet er gebruikt worden. Standaard waarde: apPopupMenu
  
  
• Archive
  Which applet archive must be opened to find the applet class. Standaard waarde: apPopupMenu.jar
  
  
• Codebase tag
  Vin dit voor het gebruik van codebase. Merk op: de preview zal zeer waarschijnlijk niet werken als deze optie aanstaat!
  
  
• Codebase
  Relatief of absoluut pad naar de Java class of Java archive
  
  

• Default Hyperlink Target
  Standaard target voor links. (nog niet 100% werkend)

apPopupGen Index - 5. Code Generation

doel:

Genereren van HTML code en params voor de apPopupMenu Applet.

opties:

Language 1 Code

Genereer code voor taal 1.

Language 2 Code

Genereer code voor taal 2.

Save code knop

Hiermee kun je code voor het menu (voor de betreffende taal) geoptimaliseerd opslaan zodat deze gebruikt kan worden als extern menu bestand voor de "MenuItemsFile" parameter (<param name="menuItemsFile" value="menuitems.txt">).

Include HTML basics

Als dit staat aangevikt, zullen de pre-applet en post-applet HTML code tags worden toegevoegd aan de gegenereerde code.

Merk op: preview gebruikt deze optie ook!

apPopupGen Index - 6. Preview Menu en algemene problemen

doel:

Preview het gebouwde menu. Dit wordt gedaan met hulp van een ingebouwde HTML browser (Internet Explorer) die standaard in windows aanwezig is
Voor zover ik weet werkt dit prima met alle versie van Internet Explorer die Java ondersteunen (ik heb zelfs al versie 6.0 getest en die doet het prima!).

Merk op: Als je deze tab activeert, zal er automatisch gebruik gemaakt worden van de code-generatie-tab. De gegenereerde code wordt tijdelijk opgeslagen onder de naam "PreviewTMP.HTM".

Merk op: Bij de preferences & about tab kun je aangeven welke taal standaard gebruikt moet woden (1 of 2).

Problemen oplossen

Window blijft wit;

Controleer menu dimensions.

Ipv een menu zie ik een grijs vak

Als eerste: verwisselen van tabsheet (bijvoorbeeld even op "Preferences" en dan op "Preview" klikken), werkt dit niet bekijk dan de volgende opties:

1. Applet kon niet worden gevonden
- controleer codebase instellingen
- kijk of apPopupMenu.jar in de apPopupGen directory staat
- kijk na of apPopupMenu.jar wordt gebruikt als archive
- controleer of "code option" apPopupMenu aangeeft
- controleer de security instellingen van Internet Explorer ten aan zien van Java

2. Additionele bestanden konden niet worden gevonden
- afbeeldingen (kopieer ze naar de directory van apPopugen en verwijder paden)
- geluidsbestanden (kopieer ze naar de directory van apPopugen en verwijder paden)

3. Zinloze knop
Een knop heeft blijkbaar een submenu of heeft geen link - een van deze twee MOET bestaan!

4. Geen link maar wel een target
Controleer of alle links kloppen en er niet per ongelijk een target ingevuld staat ipv een link.

5. Geen target maar wel een link
Controleer of alle links een target hebben.

6. Geen correcte width of height ingesteld
Controleer ze!

File Not found error

De browser kan het gegenereerde bestand niet vinden (PreviewTMP.HTM).
Controleer disk ruimte en controleer read-only disks.

Ik krijg een "The page cannot be displayed" error

Meerder oorzaken kunnen hier debet aan zijn:

1. Applet kon niet worden gevonden
- controleer codebase instellingen
- kijk of apPopupMenu.jar in de apPopupGen directory staat
- kijk na of apPopupMenu.jar wordt gebruikt als archive
- controleer of "code option" apPopupMenu aangeeft
- controleer de security instellingen van Internet Explorer ten aan zien van Java

2. Additionele bestanden konden niet worden gevonden
- afbeeldingen (kopieer ze naar de directory van apPopugen en verwijder paden)
- geluidsbestanden (kopieer ze naar de directory van apPopugen en verwijder paden)

Applet blijft op "Loading ..." staan

Je bent waarschijnlijk vergeten bij 1 of meer links een target aan te geven.

apPopupGen Index - Preferences & About

doel:

Bezoeken naar mijn website lokken en enkele applicatie specifieke instellingen/aanpassingen.

opties:

Auto load at startup

Settings
De "stijl" van het menu wordt automatisch geladen - je moet hier deneken aan lettertype, kleuren etc. Ze worden in de Windows registry opgeslagen (HKEY_CURRENTUSER\SOFTWARE\Hansies apPopupMenu Generator - Win2000 doet dit net even anders).

Project
Automatisch inladen van het laatste project - erg handig als je steeds met hetzelfde menu werkt zoals ik dat doe.

Auto save

Settings
De "stijl" van het menu wordt automatisch opgeslagen - je moet hier deneken aan lettertype, kleuren etc. Ze worden in de Windows registry opgeslagen (HKEY_CURRENTUSER\SOFTWARE\Hansies apPopupMenu Generator - Win2000 doet dit net even anders).

Project
Automatisch opslaan van het laatste project - erg handig als je steeds met hetzelfde menu werkt zoals ik dat doe.

File handling

Hier kun je handmatig settings en projecten inladen of opslaan.

Generic

Enkele generieke instellingen;

Enable Hints
Als dit staat aangevinkt, zal er bij ieder knop, veld, optie etc een geel ballonnetje verschijnen met een kleine hint.

Default preview
Selecteer hier de taal (1 of 2) die gebruikt moet worden voor de preview.