02.HelloWorld
Last modified by kashi on 2015/01/30, 12:48
List of tutorials
HelloWorld
This section shows you in 3 steps how to create a simple hifive application that displays the text "Hello, World!" when you press a button.
These are:
- First, define the controller of hifive MVC model,
- bind the controller to a specific HTML element,
- then define the processing of the above HTML element as event handler.
1.Create JS file (name it "step3.js").
$(function() {
var helloWorldController = {
__name: 'HelloWorldController',
'#btn click': function() {
alert('Hello, World!');
}
};
h5.core.controller('#container', helloWorldController );
});
var helloWorldController = {
__name: 'HelloWorldController',
'#btn click': function() {
alert('Hello, World!');
}
};
h5.core.controller('#container', helloWorldController );
});
- Row 2 ~ 8 define the controller.
- __name in row 3 is the name of the controller. __name is a mandatory property, without this error should appear.
- Row 5 ~ 7 define the event handler.
- In hifive, event handler is defined when an element matches a condition; when a specific event occurs, or when a function is executed.
(This will be described in more details in next steps).
For example, when click event happens (id = btn), alert() function will be executed. - Controller is bound to "id = container" element in row 10.
In order for a controller to actually work, you need to bind it to an element.
2.Write a HTML file and import the above JS file.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script src="ejs-1.0.h5mod.js"></script>
<script src="h5.js"></script>
<!-- Import your js file -->
<script src="step3.js"></script>
<title>hifive Hello World</title>
</head>
<body>
<div id="container">
<input type="button" id="btn" value="hello world!" />
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script src="ejs-1.0.h5mod.js"></script>
<script src="h5.js"></script>
<!-- Import your js file -->
<script src="step3.js"></script>
<title>hifive Hello World</title>
</head>
<body>
<div id="container">
<input type="button" id="btn" value="hello world!" />
</div>
</body>
</html>
3.Check operation
The event handler defined in the controller should trigger
and display the 'Hello, World!' dialog
when clicking the button defined by id="btn".
Check operation
Did you successfully write the Hello World program?
If yes, we are proceeding to understand more about "controller", the core of interaction process.
Next chapter ⇒ 03.Controller
If it doesn't work
- Check whether the HTML file was correctly written:
- Particularly, if id does not exist, or is wrongly written in the <input> tag, it will not match the selector defined in the event handler, causing the event handler unable to operate.
- Check if error appears in developer tool:
- A developer tool is a built-in tool in recent browsers (Firefox also includes FireBug).
Developer tool is opened by pressing F12 key. You should open the developer tool console and reload to see if there is any error.
- A developer tool is a built-in tool in recent browsers (Firefox also includes FireBug).
- Check if controller has name property:
- name is a mandatory property and should exist in controller.
- Check if selector is correctly written:
- In case an element is indicated by id attribute, insert # as a prefix to id name.
- Selector and event name must be separated with a space.