Touchfaces, styling - commandLink vs commandButton

UI Components for JSF
Post Reply
yttesen
Posts: 51
Joined: 19 Feb 2010, 10:08

10 Mar 2010, 09:01

Hi,

I think all of the touchfaces examples use the <p:commandLink styleClass="whiteButton" />. In my touchface application I have many form input fields and testing it on safari its kind of natural to hit the enter key. However this will not result in a form submit using <p:commandLink />. Changing to <p:commandButton styleClass="whiteButton" /> causes the styling to not match.

See this screenshot (first is button, second is link):
Image

This additional styling is somewhat useful as a workaround in safari (Firefox shows the background of the window inside the button :-():

Code: Select all

.whiteButton { margin:0 auto; width: 95%; background-color: transparent; }
Would it be possible to have the same styling for <p:commandButton styleClass="whiteButton" /> as for the <p:commandLink styleClass="whiteButton" /> per default when using Touchfaces?

Regards,
Christian
JDK: Java8
Primefaces: 4.0.13
OmniFaces: 1.5
JSF2: Mojarra 2.1.24
WebServer: Resin 4.0.38

moktc
Posts: 37
Joined: 18 Aug 2010, 03:08

17 Nov 2010, 05:06

Hi Christian

Can you shed a light (or share your xhtml page) on the page you designed. I trying to create the similar page containing the checkbox and slider but could not figure how to

1) Have the labels aligned left and input field aligned right
2) Could not get p:slider to display in the i:tableview.

I am using v2.2 snapshot.

Thank you in advance. :D

yttesen
Posts: 51
Joined: 19 Feb 2010, 10:08

17 Nov 2010, 10:06

Hi moktc,

Its been quite a while since I left this application: I will paste it as is - leaving you to take what you want :-)

notification.xhtml

Code: Select all

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui" xmlns:i="http://primefaces.prime.com.tr/touch"
	xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:vb="http://java.sun.com/jsf/composite/components/form">
	<ui:decorate template="/WEB-INF/templates/t_view.xhtml">
		<ui:param name="viewId" value="policyNotification" />
		<ui:param name="viewTitle" value="#{msgs['policy.notification.title']}" />
		<ui:define name="leftNavBar">
			<i:navBarControl label="#{msgs['button.back']}" view="policy" />
		</ui:define>
		<ui:define name="content">
			<i:rowGroup title="#{msgs['settings']}">
				<i:rowItem>
					<vb:labelSelectBooleanCheckbox id="notificationEnabled" label="#{msgs['policy.notification.enabled']}"
						value="#{policyBean.userPolicy.notificationEnabled}" />
				</i:rowItem>
				<i:rowItem>
					<h:panelGrid columns="2" styleClass="full" columnClasses="nowrap,">
						<h:outputLabel value="#{msgs['policy.notification.threshold']}:" for="notificationThreshold" />
						<h:inputText id="notificationThreshold" value="#{policyBean.userPolicy.notificationThreshold}"
							label="#{msgs['policy.notification.threshold']}">
							<f:validateLongRange minimum="0" maximum="100" />
						</h:inputText>
					</h:panelGrid>
					<center><p:slider id="notificationThresholdSlider" for="notificationThreshold" minValue="0" maxValue="100" /></center>
				</i:rowItem>
			</i:rowGroup>
			<i:rowGroup title="#{msgs['policy.notification.method']}">
				<i:rowItem>
					<vb:labelInputText id="email" label="#{msgs['policy.notification.email']}" value="#{accountBean.email.address}" />
				</i:rowItem>
				<i:rowItem>
					<vb:labelInputText id="sms" label="#{msgs['policy.notification.sms']}" value="#{accountBean.sms.localDirectory}" />
				</i:rowItem>
			</i:rowGroup>

			<p:commandButton type="submit" value="#{msgs['button.update']}" styleClass="whiteButton"
				actionListener="#{accountBean.updateAccount}" update="@form,policy_form:settings" />
		</ui:define>
	</ui:decorate>
</f:view>
As you can see - I've implemented some custom components for "label and checkbox", "label and input text" etc. These are listed below:

labelSelectBooleanCheckbox.xhtml:

Code: Select all

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:composite="http://java.sun.com/jsf/composite">
	<composite:interface>
		<composite:attribute name="label" required="true" />
		<composite:attribute name="value" required="true" />
		<composite:attribute name="readonly" required="false" />
		<composite:attribute name="required" required="false" />
		<composite:editableValueHolder name="checkbox" />
	</composite:interface>
	<composite:implementation>
		<h:panelGrid columns="2" styleClass="full" columnClasses="nowrap,">
			<h:outputLabel id="label" value="#{cc.attrs.label}:" for="checkbox" />
			<h:selectBooleanCheckbox id="checkbox" label="#{cc.attrs.label}" value="#{cc.attrs.value}" readonly="#{cc.attrs.readonly}"
				required="#{cc.attrs.required}" />
		</h:panelGrid>
	</composite:implementation>
</f:view>
labelInputText.xhtml

Code: Select all

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:composite="http://java.sun.com/jsf/composite">
	<composite:interface>
		<composite:attribute name="label" required="true" />
		<composite:attribute name="waterMarkLabel" required="false" />
		<composite:attribute name="value" required="true" />
		<composite:attribute name="required" required="false" />
		<composite:attribute name="readonly" required="false" />
		<composite:editableValueHolder name="input" />
	</composite:interface>
	<composite:implementation>
		<h:panelGrid columns="2" styleClass="full" columnClasses="nowrap,">
			<h:outputLabel id="label" value="#{cc.attrs.label}:" for="input" />
			<h:inputText id="input" label="#{cc.attrs.label}" value="#{cc.attrs.value}" readonly="#{cc.attrs.readonly}"
				required="#{cc.attrs.required}" />
			<p:watermark for="input" value="#{cc.attrs.waterMarkLabel}" rendered="#{not empty cc.attrs.waterMarkLabel}" />
		</h:panelGrid>
	</composite:implementation>
</f:view>
Hope you can use it.

Regards,
Christian
JDK: Java8
Primefaces: 4.0.13
OmniFaces: 1.5
JSF2: Mojarra 2.1.24
WebServer: Resin 4.0.38

moktc
Posts: 37
Joined: 18 Aug 2010, 03:08

17 Nov 2010, 15:27

Hi Christian

Thanks for sharing your code. They helped me go a step further. I hate to bother you again but is the "full" style class part of PrimeFaces or is that your custom CSS definition. Is that the magic that space out the label and the input field? Are you able to provide the CSS definition for the "full" style class?

Code: Select all

 <h:panelGrid columns="2" styleClass="full" columnClasses="nowrap,">
                  <h:outputLabel value="#{msgs['policy.notification.threshold']}:" for="notificationThreshold" />
                  <h:inputText id="notificationThreshold" value="#{policyBean.userPolicy.notificationThreshold}"
                     label="#{msgs['policy.notification.threshold']}">
                     <f:validateLongRange minimum="0" maximum="100" />
                  </h:inputText>
               </h:panelGrid>
Also thanks for showing how to create custom component in JSF 2.

yttesen
Posts: 51
Joined: 19 Feb 2010, 10:08

17 Nov 2010, 17:32

The missing link - CSS file:

These might be the important onces:

Code: Select all

input { text-align: right; }
input[type="checkbox"] { float: right; }
.full { width: 100%; }

Code: Select all

.demo { margin: 0 auto; margin-bottom: 10px; color: #fff; font-size: 0.7em; background-color: #5f5f5c; padding: 3px; width: 150px; text-align: center; -webkit-border-radius: 8px; }

.toolbar>h1 { width: 180px; left: 45%; }

input { text-align: right; }
input[type="checkbox"] { float: right; }

.company { border: none; padding-top: 10px; }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.full { width: 100%; }
.nowrap { white-space: nowrap; }

.tbl-usage { width: 100%; }
.tbl-usage th { font-size: 0.8em; text-align: center; }
.tbl-usage td { font-size: 0.65em; padding: 2px; font-weight: normal; white-space: nowrap; }
.tbl-usage td.footer { font-weight: bold; font-size: 0.7em; text-align: center;}

.tbl-plan-details { font-size: 0.8em; font-weight: normal; }

.row-item-setting { color: -webkit-link; margin-top: -15px; }
.row-item-setting-description { font-size: 0.8em; font-weight: normal; }

.msgError { text-align: center; color: red; font-size: 0.75em; }
.msgInfo { text-align: center; color: green; font-size: 0.75em; }

.whiteButton { margin:0 auto; width: 95%; background-color: transparent; }
.yes-no { width: 75px; display: inline; font-size: 14px; margin-top: 5px; margin-left: 4px; }

/* block ui, idleMonitor */
.blockMsg { background-image: none; left: 15%!important; background-color: #5f5f5c!important; color: #fff!important; width: 70%!important; min-height: 50px!important; font-size: 0.8em; top: 50px!important; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

/* quota bar */
dl, dt, dd { margin:0; padding:0; margin-top:10px; }
dd { width:216px; height:41px; background:url(#{resource['images:bg_bar.gif']}) no-repeat 0 0;	position:relative; }
dd span { position:absolute; display:block; width:200px; height:25px; background:url(#{resource['images:bar.gif']}) no-repeat 0 0; top:8px; left:8px; overflow:hidden; text-indent:-8000px; }
dd em { position:absolute; display:block; width:200px; height:25px; background:url(#{resource['images:bg_cover.gif']}) repeat-x; top:0; }
Good luck.

Regards,
Christian
JDK: Java8
Primefaces: 4.0.13
OmniFaces: 1.5
JSF2: Mojarra 2.1.24
WebServer: Resin 4.0.38

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests