j. carlos nieto's blog

Meteora's Form Control example

The Meteora 's JSON-RPC control allows a server-side application to talk and share information with its client-side partner. We use this control to reduce the amount of hand-written Javascript needed to display dynamic effects, such as updating a HTML div with information fetched through an AJAX request.

Let's see a practical and very simple example to illustrate what I am saying.

The first file is the stylesheet, nothing special.

File: style.css

body {
color: #333;
}

#blocks {
margin: 10px;
padding: 0px;
display: block;
overflow: auto;
}

#block-1,
#block-2,
#block-3 {
width: 100px;
height: 100px;
display: block;
margin: 5px;
padding: 5px;
float: left;
}

#block-1 {
background: #f00;
border: 1px solid #c00;
color: #fff;
}

#block-2 {
background: #8f0;
border: 1px solid #8c0;
color: #000;
}

#block-3 {
background: #80f;
border: 1px solid #c0f;
color: #fff;
}

The second file is the demonstration form.

File: form.html

<html>
<head>

<title>Meteora's JSON-RPC Demo</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="js/meteora/src/meteora.js"></script>

</head>
<body>

<script type="text/javascript">
// We will need this control for our demonstration
Meteora.uses('Control.Form');

// Comment the line below to hide Meteora's log
Meteora.showDebug(true, true);

// Clean colors' inner text
function initColors() {
for (var i = 1; i <= 3; i++) {
$('block-'+i).innerHTML = '';
}
}
</script>

<h1>Meteora's Control.Form example</h1>

<ul id="blocks">
<li id="block-1"></li>
<li id="block-2"></li>
<li id="block-3"></li>
</ul>

<form method="post" onsubmit="return formSubmit(this);" action="action.php">
<label class="required">
What color am I thinking of?:
<select name="name">
<option value=""></option>
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Purple</option>
</select>
</label>
<div>
<button type="submit">Continue</button>
</div>
</form>

</body>
</html>

Let's see what does the form mean.

This is how you tell Meteora that you want to include a Control:

Meteora.uses('Control.Form');

That function will fetch all the required javascript files needed to start playing with JSON-RPC and common HTML forms.

Now let's take a look at the form tag:

As you can see I wrote the common parameters “method” and “post” plus an extra parameter, “onsubmit”, this one will perform a simple validation that will alert the user when a required field is empty. After this validation, the form will be submitted using a hidden iframe, we chose to use an iframe because it is the only way we can use <input type=“file” /> to upload files transparently, so, if you were wondering, yes, you can upload files too ;-).

Now it is time for you to know Ms. Server-side Program :).

<?php

require 'json.php';

function response($array) {
header('Content-Type: text/plain');
echo json::encode($array);
exit(0);
}

if (isset($_POST['name'])) {

$color = rand(1, 3);

$name = intval($_POST['name']);

if ($color == $name) {
$response = array(
'successMessage' => 'That\'s correct!',
'execute' => 'initColors()',
'updateObject' => array(
'objectId' => 'block-'.$color,
'data' => 'You rocks!'
)
);
} else {
$response = array(
'errorMessage' => 'Wrong answer!',
'execute' => 'initColors()',
'updateObject' => array(
'objectId' => 'block-'.$color,
'data' => 'Sorry!'
)
);
}

response($response);
}
?>

The required json.php file is a nice library that you can copy from meteora-0.3/test/server-side/json.php.

Ms. Server-side Program will process the information we sent and will reply with specially crafted JSON .

This is the $response array:

$response = array(
'successMessage' => 'That\'s correct!',
'execute' => 'initColors()',
'updateObject' => array(
'objectId' => 'block-'.$color,
'data' => 'You rocks!'
)
);

As you can see, it has 3 keys, each one having their own functionality , the first key will show an standard “success” message, the second will execute the code as if it were Javascript, and the third one will replace the contents of the given DOM element.

Using the function response() we send back the appropriate headers and data to the client-side application and it will recognize and evaluate the response as JSON-RPC. Therefore, the final effect will be accomplished without writing any extra line of Javascript. Isn't that great?

Here is a live example of the things we learned through this article.

Hope you like it!

Thursday December 13, 2007 @ 23:33
Write a comment

About the author

xiam

José Carlos Nieto es un nerd que pretende ser estudiante de Matemáticas en la UNAM, trabaja con sus amigos haciendo cosas divertidas en Astrata.

Comments

Friday December 14, 2007 @ 01:50

jordi

Meteora.Form() saved me something between 1'000,000 and 2'000,000 lines of useless JS code!!

Friday December 14, 2007 @ 04:29

Chiapaneko

A few weeks ago, I was working with a PHP-Project in my school and I decided to use Meteora. It was great, I developed the client-side in a very short time. My classmates were asking me, “how did you get that data-grid there?… and how about the form?… can we see the code?”… And I told them how it works, they saw the code and said: “Shit!, this is great, very simple to use… where can I find it?…”, some days later, many of them had meteora in their projects… Hehe, it looks like a testimonial… Meteora is a very nice tool, I could develop a lot of stuff, even if I am not a JavaScript developer… congrats! Regards!

Saturday December 15, 2007 @ 11:37

megabyte

jajajaj “you rocks” HAHAHHAHAHAH

no mames ya entrale al ingles sin barreras y luego posteas

Wednesday December 19, 2007 @ 02:22

FingerHut

poor baby megabyte, since you don't have anything from your own, not code, not software, nothing. You came here and criticism about… english? it's not even your native language, you don't have roots, traditions, family, friends, nothing!, don't have nothing but your ego, you are nothing…