Tutorial (basic learning)

Tutorial (basic learning)

Last modified by kashi on 2015/01/30, 12:46

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:

hifive ver1.0.5 or older uses jquery.blockUI plugin, however, it's no longer required in ver1.0.6 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 )

<!doctype html>  
   <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 in development time-->

Check operation

After 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


You can use "project generation wizard plugin" to get initial configuration and library of eclipse project.

Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.