CHAPTER 14 - Tips to Know Before Writing Code

We looked at EZoApp components and basic jQuery Mobile programming tutorials; next, let us explain how to create something using EZoApp and actually write some code. Before we start, there are some tips about using EZoApp that you should know about. These are also mistakes that people often make when working with EZoApp. After you are aware of these tips, we can start to create apps!

1. Do Not Duplicate IDs

IDs are just like our social security numbers; they cannot be duplicated. Although a duplicated ID is not considered an error in HTML, in JavaScript it can cause serious problems. A duplicate ID could produce an error message in a less severe case or crash the program in a more severe case. Be careful!

2. HTML That Cannot Be Deleted

Because this is for developing apps, the following code will appear on every page. Never delete this code! Otherwise some unexpected errors will occur. The contents we are creating can be inserted in the ui-content. But, what really cannot be deleted is the page; because, after all, the contents are divided by pages.

<div id="home" data-role="page">
  <div role="main" class="ui-content"></div>
</div>

3. Make Good Use of the Reset and Textwrap Functions

There are four small icons at the upper-right corner of the code-editing area. The leftmost one is Reset; the second one from the left is Textwrap; the next one is FontSize; and the last one is ShortCuts. Reset can clear the code page and return it to its initial, clean state. Note: if you click Reset on the HTML page, it cleans the HTML; clicking Reset on the JS page cleans JS; and clicking Reset on the CSS page cleans the CSS. Textwrap is a nice function to make browsing easier.

4. Watch Out for Leftover JS Code

We mentioned that we can clear the code pages in the section above. However, what often happens is that we clean the HTML code but forget to clean the JS code. Thus, problems occur when we preview the page. This is particularly prone to happen when dragging-and-dropping "a component that comes with JS code." Sometimes we hit the Delete key directly to delete the component, but neglect to delete the automatically generated JS code. As a result, errors occur.

5. CSS Initialization

Although EZoApp is kind enough to initialize some CSS, sometimes there might still be certain unexpected display issues. Thus, I would do a simple CSS initialization first to make my work in EZoApp more proficient!

html,body,div[data-role="page"],.ui-content{
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}

Continue reading CHAPTER 15 – Linking JSON
Or Return to Table of Contents

Chapter 14 - Tips to Know Before Writing Code