Several developers asked me the code for this product presentation written in Openlaszlo.

You will find it below.

Forewords

This program left from a really simple prototype, and I tried to keep it as clear as possible while it was growing up.
As I am not an Openlaszlo expert, the code can be improved in many ways I am sure. So please think this prototype as an alpha version, and feel free to comment if you wish.

LZX calls two xml files :
- zoomdata.xml which is the first file to be loaded. this file has the informations about the zooms (ratio, picture size, …) and the path to the tile url
- product.xml has the product description and the POI location and texts.

And now the code :

	var dp = productData.getPointer();
	// grab number of POI into nb_pois variable
	var qs = dp.xpathQuery(’/product/pois/poi’);
	nb_pois = qs.length;
	poiLoaded = true;
	// grab various product infos : name, description, …
	productName = dp.xpathQuery(’/product/@name’);
	titleText.setText(productName);
	productDescription = dp.xpathQuery(’/product/description/text()’);
	infoText.setText(productDescription);
	// grap other views of the product (right side) and create thumbnail
	thumbsView.buildThumbs();
	draggableView.refreshThis();







	var dp = zoomData.getPointer();
	basePath = dp.xpathQuery(’/view/@basePath’);
	// load productData xml file
	poiPath = basePath + ‘/product.xml’;
	productData.setSrc(poiPath);
	productData.doRequest()
	// grab tileSize and number of zooms for this file
	tileSize = parseInt(dp.xpathQuery(’/view/@tileSize’));
	var qs = dp.xpathQuery(’/view/zoom’);
	nb_zooms = qs.length;
	// first view is the last zoom, i.e the “fit to window” zoom
	currentZoomNumber = nb_zooms;







	// masterOf if the name of the view this thumbnail commands when making a rollover
	// ie the real size view that arrives from the left and disappears when rolling out
	var myvar = globalCanvas.searchSubviews(”name”, this.masterOf);
	if (myvar.animCome.started) {
		myvar.animCome.stop();
		myvar.setX(-500);
	}
	myvar.animCome.doStart();
	myvar.setVisible(true);
	// hide buttons when the full size view appears
	btnView.fadeOut.doStart();




	// hides the real size view that just arrived from the left, and show the buttons back
	var myvar = globalCanvas.searchSubviews(”name”, this.masterOf);
	myvar.setVisible(false);
	btnView.fadeIn.doStart();

















isNewZoom = false;
if (currentZoomNumber!=whichZoom) {
	// if zoom linked to that point of interest (whichZoom attribute) is different from the current zoom
	// we will have to change the zoom
	isNewZoom = true;
	currentZoomNumber = whichZoom;
	// hide all tiles
	draggableView.hideAll();
	// we use two series of tiles, to allow later effects like fading etc …
	if (serie==”A”) { serie = “B” } else { serie = “A” };
	// refresh the zoom view at the new zoom level
	draggableView.refreshThis();
}
// we have to seek the view center on the point this poi shows (targetX, targetY)
// we compute the new coordinates and sends the view to this place
newX = this.targetX * -1 + globalFrame.width / 2;
if (newX0) { newX = 0; }
draggableView.setAttribute(”x”,newX) ;
newY = this.targetY * -1 + globalFrame.height / 2;
if (newY0) { newY = 0; }
draggableView.setAttribute(”y”,newY);
// if we had to change to a new zoom level, we have to reload the tiles. we have to do this after positionning the
// zoom view, in order to load only necessary (ie visible) tiles.
if (isNewZoom) { draggableView.loadOrNotTile(); }



	// show text linked to this poi at the bottom of the window
	infoText.setText(this.commentText);


	// show back product description when rolling out
	infoText.setText(productDescription);








	loaded = false;



	// when picture has finished loading, start the fade in animation “anim”
	if (this.loaded) {this.anim.doStart();}



	// this method determines whether a tile must be loaded or not
	// tile must be loaded if and only if it is visible by the user
	if (! loaded) {
		parentx = draggableView.x;
		parenty = draggableView.y;
		parentwidth = globalFrame.width;
		parentheight = globalFrame.height;
		realx = this.x + parentx;
		realy = this.y + parenty;
		isVisible = (realx
=0) || ((realy+tileSize)>=0);
		}
		if (isVisible) {
			// if that tile must be loaded, sets his source to basePath + this.imgResource
			// basePath is loaded from zoomdatafile
			this.setSource(basePath + this.imgResource,”clientonly”);
			this.stretchResource();
			this.loaded = true;
			}
		}







        
        
        
        
        
        
        
        






// when the home button is clicked, go back to default zoom, ie the “fit window” view
if (currentZoomNumber!=nb_zooms) {
	currentZoomNumber = nb_zooms;
	draggableView.hideAll();
	if (serie==”A”) { serie = “B” } else { serie = “A” };
	draggableView.refreshThis();
	draggableView.setAttribute(”x”,0) ;
	draggableView.setAttribute(”y”,0);
	draggableView.loadOrNotTile();
	}





// when button Zoom in is clicked, go to previous zoom, if applicable
if (currentZoomNumber>1) {
	currentZoomNumber–;
	// hide zoom view and change serie
	draggableView.hideAll();
	if (serie==”A”) { serie = “B” } else { serie = “A” };
	// refresh zoom view (= create new tiles)
	draggableView.refreshThis();
	if (oldPicWidth!=0) {
		// compute new position of the zoom view, so that previous zoom and new zoom are centered
		// on the same point … that works approximatively
		newX = draggableView.x - (picWidth-oldPicWidth)/2;
		if (newX0) { newX = 0; }
		draggableView.setAttribute(”x”,newX) ;
		newY = draggableView.y - (picHeight-oldPicHeight)/2;
		if (newY0) { newY = 0; }
		draggableView.setAttribute(”y”,newY);
	}
	// refresh zoom view by creating tiles
	draggableView.loadOrNotTile();
	}




// for explanations, please refer to zoom in
if (currentZoomNumber0) { newX = 0; }
		draggableView.setAttribute(”x”,newX) ;
		newY = draggableView.y + (picHeight-oldPicHeight)/2;
		if (newY0) { newY = 0; }
		draggableView.setAttribute(”y”,newY);
	}
	draggableView.loadOrNotTile();
	}










	// when user stops dragging the view, checks which tiles are now visible and need to be loaded
	dragging.remove();
	stop();
	this.loadOrNotTile();



// hide all tiles from the zoom view
if (nbTilesX==null) { return; }
for (var i=0;i


	// after a zoom change, this method is called to load the tiles back
	this.hideAll();
	pleaseWaitView.fadeIn.doStart();
	// grab different datas from the zoomdata file : informations about the new zoom :
	// number of tiles horizontaly and verticaly, global pic and height of the picture
	// and ratio. Ratio is relative to the original image, that means that for a max zoom
	// ratio is equal to 1
	var dp = zoomData.getPointer();
	zoomLevel = parseInt(dp.xpathQuery(’/view/zoom[' + currentZoomNumber + ']/@level’));
	nbTilesX = parseInt(dp.xpathQuery(’/view/zoom[' + currentZoomNumber + ']/@x’));
	nbTilesY = parseInt(dp.xpathQuery(’/view/zoom[' + currentZoomNumber + ']/@y’));
	oldPicHeight = picHeight;
	oldPicWidth = picWidth;
	picWidth = parseInt(dp.xpathQuery(’/view/zoom[' + currentZoomNumber + ']/@width’));
	picHeight = parseInt(dp.xpathQuery(’/view/zoom[' + currentZoomNumber + ']/@height’));
	ratiotxt = dp.xpathQuery(’/view/zoom[' + currentZoomNumber + ']/@ratio’);
	ratiotxt = replace(ratiotxt,’,',’.');
	ratio = parseFloat(ratiotxt);
	// sets the new dragging boundaries for this zoom level
	dragging.heldArgs.drag_min_x = globalFrame.width - picWidth;
	dragging.heldArgs.drag_min_y = globalFrame.height - picHeight;
	// create tiles
	createChilds();
	// load pictures into tiles
	this.loadOrNotTile();
	// create POI icons
	if (poiLoaded) {
		createPOIs();
	}




	//  for each tile, checks if it must be loaded or not
	for (var i=0;i


	// create all tiles
	for (var i=0;i


	// creates POI and position them
	for (var i=1;i<=nb_pois;i++) {
		var dp = productData.getPointer();
		// poix and poiy are the coordinates of the POI
		// in xml file, they are always relative to the full size picture, so we have
		// to scale theiry coordinates with regard to current zoom ratio.
		poix = parseInt(dp.xpathQuery('/product/pois/poi[' + i + ']/@x'));
		poix = parseInt(poix * ratio);
		poiy = parseInt(dp.xpathQuery('/product/pois/poi[' + i + ']/@y'));
		poiy = parseInt(poiy * ratio);
		var myPoi = new poi(this);
		myPoi.name = "poi_" + i;
		myPoi.setX(poix);
		myPoi.setY(poiy);
		myPoi.commentText = dp.xpathQuery('/product/pois/poi[' + i + ']/text/text()');
		myPoi.whichZoom = parseInt(dp.xpathQuery('/product/pois/poi[' + i + ']/@zoomNumber'));
		var dpz = zoomData.getPointer();
		localRatioTxt = dpz.xpathQuery('/view/zoom[' + myPoi.whichZoom + ']/@ratio');
		localRatioTxt = replace(localRatioTxt,',','.');
		localRatio = parseFloat(localRatioTxt);
		// targetX and targetY are the coordinates of the point the POI must point at
		myPoi.targetX = parseInt(parseInt(dp.xpathQuery('/product/pois/poi[' + i + ']/@targetX'))*localRatio);
		myPoi.targetY = parseInt(parseInt(dp.xpathQuery('/product/pois/poi[' + i + ']/@targetY'))*localRatio);
	}









Please wait while loading …








	// created thumbnailed view (instances of otherPicThumb) and full size view (instance of otherPic)
	var dp = productData.getPointer();
	var qs = dp.xpathQuery(’/product/otherPics/otherPic’);
	nb_otherPics = qs.length;
	for (var i=1;i<=nb_otherPics;i++) {
		var myThumb = new otherPicThumb(this);
		myThumb.name = "thumb_" + i;
		myThumb.setSource(dp.xpathQuery('/product/otherPics/otherPic['+i+']/@thumbURL'));
		// master of is the name of the otherPic instance this thumb controls (create below)
		myThumb.masterOf = "otherView_" + i;
		myThumb.stretchResource();
		myThumb.setX(10);
		myThumb.setY(25+(i-1)*80);
		var myOtherView = new otherPic(globalCanvas);
		myOtherView.name = "otherView_" + i;
		myOtherView.setSource(dp.xpathQuery('/product/otherPics/otherPic['+i+']/@picURL'));
		myOtherView.stretchResource();
		myOtherView.setX(15);
		myOtherView.setY(5);
		myOtherView.setVisible(false);
	}

















Zoom in
Zoom out
Home




More about this project …

Here is the zoomdata.xml file

and code for product.xml

Contenance 100 litres. Extra-resistante


Serrure en acier chrome avec code d’acces a quatre chiffres : vos biens sont en securite


Poignee en alluminium brosse pour une prise en main agreable et sure


Roulettes tres resistantes ayant ete testees sur plus de 500 kilometres



	
	
	

And at last an archive with all files necessary :

• the LZX file
• its resources
• the tiles and the configuration files

.

If you have any question, please post a comment.

Nom (obligatoire)

Courriel (ne sera pas publié) (obligatoire)

Site