Skip to content
This repository has been archived by the owner on Mar 29, 2024. It is now read-only.

index.html

Jump to bottom
Michael Nutt edited this page Mar 23, 2018 · 1 revision

The app/index.html page is used by the Movable Ink rendering engine to display your app. There are very few restrictions on what you can put on the page (the same rendering engine operates on external websites, after all) but we have some conventions for the page in the MDK.

<head>

Within the head tag, we set <meta charset="UTF-8"> to ensure the rendering engine properly supports unicode characters.

Studio apps by default get some helper utilities injected into them, but the MDK handles all of its own utilities so <meta name="studio-bundled" value="true"> notifies the platform that we do not need anything extra injected.

Over time, Movable Ink may make changes to the output generated by Studio, but we have a mechanism to automatically migrate old output to new output. <meta name="cp-version" value="0"> specifies which migrations have been run, and can generally be ignored.

MI WYSIWYG

Studio, at its core, is a vector editor. When a user adds Tags to a Studio app, they get rendered to <div> tags within the document. Studio generates this automatically--you should not modify this by hand. Studio generates a container div with id mi_size_container that defines the boundaries for where the image rendering engine renders. Note that width='...' height='...' and style='width: ...' are automatically generated by Studio and if you change them, will be overwritten on next save. Instead, modify the width and height attributes in the manifest.yml.

Within the container, each Tag is rendered as an html element with style, class, and attribute. While you can use JavaScript and CSS to interact with these html elements directly, typically you should prefer to manipulate instantiated Tags in your app/js/index.js file.

Below the container, you'll see what looks like a large blob of JSON with a class of mi-attributes. You don't need to deal with this directly, but this data is available to you as this.tags within your JavaScript.

<script> tag: window.APP_SUCCESSFULLY_RENDERED

How do we know whether or not your custom JavaScript in app/js/index.js finished successfully, or had an error? In order to prevent JavaScript errors resulting in half-rendered pages, this script tag sets APP_SUCCESSFULLY_RENDERED to false, and then registers an event listener on our platform-specific capture-ready event to ensure that your app/js/index.js set window.APP_SUCCESSFULLY_RENDERED = true;.

<script src="./dist/vendor.js"></script>

Loads your app's dependencies, including the StudioApp base class plus any other modules you have imported.

<script src="./dist/index.js" autoinline></script>

Your app/js/index.js file is lightly bundled and then placed in dist/; this loads it. The autoinline attribute is special and when a user saves their app, the html output page will cause this script line to be replaced with the contents of ./dist/index.js.

new AppName().render()

Lastly, we create a new object from our app's class, and call our class's render() method to execute our custom business logic.

Clone this wiki locally