[richfaces-svn-commits] JBoss Rich Faces SVN: r13417 - in trunk/test-applications/realworld2/web/src/main/webapp: includes/image and 2 other directories.

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%;