An Error Occurred:
/products/jni/layout/downloadWidget.xhtml: Error reading 'evaluationInfo' on type com.teamdev.site.jsf.beans.product.ProductPageHandler
javax.el.ELException: /products/jni/layout/downloadWidget.xhtml: Error reading 'evaluationInfo' on type com.teamdev.site.jsf.beans.product.ProductPageHandler
at com.sun.facelets.compiler.TextInstruction.write(TextInstruction.java:48)
at com.sun.facelets.compiler.UIInstructions.encodeBegin(UIInstructions.java:39)
at com.sun.facelets.compiler.UILeaf.encodeAll(UILeaf.java:149)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:942)
at com.sun.facelets.FaceletViewHandler.renderView(FaceletViewHandler.java:592)
at teamdev.jsf.ai.renderView(SourceFile:49)
at teamdev.jsf.cl.renderView(SourceFile:405)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:109)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:100)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:266)
at org.sevenhats.util.servlet.AbstractServletWrapper.service(AbstractServletWrapper.java:28)
at org.sevenhats.jsf.impl.FacesServletWrapper.service(FacesServletWrapper.java:79)
at org.eclipse.equinox.http.helper.FilterServletAdaptor$FilterChainImpl.doFilter(FilterServletAdaptor.java:56)
at org.sevenhats.web.common.FilterMappingFilter$FilterChainExtension.doFilter(FilterMappingFilter.java:82)
at org.acegisecurity.util.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:265)
at org.acegisecurity.intercept.web.FilterSecurityInterceptor.invoke(FilterSecurityInterceptor.java:107)
at org.acegisecurity.intercept.web.FilterSecurityInterceptor.doFilter(FilterSecurityInterceptor.java:72)
at org.acegisecurity.util.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:275)
at org.acegisecurity.ui.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:166)
at org.acegisecurity.util.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:275)
at org.acegisecurity.ui.AbstractProcessingFilter.doFilter(AbstractProcessingFilter.java:271)
at org.acegisecurity.util.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:275)
at org.acegisecurity.ui.logout.LogoutFilter.doFilter(LogoutFilter.java:110)
at org.acegisecurity.util.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:275)
at org.acegisecurity.context.HttpSessionContextIntegrationFilter.doFilter(HttpSessionContextIntegrationFilter.java:249)
at org.acegisecurity.util.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:275)
at org.acegisecurity.util.FilterChainProxy.doFilter(FilterChainProxy.java:149)
at org.sevenhats.web.common.FilterMappingFilter$FilterChainExtension.doFilter(FilterMappingFilter.java:93)
at com.teamdev.site.jsf.filter.NoCacheFilter.doFilter(NoCacheFilter.java:48)
at org.sevenhats.web.common.FilterMappingFilter$FilterChainExtension.doFilter(FilterMappingFilter.java:93)
at com.teamdev.site.jsf.filter.ForwardFilter.doFilter(ForwardFilter.java:55)
at org.sevenhats.web.common.FilterMappingFilter$FilterChainExtension.doFilter(FilterMappingFilter.java:93)
at org.sevenhats.web.transaction.TransactionFilter.doFilter(TransactionFilter.java:48)
at org.sevenhats.web.common.FilterMappingFilter$FilterChainExtension.doFilter(FilterMappingFilter.java:93)
at org.apache.myfaces.webapp.filter.ExtensionsFilter.doFilter(ExtensionsFilter.java:301)
at org.sevenhats.web.common.FilterMappingFilter$FilterChainExtension.doFilter(FilterMappingFilter.java:93)
at teamdev.jsf.util.ResourceFilter.doFilter(SourceFile:93)
at org.sevenhats.web.common.FilterMappingFilter$FilterChainExtension.doFilter(FilterMappingFilter.java:93)
at org.sevenhats.web.common.FilterMappingFilter.doFilter(FilterMappingFilter.java:60)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.eclipse.equinox.http.helper.FilterServletAdaptor$FilterChainImpl.doFilter(FilterServletAdaptor.java:56)
at org.sevenhats.web.common.WelcomeFileSupportFilter.doFilter(WelcomeFileSupportFilter.java:74)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.eclipse.equinox.http.helper.FilterServletAdaptor$FilterChainImpl.doFilter(FilterServletAdaptor.java:56)
at org.sevenhats.web.common.UrlPathMappingSupportFilter.doFilter(UrlPathMappingSupportFilter.java:60)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.eclipse.equinox.http.helper.FilterServletAdaptor$FilterChainImpl.doFilter(FilterServletAdaptor.java:56)
at org.sevenhats.web.impl.ScopeRegistrationFilter.doFilter(ScopeRegistrationFilter.java:56)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.sevenhats.web.common.TargetBundleAwareServlet.service(TargetBundleAwareServlet.java:79)
at org.eclipse.equinox.http.helper.ContextInitParametersServletAdaptor.service(ContextInitParametersServletAdaptor.java:34)
at org.eclipse.equinox.http.helper.FilterServletAdaptor$FilterChainImpl.doFilter(FilterServletAdaptor.java:56)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:70)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.eclipse.equinox.http.servlet.internal.ServletRegistration.handleRequest(ServletRegistration.java:90)
at org.eclipse.equinox.http.servlet.internal.ProxyServlet.processAlias(ProxyServlet.java:111)
at org.eclipse.equinox.http.servlet.internal.ProxyServlet.service(ProxyServlet.java:75)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:820)
at org.eclipse.equinox.http.jetty.internal.HttpServerManager$InternalHttpServiceServlet.service(HttpServerManager.java:255)
at org.mortbay.jetty.servlet.ServletHolder.handle(ServletHolder.java:487)
at org.mortbay.jetty.servlet.ServletHandler.handle(ServletHandler.java:362)
at org.mortbay.jetty.servlet.SessionHandler.handle(SessionHandler.java:181)
at org.mortbay.jetty.handler.ContextHandler.handle(ContextHandler.java:726)
at org.mortbay.jetty.servlet.Dispatcher.forward(Dispatcher.java:285)
at org.mortbay.jetty.servlet.Dispatcher.forward(Dispatcher.java:126)
at org.eclipse.equinox.http.servlet.internal.RequestDispatcherAdaptor.forward(RequestDispatcherAdaptor.java:30)
at com.teamdev.site.jsf.filter.ForwardFilter.doFilter(ForwardFilter.java:49)
at org.sevenhats.web.common.FilterMappingFilter$FilterChainExtension.doFilter(FilterMappingFilter.java:93)
at org.sevenhats.web.transaction.TransactionFilter.doFilter(TransactionFilter.java:63)
at org.sevenhats.web.common.FilterMappingFilter$FilterChainExtension.doFilter(FilterMappingFilter.java:93)
at org.sevenhats.web.common.FilterMappingFilter.doFilter(FilterMappingFilter.java:60)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.eclipse.equinox.http.helper.FilterServletAdaptor$FilterChainImpl.doFilter(FilterServletAdaptor.java:56)
at org.sevenhats.web.common.WelcomeFileSupportFilter.doFilter(WelcomeFileSupportFilter.java:74)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.eclipse.equinox.http.helper.FilterServletAdaptor$FilterChainImpl.doFilter(FilterServletAdaptor.java:56)
at org.sevenhats.web.common.UrlPathMappingSupportFilter.doFilter(UrlPathMappingSupportFilter.java:60)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.eclipse.equinox.http.helper.FilterServletAdaptor$FilterChainImpl.doFilter(FilterServletAdaptor.java:56)
at org.sevenhats.web.impl.ScopeRegistrationFilter.doFilter(ScopeRegistrationFilter.java:56)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.sevenhats.web.common.TargetBundleAwareServlet.service(TargetBundleAwareServlet.java:79)
at org.eclipse.equinox.http.helper.ContextInitParametersServletAdaptor.service(ContextInitParametersServletAdaptor.java:34)
at org.eclipse.equinox.http.helper.FilterServletAdaptor$FilterChainImpl.doFilter(FilterServletAdaptor.java:56)
at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:83)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:76)
at org.eclipse.equinox.http.helper.FilterServletAdaptor.service(FilterServletAdaptor.java:37)
at org.eclipse.equinox.http.servlet.internal.ServletRegistration.handleRequest(ServletRegistration.java:90)
at org.eclipse.equinox.http.servlet.internal.ProxyServlet.processAlias(ProxyServlet.java:111)
at org.eclipse.equinox.http.servlet.internal.ProxyServlet.service(ProxyServlet.java:75)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:820)
at org.eclipse.equinox.http.jetty.internal.HttpServerManager$InternalHttpServiceServlet.service(HttpServerManager.java:255)
at org.mortbay.jetty.servlet.ServletHolder.handle(ServletHolder.java:487)
at org.mortbay.jetty.servlet.ServletHandler.handle(ServletHandler.java:362)
at org.mortbay.jetty.servlet.SessionHandler.handle(SessionHandler.java:181)
at org.mortbay.jetty.handler.ContextHandler.handle(ContextHandler.java:726)
at org.mortbay.jetty.handler.HandlerWrapper.handle(HandlerWrapper.java:139)
at org.mortbay.jetty.Server.handle(Server.java:324)
at org.mortbay.jetty.HttpConnection.handleRequest(HttpConnection.java:505)
at org.mortbay.jetty.HttpConnection$RequestHandler.headerComplete(HttpConnection.java:828)
at org.mortbay.jetty.HttpParser.parseNext(HttpParser.java:514)
at org.mortbay.jetty.HttpParser.parseAvailable(HttpParser.java:211)
at org.mortbay.jetty.HttpConnection.handle(HttpConnection.java:380)
at org.mortbay.io.nio.SelectChannelEndPoint.run(SelectChannelEndPoint.java:395)
at org.mortbay.thread.BoundedThreadPool$PoolThread.run(BoundedThreadPool.java:450)
Caused by: java.lang.NullPointerException
at com.teamdev.site.jsf.beans.product.ProductPageHandler.getAcceptableProductFor(ProductPageHandler.java:82)
at com.teamdev.site.jsf.beans.product.ProductPageHandler.getEvaluationInfo(ProductPageHandler.java:54)
at sun.reflect.GeneratedMethodAccessor154.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at javax.el.BeanELResolver.getValue(BeanELResolver.java:62)
at javax.el.CompositeELResolver.getValue(CompositeELResolver.java:53)
at com.sun.faces.el.FacesCompositeELResolver.getValue(FacesCompositeELResolver.java:72)
at com.sun.el.parser.AstValue.getValue(AstValue.java:117)
at com.sun.el.ValueExpressionImpl.getValue(ValueExpressionImpl.java:192)
at com.sun.facelets.el.ELText$ELTextVariable.writeText(ELText.java:184)
at com.sun.facelets.el.ELText$ELTextComposite.writeText(ELText.java:108)
at com.sun.facelets.compiler.TextInstruction.write(TextInstruction.java:45)
... 105 more
- <dn id="_teamdev_ViewRoot" locale="en_US" renderKitId="HTML_BASIC" rendered="true" transient="false" viewId="/quipukit/index.xhtml">
- _QuipuKitValidationProcessor_
- <ValidationProcessor id="teamdevValidationProcessor" rendered="false" transient="false" useDefaultClientValidationPresentationForApplication="true" useDefaultServerValidationPresentationForApplication="true"/>
- <!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">
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="AUTHOR" content="TeamDev Ltd."/>
<meta name="CONTENT-LANGUAGE" content="en-US,ru"/>
<meta name="COPYRIGHT" content=" 2009 TeamDev Ltd."/>
<meta name="CACHE-CONTROL" content="Public"/>
- <ComponentRef id="j_id3" rendered="true" transient="false">
- <meta name="Keywords" content="#{metaKeywords}"/>
- </ComponentRef>
- <ComponentRef id="j_id5" rendered="true" transient="false">
- <meta name="Description" content="#{metaDescription}"/>
- </ComponentRef>
- <title>
- #{productPage.productName} — #{propertyService.properties['company.name.full']}
- </title>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/reset.css" type="text/css" media="screen,projection"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/layout.css" type="text/css" media="screen,projection"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/main.css" type="text/css" media="screen,projection"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/menu.css" type="text/css" media="screen,projection"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/boxes.css" type="text/css" media="screen,projection"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/popup.css" type="text/css" media="screen,projection"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/handheld.css" type="text/css" media="handheld"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/edit.css" type="text/css" media="screen,projection"/>
- <link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/products.css" type="text/css" media="screen,projection"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/product_#{productName}.css" type="text/css" media="screen,projection"/>
- <script src="#{facesContext.externalContext.requestContextPath}/js/jquery/jquery-1.2.6.pack.js" type="text/javascript"/>
<script src="#{facesContext.externalContext.requestContextPath}/js/jquery/facebox.js" type="text/javascript"/>
<script src="#{facesContext.externalContext.requestContextPath}/js/jquery/jquery.hoverIntent.minified.js" type="text/javascript"/>
<script src="#{facesContext.externalContext.requestContextPath}/js/main.js" type="text/javascript"/>
<script src="#{facesContext.externalContext.requestContextPath}/js/dlink.js?notitles&nomailevents" type="text/javascript"/>
- <script src="/js/jquery/jquery.history.js" type="text/javascript"/>
<script src="#{facesContext.externalContext.requestContextPath}/js/testimonials.js" type="text/javascript"/>
- <!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="/css/style_ie6.css">
<script src="/js/stylefix.js" type="text/javascript"></script>
<![endif]-->
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
- <link rel="alternate" type="application/rss+xml" title="TeamDev #{productPage.productName} Product News" href="http://support.teamdev.com/blogs/feeds/tags/#{productName}"/>
- <link rel="alternate" type="application/rss+xml" title="TeamDev Company News" href="http://support.teamdev.com/blogs/feeds/tags/company_news"/>
<link rel="alternate" type="application/rss+xml" title="TeamDev Products Release Notes" href="http://support.teamdev.com/blogs/feeds/tags/release_notes"/>
<link rel="alternate" type="application/rss+xml" title="TeamDev Support Blog Posts Feed" href="http://support.teamdev.com/community/feeds/blogs?community=1"/>
<link rel="alternate" type="application/rss+xml" title="TeamDev Support Documents Feed" href="http://support.teamdev.com/community/feeds/documents?community=1"/>
</head>
<body id="#{bodyId}">
- <AjaxSettings id="j_id16" progressMessage="teamdev.jsf.component.ajaxsettings.DefaultProgressMessage@4da615" rendered="true" sessionExpiration="teamdev.jsf.component.ajaxsettings.DefaultSessionExpiration@1d2bf51" transient="false">
- progressMessage
- <DefaultProgressMessage id="j_id17" rendered="true" style="display: none;" transient="false"/>
- sessionExpiration
- <DefaultSessionExpiration confirmation="teamdev.jsf.component.confirmation.Confirmation@10e9310" id="j_id90" rendered="true" transient="false">
- <Confirmation alignToInvoker="false" cancelButtonText="Reload later" captionText="Session Expired" closeOnOuterClick="false" details="A new session will be created when the page is reloaded" draggable="false" draggableByContent="true" height="160px" hidingTimeout="-1" id="j_id90--confirm_expiration" message="Your session has expired" minHeight="80px" minWidth="150px" modal="true" modalLayerStyle="background: black; filter: alpha(opacity=50); opacity: .50;" okButtonText="Reload page now" rendered="true" resizeable="false" showCloseWindowButton="false" showMessageIcon="true" transient="false" visible="false" width="400px"/>
- </DefaultSessionExpiration>
- </AjaxSettings>
- <div id="Page">
- <h1 id="Logo_small"><a href="/"><img src="#{facesContext.externalContext.requestContextPath}/images/logos/logo_1.png" alt="#{propertyService.properties['company.name.full']} Home Page" title="#{propertyService.properties['company.name.full']} Home Page"/></a></h1>
- <UINamingContainer id="menuSubview" rendered="true" transient="false">
- <UINamingContainer id="menuSubview" rendered="true" transient="false">
- <ul id="Menu">
<li class="orange_bg #{current=='product' ? 'current' : ''}"><a href="/products/"><span><img src="/images/menu/blank.gif" alt="Producs"/></span></a></li>
<li class="green_bg #{current=='store' ? 'current' : ''}"><a href="/store/"><span><img src="/images/menu/blank.gif" alt="Store"/></span></a></li>
<li class="violet_bg #{current=='support' ? 'current' : ''}"><a href="/support/"><span><img src="/images/menu/blank.gif" alt="Support"/></span></a></li>
<li class="indigo_bg #{current=='services' ? 'current' : ''}"><a href="/services/"><span><img src="/images/menu/blank.gif" alt="Services"/></span></a></li>
<li class="blue_bg lastItem #{current=='company' ? 'current' : ''}"><a href="/company/"><span><img src="/images/menu/blank.gif" alt="Company"/></span></a></li>
- </ul>
- </UINamingContainer>
- </UINamingContainer>
- <UINamingContainer id="submenuSubview" rendered="true" transient="false">
- <UIRepeat id="j_id22" offset="0" rendered="true" size="-1" transient="false" var="group">
- <ul class="SubMenu #{group.name}">
- <UIRepeat id="j_id24" offset="0" rendered="true" size="-1" transient="false" var="item">
- <li class="#{item.current ? 'active' : ''} #{item.menuType.value=='IMAGE' ? 'imagemenu' : ''}">
- <HtmlPanelGroup id="j_id26" rendered="false" transient="false">
- <span>
- <HtmlGraphicImage alt="Overview" id="j_id28" ismap="false" rendered="false" transient="false"/>
- <HtmlOutputText escape="true" id="j_id29" rendered="false" transient="false"/>
- </span>
- </HtmlPanelGroup>
- <HtmlPanelGroup id="j_id31" rendered="true" transient="false">
- <a href="#{item.url}" id="#{item.linkId}">
- <HtmlGraphicImage alt="Overview" id="j_id33" ismap="false" rendered="false" transient="false"/>
- <HtmlOutputText escape="true" id="j_id34" rendered="false" transient="false"/>
- </a>
- </HtmlPanelGroup>
- </li>
- </UIRepeat>
- </ul>
- </UIRepeat>
- </UINamingContainer>
- <div id="Content">
- <div id="rightContent" class="Col4_4 hide">
- <script src="/js/jquery/jquery.validate.js" type="text/javascript"/>
<script type="text/javascript">
var product = '#{productPage.productName}';
function fireGoogleAnalytics(productName, evaluate) {
var action = evaluate ? "evaluate" : "download";
var eventStr = "/" + action + "-" + productName;
pageTracker._trackPageview(eventStr);
}
function show(id) {
var component = document.getElementById(id);
component.className = 'visible';
$("#download\\:email").addClass("required email");
$("#download\\:name").addClass("required");
}
function hide(id) {
var component = document.getElementById(id);
component.className = 'hidden';
$("#download\\:email").removeClass("required email error");
$("#download\\:name").removeClass("required error");
}
function changeVisibility(id) {
var component = document.getElementById('download:evaluation');
if (component.checked) {
show(id);
} else {
hide(id);
}
}
function emailValid() {
if(isEvaluationChecked()){
return $('#download\\:email').valid();
} else {
return true;
}
}
$(document).ready(function() {
document.getElementById("download:evaluation").checked = #{productPage.evaluationInfo.sendEvaluation};
document.getElementById("download:email").value = "#{productPage.evaluationInfo.email}";
document.getElementById("download:name").value = "#{productPage.evaluationInfo.name}";
$("#download").validate( {
ignore :".ignore",
errorPlacement : function(error, element) {
// Do nothing
}
});
});
function isEvaluationChecked() {
return document.getElementById('download:evaluation').checked;
}
function isFormValid() {
var valid = $("#download").valid();
return valid;
}
function processSubmit() {
if( isFormValid() ) {
var component = document.getElementById('download:evaluation');
fireGoogleAnalytics(product, component.checked)
} else {
return false;
}
}
</script>
<div id="downloadEvaluateBox" class="BoxGrey SideBar">
<div class="container">
<h3>Download & Evaluate</h3>
</div>
<div class="content">
<p>#{productPage.productName}#{empty productPage.version ? '' : ' '}#{productPage.version}. See <a class="external" href="#{releaseNotesLink}">release notes</a></p>
- <HtmlForm enctype="application/x-www-form-urlencoded" id="download" onsubmit="processSubmit();" prependId="true" rendered="true" submitted="false" transient="false">
- <table>
<tbody>
- <HtmlPanelGroup id="j_id42" rendered="false" transient="false">
- <tr>
<td class="labelHolder">
- <HtmlOutputLabel escape="true" for="platform" id="j_id44" rendered="true" transient="false">
- Platform:
- </HtmlOutputLabel>
- </td>
<td>
- <DropDownField autoComplete="true" buttonAlignment="right" buttonClass="donwloadDropDownButton" converter="com.teamdev.site.jsf.beans.product.ProductPageHandler$ProductConverter@1d93866" customValueAllowed="false" disabled="false" fieldClass="dropdownFieldClass" id="product" immediate="false" listAlignment="left" listItemClass="donwloadDropDownlistItem" localValueSet="false" maxlength="-2147483648" rendered="true" required="false" size="-2147483648" styleClass="downloadInput" suggestionDelay="350" suggestionMinChars="0" suggestionMode="all" timeout="-1" transient="false" valid="true" var="item">
- popup
- <DropDownPopup id="product--popup" rendered="true" transient="false"/>
- <DropDownItems id="j_id47" rendered="true" transient="false"/>
- <TableColumn filterKind="searchField" id="j_id48" rendered="true" resizeable="true" transient="false">
- <HtmlGraphicImage id="j_id49" ismap="false" rendered="true" transient="false"/>
- </TableColumn>
- <TableColumn filterKind="searchField" id="j_id50" rendered="true" resizeable="true" transient="false">
- <HtmlOutputText escape="true" id="j_id51" rendered="true" transient="false" value=" "/>
- </TableColumn>
- </DropDownField>
- </td>
</tr>
- </HtmlPanelGroup>
- <tr>
<td class="labelHolder"> </td>
<td>
<table cellpadding="0" cellspacing="0" class="evaluationCheckboxHolder">
<tr>
<td style="padding-right: 5px;">
- <HtmlSelectBooleanCheckbox disabled="false" id="evaluation" immediate="false" localValueSet="false" onclick="changeVisibility('nameRow');changeVisibility('emailRow');" readonly="false" rendered="true" required="false" style="" transient="false" valid="true"/>
- </td>
<td>
- <HtmlOutputLabel escape="true" for="evaluation" id="j_id55" rendered="true" transient="false">
- Get evaluation key
- </HtmlOutputLabel>
- </td>
</tr>
</table>
</td>
</tr>
<tr id="nameRow">
<td class="labelHolder">
- <HtmlOutputLabel escape="true" for="name" id="j_id58" rendered="true" transient="false">
- Name:
- </HtmlOutputLabel>
- </td>
<td>
- <HtmlInputText disabled="false" id="name" immediate="false" localValueSet="false" maxlength="-2147483648" readonly="false" rendered="true" required="false" size="-2147483648" styleClass="downloadInput required" transient="false" valid="true"/>
- </td>
</tr>
<tr id="emailRow">
<td class="labelHolder">
- <HtmlOutputLabel escape="true" for="email" id="j_id62" rendered="true" transient="false">
- Email:
- </HtmlOutputLabel>
- </td>
<td>
- <HtmlInputText disabled="false" id="email" immediate="false" localValueSet="false" maxlength="-2147483648" readonly="false" rendered="true" required="false" size="-2147483648" styleClass="downloadInput required email " transient="false" valid="true"/>
- </td>
</tr>
<tr>
<td/>
<td>
- <HtmlCommandButton action="#{productPage.evaluate}" actionExpression="#{productPage.evaluate}" disabled="false" id="j_id66" immediate="false" readonly="false" rendered="true" transient="false" type="submit" value="Download"/>
- </td>
</tr>
</tbody>
</table>
- </HtmlForm>
- </div>
</div>
- <HtmlForm enctype="application/x-www-form-urlencoded" id="j_id69" prependId="true" rendered="true" submitted="false" transient="false">
- <HtmlOutputText escape="false" id="j_id70" rendered="true" transient="false" value="<div>
"/>
- <HtmlOutputText escape="false" id="j_id71" rendered="true" transient="false" value="<div class="BoxGrey" style="background:transparent; border: 0px; margin: -1em 0;">
<div class="content">
<div style="width:92px; float: left; margin-left:-10px;margin-top: 5px;"><a href="/store/quipukit/">
<img src="/images/buttons/buynow.png" alt="Buy now" border="0"/></a>
</div>
<div style="margin-left:89px;">
<br/>
<p>Buy online in few steps<br/>
Questions by <a href="mailto:sales@teamdev.com" class="gray">email</a></p>
</div>
</div>
</div>"/>
- <HtmlOutputText escape="false" id="j_id72" rendered="true" transient="false" value="
</div>"/>
- </HtmlForm>
- </div>
- <HtmlForm enctype="application/x-www-form-urlencoded" id="j_id74" prependId="true" rendered="true" submitted="false" transient="false">
- <HtmlOutputText escape="false" id="j_id75" rendered="true" transient="false" value="<script type="text/javascript">
function pageload(hash) {
if(hash) {
$(".tabs").hide();
$("#rightContent").hide();
$("#div_" + hash).show();
$("#QuipuKitMenu > ul.arrowSubMenu > li.selected").removeClass("selected");
$("a[href='#"+ hash +"']").parent().addClass("selected");
} else {
// start page
$(".tabs").hide();
$("#QuipuKitMenu > ul.arrowSubMenu > li.selected").removeClass("selected");
$("#div_overview").show();
$("#rightContent").show();
}
}
$(document).ready(function(){
$.historyInit(pageload);
$("#menuOverview").click(componentMenuClick);
$("#QuipuKitMenu > ul.arrowSubMenu > li > a").click(componentMenuClick);
});
function componentMenuClick () {
$("#QuipuKitMenu > ul.arrowSubMenu > li.selected").removeClass("selected");
$(this.parentNode).addClass("selected");
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
$.historyLoad(hash);
return false;
}
</script>
<div class="container hangingContent">
<div class="Col4_1 nomargintop">
<div id="QuipuKitMenu">
<ul class="arrowSubMenu">
<li style="display:none;"><a href="#overview"></a></li>
<li>
<a href="#Calendar">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/calendar.png');"></span>
<span class="_text">Calendar</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#Chart">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/chart.png');"></span>
<span class="_text">Chart</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#ConfirmationDialog">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/confirmation.png');"></span>
<span class="_text">Confirmation</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#DataTable">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/data_table.png');"></span>
<span class="_text">Data Table</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#DateChooser">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/date_chooser.png');"></span>
<span class="_text">Date Chooser</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#DropDownField">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/drop_down_field.png');"></span>
<span class="_text">Drop Down Field</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#DynamicImage">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/dynamic_image.png');"></span>
<span class="_text">Dynamic Image</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#FoldingPanel">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/folding_panel.png');"></span>
<span class="_text">Folding Panel</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#GraphicText">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/graphic_text.png');"></span>
<span class="_text">Graphic Text</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#HintLabel">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/hint_label.png');"></span>
<span class="_text">Hint Label</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#PopupLayer">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/popup_layer.png');"></span>
<span class="_text">Popup Layer</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#SuggestionField">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/suggestion_field.png');"></span>
<span class="_text">Suggestion Field</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#TabSet">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/tab_set.png');"></span>
<span class="_text">Tab Set</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#TabbedPane">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/tabbed_pane.png');"></span>
<span class="_text">Tabbed Pane</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#TreeTable">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/tree_table.png');"></span>
<span class="_text">Tree Table</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#TwoListSelection">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/two_list_selection.png');"></span>
<span class="_text">Two List Selection</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#ValidationFramework">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/validation_framework.png');"></span>
<span class="_text">Validation Framework</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
<li>
<a href="#UtilityComponents">
<span class="_icon" style="background-image:url('/images/products/quipukit/icons/utility_components.png');"></span>
<span class="_text">Utility Components</span>
<span class="_right"><!--Arrow--></span>
</a>
</li>
</ul>
</div>
</div>
<div class="Col4_234 nomargintop serif">
<div id="div_overview" class="tabs hide">
<div class="container">
<div class="Col3_12 nomargintop">
<h3><img src="/images/products/quipukit/everything_you_need.png" alt="Everything you need to build rich Web interfaces" /></h3><br />
<p>QuipuKit is a JSF library that provides an extended set of AJAX-powered JSF components and validation framework that shifts the traditional JSF validation to the client side.</p>
<p>The component suite of QuipuKit includes both visual and auxiliary non-visual components that give you more control over your Web application usability.</p>
<p>With QuipuKit, you do less coding as most features commonly needed to bring interactivity to your Web application are already there:</p>
</div>
<div class="Col3_3 nomargintop" style="margin-left:66.5%;">
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Ajax-enabled Page Updates</h4>
<p>When any change occurs on a web page, only a required amount of data is updated with no full page reload.</p>
</div>
<div class="Col3_2">
<h4>Client-side Validation</h4>
<p>All the server-side validation logic of standard JSF validators can be performed right on the client side.</p>
</div>
<div class="Col3_3">
<h4>Rich & Flexible Styling</h4>
<p>A wealth of styling options is available to create a desired look-and-feel for any part of a QuipuKit component by using familiar CSS rules.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Enhanced End-user Experience</h4>
<p>Various DHTML features implemented in QuipuKit components improve interaction with application data and overall usability of a Web UI.</p>
</div>
<div class="Col3_2">
<h4>Advanced Components</h4>
<p>QuipuKit complements the standard JSF components with advanced components to provide you with everything you might need to create any type of rich web application.</p>
</div>
<div class="Col3_3">
<h4>Comprehensive Guides</h4>
<p><a href="/downloads/quipukit/documentation/developersGuide/index.html" rel="external" class="external">Developer’s Guide</a>, <a href="/downloads/quipukit/documentation/tagReference/index.html" rel="external" class="external">Tag Reference</a> and <a href="/downloads/quipukit/documentation/apiReference/index.html" rel="external" class="external">API Reference</a> will help you to incorporate QuipuKit components and validation framework features into your application.</p>
</div>
</div>
<div class="container">
<div class="Col3_12">
<h4>Flexible Validation Logic & Error Presentation</h4>
<p>QuipuKit provides an extra set of validators to ensure correctness of e-mail addresses, passwords, URLs, or custom format input data. Plus, you are given more options to visually highlight validation errors.</p>
</div>
</div><br />
<div class="lightgray_box">
<div class="Col1_1 nomargintop">
<h4>Supported Environments</h4>
</div>
<div class="container hangingContent">
<div class="Col3_1 nomargintop">
<ul class="nohang">
<li>JSF Implementations:
<ul class="hang">
<li>Apache MyFaces 1.1.1–1.1.5 and 1.2</li>
<li>Sun JSF Reference Implementation 1.1 and 1.2</li>
</ul>
</li>
</ul>
</div>
<div class="Col3_2 nomargintop">
<ul class="nohang">
<li>JSR-168 Portlets:
<ul class="hang">
<li>JBoss Portal 2.4.x and 2.6.x</li>
<li>Liferay Portal 4.2.1</li>
<li>Jetspeed-2 Enterprise Portal</li>
</ul>
</li>
</ul>
</div>
<div class="Col3_3 nomargintop">
<ul class="nohang">
<li>Frameworks:
<ul class="hang">
<li>Facelets Framework</li>
<li>RichFaces/Ajax4jsf Framework</li>
<li>JBoss Seam Framework</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="container hangingContent">
<div class="Col3_1 nomargintop">
<ul class="nohang">
<li>Web Browsers:<sup>*</sup>
<ul class="hang">
<li>Microsoft Internet Explorer (6.0–7.0)</li>
<li>Mozilla Firefox (1.5–3.0)</li>
<li>Opera (8.5–9.6)</li>
<li>Apple Safari (2.0.1 and higher)</li>
</ul>
</li>
</ul>
</div>
<div class="Col3_2 nomargintop">
<ul class="nohang">
<li>Application servers:
<ul class="hang">
<li>Apache Tomcat 5.0–6.0</li>
<li>IBM WebSphere Application <span style="white-space: nowrap;">Server 6.0–6.1</span></li>
<li>Bea WebLogic Server 9.2</li>
<li>JBoss Application<br/>Server 4.0–4.2</li>
<li>GlassFish</li>
<li>Jetty 6.1</li>
</ul>
</li>
</ul>
</div>
<div class="Col3_3 nomargintop">
<ul>
<li>JDK 1.4 or higher</li>
</ul>
</div>
</div>
<div class="container hangingContent">
<div class="Col3_12">
<small class="lightgray"><span style="margin-left:-1em; line-height:120%;">*</span> QuipuKit components support quirks and standards browser rendering modes. Note that JavaScript should be enabled in the client browser for QuipuKit components to work correctly.</small>
</div>
</div>
</div>
<br />
<div id="testimonials" class="Col3_23 serif">
<div>
<p class="lightgray_text textright">
<em><q>I have indeed been very satisfied with my evaluation of QuipuKit - so much that I have already purchased it! Kudos to the team for a great piece of software!</q></em><br/>
<small>David Fischer, <a class="gray underlined external" href="http://advestigo.com/">Advestigo</a></small>
</p>
</div>
<div>
<p class="lightgray_text textright">
<em><q>Simple technical examples that made me implement the component in less than 1 minute, unbeatable!</q></em><br/>
<small>Johan Persson, <a class="gray underlined external" href="http://www.nordforce.se/">Nordforce Technology AB</a></small>
</p>
</div>
<div>
<p class="lightgray_text textright">
<em><q>...you folks have done a fantastic job on creating Rich GUI components. Its great to explore, the demos are well done and I am using quite a bit of it in my coding.</q></em><br/>
<small>Ajay Thakur, <a class="gray underlined external" href="http://www.aldonco.com/">Aldon, Inc</a></small>
</p>
</div>
<div>
<p class="lightgray_text textright">
<em><q>...We just purchased your library ... and overall have been extremely happy with the performance and quality of components.</q></em><br/>
<small>Trip Alexander, <a class="gray underlined external" href="http://www.streamverse.com/">Streamverse, Inc.</a></small>
</p>
</div>
<div>
<p class="lightgray_text textright">
<em><q>The part I liked the most is Ajax capabilities in tree tables. The demo screen selections and keyboards are just superb, well written. Thanks a lot. QuipuKit just rocks.</q></em><br/>
<small>Ajay Thakur, <a class="gray underlined external" href="http://www.aldonco.com/">Aldon, Inc</a></small>
</p>
</div>
</div>
<script type="text/javascript">
changeTestimonial();
</script>
</div> <!-- End of Overview block -->
<div id="div_Calendar" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/calendar.png" alt="Calendar" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/calendar.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col3_12 nomargintop">
<p>The <code>Calendar</code> component enables the user to select a date from a one-month calendar and easily navigate between months and years. A specific group of dates can be included in a date range. The <code>Calendar</code> component can use the client’s locale or a specified one. Various style options for different parts of the <code>Calendar</code> component let you create the desired look-and-feel.</p>
<div class="container">
<div class="Col2_1">
<h4>Multiple Date Ranges</h4>
<p>Date ranges can be used to mark out a specific group of dates. You can define several date ranges for one <code>Calendar</code> component and define the look of each date range in the normal and rollover states.</p>
</div>
<div class="Col2_2">
<h4>Internationalization Support</h4>
<p>The <code>Calendar</code> component uses the weekday and month names obtained from the client’s locale. You can easily change the locale used by the <code>Calendar</code>.</p>
</div>
</div>
</div>
<div class="Col3_3 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/calendar/Calendar_styles.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/calendar.png" alt="QuipuKit Calendar Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Flexible Appearance</h4>
<p>You can change the first day of a week, show or hide week number and <code>Calendar</code>’s footer.</p>
</div>
<div class="Col3_2">
<h4>Flexible Styling</h4>
<p>You can change styles for any part of <code>Calendar</code>: header, footer, day cells, weekend days, selection, etc.</p>
</div>
<div class="Col3_3">
<h4>Component-specific Events</h4>
<p>The <code>Calendar</code> component supports <code>onchange</code> and <code>onperiodchange</code> client-side JavaScript events.</p>
</div>
</div>
</div><!-- End of Calendar features block -->
<div id="div_Chart" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/chart.png" alt="Chart" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/chart.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col2_1 nomargintop">
<p>The <code>Chart</code> component represents various datasets in a graphical form, for example as a pie, line, or bar charts. The component is based on the <code>JFreeChart</code> engine and exposes a friendly API with JSF-specific features. Styles can be customized for every chart element (image, legend, title, etc.)</p>
<div class="container">
<div class="Col1_1">
<h4>Easy to Configure Data Model</h4>
<p>The data model represents a set of the series. Each series represents a set of records that are sorted by keys (each record is a pair of key and value.)</p>
</div>
</div>
<div class="container">
<div class="Col1_1">
<h4>Standard Client-side Events</h4>
<p>You can specify <code>onclick</code>, <code>onmouseover</code> and <code>onmouseout</code> client-side events for the plot areas for each chart type.</p>
</div>
</div>
</div>
<div class="Col2_2 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/chart/ChartTypes.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/chart.png" alt="QuipuKit Chart Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Various Chart Types</h4>
<p>QuipuKit provides support for the pie, line and bar charts.</p>
</div>
<div class="Col3_2">
<h4>Chart Axes Types</h4>
<p>The <code>Chart</code> supports the number, date and category axes types.</p>
</div>
<div class="Col3_3">
<h4>Custom Styling</h4>
<p>Each chart area can be styled separately with CSS-style declarations.</p>
</div>
</div>
</div><!-- End of Chart features block -->
<div id="div_ConfirmationDialog" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/confirmation_dialog.png" alt="Confirmation Dialog" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/confirmation.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col2_1 nomargintop">
<p>The <code>Confirmation</code> component allows users to confirm or reject critical actions before their execution. It is displayed over other page elements like a modal dialog and can be attached to a client-side event of any component or invoked from JavaScript explicitly. The <code>Confirmation</code> component has a lot of options to customize its appearance and provides a flexible invocation mechanism.</p>
</div>
<div class="Col2_2 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/confirmation/ConfirmationDefault.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/confirmation.png" alt="QuipuKit Confirmation Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col1_1">
<h4>Customizable Content</h4>
<p>All parts of the <code>Confirmation</code> components are customizable. You can change header, message and button texts, and customize the icon displayed in the <code>Confirmation</code> box. In addition, it’s also possible to place arbitrary components in place of message texts and an icon.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Draggable Component</h4>
<p>The <code>Confirmation</code> component can be dragged around the page. This functionality can be turned on or off.</p>
</div>
<div class="Col3_23">
<h4>Custom Positioning</h4>
<p>By default the <code>Confirmation</code> component is displayed in the center of the visible area of the page. You can change the position of the <code>Confirmation</code> component on the page by using the top and left attributes or align it to the invoker component.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Flexible Invocation</h4>
<p>You can assign the <code>Confirmation</code> to a client-side event of any component declaratively right on your page or invoke it from JavaScript programmatically when needed.</p>
</div>
<div class="Col3_2">
<h4>Standard Client-side Events</h4>
<p>The <code>Confirmation</code> component supports a set of standard client-side events that can be customized to alter the component’s behavior.
</p>
</div>
<div class="Col3_3">
<h4>Flexible Styling</h4>
<p>You can define styles for each part of the <code>Confirmation</code> component.</p>
</div>
</div>
</div><!-- End of Confirmation features block -->
<div id="div_DataTable" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/data_table.png" alt="Data Table" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/datatable.html">Component Documentation</a>
</div>
<div class="container" style="margin-top: -20px; padding-top: 20px;">
<div class="Col3_1 nomargintop">
<p>The <code>DataTable</code> component is used to display data in a tabular format and effectively manipulate it. It supports the features of the JSF <code>HtmlDataTable</code> component and extends the standard functionality with such advanced features as sorting, row selection (both multiple and single), pagination, filtering, keyboard navigation, and dynamic data loading (using Ajax.) Plus, the <code>DataTable</code> component provides special support for handling large datasets with minimal overhead.</p>
</div>
<div class="Col3_23 nomargintop" style="padding-right: 5px;">
<div class="quipukitDemoImageHolder" style="text-align: right; position: relative;">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/datatable/DataTable_general.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/data_table.png" alt="QuipuKit Data Table Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col1_1">
<h4>Single & Multiple Row Selection</h4>
<p>The row selection feature lets the user select one or more rows in the <code>DataTable</code> component. There are two row selection modes available: single and multiple. Selection can be performed with mouse, keyboard, or an optional selection column that displays a check-box for each row.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Data Pagination</h4>
<p>When pagination is enabled, the data displayed by the <code>DataTable</code> component is broken down into equal portions of records called “pages”. Only one page of records is visible at a time which improves data transfer and navigation. The user can navigate between the pages using special pagination components.</p>
</div>
<div class="Col3_23">
<h4>Interactive Filtering</h4>
<p>It allows the user to filter the original set of displayed records. Filtering can be performed by one or several columns simultaneously. Application developer can customize a type of the filter, filtering function and other parameters for each of the table’s columns.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Dynamic Columns</h4>
<p>The <code>DataTable</code> component provides a way to display an arbitrary number of columns dynamically based on application data.</p>
</div>
<div class="Col3_23">
<h4>Headers & Footers for Grouped Columns</h4>
<p>It is possible to combine columns into groups to reflect their logical connections and specify headers or footers for the column groups. Such column hierarchy results in showing headers and footers in several rows, as is often required in such cases. In addition, it’s possible to customize styles and events for groups of columns.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Column Resizing Capability</h4>
<p>It is possible to make table columns resizable to allow users adjust the table according to their preferences. Resizing-related parameters such as minimal width and resizablity can be adjusted on a per-column basis.</p>
</div>
<div class="Col3_23">
<h4>Effective Handling of Large Amounts of Data</h4>
<p>This component obtains a full set of data through its value attribute. Then, the obtained data gets automatically filtered, sorted and paginated by the <code>DataTable</code> component. This means that the default behavior of the <code>DataTable</code> requires that the entire set of data be retrieved and stored in memory. This is not always effective in terms of memory usage and performance, especially when the <code>DataTable</code> component works with a large dataset. To solve this problem, the <code>DataTable</code> component provides the custom data providing feature.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Data Sorting</h4>
<p>It allows sorting of displayed data based on the value of one of its columns. It’s possible to define the sorting function for each column flexibly.</p>
</div>
<div class="Col3_23">
<h4>Ajax-based Filtering, Sorting and Pagination</h4>
<p>The <code>DataTable</code> component supports dynamic data loading for sorting, filtering, and pagination features using Ajax technique. With Ajax, the page is submitted “behind the scenes” with only the <code>DataTable</code> component being re-rendered. You can also use a dedicated JavaScript function to reload the <code>DataTable</code> component explicitly without reloading the whole page.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Keyboard Navigation</h4>
<p>The <code>DataTable</code> component supports keyboard navigation for selection and pagination features.</p>
</div>
<div class="Col3_2">
<h4>Embedding Components</h4>
<p>You can specify any JSF components as child tags of column components. They define the contents of the column cells based on the corresponding row’s data.</p>
</div>
<div class="Col3_3">
<h4>Flexible Styling</h4>
<p>You can customize style for the table cells, rows, columns, sections, the whole <code>DataTable</code> and all kinds of row and column separators.</p>
</div>
</div>
</div><!-- End of Data Table features block -->
<div id="div_DateChooser" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/date_chooser.png" alt="Date Chooser" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/datechooser.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col2_1 nomargintop">
<p>The <code>DateChooser</code> component enables the user to enter a date either by typing it in the text field or selecting it from the drop-down calendar. With internationalization support, a selected date can be displayed in different date formats and languages. The appearance of virtually every element of the <code>DateChooser</code> component can be customized.</p>
<div class="container">
<div class="Col1_1">
<h4>Internationalization Support</h4>
<p>The <code>DateChooser</code> component uses the weekday and month names obtained from the client’s locale. Date formats are also derived from the current user’s locale. The current locale can be changed.</p>
</div>
<div class="Col1_1">
<h4>Various Date Formats</h4>
<p>The <code>DateChooser</code> component uses a specific date format to display dates. It is also assumed that the same date format is used by the user when typing a date. The date format can be configured either using <code>pattern</code> or <code>locale</code> and <code>dateFormat</code> attributes.</p>
</div>
</div>
</div>
<div class="Col2_2 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/datechooser/DateChooser.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/date_chooser.png" alt="QuipuKit Date Chooser Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Built-in Calendar</h4>
<p>The <code>DateChooser</code> component enables the user to select date from the drop-down calendar.</p>
</div>
<div class="Col3_2">
<h4>Flexible Styling</h4>
<p>You can define styles for the entire <code>DateChooser</code> component and its individual parts including drop-down calendar.</p>
</div>
<div class="Col3_3">
<h4>Client-side Events</h4>
<p>The <code>DateChoser</code> component supports standard client-side events and a <code>DateChooser</code>-specific <code>onchange</code> event that is fired when a date selected in <code>DateChooser</code> is changed.</p>
</div>
</div>
</div><!-- End of Date Chooser features block -->
<div id="div_DropDownField" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/drop_down_field.png" alt="Drop Down Field" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/dropdownfield.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col2_1 nomargintop">
<p>The <code>DropDownField</code> is an input component which allows either type in a value or select one of the values from an attached drop-down list. The component provides a way to show a list of suggestions based on user input and the ability to auto-complete user input in the input field. The drop-down list can be displayed in multiple columns and contain other JSF components. <!--A variety of customization options and styles lets you easily define the look-and-feel of the <code>DropDownField</code> component.--></p>
<div class="Col1_1">
<h4>Flexible Styling</h4>
<p>You can apply styles for any part of the <code>DropDownField</code> component, both when it’s in the normal and rollover states.</p>
</div>
</div>
<div class="Col2_2 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/dropdown/dropDownDefault.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/drop_down_field.png" alt="QuipuKit Drop Down Field Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col1_1">
<h4>Ajax-based Client-side Suggestion Feature</h4>
<p>The <code>DropDownField</code> component can be configured to display a list of suggestions based on the input entered partially by the user. When this feature is turned on, the list of suggestions is updated on-the-fly as the user types text, and the user can select one of the provided suggestions any time when appropriate. This feature makes it easier to find items by typing only part of their text. The <code>DropDownField</code> component supports different auto-suggestion modes, including Ajax-based ones.</p>
</div>
</div>
<div class="container">
<div class="Col3_12">
<h4>Auto-completion</h4>
<p>In addition to auto-suggestion this feature can be used to simplify selection of a value from the drop-down items. When it is turned on, the <code>DropDown</code> component completes partially entered text in the input field.</p>
</div>
<div class="Col3_3">
<h4>Keyboard Navigation</h4>
<p>The <code>DropDownField</code> component is fully controllable from keyboard.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Client-side Events</h4>
<p>The <code>DropDownField</code> supports a set of standard client-side events. There are also component-specific client-side events.</p>
</div>
<div class="Col3_2">
<h4>Embedding JSF Components</h4>
<p>You can use any JSF components for displaying contents of items in the suggestion list.</p>
</div>
<div class="Col3_3">
<h4>Define Columns Within a Drop-down List</h4>
<p>The <code>DropDownField</code> component lets you specify a drop-down list to be displayed in multiple columns.</p>
</div>
</div>
</div><!-- End of Drop Down Field features block -->
<div id="div_DynamicImage" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/dynamic_image.png" alt="Dynamic Image" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/dynamicimage.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col2_1 nomargintop">
<p>The <code>DynamicImage</code> component provides the ability to display an image which is dynamically generated at run time, or which is not available as an application file but, for example, is retrieved from a database. There are two ways to specify the data model: specifying an image as a byte array or specifying it as an implementation of the <code>java.awt.image.RenderedImage</code> interface.</p>
</div>
<div class="Col2_2 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/dynamicimage/DynamicImage1.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/dynamic_image.png" alt="QuipuKit Dynamic Image Component" />
</div>
</div>
</div>
</div><!-- End of Dynamic Image features block -->
<div id="div_FoldingPanel" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/folding_panel.png" alt="Folding Panel" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/foldingpanel.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col3_12 nomargintop">
<p>The <code>FoldingPanel</code> component is a container for other components that can be expanded and collapsed by the user.</p>
<div class="Col1_1">
<h4>Ajax Content Loading</h4>
<p>It is possible to control how the <code>FoldingPanel</code> component loads its child components from the server when it needs to be expanded. There are three loading modes: the content can be preloaded when the page is loaded, the content can be transparently retrieved from the server with Ajax, or it can be loaded without Ajax by reloading the entire page.</p>
</div>
<div class="Col1_1">
<h4>Custom Toggle Buttons</h4>
<p>You can use any image to render FoldingPanel’s toggle button.</p>
</div>
</div>
<div class="Col3_3 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/foldingpanel/FoldingPanel1.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/folding_panel.png" alt="QuipuKit Folding Panel Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Custom JSF Components</h4>
<p>You can place any JSF components into the <code>FoldingPanel</code>’s caption area.</p>
</div>
<div class="Col3_23">
<h4>Various Folding Directions</h4>
<p>By default, the <code>FoldingPanel</code> component expands downwards. However, you can specify different folding directions: “up”, “down”, “left” or “right”.</p>
</div>
</div>
<div class="container">
<div class="Col3_12">
<h4>Standard & Component-specific Client-side Events</h4>
<p>The <code>FoldingPanel</code> component supports a set of standard client-side events. In addition, the <code>FoldingPanel</code> provides one component-specific event called <code>onstatechange</code>.</p>
</div>
<div class="Col3_3">
<h4>Flexible Styling</h4>
<p>You can customize a style for the entire <code>FoldingPanel</code> component, its caption and&container.</p>
</div>
</div>
</div><!-- End of Folding Panel features block -->
<div id="div_GraphicText" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/graphic_text.png" alt="Graphic Text" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/graphictext.html">Component Documentation</a>
</div>
<p><code>GraphicText</code> is a component that displays styled rotated text. It has API similar to the standard <code><h:outputText></code> component, though unlike the <code><h:outputText></code> component, the <code>GraphicText</code> component displays a text with an image generated on the server. This component can be useful for displaying vertical headers in a table having a lot of thin columns, vertical <code>TabSet</code> components, etc.</p>
<div class="container">
<div class="Col3_1">
<h4>Custom Text Rotation</h4>
<p>The text can be displayed with any direction angle thus allowing to display vertical and tilted texts.</p>
<div class="Col1_1">
<h4>CSS-like Font Style</h4>
<p>The style parameters that are used for generating an image with the text are customizable with the usual CSS syntax.</p>
</div>
</div>
<div class="Col3_23">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/graphictext/GraphicText.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/graphic_text.png" alt="QuipuKit Graphic Text Component" />
</div>
</div>
</div>
</div><!-- End of Graphic Text features block -->
<div id="div_HintLabel" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/hint_label.png" alt="Hint Label" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/hintlabel.html">Component Documentation</a>
</div>
<div class="container" style="margin-top: -20px; padding-top: 20px;">
<div class="Col2_1 nomargintop">
<p>The <code>HintLabel</code> component is used to display a single-line text that may not fit in the allotted space, but when the user places mouse pointer over the truncated text, the full text is displayed in a tool-tip.</p>
<div class="container">
<div class="Col1_1">
<h4>Customizable Hint Content</h4>
<p>The hint displayed over the truncated text displays the full text by default, but it’s possible to explicitly specify the text that should be displayed as a hint.</p>
</div>
</div>
</div>
<div class="Col2_2 nomargintop" style="padding-right: 5px;">
<div class="quipukitDemoImageHolder" style="text-align: right; position: relative;">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/hintlabel/HintLabel.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/hint_label.png" alt="QuipuKit Hint Label Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Display Timeout</h4>
<p>By default, the tooltip appears after the mouse pointer hovers over the <code>HintLabel</code> component for 0.1 second. Though you can change this time.</p>
</div>
<div class="Col3_2">
<h4>Flexible Styling</h4>
<p>The <code>HintLabel</code> provides the ability to apply individual styles to the text and the tooltip.</p>
</div>
<div class="Col3_3">
<h4>Standard Client-side Events</h4>
<p>All standard events are supported making it possible to introduce custom behavior when needed.</p>
</div>
</div>
</div><!-- End of Hint Label features block -->
<div id="div_PopupLayer" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/popup_layer.png" alt="Popup Layer" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/popuplayer.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col2_1 nomargintop">
<p>The <code>PopupLayer</code> component is a container for other JSF components that is displayed over the page contents. The size, placement, timeout value, and modality of the component can be easily customized. A convenient API lets you manage the display behavior of the <code>PopupLayer</code> component on the client side.</p><br />
<h4>Embedding JSF Components</h4>
<p>As a container, the <code>PopupLayer</code> lets you embed any JSF components to build its content.</p>
</div>
<div class="Col2_2 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/popuplayer/PopupLayer.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/popup_layer.png" alt="QuipuKit Popup Layer Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Support for Modality</h4>
<p>The <code>PopupLayer</code> component can be displayed in a modal mode to address the use-cases when user should be focused on some interface elements.</p>
</div>
<div class="Col3_2">
<h4>Draggable Mode</h4>
<p>The <code>PopupLayer</code> component can be made draggable to let the user reposition it if needed.</p>
</div>
<div class="Col3_3">
<h4>Client-side API</h4>
<p>You can show and hide and reposition the <code>PopupLayer</code> component dynamically using the JavaScript API.</p>
</div>
</div>
<div class="container">
<div class="Col3_1">
<h4>Auto-hiding by Timeout</h4>
<p>The <code>PopupLayer</code> component can be automatically hidden after a timeout.</p>
</div>
<div class="Col3_2">
<h4>Custom Styling</h4>
<p>You can customize a style for the <code>PopupLayer</code> component in the normal and rollover states.</p>
</div>
<div class="Col3_3">
<h4>Client-side Events</h4>
<p>The <code>PopupLayer</code> component supports a set of standard and component-specific client-side events.</p>
</div>
</div>
</div><!-- End of Popup Layer features block -->
<div id="div_SuggestionField" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/suggestion_field.png" alt="Suggestion Field" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/suggestionfield.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col2_1 nomargintop">
<p>The <code>SuggestionField</code> component is an input component that shows a list of suggestions based on user input and completes user input right in the input field. It has a similar functionality to <code>DropDownField</code>, but unlike <code>DropDownField</code> it looks like a plain text field. You can create a multi-column drop-down list and embed JSF components into it.</p>
<div class="Col1_1">
<h4>Keyboard Navigation</h4>
<p>The <code>SuggestionField</code> component is fully controllable from keyboard.</p>
</div>
</div>
<div class="Col2_2 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/suggestionfield/SuggestionField.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/suggestion_field.png" alt="QuipuKit Suggestion Field Component" /><br /><br />
</div>
</div>
</div>
<div class="container">
<div class="Col2_1">
<h4>Ajax-based and Client-side Suggestion</h4>
<p>This component displays a list of suggestions based on the partial input. Suggestions are updated on-the-fly when typing the text and you can select any proposed suggestion. This feature helps to easily find items by typing only a part of their names. It supports different auto-suggestion modes, including Ajax-based ones.</p>
<div class="Col1_1">
<h4>Multi-column Suggestion List</h4>
<p>The <code>DropDownField</code> component lets you specify a drop-down list to be displayed in multiple columns.</p>
</div>
<div class="Col1_1">
<h4>Embedding JSF Components</h4>
<p>You can use any JSF components for displaying contents of items in the suggestion list.</p>
</div>
</div>
<div class="Col2_2 nomargintop">
<div class="Col1_1">
<h4>Auto-completion</h4>
<p>In addition to to auto-suggestion this feature can be used to simplify selection of a value from the drop-down items. When it is turned on, the <code>SuggestionField</code> component completes partially entered text in the input field.</p>
</div>
<div class="Col1_1">
<h4>Flexible Styling</h4>
<p>You can apply styles for any part of the <code>SuggestionField</code> component, both when it’s in the normal and rollover states.</p>
</div>
<div class="Col1_1">
<h4>Client-side Events</h4>
<p>The <code>SuggestionField</code> component supports a set of standard client-side events and also two component-specific events.</p>
</div>
</div>
</div>
</div><!-- End of Suggestion Field features block -->
<div id="div_TabSet" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/tab_set.png" alt="Tab Set" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/tabset.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col3_1 nomargintop">
<p>It displays a set of tabs similar to the <code>TabbedPane</code> component. But as opposed to <code>TabbedPane</code>, it’s not a container and it doesn’t display any data when the user switches the tab. <code>TabSet</code> just serves as a selector on pages where <code>TabbedPane</code> can’t be used due some reasons.</p>
</div>
<div class="Col3_23 nomargintop">
<div class="quipukitDemoImageHolder" style="float: right;">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/tabset/TabSet_placementAndStyling.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/tab_set.png" alt="QuipuKit Tab Set Component" />
</div>
</div>
</div>
<p>In the <code>TabSet</code> component you can configure tabs, their content, placement and appearance.</p>
<div class="container">
<div class="Col2_1">
<h4>Custom Tabs Placement</h4>
<p>By default, the tabs appear at the top of the <code>TabSet</code>, but they can be displayed on any of the four sides of the component. This can be useful to make the <code>TabSet</code> look attached to different sides of page content.</p>
</div>
<div class="Col2_2">
<h4>Standard Client-side Events</h4>
<p>The <code>TabSet</code> component supports a set of the standard client-side events that allow you to alter the behavior of the component.</p>
</div>
</div>
<div class="container">
<div class="Col2_1">
<h4>Flexible Styling</h4>
<p>The <code>TabSet</code> component provides a number of styles enabling you to customize the appearance of the entire component and its individual parts, both in the normal and rollover states.</p>
</div>
<div class="Col2_2">
<h4>Embedding JSF Components</h4>
<p>You can embed any JSF components in the <code>TabSet</code>’s tabs.</p>
</div>
</div>
</div><!-- End of Tab Set features block -->
<div id="div_TabbedPane" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/tabbed_pane.png" alt="Tabbed Pane" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/tabbedpane.html">Component Documentation</a>
</div>
<div class="container" style="margin-top: -20px; padding-top: 20px;">
<div class="Col2_1 nomargintop">
<p>The <code>TabbedPane</code> component is a container that consists of several sub-containers called pages and allows the user to switch between these pages using a set of tabs. It provides flexibility in configuring the tabs and the page content within them and offers several ways for content loading. A variety of style options lets you customize the appearance of the entire <code>TabbedPane</code> component and its individual elements.</p>
<div class="Col1_1">
<h4>Custom Tabs Placement</h4>
<p>By default, the tabs appear at the top of the <code>TabbedPane</code>, but they can be displayed on any of the four sides of the component.</p>
</div>
</div>
<div class="Col2_2 nomargintop" style="padding-right: 5px;">
<div class="quipukitDemoImageHolder" style="text-align: right; position: relative;">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/tabbedpane/TabbedPane_placementAndAlignment.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/tabbed_pane.png" alt="QuipuKit Tabbed Pane Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col2_1">
<h4>Embedding JSF Components</h4>
<p>You can embed any JSF components in the <code>TabbedPane</code>’s tabs.</p>
</div>
<div class="Col2_2">
<h4>Flexible Styling</h4>
<p>With the <code>TabbedPane</code>, you can define styles for the entire component as well as its individual parts in the normal and rollover states.</p>
</div>
</div>
<div class="container">
<div class="Col2_1">
<h4>Loading Modes</h4>
<p>It is possible to preload all pages to switch them faster, or load pages on demand as the user switches to them to minimize network traffic. There’s also the page switching mode where the whole page is submitted and loaded with the newly selected page.</p>
</div>
<div class="Col2_2">
<h4>Client-side Events</h4>
<p>The <code>TabbedPane</code> component supports a set of standard client-side events and a component-specific <code>onselectionchange</code> event which occurs when the user selects a tab.</p>
</div>
</div>
</div>
<!-- End of Tabbed Pane features block -->
<div id="div_TreeTable" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/tree_table.png" alt="Tree Table" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/treetable.html">Component Documentation</a>
</div>
<div class="container" style="margin-top: -20px; padding-top: 20px;">
<div class="Col3_1 nomargintop">
<p>The <code>TreeTable</code> component is used to display hierarchical data in a tabular format. It provides flexible configuration of the tree structure and content and supports such advanced features as sorting, interactive filtering, node selection (both multiple and single), keyboard navigation, and dynamic data loading (using Ajax). You can also specify a node preloading mode for expanding <code>TreeTable</code> nodes on the client or server side.</p>
</div>
<div class="Col3_23 nomargintop" style="padding-right: 5px;">
<div class="quipukitDemoImageHolder" style="text-align: right; position: relative;">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/treetable/TreeTable1.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/tree_table.png" alt="QuipuKit Tree Table Component" />
</div>
</div>
</div>
<div class="container">
<div class="Col2_1">
<h4>Static and Dynamic Tree Structure</h4>
<p>The tree structure in the <code>TreeTable</code> component can be specified either right in the page or in a backing bean which makes it possible to display any tree structures.</p>
<div class="Col1_1">
<h4>Keyboard Navigation</h4>
<p>The <code>TreeTable</code> component provides keyboard support for controlling selection and expanding or collapsing nodes.</p>
</div>
<div class="Col1_1">
<h4>Interactive Filtering</h4>
<p>It allows the user to filter the original set of displayed records. Filtering can be performed by one or several columns simultaneously. Application developer can customize a type of the filter, filtering function and other parameters for each of the columns.</p>
</div>
<div class="Col1_1">
<h4>Ajax Filtering, Sorting & Node Expansion</h4>
<p>It supports dynamic data loading with Ajax for such features as sorting, filtering, and node expansion. With Ajax, the page is submitted “behind the scenes” with only the <code>TreeTable</code> component being re-rendered. In case of node expansion, only newly expanded nodes are loaded from the server.</p>
</div>
<div class="Col1_1">
<h4>Flexible Styling</h4>
<p>You can customize style for the <code>TreeTable</code> cells, rows, columns, sections, the whole <code>TreeTable</code> and all kinds of row and column separators.</p>
</div>
<div class="Col1_1">
<h4>Individual Row & Cell Customization</h4>
<p>In addition to an ability to customize all rows in the <code>TreeTable</code>’s body at the same time, you can also customize individual row and cell based on displayed data or any other condition.</p>
</div>
<div class="Col1_1">
<h4>Merging Row Cells</h4>
<p>The <code>TreeTable</code> component provides an ability to merge several row cells into one cell. There are flexible means of declaring the rules for merging.</p>
</div>
</div>
<div class="Col2_2">
<div class="Col1_1">
<h4>Sorting</h4>
<p>It allows sorting of displayed data based on the value of one of its columns. It’s possible to define the sorting function for each column flexibly.</p>
</div>
<div class="Col1_1">
<h4>Single & Multiple Node Selection</h4>
<p>The selection feature lets the user select one or more nodes in the <code>TreeTable</code> component. There are two node selection modes available: single and multiple. Selection can be performed with mouse, keyboard, or an optional selection column that displays a check-box for each row.</p>
</div>
<div class="Col1_1">
<h4>Headers & Footers for Grouped Columns</h4>
<p>It is possible to combine columns into groups to reflect their logical connections and specify headers and footers for the column groups. Such column hierarchy results in showing headers and footers in several rows, as is often required in such cases. In addition, it’s possible to customize styles and events for groups of columns.</p>
</div>
<div class="Col1_1">
<h4>Column Resizing</h4>
<p>It is possible to make <code>TreeTable</code> columns resizable to allow users adjust the table according to their preferences. Resizing-related parameters such as minimal width and resizablity can be adjusted on a per-column basis.</p>
</div>
<div class="Col1_1">
<h4>Preloading Nodes</h4>
<p>It’s possible to preload some or all nodes to client when the page is loaded to ensure quick node expansion without additional server requests afterwards.</p>
</div>
<div class="Col1_1">
<h4>Dynamic Columns</h4>
<p>The <code>TreeTable</code> component provides a way to display an arbitrary number of columns dynamically based on application data.</p>
</div>
<div class="Col1_1">
<h4>Embedding JSF Components</h4>
<p>The <code>TreeTable</code> component supports several column types: column, tree column and selection column. Child components of the column tags define the contents of the column cells based on the corresponding row’s node data. You can specify any JSF components as child tags of the columns.</p>
</div>
</div>
</div>
</div>
<!-- End of Tree Table features block -->
<div id="div_TwoListSelection" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/two_list_selection.png" alt="Two List Selection" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/twolistselection.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col3_1 nomargintop">
<p>The <code>TwoListSelection</code> component provides an alternative interface for selecting a list of items. It displays two lists of data and allows the user moving items between them thus constructing a list of selected items in one of them. As opposed to the ordinary selection components such as the standard <code>HtmlSelectManyListbox</code> it also allows the user to reorder the selected items.</p>
</div>
<div class="Col3_23 nomargintop">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/twolistselection/TwoListSelection.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/two_list_selection.png" alt="QuipuKit Two List Selection Component" />
</div>
</div>
</div>
<div class="Col1_1">
<h4>Reordering & Sorting of Selected Items</h4>
<p>The <code>TwoListSelection</code> component lets the user change the order of selected items. This can be done by selecting one or more contiguous items and clicking the Up and Down buttons to move those items by one row up or down respectively.</p>
<p>An item added to either list of the <code>TwoListSelection</code> component always appears last in that list. To enable the user to quickly find an item in the selected list, the sorting capability can be used, which orders all selected items alphabetically.</p>
</div>
<div class="container">
<div class="Col3_1">
<h4>Component-specific Client-side Events</h4>
<p>The <code>TwoListSelection</code> component supports <code>onadd</code> and <code>onremove</code> client-side events.</p>
</div>
<div class="Col3_2">
<h4>Customizable Appearance</h4>
<p>You can customize the labels for both lists, texts for the buttons and more.</p>
</div>
<div class="Col3_3">
<h4>Flexible Styling</h4>
<p>You can customize styles for any part of the <code>TwoListSelection</code> component such as list boxes, list headers and command buttons.</p>
</div>
</div>
</div><!-- End of Two List Selection features block -->
<div id="div_ValidationFramework" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/validation_framework.png" alt="Validation Framework" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/validation-framework.html">Component Documentation</a>
</div>
<p>The QuipuKit validation framework provides full and explicit support for client-side validation lacking in JSF framework. It shifts the server-side validation logic of standard JSF validators to the client side and provides additional validators and messages allowing you to validate a broader range of data with minimum server roundtrips.</p>
<p>With QuipuKit, you can customize what, when, and where to validate in a fine-grained way, fulfilling the most specific needs of your application and enhancing user experience.</p>
<div class="container">
<div class="Col2_1">
<h4>Easy to Get Started</h4>
<p>No complex configuration is required. You can enable client-side validation for your entire application in just a couple of steps.</p>
<div class="Col1_1">
<h4>Standard JSF Validators</h4>
<p>QuipuKit extends a set of standard JSF validators with <code>EmailValidator</code>, <code>URLValidator</code>, <code>EqualValidator</code> enabling you to check the most common input data on the Web. You can assign them to any input JSF or QuipuKit component and trigger on the client or server side.</p>
</div>
</div>
<div class="Col2_2">
<div class="quipukitDemoImageHolder">
<div class="quipukitRun">
<a title="See In Action" href="/quipukit/demo/validators/Validators_standard.jsf">
<img alt="See In Action" src="/images/buttons/see_in_action.png"/>
</a>
</div>
<img src="/images/products/quipukit/components/validation.png" alt="QuipuKit Validation Framework Component" />
</div>
</div>
</div>
<div class="Col1_1">
<h4>Error Styling</h4>
<p>If there is no component to display a validation error, QuipuKit will automatically add an error message to the appropriate component once it fails validation on the server or client side. You can specify your own component for default validation error presentation and use it for the entire application or for a separate form.</p>
<p>In addition to standard HTML <code>Message</code> and <code>Messages</code>, you can highlight a failed component by changing its appearance or displaying a special floating “error” icon nearby. The page layout will remain intact.</p>
</div>
<div class="container">
<div class="Col2_1">
<h4>Custom Validation Logic</h4>
<p>If none of the available validators meet your application needs, you can implement a needed validation scenario with <code>CustomValidator</code> or <code>RegExpValidator</code>.</p>
</div>
<div class="Col2_2">
<h4>Validation Scenarios Control</h4>
<p>You can configure to perform client-side validation for the entire application, independently for each form within a page or individually for each component.</p>
</div>
</div>
<div class="container">
<div class="Col2_1">
<h4>Flexible Validation Triggering</h4>
<p>Depending on your validation logic, you can trigger client-side validation automatically before each page submission or “on demand” using a provided client-side API.</p>
</div>
</div>
</div><!-- End of Validation Framework features block -->
<div id="div_UtilityComponents" class="tabs hide">
<div class="container featureTitle">
<h3><img src="/images/products/quipukit/components_titles/utility_components.png" alt="Utility Components" /></h3>
<a href="/downloads/quipukit/documentation/developersGuide/index.html">Component Documentation</a>
</div>
<div class="container">
<div class="Col2_1">
<div class="container featureSubTitle"><h4>Focus</h4></div>
<p>The <code>Focus</code> component is a component that controls the input focus on a page. By using it, you can specify what component should be focused when the page is loaded as well as save the focus between page submissions.</p>
</div>
<div class="Col2_2">
<div class="container featureSubTitle"><h4>ScrollPosition</h4></div>
<p>The <code>ScrollPosition</code> component is a component that controls the scroll position of a page. By using it, you can specify the scroll position on page load and also save the scroll position between page submissions.</p>
</div>
</div>
<div class="Col1_1">
<div class="container featureSubTitle"><h4>LoadBundle</h4></div>
<p>The <code>LoadBundle</code> component is used for loading a resource bundle localized for the <code>Locale</code> of the current view, and expose it (as a <code>Map</code>) in the request attributes of the current request. The QuipuKit <code>LoadBundle</code> component is similar to the <code>LoadBundle</code> from the RI or MyFaces JSF implementation but can be used in the components with Ajax enabled.</p>
</div>
</div><!-- End of Utility Components block -->
</div>
</div>"/>
- </HtmlForm>
- </div>
<div class="BoxGrey QuickLinks">
<div class="content container">
<div class="Col4_1">
- <UINamingContainer id="purchaseNavigationBlock" rendered="true" transient="false">
- <h4>Purchase & Licensing</h4>
<ul>
<li><a href="/#{productPage.productNameLowerCase}/licensing/">Licensing models</a></li>
<li><a href="/store/#{productPage.productNameLowerCase}/">How to purchase #{productPage.productName}</a></li>
<li><a href="/store/#{productPage.productNameLowerCase}/#discounts">Save with discounts</a></li>
<!--li><a >Upgrade your product</a></li-->
</ul>
- </UINamingContainer>
- </div>
<div class="Separator4_12"/>
<div class="Col4_2">
- <UINamingContainer id="supportNavigationBlock" rendered="true" transient="false">
- <h4>Support</h4>
<ul>
<li><a href="http://support.teamdev.com/#{productPage.productNameLowerCase}" class="external" target="_blank">Get help with #{productPage.productName}</a></li>
<li><a href="http://support.teamdev.com/forms/reportForm.jsf" class="external" target="_blank">Submit your support request</a></li>
</ul>
- </UINamingContainer>
- </div>
<div class="Separator4_23"/>
<div class="Col4_3">
- <UINamingContainer id="documentationNavigationBlock" rendered="true" transient="false">
- <h4>Documentation</h4>
<ul>
<li><a href="#{propertyService.properties['server.download.folder']}/#{productPage.productNameLowerCase}/documentation/developersGuide/index.html">Developers Guide</a></li>
<li><a href="#{propertyService.properties['server.download.folder']}/#{productPage.productNameLowerCase}/documentation/tagReference/index.html">Tag Reference</a></li>
<li><a href="#{propertyService.properties['server.download.folder']}/#{productPage.productNameLowerCase}/documentation/apiReference/index.html">API Reference</a></li>
<li><a href="#{propertyService.properties['server.support.url']}/docs/DOC-1001">What's new and roadmap</a></li>
</ul>
- </UINamingContainer>
- </div>
<div class="Separator4_34"/>
<div class="Col4_4">
- <UINamingContainer id="productsNavigationBlock" rendered="true" transient="false">
- <script type="text/javascript">
$(document).ready(function(){
$('.q_popuplayer').mouseout(function(){
$('.q_popuplayer').css({display: 'none'});
});
$('.productQuickLink:not(#jxfilewatcherQuickLink)').hoverIntent({
sensitivity: 3,
interval: 200,
over: function() {
var productName = this.href.substring(0, this.href.length - 1);
productName = productName.substring(productName.lastIndexOf('/') + 1);
openProductPopup(productName);
},
out: function() {
}
});
closeProductPopup();
});
function openProductPopup(productNameLowerCase) {
if (productNameLowerCase == "") {
return;
}
var productInfoSelector = "#" + productNameLowerCase + "ProductQuickLinkContent";
var productName = $(productInfoSelector + " > .productName")[0].innerHTML;
var productDescription = $(productInfoSelector + " > .productDescription")[0].innerHTML;
var description = '<strong><a href="/' + productNameLowerCase + '/">' + productName
+ '</a></strong><br/><span>' + productDescription + '</span><br/>';
if (productNameLowerCase != 'quipukit'){
description += '<a href="/' + productNameLowerCase + '/features/">Features</a>';
description += ' | ';
}
if (productNameLowerCase != 'jniwrapper'){
description += '<a href="/' + productNameLowerCase + '/onlinedemo/">Online Demo</a>';
} else {
description += '<a href="/jniwrapper/winpack/">WinPack</a>';
}
$("#productInfoDiv")[0].innerHTML = description;
$("#productImgDiv")[0].innerHTML = '<img src="/images/icons/quicklinks/' + productNameLowerCase + '.png" alt="' + productName + '" align="left"/>';
var offset = $("#" + productNameLowerCase + "QuickLink").offset();
var pageOffset = $('#Page').offset();
var x = offset.left - pageOffset.left - 22;
var navBlockOffset = $('.QuickLinks').offset();
var y = offset.top - navBlockOffset.top - 9;
document.getElementById('productsNavigationBlock:links:productPopup').showAtXY(x, y);
document.getElementById('productsNavigationBlock:links:productPopup').onmouseover = function() {
q_showPopupLayer('productsNavigationBlock:links:productPopup');
};
}
function closeProductPopup() {
document.getElementById('productsNavigationBlock:links:productPopup').hide();
}
</script>
<h4>Products</h4>
<div class="container">
<ul class="productsList">
<li><a id="jniwrapperQuickLink" href="/jniwrapper/" class="productQuickLink">
<img src="/images/icons/quicklinks/jniwrapper.png" alt="JNIWrapper" align="left"/>JNIWrapper</a>
<div id="jniwrapperProductQuickLinkContent" style="display:none;">
<div class="productName">JNIWrapper</div>
<div class="productDescription">Access to native code from Java without JNI</div>
</div>
</li>
<li><a id="comfyjQuickLink" href="/comfyj/" class="productQuickLink">
<img src="/images/icons/quicklinks/comfyj.png" alt="ComfyJ" align="left"/>ComfyJ</a>
<div id="comfyjProductQuickLinkContent" style="display:none;">
<div class="productName">ComfyJ</div>
<div class="productDescription">Bi-directional Java-COM bridge</div>
</div>
</li>
<li><a id="jxcaptureQuickLink" href="/jxcapture/" class="productQuickLink">
<img src="/images/icons/quicklinks/jxcapture.png" alt="JxCapture" align="left"/>JxCapture</a>
<div id="jxcaptureProductQuickLinkContent" style="display:none;">
<div class="productName">JxCapture</div>
<div class="productDescription">Screen capture API for Java apps</div>
</div>
</li>
<li><a id="jxbrowserQuickLink" href="/jxbrowser/" class="productQuickLink">
<img src="/images/icons/quicklinks/jxbrowser.png" alt="JxBrowser" align="left"/>JxBrowser</a>
<div id="jxbrowserProductQuickLinkContent" style="display:none;">
<div class="productName">JxBrowser</div>
<div class="productDescription">Integration of Mozilla Firefox into Java AWT/Swing</div>
</div>
</li>
</ul>
<ul class="productsList">
<li><a id="jexplorerQuickLink" href="/jexplorer/" class="productQuickLink">
<img src="/images/icons/quicklinks/jexplorer.png" alt="JExplorer" align="left"/>JExplorer</a>
<div id="jexplorerProductQuickLinkContent" style="display:none;">
<div class="productName">JExplorer</div>
<div class="productDescription">Use the IE browser as a Java Swing UI component</div>
</div>
</li>
<li><a id="jexcelQuickLink" href="/jexcel/" class="productQuickLink">
<img src="/images/icons/quicklinks/jexcel.png" alt="JExcel" align="left"/>JExcel</a>
<div id="jexcelProductQuickLinkContent" style="display:none;">
<div class="productName">JExcel</div>
<div class="productDescription">Provides full access to Excel functionality from Java</div>
</div>
</li>
<li><a id="jxfilewatcherQuickLink" href="/jxfilewatcher/" class="productQuickLink">
<img src="/images/icons/quicklinks/jxfilewatcher.png" alt="JxFileWatcher" align="left"/>JxFileWatcher</a>
</li>
<li><a id="quipukitQuickLink" href="/quipukit/" class="productQuickLink">
<img src="/images/icons/quicklinks/quipukit.png" alt="QuipuKit" align="left"/>QuipuKit</a>
<div id="quipukitProductQuickLinkContent" style="display:none;">
<div class="productName">QuipuKit</div>
<div class="productDescription">JSF library for creating a dynamic UI for Web apps</div>
</div>
</li>
</ul>
</div>
- <HtmlForm enctype="application/x-www-form-urlencoded" id="links" prependId="true" rendered="true" submitted="false" transient="false">
- <PopupLayer closeOnOuterClick="false" draggable="false" hidingTimeout="0" id="productPopup" modal="false" rendered="true" transient="false" visible="false">
- <HtmlOutputText escape="false" id="j_id84" rendered="true" transient="true" value="
<div class="productPopup">
<div>
<div id="productImgDiv" class="productImgDiv">
</div>
<div id="productInfoDiv" class="productInfoDiv">
</div>
</div>
</div>"/>
- </PopupLayer>
- </HtmlForm>
- </UINamingContainer>
- </div>
</div>
</div>
- <UINamingContainer id="footerSubview" rendered="true" transient="false">
- <div id="Footer" class="clearfix">
- <HtmlForm enctype="application/x-www-form-urlencoded" id="errorReport" prependId="true" rendered="true" submitted="false" transient="false">
- <HtmlInputHidden id="pageId" immediate="false" localValueSet="false" rendered="true" required="false" transient="false" valid="true"/>
- <HtmlInputHidden id="errorText" immediate="false" localValueSet="false" rendered="true" required="false" transient="false" valid="true"/>
- <HtmlPanelGroup id="errorReportSender" rendered="true" transient="false">
- <ReloadComponents disableDefault="false" id="sendBugReport" immediate="false" rendered="true" requestDelay="0" submitParent="true" transient="false"/>
- </HtmlPanelGroup>
- </HtmlForm>
- <div class="Col2_1">
© #{dateUtil.currentYear} #{propertyService.properties['company.name.full']} All rights reserved. <a href="/legal/">Terms of Use</a> | <a href="/privacy/">Privacy Policy</a>
- <HtmlOutputText escape="true" id="buildNumber" rendered="true" style="color:white;" transient="false" value=" | Build: #1954"/>
- </div>
<div class="Col2_2 textright">
<script>
function googleSearch(value) {
var queryComponent = value + " site:" + window.location.host;
queryComponent = encodeURIComponent(queryComponent);
var query = "http://www.google.com/search?hl=en&q="
+ queryComponent;
window.location = query;
}
</script>
<form id="search" type="container" method="get" onsubmit="googleSearch(document.getElementById('search_field').value);return false;">
<a href="/company/contactus/">Contact Us</a> | <a href="/company/news/">Latest News</a> | <a href="/company/career/">Job Offers</a> | <!-- a href="/sitemap/">Site Map</a-->
<input type="search" id="search_field" name="text" placeholder="Search" autosave="TeamDev" results="5"/>
</form>
</div>
</div>
- </UINamingContainer>
- </div>
<!-- Google Analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-477095-2");
pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>
- </dn>
Request Parameters| Name | Value |
|---|
| None |
Request Attributes| Name | Value |
|---|
| __acegi_filterSecurityInterceptor_filterApplied | true |
| __acegi_session_integration_filter_applied | true |
| clearVerifiableComponents | true |
| errorReportHandler | com.teamdev.site.jsf.bean.feedback.ErrorReportHandler@55fd6d |
| q__defaultProgressMessage | teamdev.jsf.component.ajaxsettings.DefaultProgressMessage@4da615 |
| q__defaultProgressMessageInUse | true |
| quipukitOverview | com.teamdev.site.jsf.beans.product.ProductPageHandler@17136ac |
Session Attributes| Name | Value |
|---|
| None |
Application Attributes| Name | Value |
|---|
| None |
Jul 4, 2009 7:24:26 AM - Generated by Facelets
