[richfaces-svn-commits] JBoss Rich Faces SVN: r13417 - in trunk/test-applications/realworld2/web/src/main/webapp: includes/image and 2 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Tue Apr 7 14:10:09 EDT 2009
Author: nbelaevski
Date: 2009-04-07 14:10:09 -0400 (Tue, 07 Apr 2009)
New Revision: 13417
Added:
trunk/test-applications/realworld2/web/src/main/webapp/WEB-INF/tags/templates/
Modified:
trunk/test-applications/realworld2/web/src/main/webapp/includes/image/imageInfo.xhtml
trunk/test-applications/realworld2/web/src/main/webapp/includes/misc/imageScroller.xhtml
trunk/test-applications/realworld2/web/src/main/webapp/stylesheet/realworld.css
Log:
Image scroller updated
Modified: trunk/test-applications/realworld2/web/src/main/webapp/includes/image/imageInfo.xhtml
===================================================================
(Binary files differ)
Modified: trunk/test-applications/realworld2/web/src/main/webapp/includes/misc/imageScroller.xhtml
===================================================================
--- trunk/test-applications/realworld2/web/src/main/webapp/includes/misc/imageScroller.xhtml 2009-04-07 17:50:57 UTC (rev 13416)
+++ trunk/test-applications/realworld2/web/src/main/webapp/includes/misc/imageScroller.xhtml 2009-04-07 18:10:09 UTC (rev 13417)
@@ -3,72 +3,61 @@
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
- xmlns:rich="http://richfaces.org/rich"
- xmlns:richx="http://richfaces.org/richx">
-
-<style>
-.rich-datascr-button {
- background-color: #CECECE;
-}
-</style>
-
-<richx:imageDataScroller reRender="tree"
- scrollerListener="#{controller.scroll}" id="imageScroller"
- fastControls="hide"
- boundaryControls="hide"
- pageVar="pageVar"
- styleClass="imageScroller"
- inactiveStyleClass="imageScroller-inactive"
- tableStyleClass="imageScroller-table"
- maxPages="5"
- for="mainImage" align="left" page="#{model.selectedImageIndex}">
- <f:facet name="activePage">
- <h:panelGroup layout="block" styleClass="preview_box_photo_80" style="margin: 0px; margin-right: 3px">
- <h:graphicImage style="border: 2px solid red" styleClass="pr_photo_bg" value="/img/shell/frame_photo_80.png" />
- <h:panelGrid cellpadding="0">
- <h:panelGroup>
- <a4j:mediaOutput element="img"
- createContent="#{imageLoader.paintImage}"
- style="border : 2px solid #FFFFFF;"
- value="#{fileManager.transformPath(model.selectedAlbum.images[pageVar].path, '_small80')}">
- <f:param value="#{imageSizeHelper.currentDimension.x}" name="x" />
- </a4j:mediaOutput>
- <br/>
+ xmlns:rich="http://richfaces.org/rich">
+
+ <h:panelGroup layout="block" id="imagesTable"
+ style="margin: 30px 0px 40px 30px; float: left; position: relative; left: -2px;">
+ <a4j:repeat value="#{model.selectedAlbum.images}" rows="5" var="img"
+ id="repeat" rowKeyVar="rk">
+
+ <a4j:outputPanel layout="block"
+ styleClass="preview_box_photo_nav #{model.selectedImage == img ? 'preview_box_photo_current' : 'preview_box_photo_default'}">
+ <h:panelGroup layout="block" styleClass="preview_box_photo_80">
+ <h:graphicImage styleClass="pr_photo_bg"
+ value="/img/shell/frame_photo_80.png" />
+ <h:panelGrid cellpadding="0">
+ <h:panelGroup>
+ <a4j:mediaOutput element="img"
+ createContent="#{imageLoader.paintImage}"
+ value="#{fileManager.transformPath(img.path, '_small80')}">
+ <f:param value="#{imageSizeHelper.currentDimension.x}" name="x" />
+ </a4j:mediaOutput>
+ <br />
+ </h:panelGroup>
+ </h:panelGrid>
+ <h:panelGroup layout="block" styleClass="photo_name">#{img.name}</h:panelGroup>
+ <h:panelGroup layout="block" styleClass="photo_data">#{rk + 1}</h:panelGroup>
</h:panelGroup>
- </h:panelGrid>
- <h:panelGroup layout="block" styleClass="photo_name">#{model.selectedAlbum.images[pageVar].name}</h:panelGroup>
- <h:panelGroup layout="block" styleClass="photo_data">#{pageVar+1}</h:panelGroup>
- </h:panelGroup>
- </f:facet>
- <f:facet name="inactivePage">
- <h:panelGroup layout="block" styleClass="preview_box_photo_80" style="margin: 0px">
- <h:graphicImage styleClass="pr_photo_bg" value="/img/shell/frame_photo_80.png" />
- <h:panelGrid cellpadding="0">
- <h:panelGroup>
- <a4j:mediaOutput element="img"
- createContent="#{imageLoader.paintImage}"
- style="border : 2px solid #FFFFFF;"
- value="#{fileManager.transformPath(model.selectedAlbum.images[pageVar].path, '_small80')}">
- <f:param value="#{imageSizeHelper.currentDimension.x}" name="x" />
- </a4j:mediaOutput>
- <br/>
- </h:panelGroup>
- </h:panelGrid>
- <h:panelGroup layout="block" styleClass="photo_name">#{model.selectedAlbum.images[pageVar].name}</h:panelGroup>
- <h:panelGroup layout="block" styleClass="photo_data">#{pageVar+1}</h:panelGroup>
- </h:panelGroup>
- </f:facet>
- <f:facet name="previous">
- <h:graphicImage styleClass="imageScroller-leftArr" value="img/shell/arr_left.png"></h:graphicImage>
- </f:facet>
- <f:facet name="previous_disabled">
- <h:graphicImage styleClass="imageScroller-leftArr" value="img/shell/arr_left_dis.png"></h:graphicImage>
- </f:facet>
- <f:facet name="next">
- <h:graphicImage styleClass="imageScroller-rightArr" value="img/shell/arr_right.png"></h:graphicImage>
- </f:facet>
- <f:facet name="next_disabled">
- <h:graphicImage styleClass="imageScroller-rightArr" value="img/shell/arr_right_dis.png"></h:graphicImage>
- </f:facet>
- </richx:imageDataScroller>
+
+ <a4j:support event="onclick"
+ rendered="#{model.selectedImage != img}"
+ reRender="mainImage, imagesTable"
+ action="#{controller.showImage(img)}" />
+ </a4j:outputPanel>
+ </a4j:repeat>
+
+ <rich:datascroller styleClass="image-scroller" lastPageMode="full"
+ for="repeat" reRender="imagesTable" boundaryControls="hide"
+ stepControls="hide">
+ <f:facet name="pages">
+ <h:outputText />
+ </f:facet>
+ <f:facet name="fastforward">
+ <h:graphicImage styleClass="image-scroller-right-arrow"
+ value="img/shell/arr_right.png" />
+ </f:facet>
+ <f:facet name="fastforward_disabled">
+ <h:graphicImage styleClass="image-scroller-right-arrow"
+ value="img/shell/arr_right_dis.png" />
+ </f:facet>
+ <f:facet name="fastrewind">
+ <h:graphicImage styleClass="image-scroller-left-arrow"
+ value="img/shell/arr_left.png" />
+ </f:facet>
+ <f:facet name="fastrewind_disabled">
+ <h:graphicImage styleClass="image-scroller-left-arrow"
+ value="img/shell/arr_left_dis.png" />
+ </f:facet>
+ </rich:datascroller>
+ </h:panelGroup>
</ui:composition>
\ No newline at end of file
Modified: trunk/test-applications/realworld2/web/src/main/webapp/stylesheet/realworld.css
===================================================================
--- trunk/test-applications/realworld2/web/src/main/webapp/stylesheet/realworld.css 2009-04-07 17:50:57 UTC (rev 13416)
+++ trunk/test-applications/realworld2/web/src/main/webapp/stylesheet/realworld.css 2009-04-07 18:10:09 UTC (rev 13417)
@@ -362,8 +362,44 @@
.preview_box_photo_nav img.pr_photo_bg {width : 100px; height : 100px; position : absolute; border: 0px;}
.preview_box_photo_nav table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;}
.preview_box_photo_nav table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
-.preview_box_photo_nav table img.sel{margin: 0px 0px 0px 0px; border : 3px solid #DF6400;}
-
+.preview_box_photo_current table img{margin: 0px 0px 0px 0px; border : 3px solid #DF6400;}
+
+.preview_box_photo_default table {
+ cursor: pointer;
+}
+
+.image-scroller {
+ position: relative;
+ left: 0px;
+ top: 0px;
+}
+
+.image-scroller table {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+}
+
+.image-scroller, .image-scroller * {
+ border-style: none;
+ background-color: transparent;
+}
+
+.image-scroller-left-arrow {
+ position: absolute;
+ top: 80px;
+ left: -35px;
+ z-index: 2;
+}
+
+.image-scroller-right-arrow {
+ position: absolute;
+ top: 80px;
+ right: -33px;
+ z-index: 2;
+}
+
.search-div {
height: 65px;
width: 339px;
@@ -886,41 +922,6 @@
font-weight: bold;
}
-.imageScroller {
- border: none;
- position: relative;
- float: left;
- background-color: #CECECE;
-}
-
-.imageScroller-inactive table {
- border: none;
- cursor: pointer;
-}
-
-.imageScroller-table {
- border: none;
- background-color: #CECECE;
-}
-
-.imageScroller-table td {
- border: none;
-}
-
-.imageScroller-leftArr {
- position: absolute;
- left: -10px;
- bottom: 5px;
- z-index: 2;
-}
-
-.imageScroller-rightArr {
- position: absolute;
- right: -10px;
- bottom: 5px;
- z-index: 2;
-}
-
.slideshow-table{
width: 100%;
height: 100%;
More information about the richfaces-svn-commits
mailing list