Author: ishabalov Date: 2007-07-23 20:40:36 -0400 (Mon, 23 Jul 2007) New Revision: 1813 Added: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/common/RandomDataHelper.java trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/Vehicle.java trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/use-with-data-table.xhtml Modified: trunk/samples/richfaces-demo/src/main/webapp/WEB-INF/faces-config.xml trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml Log: Added tooltip on data table sample Added: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/common/RandomDataHelper.java =================================================================== --- trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/common/RandomDataHelper.java (rev 0) +++ trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/common/RandomDataHelper.java 2007-07-24 00:40:36 UTC (rev 1813) @@ -0,0 +1,26 @@ +package org.richfaces.demo.common; + +public class RandomDataHelper { + public static int random(int min, int max) { + assert(min<=max); + return min+(int)Math.round(Math.random()*(double)(max-min)); + } + public static Object random(Object values[]) { + assert(values!=null); + return values[random(0,values.length-1)]; + } + private static char randomChar() { + if (Math.random()>0.5) { + return (char)((int)'0'+random(0,9)); + } else { + return (char)((int)'A'+random(0,25)); + } + } + public static String randomString(int length) { + StringBuffer buf = new StringBuffer(); + for (int counter=0;counter<length;counter++) { + buf.append(randomChar()); + } + return buf.toString(); + } +} Added: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java =================================================================== --- trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java (rev 0) +++ trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java 2007-07-24 00:40:36 UTC (rev 1813) @@ -0,0 +1,42 @@ +package org.richfaces.demo.tooltip; + +import java.util.Date; +import java.util.List; + +public class ToolTipData { + private int tooltipCounter = 0; + private List vehicles = null; + private int currentVehicleIndex = -1; + public int getTooltipCounter() { + try { + Thread.sleep(1000); + } catch (InterruptedException e) { + } + return tooltipCounter++; + } + public Date getTooltipDate() { + return new Date(); + } + public List getVehicles() { + if (vehicles==null) { + vehicles = Vehicle.allVehicles(100); + return vehicles; + } else { + return vehicles; + } + } + public Vehicle getCurrentVehicle() { + if (currentVehicleIndex>0 && currentVehicleIndex<getVehicles().size()) { + return (Vehicle) getVehicles().get(currentVehicleIndex); + } else { + return null; + } + } + public int getCurrentVehicleIndex() { + return currentVehicleIndex; + } + public void setCurrentVehicleIndex(int currentVehicleIndex) { + this.currentVehicleIndex = currentVehicleIndex; + } + +} Added: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/Vehicle.java =================================================================== --- trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/Vehicle.java (rev 0) +++ trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/Vehicle.java 2007-07-24 00:40:36 UTC (rev 1813) @@ -0,0 +1,112 @@ +package org.richfaces.demo.tooltip; + +import java.util.ArrayList; +import java.util.Date; +import java.util.List; + +import org.richfaces.demo.common.RandomDataHelper; + + + +public class Vehicle { + public String make; + public String model; + public Integer year; + public Integer milage; + public String vin; + public Integer zip; + public Date listed; + public Vehicle(String make, String model) { + this.make = make; + this.model = model; + this.listed = new Date(); + } + + public static Vehicle list[] = { + new Vehicle("Ford", "Taurus"), + new Vehicle("Ford", "Mustang"), + new Vehicle("Ford", "Focus"), + new Vehicle("Ford", "Thinderbird"), + new Vehicle("BMW", "Z3"), + new Vehicle("BMW", "323i"), + new Vehicle("BMW", "521"), + new Vehicle("BMW", "Mustang"), + new Vehicle("Audi", "A4"), + new Vehicle("Audi", "A6"), + new Vehicle("Toyota", "Camry"), + new Vehicle("Toyota", "Corolla"), + new Vehicle("Toyota", "Matrix"), + new Vehicle("Honda", "Accord"), + new Vehicle("Honda", "Civic") + }; + + public static List allVehicles(int size) { + List ret = new ArrayList(); + for (int counter=0;counter<size;counter++) { + Vehicle car = (Vehicle)RandomDataHelper.random(list); + car.milage = new Integer(RandomDataHelper.random(10000, 100000)); + car.vin = RandomDataHelper.randomString(32); + car.year = new Integer(RandomDataHelper.random(2000, 2005)); + car.zip = new Integer(RandomDataHelper.random(94500,94600)); + ret.add(car); + } + return ret; + } + + public Date getListed() { + return listed; + } + + public void setListed(Date listed) { + this.listed = listed; + } + + public String getMake() { + return make; + } + + public void setMake(String make) { + this.make = make; + } + + public Integer getMilage() { + return milage; + } + + public void setMilage(Integer milage) { + this.milage = milage; + } + + public String getModel() { + return model; + } + + public void setModel(String model) { + this.model = model; + } + + public String getVin() { + return vin; + } + + public void setVin(String vin) { + this.vin = vin; + } + + public Integer getYear() { + return year; + } + + public void setYear(Integer year) { + this.year = year; + } + + public Integer getZip() { + return zip; + } + + public void setZip(Integer zip) { + this.zip = zip; + } + +} Modified: trunk/samples/richfaces-demo/src/main/webapp/WEB-INF/faces-config.xml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/WEB-INF/faces-config.xml 2007-07-23 19:09:09 UTC (rev 1812) +++ trunk/samples/richfaces-demo/src/main/webapp/WEB-INF/faces-config.xml 2007-07-24 00:40:36 UTC (rev 1813) @@ -169,4 +169,9 @@ <value>#{dndBean}</value> </managed-property> </managed-bean> + <managed-bean> + <managed-bean-name>toolTipData</managed-bean-name> + <managed-bean-class>org.richfaces.demo.tooltip.ToolTipData</managed-bean-class> + <managed-bean-scope>session</managed-bean-scope> + </managed-bean> </faces-config> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml 2007-07-23 19:09:09 UTC (rev 1812) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml 2007-07-24 00:40:36 UTC (rev 1813) @@ -8,54 +8,62 @@ <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> <style> - .barsearch { - height:14px; - width:100px; - } - .barsearchbutton { - border-width:1px; - background-color:#{a4jSkin.generalBackgroundColor}; - } .tooltip { background-color:#{a4jSkin.generalBackgroundColor}; border-width:3px; padding:10px; } + .tooltipData { + font-weight: bold; + } </style> <p> ToolTip is a little non-modal popup that may be used to display additional infrmation, that normally hidden. - Rich ToolTip can request it's content from server in separate Ajax request, or it can use pre-rendered content from page. + + Major toolTip features: + (1) ToolTip content may be tether pre-rendered to the page, or requested from server in separate Ajax request + (2) </p> - <h:form> <div class="sample-container" > <h:outputText id="tt1" value="Here you can see default client-side tooltip" > - <rich:toolTip> - <p> - This tooltip content was <strong>pre-rendered</strong> to the page. - </p> + <rich:toolTip direction="top-right"> + <span> + This tooltip content was <strong>pre-rendered</strong> to the page.<br/> + The look of this tooltip is 100% defined by skin. + </span> </rich:toolTip> </h:outputText> </div> <div class="sample-container" > <h:outputText id="tt2" value="This tooltip will follow mouse" > - <rich:toolTip id="tt11" followMouse="true" direction="bottom-left" delay="10000" onshow="alert('onshow');" onactivate="alert('onactivate');" ondeactivate="alert('deactivate');" styleClass="tooltip" style="width:200px" disabled="false" horizontalOffset="50" verticalOffset="50"> + <rich:toolTip followMouse="true" direction="top-right" delay="1000" styleClass="tooltip" style="width:250px"> <span> - This tooltip content was <strong>pre-rendered</strong> to the page. + This tooltip content also <strong>pre-rendered</strong> to the page. + The look of this tooltip defined by styleClass attribute. </span> </rich:toolTip> </h:outputText> </div> <div class="sample-container"> - <h:outputText value="Tooltip with followMouse mode" id="tt3"> - <rich:toolTip id="tt4" followMouse="true" direction="top-left" mode="ajax" horizontalOffset="20" verticalOffset="20"> + <h:form> + <h:outputText value="This tooltip rendered on server in separate request" id="tt3"> + <rich:toolTip direction="top-right" mode="ajax" verticalOffset="5" zorder="200" styleClass="tooltip"> <f:facet name="defaultContent"> - <h:outputText value="Some text will be here soon" /> + <strong>Wait...</strong> </f:facet> - <h:outputText value="Final content" /> + <span>This tooltip content was <strong>rendered</strong> on server </span> + <h:panelGrid columns="2"> + <h:outputText value="tooltips requested:" /> + <h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" /> + <h:outputText value="last request:" /> + <h:outputText value="#{toolTipData.tooltipDate}" styleClass="tooltipData" > + <f:convertDateTime pattern="mm:ss.SSS"/> + </h:outputText> + </h:panelGrid> </rich:toolTip> </h:outputText> + </h:form> </div> - </h:form> </ui:define> <ui:define name="sources"> <p> Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/use-with-data-table.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/use-with-data-table.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/use-with-data-table.xhtml 2007-07-24 00:40:36 UTC (rev 1813) @@ -0,0 +1,103 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:a4j="http://richfaces.org/ajax" + xmlns:rich="http://richfaces.ajax4jsf.org/rich"> + <ui:composition template="/templates/component-sample.xhtml"> + <ui:define name="sample"> + <style> + .tooltip { + background-color:#{a4jSkin.generalBackgroundColor}; + border-width:3px; + padding:10px; + } + .tooltipData { + font-weight: bold; + } + </style> + <p> + This little example show how ToolTip may be used in DataTable + </p> + <div class="sample-container"> + <h:form> + <h:outputText value="This tooltip rendered on server in separate request" id="tt3"> + <rich:toolTip direction="top-right" mode="ajax" verticalOffset="5" zorder="200" styleClass="tooltip"> + <f:facet name="defaultContent"> + <strong>Wait...</strong> + </f:facet> + <span>This tooltip content was <strong>rendered</strong> on server </span> + <h:panelGrid columns="2"> + <h:outputText value="tooltips requested:" /> + <h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" /> + <h:outputText value="last request:" /> + <h:outputText value="#{toolTipData.tooltipDate}" styleClass="tooltipData" > + <f:convertDateTime pattern="mm:ss.SSS"/> + </h:outputText> + </h:panelGrid> + </rich:toolTip> + </h:outputText> + <rich:dataTable value="#{toolTipData.vehicles}" var="vehicle" rowKeyVar="row"> + <rich:column> + <f:facet name="header"> + <h:outputText value="##"/> + </f:facet> + <h:outputText value="#{row+1}" /> + </rich:column> + <rich:column> + <f:facet name="header"> + <h:outputText value="Make"/> + </f:facet> + <h:outputText id="make" value="#{vehicle.make}" > + <rich:toolTip direction="top-right" mode="ajax" styleClass="tooltip"> + <a4j:actionparam name="key" value="#{row}" assignTo="#{toolTipData.currentVehicleIndex}" /> + <f:facet name="defaultContent"> + <strong>Wait...</strong> + </f:facet> + <span>Vehicle details:</span> + <h:panelGrid columns="2"> + <h:outputText value="make:" /> + <h:outputText value="#{vehicle.make}" styleClass="tooltipData" /> + <h:outputText value="model:" /> + <h:outputText value="#{vehicle.model}" styleClass="tooltipData" /> + <h:outputText value="year:" /> + <h:outputText value="#{vehicle.year}" styleClass="tooltipData" /> + <h:outputText value="milage:" /> + <h:outputText value="#{vehicle.milage}" styleClass="tooltipData" /> + <h:outputText value="zip:" /> + <h:outputText value="#{vehicle.zip}" styleClass="tooltipData" /> + <h:outputText value="vin:" /> + <h:outputText value="#{vehicle.vin}" styleClass="tooltipData" /> + <h:outputText value="listed:" /> + <h:outputText value="#{vehicle.listed}" styleClass="tooltipData" > + <f:convertDateTime dateStyle="short"/> + </h:outputText> + </h:panelGrid> + </rich:toolTip> + </h:outputText> + </rich:column> + <rich:column> + <f:facet name="header"> + <h:outputText value="Model"/> + </f:facet> + <h:outputText value="#{vehicle.model}" /> + </rich:column> + <rich:column> + <f:facet name="header"> + <h:outputText value="Year"/> + </f:facet> + <h:outputText value="#{vehicle.year}" /> + </rich:column> + </rich:dataTable> + </h:form> + </div> + </ui:define> + <ui:define name="sources"> + <p> + Here is fragment of page sources for given example: + </p> + <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/toolBar/source/usage.html" class="source_frame"/> + </ui:define> + </ui:composition> +</html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip.xhtml 2007-07-23 19:09:09 UTC (rev 1812) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip.xhtml 2007-07-24 00:40:36 UTC (rev 1813) @@ -13,6 +13,9 @@ <rich:tab label="Usage"> <ui:include src="/richfaces/toolTip/usage.xhtml"/> </rich:tab> + <rich:tab label="Use ToolTip with DataTable"> + <ui:include src="/richfaces/toolTip/use-with-data-table.xhtml"/> + </rich:tab> </rich:tabPanel> </ui:define> </ui:composition>