To help you get started, here is an absolutely minimal HCJ page, which you can modify with the components and layouts described in the next sections:
lt;!DOCTYPE nbsp;HTML gt;
lt;html gt;
nbsp; nbsp; nbsp; nbsp; lt;head gt;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; lt;meta nbsp;name="viewport" nbsp;content="width=device-width, nbsp;initial-scale=1" gt;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; lt;link nbsp;rel="stylesheet" nbsp;type="text/css" nbsp;href="hcj.css" gt;
nbsp; nbsp; nbsp; nbsp; lt;/head gt;
nbsp; nbsp; nbsp; nbsp; lt;body gt;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; lt;script nbsp;src="hcj.min.js" gt; lt;/script gt;
nbsp;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; lt;script gt;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;var nbsp;page nbsp;= nbsp;hcj.component.text('Hello nbsp;World');
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;var nbsp;rootInstance nbsp;= nbsp;hcj.rootComponent(page);
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; lt;/script gt;
nbsp; nbsp; nbsp; nbsp; lt;/body gt;
lt;/html gt;
The page includes two external files, hcj.css and hcj.js. The hcj.css file contains a CSS reset. The hcj.js file contains all of the HCJ framework code. This file must be included in the body section, not the head section, because it depends on the body element being present for some internal initialization. Then, inside a script tag section, the page defines a component and renders it.
To render a component, you must pass it to the hcj.rootComponent function. This function places your component in the top-left corner of the window and gives it the window's height and width, and returns the instance. Rendering into a smaller region is not currently supported. Multiple root components can be used, e.g. to display full-window modal dialogs if you wish.
Fonts are a particular issue for HCJ websites. Because fonts can change the size taken up by text, text-based components must set their minimum dimensions after fonts are loaded. It is an unfortunate reality that there are no DOM callbacks that are run when fonts are loaded, so HCJ is shipped with a window.waitForWebfonts function. We recommend that you use this function to run your page after all fonts are loaded. The waitForWebfonts function takes three arguments: an array of font families to wait for (these should be defined using @font-face CSS rules), a callback to run when they are all loaded, and an optional max time to wait in the event that a font never loads, which defaults to 10 seconds.
