TYPO3 Formidable - Event handling

Trivial events using majix - Rich client interaction technology

What does it do ?

This example demonstrates how easy it is to interract with the client using majix and Formidable.

Majix is the name of the standalone-javascript and ajax layer built in Formidable.

Where to get the code ?

See code: Trivial events using majix - Rich client interaction technology

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<formidable version="0.7.1" xmlns:datahandler="http://www.ameos.com/formidable/071/datahandler" xmlns:renderer="http://www.ameos.com/formidable/071/renderer" xmlns:renderlet="http://www.ameos.com/formidable/071/renderlet" xmlns:validator="http://www.ameos.com/formidable/071/validator" xmlns:actionlet="http://www.ameos.com/formidable/071/actionlet">

<elements>
		
		<renderlet:BUTTON name="btn_step1" label="Hit me for step 1">
			<onclick runat="client">
				<userobj>
					<php><![CDATA[
						
						return array(
							$this->aORenderlets["box_step1"]->majixDisplayBlock(),
							$this->aORenderlets["btn_step1"]->majixDisplayNone(),
							$this->aORenderlets["step1_gotostep2"]->majixDisplayBlock(),
						);

]]></php>
				</userobj>
			</onclick>
		</renderlet:BUTTON>

<renderlet:BOX name="box_step1">
			<html><![CDATA[
				
				<h3>Hello, World !</h3>
				<p>This box is displayed thanks to a <b>client event</b> using majix.</p>
				<p>Majix is the codename for the technology of rich client interaction between the client browser and your application based on formidable.</p>
				<p>The power of majix is that it requires no javascript coding.</p>
				<p>Now, continue this presentation by clicking the following button</p>

]]></html>
		</renderlet:BOX>
		
		<renderlet:BUTTON name="step1_gotostep2" label="Continue with step 2">
			<onclick runat="client">
				<userobj>
					<php><![CDATA[
						
						return array(
							$this->aORenderlets["box_step2"]->majixDisplayBlock(),
							$this->aORenderlets["step1_gotostep2"]->majixDisplayNone(),
							$this->majixScrollTo("box_step2")
						);

]]></php>
				</userobj>
			</onclick>
		</renderlet:BUTTON>

<renderlet:BOX name="box_step2">
			<childs>
				
				<renderlet:BOX>
					<html><![CDATA[
						
						<h3>This box has also been displayed using a client event</h3>
						<p>This means that it required no communication with the server to execute what had to be done when event was fired.</p>
						<p>Each renderlet defines generic majix tasks ( displayBlock, displayNone, replaceData, ... ) and specific ones, depending on its type.</p>

]]></html>
				</renderlet:BOX>
				
				<renderlet:BUTTON name="step2_replacedata" label="Execute majixReplaceData() on following textfield">
					<wrap><![CDATA[
						<div style="margin-bottom: 10px;">|</div>
					]]></wrap>
					<onclick runat="client">
						<userobj>
							<php><![CDATA[
								
								return array(
									$this->aORenderlets["step2_txtfield"]->majixReplaceData(
										"Replaced !!!"
									),
									$this->aORenderlets["step2_gotostep3"]->majixDisplayBlock()
								);

]]></php>
						</userobj>
					</onclick>
				</renderlet:BUTTON>
				
				<renderlet:TEXT name="step2_txtfield">
					<data defaultvalue="Some content ..." />
				</renderlet:TEXT>

<renderlet:BUTTON name="step2_gotostep3" label="Continue with step 3">
					<onclick runat="client">
						<userobj>
							<php><![CDATA[
								
								return array(
									$this->aORenderlets["step2_gotostep3"]->majixDisplayNone(),
									$this->aORenderlets["box_step3"]->majixDisplayBlock(),
									$this->majixScrollTo("box_step3")
								);

]]></php>
						</userobj>
					</onclick>
				</renderlet:BUTTON>

</childs>
		</renderlet:BOX>

<renderlet:BOX name="box_step3">
			<childs>
				<renderlet:BOX>
					<html><![CDATA[
						
						<h3>Majix has complete access to data on page</h3>
						<p>Change the text of the following field...</p>

]]></html>
				</renderlet:BOX>

<renderlet:TEXT name="step3_txtfield">
					<data defaultvalue="Change me please !" />
					<onfocus runat="client">
						<userobj>
							<php><![CDATA[

return $this->aORenderlets["step3_txtfield"]->majixReplaceData("");

]]></php>
						</userobj>
					</onfocus>
					<onkeyup runat="client">
						<userobj>
							<php><![CDATA[

return array(
									$this->aORenderlets["step3_boxchange"]->majixReplaceData("clientData::step3_txtfield"),
									$this->aORenderlets["step3_gotostep4"]->majixDisplayBlock(),
									$this->majixScrollTo("step3_gotostep4")
								);

]]></php>
						</userobj>
					</onkeyup>
				</renderlet:TEXT>

<renderlet:BOX name="step3_boxchange" />

<renderlet:BUTTON name="step3_gotostep4" label="Continue with step 4">
					<onclick runat="client">
						<userobj>
							<php><![CDATA[
								
								return array(
									$this->aORenderlets["box_step4"]->majixDisplayBlock(),
									$this->aORenderlets["step3_gotostep4"]->majixDisplayNone(),
									$this->majixScrollTo("box_step4")
								);

]]></php>
						</userobj>
					</onclick>
				</renderlet:BUTTON>
			</childs>
		</renderlet:BOX>

<renderlet:BOX name="box_step4">
			<childs>
				<renderlet:BOX>
					<html><![CDATA[
						
						<h3>Another nice aspect of majix is that it can also handle <b>ajax events</b></h3>
						<p>Click the button below ...</p>

]]></html>
				</renderlet:BOX>

<renderlet:BUTTON label="Gimme ajax !!" >
					<onclick runat="ajax">
						<userobj>
							<php><![CDATA[
								
								return array(
									$this->aORenderlets["step4_boxchange"]->majixReplaceData(
										"<b>The PHP server says: when you clicked this button it was exactly " . strftime("%H:%M:%S") . " at my watch</b>"
									),
									$this->aORenderlets["step4_boxexplain"]->majixDisplayBlock(),
									$this->aORenderlets["step4_btntimenocache"]->majixDisplayBlock(),
									$this->majixScrollTo("step4_btntimenocache")
								);

]]></php>
						</userobj>
					</onclick>
				</renderlet:BUTTON>

<renderlet:BOX name="step4_boxchange" />
				
				<renderlet:BOX name="step4_boxexplain">
					<html><![CDATA[
						
						<p>This event has been processed by the PHP server on-demand ( using json over ajax RPC ).</p>
						<p>The default config for ajax events is to cache results return by server, so that when the same event is fired again, no ajax request is needed to execute the majix tasks.</p>
						<p>Click the same button again: nothing happens, the time don't change</p>
						<p>Then click the following button for fresh data at each click.</p>

]]></html>
				</renderlet:BOX>

<renderlet:BUTTON name="step4_btntimenocache" label="Gimme ajax !! without caching">
					<onclick runat="ajax" cache="false">
						<userobj>
							<php><![CDATA[
								
								return array(
									$this->aORenderlets["step4_boxchange"]->majixReplaceData(
										"<b>The PHP server says: when you clicked this button it was exactly <span style='color: purple;'>" . strftime("%H:%M:%S") . "</span> at my watch</b>"
									),
									$this->aORenderlets["step4_gotostep5"]->majixDisplayBlock()
								);

]]></php>
						</userobj>
					</onclick>
				</renderlet:BUTTON>

<renderlet:BUTTON name="step4_gotostep5" label="Continue with step 5">
					<onclick runat="client">
						<userobj>
							<php><![CDATA[
								
								return array(
									$this->aORenderlets["box_step5"]->majixDisplayBlock(),
									$this->aORenderlets["step4_gotostep5"]->majixDisplayNone(),
									$this->majixScrollTo("box_step5"),
								);

]]></php>
						</userobj>
					</onclick>
				</renderlet:BUTTON>
			</childs>
		</renderlet:BOX>

<renderlet:BOX name="box_step5">
			<childs>
				<renderlet:BOX>
					<html><![CDATA[
						
						<h3>Ajax events in formidable ...</h3>
						<p>... are used when something has to be processed by php before knowing what to execute on browser.</p>
						<p>For instance: (<i>note that result is cached for already requested operations !</i>)</p>
					]]></html>
				</renderlet:BOX>

<renderlet:TEXT name="step5_txtmd5" label="Enter some text" />

<renderlet:LISTBOX name="step5_whattodo">
					<data>
						<items>
							<item caption="Calculate md5" value="md5" />
							<item caption="Transform to upper case" value="uppercase" />
							<item caption="Calculate soundex" value="soundex" />
						</items>
					</data>
				</renderlet:LISTBOX>

<renderlet:BUTTON label="Do it !!">
					<onclick runat="ajax" require="modalbox" params="step5_txtmd5, step5_whattodo">
						<userobj>
							<php><![CDATA[
								
								$aParams = func_get_arg(1);
								$sRes = "";

switch($aParams["step5_whattodo"]) {
									case "md5": {
										
										$sRes = md5($aParams["step5_txtmd5"]);
										break;
									}
									case "uppercase": {
										$sRes = strtoupper($aParams["step5_txtmd5"]);
										break;
									}
									case "soundex": {
										$sRes = soundex($aParams["step5_txtmd5"]);
										break;
									}
								}

return array(
									$this->aORenderlets["step5_modalbox"]->majixShowBox(),
									$this->aORenderlets["step5_mbox_res"]->majixReplaceData($sRes),
								);

]]></php>
						</userobj>
					</onclick>
				</renderlet:BUTTON>

<renderlet:MODALBOX name="step5_modalbox">
					<childs>
						<renderlet:BOX html="The result is ..." mode="h1" />
						<renderlet:BOX name="step5_mbox_res" mode="b" />
						<renderlet:BUTTON name="step5_mbox_close" label="Close">
							<wrap><![CDATA[<div>|</div>]]></wrap>
							<onclick runat="client">
								<userobj>
									<php><![CDATA[
										
										return $this->aORenderlets["step5_modalbox"]->majixCloseBox();

]]></php>
								</userobj>
							</onclick>
						</renderlet:BUTTON>
					</childs>
				</renderlet:MODALBOX>

</childs>
		</renderlet:BOX>
	</elements>

</formidable>

See it in action

Hello, World !

This box is displayed thanks to a client event using majix.

Majix is the codename for the technology of rich client interaction between the client browser and your application based on formidable.

The power of majix is that it requires no javascript coding.

Now, continue this presentation by clicking the following button

This box has also been displayed using a client event

This means that it required no communication with the server to execute what had to be done when event was fired.

Each renderlet defines generic majix tasks ( displayBlock, displayNone, replaceData, ... ) and specific ones, depending on its type.

Majix has complete access to data on page

Change the text of the following field...

Another nice aspect of majix is that it can also handle ajax events

Click the button below ...

This event has been processed by the PHP server on-demand ( using json over ajax RPC ).

The default config for ajax events is to cache results return by server, so that when the same event is fired again, no ajax request is needed to execute the majix tasks.

Click the same button again: nothing happens, the time don't change

Then click the following button for fresh data at each click.

Ajax events in formidable ...

... are used when something has to be processed by php before knowing what to execute on browser.

For instance: (note that result is cached for already requested operations !)

Enter some text

Download Formidable XML file

Trivial events using majix - Rich client interaction technology

What does it do ?

Where to get the code ?

See it in action

Hello, World !

This box has also been displayed using a client event

Majix has complete access to data on page

Another nice aspect of majix is that it can also handle ajax events

Ajax events in formidable ...

Download

Features

Documentation

Many thanks to

Latest snippets