Tutorial: Komplet site med dynamisk indhold og SwfAddress - del 3

Menuen er lavet, men nu skal der til at ske noget når man klikker på den, så derfor er det tid til at tage hul på den del af sitet som har med SwfAddress at gøre.

Som det første, er det derfor nu tid til at downloade SwfAddress, hvilket kan ske herfra:
http://www.asual.com/swfaddress/

Efter du har udpakket zip-filen, så finder du de filer som skal bruges til denne tutorial finder i mappen:
Samples\CS3

Herfra skal du kopiere de to mapper swfobject og swfaddress, såvel som filerne SWFAddress.as og SWFAddressEvent.as, og de skal placeres i samme mappe som din fla-fil.
Det kunne se nogenlunde sådan her ud:

Mappestruktur

Det første der skal til, er at vi udvider den funktion der kaldes når man klikker på en knap til, udover blot at trace et id, også at kalde en funktion fra SwfAddress:

function menuClick(_e:Event):void {
	trace(_e.currentTarget.menuid);
	SWFAddress.setValue(menuItems[_e.currentTarget.menuid].address);
}

setValue funktionen bruges til at ændre url’en, hvis sites url eksempelvis er www.mitsite.dk og du kalder funktionen med værdien produkter, så vil url’en ændre sig til www.mitsite.dk/#/produkter/

SwfAddress har en event der holder øje med ændringer i url’en, og det er den event man skal fange for så at loade det rigtige indhold når url’en skifter, den event hedder SWFAddressEvent.CHANGE.

Det er en lidt større funktion, så her kommer først koden og nedenunder forklaringen:

var idPrevious:Number;
var idCurrent:Number;
var idLoading:Number;

const SITE_LABEL:String = "Mit site - ";
function handleSWFAddress(_e:SWFAddressEvent) {
	//try {
		trace("swfaddress: " + _e.value);
		var _address = _e.value.split("/");
		if(_address.length > 2) {
			for(var _i = 0; _i < menuItems.length; _i++) {
				if(menuItems[_i].address == _address[1]) {
					idCurrent = _i;
					break;
				}
			}
		} else {
			idCurrent = 0;
		}
		trace("id: " + idCurrent);
		SWFAddress.setTitle(SITE_LABEL + menuItems[idCurrent].label);
		contentLoad(idCurrent);
	/*
	} catch(err) {
		trace("swfaddress error");
	}
	*/

}
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

De 3 første variabler bruges til at holde styr på hvilken side der blev vist før (idPrevious), hvilken side der vises nu (idCurrent) og hvilken side der er igang med at blive loadet (idLoading).

Dernæst er der en konstant der hedder SITE_LABEL, og den bruger jeg til når titlen på siden ændres. Hvis man eksempelvis er kommet ind på produktsiden, så skal siden title helst ikke kun være “Produkter”, men derimod “Mit site - Produkter”. Det giver et langt bedre overblik når man har mange tabs åbne, og derudover er det også den tekst der vil være default hvis man laver et bogmærke.

Så kommer selve funktionen der kaldes når url’en ændrer sig, og her er det vigtigt at bemærke en ting:
I eksemplet er der en try/catch som jeg har udkommenteret, og det er den fordi, at når man udvikler er det rarest at se den præcise fejl der måtte blive genereret, fremfor en “pæn” fejlmeddelelse man selv har lavet.
Til gengæld bør man overveje at lave en pæn fejlmeddelelse til når sitet i sidste ende går live, sådan så det opfører sig fornuftigt overfor brugerne - men nok om det.

Sammen med eventen får man en value, som er den del af url’en der kommer efter # og den skal så parses for at finde den korrekte side.
Der er tusind måder at parse strenge på, i eksemplet har jeg valgt den allermest simple, nemlig at splitte ved / og så loope igennem arrayet, men har man et større site er det også en oplagt mullighed at bruge Regular Expressions.

Den værdi der sammenlignes med url’en er address, som er den 2. værdi fra dette kald (som er beskrevet nærmere i del 2):

menuItemAdd("Kontakt os","kontakt-os","kontakt.swf");

Som det sidste, inden det korrekte indhold loades, så ændres titlen med funktionen setTitle, jævnfør det jeg skrev længere oppe.

Og, det var sådan set det!
Der er en række andre funktioner i sitet, men de er mere almindelige og har intet med SwfAddress at gøre, så dem vil jeg ikke gå ind i, men blot opfordre dig til at downloade det komplette site med fla-filer und alles.

Se den komplette demo af sitet her:
Site med SwfAddress (Bemærk det lækre design ;-) )

Og filen med det komplette eksempel kan nappes her:
site_med_swfaddress.zip

Håber det kunne bruges, og spørgsmål er som altid velkomne.



Del:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg

Skriv en kommentar