poniedziałek, 12 listopada 2012

Hello World application with Meteor

In this post I will cover basic templating, sessions and events in Meteor. Our mini-app in the end will look like that:
Nothing impressive but a good start anyway. There is a heading, some text and input to interact with the application. Files are structured as follows:
All files in client directory are served only to clients (server doesn't know about them), files in public are resources most of the time, i.e images. Server directory serves data to server. Everything outside those folders is shared between clients and server (it would be a good place to put scripts or templates you want to run on both, server and client, more about that other time). In our simple program we are going to use only client directory.

We setup three files inside client directory:
helloworld.css
html {margin:0;background-color: #eee;}

body {
width: 640px;
margin:auto;
text-align: center;
font-family: 'Helvetica';
color: #aaa;
text-shadow:1px 1px #fff;
}

p {font-style: italic}

helloworld.html
<head>
 <title>Hello World</title>
</head>

<body>
<h1>Hello ,{{> hello}}</h1>
<p>~ my first app ~</p>
{{> form}}
</body>

<template name="hello">
 {{somebody}}
</template>

<template name="form">
 <input id='newName' type='text'/><input type='submit' value='Greet!'/>
</template>

helloworld.js
Session.set( 'somebody' , 'World' );

Template.hello.somebody = function(){
    return Session.get('somebody');
}

Template.form.events({
     'click input[type=submit]': function(){
     Session.set( 'somebody' , $('#newName').val() );
}

});

Including styles and scripts to your project

Our .css file is self explanatory. Let's get straight to the .html. HEAD and BODY tags are nothing new. You just put there whatever you would like to render. Just without links to CSS and/or other scripts. If you want to include something, just copy file inside your file structure (clinet, server, public or root of your project) and Meteor will minify it and include along other files.

Templates

In the BODY section you see some curly brackets like {{> hello }} and {{somebody}}. It is Handlebars syntax, a powerful templates for javascript. Inside curly brackets you put names of variables (somebody) or templates (> hello). Greater than (>) sign means that you are including a template. In our case we are including hello and form templates which definitions you can find between template tags.
<template name="hello"> ... </template>

Inside hello template we just render variable called somebody (notice again that variables are without ">" sign). Meanwhile form template is hardcoded text input with a submit button.
Session variables

What we want to do is to change our greeting Hello, World to greet anything we want. In this case we will set and get a session variable: somebody. In helloworld.js we set up a default value for our session variable. Let's make it "World".
Session.set( 'somebody' , 'World' );

Now, that we have a variable inside a session, our template can use it to display a proper greeting.

Template.hello.somebody = function(){
return Session.get('somebody');
}
All templates you setup are available in a namespace Template. In this case we have Template.hello and Template.form already defined for us by Meteor. To use {{somebody}} in the template, we must define that variable to get a proper display. We make it a simple function that returns our session value with Session.get('somebody').

On click event
Template.form.events({

 'click input[type=submit]': function(){

 Session.set( 'somebody' , $('#newName').val() );

 }
});
Using Template namespace we are reaching form template (notice that "form" is taken from attribute name of template tag!). To handle events we put an object with definition inside an event function.
Template.form.events( {} );

It is just a key:value pair where key is a string with event + selector and value is a handler. In our case we use click event and look up for input with type=submit. In a handler we set up value of somebody varialbe to input's value. Notice how I am using jquery without including it! It is because Meteor has it in its core but that is about to change in the future so don't get use to it!

That is all. First, the simplest app possible is ready.
It is available right here under this link: basictutorial1.meteor.com

czwartek, 8 listopada 2012

How to install Meteor?

All you need is on Meteor's example page.

How to install an example application?

Make a directory (not in www directory of your Apache, Meteor runs on Node.js. Has it's own server). Let's make it in your user directory i.e
greg@ThinkPad:~$ mkdir /home/greg/Meteor
Where greg is your username in your system. Or just
greg@ThinkPad:~$ mkdir ~/Meteor
Now get inside...
greg@ThinkPad:~$ cd ~/Meteor
...and clone examples from meteor.com:
greg@ThinkPad:~/Meteor$ meteor create --example leaderboard
Next enter cloned project's directory and run meteor command to start it on http://localhost:3000
greg@ThinkPad:~/Meteor$ cd leaderboards
greg@ThinkPad:~/Meteor/leaderboards$ meteor
You can clone also other examples:
- parties
- todos
- wordplay
It is a good practice to read them line by line, play around with them, change here and there.

How to add SyntaxHighlighter to my Google Blogger?

Tutorial written by oneqonea available on their Blog.
var fn = new function(){
    alert('test');
}