Adding better ui and initial navigation to gallery

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@677184 13f79535-47bb-0310-9956-ffa450edef68
author: lresende <lresende@13f79535-47bb-0310-9956-ffa450edef68> 2008-07-16 07:40:55 +0000
committer: lresende <lresende@13f79535-47bb-0310-9956-ffa450edef68> 2008-07-16 07:40:55 +0000
commit: 0451bb37685a1b7e39b0bb3e8540c70bf0cb61c7 (patch)
tree: ef7a71ad6d9f781c42d269f2df75e52e64b7b57c /java/sca
parent: 57b0ffd3429c6e674615ac6ad14c35771994e46a (diff)
12 files changed, 209 insertions, 10 deletions
diff --git a/java/sca/samples/photo-gallery/src/main/resources/gallery.html b/java/sca/samples/photo-gallery/src/main/resources/gallery.html
index 2a7b32f6ed..f6566e88ec 100644
--- a/java/sca/samples/photo-gallery/src/main/resources/gallery.html
+++ b/java/sca/samples/photo-gallery/src/main/resources/gallery.html
@@ -20,38 +20,116 @@
 <head>
 <title>Photo Gallery</title>
 
-<script type="text/javascript" src="gallery.js"></script>
+<link href="styles.css" rel="stylesheet">
 
+<script type="text/javascript" src="gallery.js"></script>
 <script language="JavaScript">
 
 	//@Reference
 	var album = new Reference("album");
 		
 	var albumItems;
+	var currPos = 0;
 
-	function album_getResponse(items) {
-        var albumPictures = "";
-		for (var i=0; i<items.length; i++) {
-			albumPictures += '<img src="' + items[i] + '"> <br>';
+	function album_getResponse(items, exception) {
+		if(exception) {
+			alert(exception.msg);
+			return;
 		}
-		document.getElementById('album').innerHTML=albumPictures;
 		albumItems = items;
+		showAlbum();
 	}
-		
+
+   function showImage(pos) {
+   	var img = document.createElement("img");
+	img.onload = function(evt) {
+		document.getElementById("albumImage").src = this.src;
+        document.getElementById("albumImage").width=this.width;
+        document.getElementById("albumImage").height=this.height;
+    }
+    img.src = albumItems[pos];
+    return false;   	
+   }
+   
+   function showAlbum() {
+      if(albumItems.length > 0) {
+		showImage(currPos);
+	  }	
+   }
+   
+   function goNext() {
+   	 if(currPos < albumItems.length) {
+	 	currPos++;
+		showImage(currPos);
+	 }
+   }
+   
+   function goPrevious() {
+   	if(currPos > 0) {
+		currPos--;
+		showImage(currPos);
+	}
+   }	
 		
 	function init() {
-		album.getPictures(album_getResponse);
+		try {
+			album.getPictures(album_getResponse);
+		} catch(exception) {
+			alert(e);
+		}
 	}
 	
+	
+	index_off= new Image(31,31); index_off.src = "index.gif";
+    index_on = new Image(31,31); index_on.src = "index_on.gif";
+    next_off = new Image(31,31); next_off.src = "next.gif";
+	next_on  = new Image(31,31); next_on.src = "next_on.gif";
+	prev_off = new Image(31,31); prev_off.src = "prev.gif";
+	prev_on  = new Image(31,31); prev_on.src = "prev_on.gif";
+	
 </script>
 
 </head>
 
 <body onload="init()">
-<h1>Photo Gallery</h1>
+<br>
+<h1><center>Apache Tuscany Photo Gallery</center></h1>
+<br>
+<br>
   <div id="gallery">
-	<div id="album" ></div>
+	<div id="album">
+		<!--img id="albumImage" border="0" src=""-->
+	</div>
 	<br>
   </div>
+  
+  <center>
+
+  <table style="height:54px;" cellspacing="0" cellpadding="0" border="0">
+     <tr>
+     	<td valign="middle">
+     	   <!-- Navigation Header -->
+		   <table style="width:100%;" cellspacing="0" cellpadding="0" border="0">
+             <tr>
+             	<td style="width:31px;"><a href="javascript:showAlbum()" onmouseover="document.index.src=index_on.src" onmouseout="document.index.src=index_off.src"><img src="index.gif" width="31" height="31" border="0" title="Index page" name="index" alt=""></a></td>
+                <td style="width:31px;"><a href="javascript:goPrevious()" onmouseover="document.previous.src=prev_on.src" onmouseout="document.previous.src=prev_off.src"><img src="prev.gif" width="31" height="31" border="0" title="Previous image" name="previous" alt=""></a></td>
+                <td style="width:31px;"><a href="javascript:goNext()" onmouseover="document.next.src=next_on.src" onmouseout="document.next.src=next_off.src"><img src="next.gif" width="31" height="31" border="0" title="Next image" name="next" alt=""></a></td>
+                <td style="width:31px;"><a href="javascript:void(0)" onmouseover="show_over();" onmouseout="show_out();" onmousedown="show_down();" ondblclick="change_delay();"><img src="show_slide.gif" width="31" height="31" border="0" title="Start/Stop slideshow - DoubleClick to change speed" name="show" alt=""></a></td>
+             </tr>
+		   </table>
+		</td>
+	</tr>
+  </table>
+
+  <table style="width:720px;" border="0" cellspacing="0" cellpadding="0">
+    <tr>
+     	<td align="center"> <!-- Image without original -->
+        <img id="albumImage" src="space.gif" class="slideImage" width="720" height="540" ondragstart="return false" onselectstart="return false" oncontextmenu="return false" galleryimg="no" usemap="#imagemap" alt="">
+		</td>
+    </tr>
+  </table>
+		   
+  </center>
+  
 </body>
 </html>
diff --git a/java/sca/samples/photo-gallery/src/main/resources/index.gif b/java/sca/samples/photo-gallery/src/main/resources/index.gif
new file mode 100755
index 0000000000..7599ac7686
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/index.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/index_on.gif b/java/sca/samples/photo-gallery/src/main/resources/index_on.gif
new file mode 100755
index 0000000000..153e9879d6
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/index_on.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/next.gif b/java/sca/samples/photo-gallery/src/main/resources/next.gif
new file mode 100755
index 0000000000..002eaf6951
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/next.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/next_disabled.gif b/java/sca/samples/photo-gallery/src/main/resources/next_disabled.gif
new file mode 100755
index 0000000000..38b1298453
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/next_disabled.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/next_on.gif b/java/sca/samples/photo-gallery/src/main/resources/next_on.gif
new file mode 100755
index 0000000000..4e5bb3e7ef
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/next_on.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/prev.gif b/java/sca/samples/photo-gallery/src/main/resources/prev.gif
new file mode 100755
index 0000000000..4eea10f1dc
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/prev.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/prev_disabled.gif b/java/sca/samples/photo-gallery/src/main/resources/prev_disabled.gif
new file mode 100755
index 0000000000..7e35f07076
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/prev_disabled.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/prev_on.gif b/java/sca/samples/photo-gallery/src/main/resources/prev_on.gif
new file mode 100755
index 0000000000..3ef9a776bb
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/prev_on.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/show_slide.gif b/java/sca/samples/photo-gallery/src/main/resources/show_slide.gif
new file mode 100644
index 0000000000..a5b6a15c2b
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/show_slide.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/space.gif b/java/sca/samples/photo-gallery/src/main/resources/space.gif
new file mode 100644
index 0000000000..170fe82b65
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/space.gif
diff --git a/java/sca/samples/photo-gallery/src/main/resources/styles.css b/java/sca/samples/photo-gallery/src/main/resources/styles.css
new file mode 100755
index 0000000000..d23d949858
--- /dev/null
+++ b/java/sca/samples/photo-gallery/src/main/resources/styles.css
@@ -0,0 +1,121 @@
+body {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	color: #888888;
+	background-color: #000000;
+	margin-top: 0px;
+}
+
+html {
+	scrollbar-face-color:#444444;
+	scrollbar-highlight-color:#000000;
+	scrollbar-3dlight-color:#000000;
+	scrollbar-darkshadow-color:#000000;
+	scrollbar-shadow-color:#000000;
+	scrollbar-arrow-color:#888888;
+	scrollbar-track-color:#000000;
+}
+
+a:link {
+	text-decoration: none;
+ 	color: #AAAAAA;
+}
+
+a:visited {
+	text-decoration: none;
+	color: #AAAAAA;
+}
+
+a:hover {
+	text-decoration: none;
+	color: #FFFFFF;
+}
+
+.current {
+	font-weight: bold;
+ 	color: #AAAAAA;
+	background-color: #666666;
+}
+
+.cthumb {
+	background-color: #666666;
+	border: 0px; border-width: 0px;
+}
+
+.thumb {
+	background-color: #333333;
+	border: 0px; border-width: 0px;
+}
+
+.image { margin: 0px; border-width: 1px; border: 1px solid;}
+a:link .image { border-color: #aaaaaa; color: #aaaaaa;}
+a:visited .image { border-color: #666666; color: #666666;}
+a:hover .image { border-color: #ffffff; color: #ffffff;}
+
+.slideImage { border-width: 0px; border: 0px solid; border-color: #ffffff;}
+a:link .slideImage { border-color: #ffffff;}
+a:visited .slideImage { border-color: #ffffff;}
+
+.title {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 14px;
+	font-weight: bold;
+	color: #000000;
+}
+
+.title a:link {
+	text-decoration: none;
+	color: #000000;
+}
+
+.title a:visited {
+	text-decoration: none;
+	color: #000000;
+}
+
+.title a:hover {
+	text-decoration: none;
+	color: #ffffff;
+}
+
+.infotable {
+	border: 1px solid #444444;
+	border-collapse: collapse;
+}
+
+.infotable td {
+	border: 1px solid #444444;
+}
+
+.infotable table td {
+	border: 0px;
+}
+
+.dirname {
+	font-size: 12px;
+	font-weight: bold;
+	color: #AAAAAA;
+}
+
+.comment {
+	color: #CCCCCC;
+	font-weight: bold;
+	font-size: 12px;
+}
+
+.smalltxt {
+	color: #888888;
+	font-size: 11px;
+}
+
+.xsmalltxt {
+	color: #888888;
+	font-size: 9px;
+}
+
+.newlabel {
+	font-size: 8px;
+	font-weight: bold;
+	color: #EEEEEE;
+	background-color: #558800;
+}
+\ No newline at end of file
author	lresende <lresende@13f79535-47bb-0310-9956-ffa450edef68>	2008-07-16 07:40:55 +0000
committer	lresende <lresende@13f79535-47bb-0310-9956-ffa450edef68>	2008-07-16 07:40:55 +0000
commit	0451bb37685a1b7e39b0bb3e8540c70bf0cb61c7 (patch)
tree	ef7a71ad6d9f781c42d269f2df75e52e64b7b57c /java/sca
parent	57b0ffd3429c6e674615ac6ad14c35771994e46a (diff)