-
Notifications
You must be signed in to change notification settings - Fork 52
Creating a Module
Meemoo applications are really simple: modules connected by wires. Let's start a Meemoo "hello world module".
In real, the most little meemoo module is a webpage, so, the following is a valid module:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title> Hello world! </title>
<meta name="author" content="Someone" />
<meta name="description" content="Hello World!" />
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Now we have just to add this module on Meemoo's iframework URL using the add module button and the module is included.
But it is not so significant. A more interesting module uses the meemoo.js to specify its MVC characteristics:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title> Hello world! </title>
<meta name="author" content="Someone" />
<meta name="description" content="Hello World!" />
</head>
<body>
<script>
Meemoo.setInfo({
title: "hello world",
author: "Someone",
description: "Hello World!"
});
</script>
</body>
</html>
We have specified some information about our module (title, author and description). But it is not so interesting yet. Modules on Meemoo can have inputs and outputs, so lets say that to Meemoo:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>hello world</title>
<meta name="author" content="you" />
<meta name="description" content="the most simple meemoo module ever" />
<!-- we have to include jquery and meemoo -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://meemoo.org/meemoo/v1/meemoo-min.js"></script>
<!-- include your style too -->
<style type="text/css">
</style>
</head>
<body>
<b>Hello <div id="name"></div></b>
<script type="text/javascript">
Meemoo.setInfo({
title: "hello world",
author: "You",
description: "the most simple meemoo module ever"
}).addInputs({
name: {
action: function (foo) {
$("#name").text(foo);
},
type: "string"
}
});
</script>
</body>
</html>
Load this module and you'll see an input called "name". Click on that and you could enter some text. As specified, the "action" while sending string through the input of this module will change the DIV element with id "name" with the given string.