[support-michael]

Editing Code Tips

0. Where does MobiOne create the HTML code
MobiOne generates a HTML webapp from your design files (*.mobi) when you use the Design Center’s Export as HTML action or the Run in Test Center. The Export as HTML will generate HTML, CSS, JS and image files in the directory that you specify. The Run in Test Center action create the webapp files in a subdirectory of the design file. The subdirectory will have the name of the design file with “_export” appended. Thus running foo.mobi in the Test Center will create the directory foo_export in the same directory as foo.mobi.

See attachment generated-dir.png

1. Design Completely then Customize Code
Avoid modifying the HTML and CSS code generated by MobiOne until after you have completed your design. MobiOne is not able to interpret manually edited HTML and will attempt to overwrite existing resources with new design modifications.

2. Will MobiOne overwrite my code modification?
Yes but only with your approval. MobiOne will not overwrite your HTML code modifications without your permission. During code generation actions, MobiOne always detects files that have been manually modified and provides you options to determine if modified resources should be overwritten or not.

See attachment code-overwrite-warning-60.png

3. What is the XXX_custom.js file
During the HTML export process MobiOne generates a special JavaScript file with the pattern <designfile>_custom.js if it does not already exists. The purpose of this file is to hold your customized JavaScript functions and state. You may freely modify this file without concern of it being overwritten in later HTML code export processes.

See attachment custom-javascript-file-70.png

4. What tools does MobiOne provide for code editing?
The Test Center emulator provides a source code viewing and editing. Load the HTML resource in the emulator and then right-click on the display area and select “View Source Code” from the menu. This will open the Test Center’s Tool Panel with a list of all resources currently loaded in the emulator. Select the file you wish to view or edit to load the source code. When you save this resource it will automatically be reloaded by the emulator to render your new code changes. You can also use the Tool Panel’s JavaScript debugger if you need to set breakpoints in modified JavaScript code and debug it.

See attachment view-source-60.png

Attachments:

You must be logged in to view attached files.

[kurohige]

Awesome.. thanks, what i was looking for.

[Author]

Posts