Tutorial (basic learning)
This tutorial describes how to use hifive in the most basic way.
By dividing an application into View - Controller - Logic sections, you can have better lookthrough
and create a highly change-adaptive application.
01.Getting started
Download hifive
First, click the "Download" button on the right side of the top page and download the ZIP file.
※You can also download the required modules from the download page,
however this tutorial assumes that the js files (contained in the zip file) include all functions.
File structure
Unzip the zip file after downloading. The files are as below. {version} is the number of version downloaded.
- h5-{version}.dev.js
- File used for development. It exports the logs in development time, and contains various development support functions.
- In the tutorial this file is referred to as h5.js.
- h5-{version}.js
- File used for release. Does not include log export and development support functions. Used to publish a hifive project.
- h5-{version}.css
- A css file used in hifive
- In the tutorial this file is referred to as h5.css.
- ejs-1.0.h5mod.js
- A js file used for template function in hifive. Template function will be described in chapter "05. View".
Download dependent files
hifive uses jQuery internally.
You can download jQuery from the link below:
- jQuery（1.7.1 or later）
Prepare HTML file (import library)
Import CSS and JS files and write a HTML file as below:.
(Modify the file path as appropriate )
<html>
<head>
<meta charset="UTF-8">
<!-- Import a hifive stylesheet -->
<link type="text/css" rel="stylesheet" href="lib/h5/h5.css">
<!-- Import a dependent file -->
<script src="lib/jquery/jquery.js"></script>
<!-- Import a hifive framework -->
<script src="lib/h5/ejs-1.0.h5mod.js"></script>
<script src="lib/h5/h5.js"></script>!-- Import h5.dev.js in development time-->
</head>
<body>
...
</body>
</html>
Check operation
After h5.dev.js file is imported,
a message will appear showing it is correctly included.
If the framework is successfully initialized, the following message:
[INFO] 開発版のhifiveの読み込みが完了しました。リリース時はMinify版（h5.js）を使用してください。
will appear on the console of the browser developer tool (press F12 to open).
Now when everything is ready, before proceeding to detailed code, let's take a look at hifive application structure.
Next chapter ⇒ 02.HelloWorld
Reference
You can use "project generation wizard plugin" to get initial configuration and library of eclipse project.