Flip Switch

Version 4 by Judy Guglielmin
on Feb 08, 2012 13:06.

<< Changes from 3 to 4

compared with

Current by Philip Breau
on Jan 17, 2013 16:10.

Key

These lines were removed. This word was removed.

These lines were added. This word was added.

View page history

There are 5 changes. View first change.

		h3. flipSwitch
		h3. flipswitch

		The flipSwitch component displays a command button that toggles between an On and Off state. This UI element is common on the iOS platform for toggling a setting on or off. This component generates server side action event when pressed.  SingleSubmit = "true" means that the button will submit itself and render the page with whatever has changed (typicaly ICEfaces 2.0 singleSubmit behaviour). This component is also supported by the mobi:ajax tag for more options on ajax support.
		The flipswitch component displays a command button that toggles between an On and Off state. This UI element is common on the iOS platform for toggling a setting on or off. This component generates server side action event when pressed.  SingleSubmit = "true" means that the button will submit itself and render the page with whatever has changed (typicaly ICEfaces 2.0 singleSubmit behaviour). This component is also supported by the mobi:ajax tag for more options on ajax support.


		{note}{}SingleSubmit = false means the state of the button stays on the client until the form is submitted with some other component (typically a submit button).{note}

		h3. Usage

		* singleSubmit = "false" .  The value stays on the client until form submission. (this is the default)

		{code:xml}
		<h:outputLabel for="cor" value="Auto-Correction"/>
		<mobi:flipSwitch id="cor" style="float:right"
		<mobi:flipswitch id="cor" style="float:right"
		labelOn="ON" labelOff="OFF"
		value="#{flipSwitchBean.autoCorrection}"/>
		{code}

		* singleSubmit = "true" .  The value is submitted immediately to the server and any page markup that changes as a result is re-rendered.

		{code:xml}
		<h:outputLabel for="cor" value="Auto-Correction"/>
		<mobi:flipSwitch id="cor" style="float:right" singleSubmit="true"
		<mobi:flipswitch id="cor" style="float:right" singleSubmit="true"
		labelOn="ON" labelOff="OFF"
		value="#{flipSwitchBean.autoCorrection}"/>
		{code}

		h3. Theming

		FlipSwitch supports device theming by providing default styles for Apple, Android and Blackberry.  CSS class names are as follows:
		* mobi-flip-switch (mobi-flip-switch-off \\| mobi-flip-switch-off)
		** mobi-flip-switch-txt

		{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here\|http://res.icesoft.org/docs/icemobile/v1_0_0RC1/tld/mobi/flipswitch.html].{tip}
		h3. Component Documentation
		[flipswitch\|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/flipswitch.html]