Source Code Structure

We will now start exploring the source codes of Hello Kii in depth.

The following figure illustrates the source code structure.

  • index.html

    This HTML file is the main page.

    It defines the page composition and loads related files. Data within this page is updated to perform transition and refresh of screens according to the implementation model of the single page application. Hello Kii simply switches screens with the display property of the style attribute. Contents of all screens are included in this file.

  • KiiSDK.min.js

    This is the Kii Cloud SDK. You need to download and make the SDK JS file visible together with the HTML file.

    This tutorial uses the SDK downloaded from the developer portal without change.

  • login-page-callback.js and list-page-callback.js

    These are JavaScript source files which implement the Hello Kii feature. The former handles the login screen and the latter handles the data listing screen.

    You can execute API calls to Kii Cloud with the Kii Cloud SDK for JavaScript in two ways: with callbacks and with promises. You choose either of one of them when you develop your mobile app. Hello Kii provides with these two types of JS files which realize the same feature in order to show both the implementation methods. By default at download, the index.html file of Hello Kii is configured to point to the callback version.

    See Use Promise for the difference between callback and promise implementations.

  • login-page-promise.js and list-page-promise.js

    These are the promise version of the JavaScript source files. By default at download, these files are not referenced by any files.

    Leave them for now as this tutorial explains the callback version first, and then the promise version next.

  • hellokii.css

    This is the CSS file that is referenced by the index.html file. You can apply style sheets to your Web app as you do to common HTML sites.

    This tutorial doesn't explain the CSS file for Hello Kii because it only contains the screen design elements. You don't particularly need to review the file if you know how to implement CSS files.

What's next?

We will review the contents of the index.html file.

Go to Index.html Implementation.