http://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&feed=atom&action=historyTutorials webOS Hello World - Revision history2024-03-29T08:21:28ZRevision history for this page on the wikiMediaWiki 1.35.1http://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&diff=17315&oldid=prevAchimP: /* Building your first webOS application: */ Fix text tag disabling all wikification thereafter (headings, images, ...)2011-07-16T13:44:03Z<p><span dir="auto"><span class="autocomment">Building your first webOS application:: </span> Fix text tag disabling all wikification thereafter (headings, images, ...)</span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 13:44, 16 July 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l234" >Line 234:</td>
<td colspan="2" class="diff-lineno">Line 234:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></nowiki></pre></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></nowiki></pre></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Other than that, everything else is just normal HTML and CSS, exactly how you would use it on the web. One thing to note is how I referenced the application icon from within the application using a simple <img> tag.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Other than that, everything else is just normal HTML and CSS, exactly how you would use it on the web. One thing to note is how I referenced the application icon from within the application using a simple <ins class="diffchange diffchange-inline"><nowiki></ins><img<ins class="diffchange diffchange-inline">></nowiki</ins>> tag.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Some Protips:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Some Protips:</div></td></tr>
</table>AchimPhttp://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&diff=9886&oldid=prevRodWhitby: Reverted edits by Russel08 (Talk); changed back to last version by Eain2010-05-13T14:25:05Z<p>Reverted edits by <a href="/wiki/Special:Contributions/Russel08" title="Special:Contributions/Russel08">Russel08</a> (<a href="/index.php?title=User_talk:Russel08&action=edit&redlink=1" class="new" title="User talk:Russel08 (page does not exist)">Talk</a>); changed back to last version by <a href="/index.php?title=User:Eain&action=edit&redlink=1" class="new" title="User:Eain (page does not exist)">Eain</a></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 14:25, 13 May 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l316" >Line 316:</td>
<td colspan="2" class="diff-lineno">Line 316:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> '''Note:''' Despite the //fake// copyright notice in the sample application, the code in the preceding example(s) is released under the MIT license.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> '''Note:''' Despite the //fake// copyright notice in the sample application, the code in the preceding example(s) is released under the MIT license.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">==Related Links:==</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[http://www.healthandmuscle.com/'''fat-burning-furnace-review''']</del></div></td><td colspan="2"> </td></tr>
</table>RodWhitbyhttp://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&diff=9810&oldid=prevRussel08 at 02:37, 7 May 20102010-05-07T02:37:20Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 02:37, 7 May 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l318" >Line 318:</td>
<td colspan="2" class="diff-lineno">Line 318:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>==Related <del class="diffchange diffchange-inline">LInks</del>:==</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>==Related <ins class="diffchange diffchange-inline">Links</ins>:==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>http://www.healthandmuscle.com/fat-burning-furnace-review<del class="diffchange diffchange-inline">.html</del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">[</ins>http://www.healthandmuscle.com/<ins class="diffchange diffchange-inline">'''</ins>fat-burning-furnace-review<ins class="diffchange diffchange-inline">''']</ins></div></td></tr>
</table>Russel08http://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&diff=9809&oldid=prevRussel08 at 02:25, 7 May 20102010-05-07T02:25:59Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 02:25, 7 May 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l316" >Line 316:</td>
<td colspan="2" class="diff-lineno">Line 316:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> '''Note:''' Despite the //fake// copyright notice in the sample application, the code in the preceding example(s) is released under the MIT license.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> '''Note:''' Despite the //fake// copyright notice in the sample application, the code in the preceding example(s) is released under the MIT license.</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">==Related LInks:==</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">http://www.healthandmuscle.com/fat-burning-furnace-review.html</ins></div></td></tr>
</table>Russel08http://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&diff=2202&oldid=prevEain: /* A couple of scripts to make development easier */ Corrected a typo2009-07-25T04:15:05Z<p><span dir="auto"><span class="autocomment">A couple of scripts to make development easier: </span> Corrected a typo</span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:15, 25 July 2009</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l281" >Line 281:</td>
<td colspan="2" class="diff-lineno">Line 281:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></nowiki></pre></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></nowiki></pre></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>On the pre, I have included adding /media/internal/applicaitons to the application search list in /etc/palm/luna.conf. I <del class="diffchange diffchange-inline">ise </del>this script on my phone to unzip ~/new.tgz created and copied above, then rescans so you can run the new app:</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>On the pre, I have included adding /media/internal/applicaitons to the application search list in /etc/palm/luna.conf. I <ins class="diffchange diffchange-inline">use </ins>this script on my phone to unzip ~/new.tgz created and copied above, then rescans so you can run the new app:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><pre><nowiki></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><pre><nowiki></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l303" >Line 303:</td>
<td colspan="2" class="diff-lineno">Line 303:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></nowiki></pre></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></nowiki></pre></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== To Do List:==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== To Do List:==</div></td></tr>
</table>Eainhttp://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&diff=1039&oldid=prevTemplarian: Building webOS / Mojo Applications moved to Tutorials webOS Hello World: Naming Policies2009-07-20T20:40:56Z<p><a href="/index.php?title=Building_webOS_/_Mojo_Applications&action=edit&redlink=1" class="new" title="Building webOS / Mojo Applications (page does not exist)">Building webOS / Mojo Applications</a> moved to <a href="/wiki/Tutorials_webOS_Hello_World" title="Tutorials webOS Hello World">Tutorials webOS Hello World</a>: Naming Policies</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 20:40, 20 July 2009</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>Templarianhttp://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&diff=1030&oldid=prevHopspitfire at 20:26, 20 July 20092009-07-20T20:26:18Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 20:26, 20 July 2009</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l303" >Line 303:</td>
<td colspan="2" class="diff-lineno">Line 303:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></nowiki></pre></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></nowiki></pre></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>Hopspitfirehttp://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&diff=1029&oldid=prevHopspitfire at 20:25, 20 July 20092009-07-20T20:25:09Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 20:25, 20 July 2009</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l133" >Line 133:</td>
<td colspan="2" class="diff-lineno">Line 133:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Next, either go find or make an application icon. 64 x 64 seems to be a good size for launcher icons, O'Reilly's book states that the icon's image should be about 56 x 56 pixels within the 64 x 64 png bounds. PNG's with alpha transparency obviously will look the best. Note: if your icon is smaller than 64 x 64, I believe the launcher will stretch it to 64 x 64, causing it to look fuzzy or pixelated.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Next, either go find or make an application icon. 64 x 64 seems to be a good size for launcher icons, O'Reilly's book states that the icon's image should be about 56 x 56 pixels within the 64 x 64 png bounds. PNG's with alpha transparency obviously will look the best. Note: if your icon is smaller than 64 x 64, I believe the launcher will stretch it to 64 x 64, causing it to look fuzzy or pixelated.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>If you're too lazy to find or make an icon, I've made a little hello world icon that you may use:[[<del class="diffchange diffchange-inline">=image http</del>:<del class="diffchange diffchange-inline">//evan.pro/webos/helloworld/</del>icon.png]]</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>If you're too lazy to find or make an icon, I've made a little hello world icon that you may use:</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[<ins class="diffchange diffchange-inline">Image</ins>:<ins class="diffchange diffchange-inline">Helloworld-</ins>icon.png]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l238" >Line 238:</td>
<td colspan="2" class="diff-lineno">Line 240:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Any files you place in your application's directory are available to you to use from within your application. This includes images, CSS, JavaScript files, etc.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Any files you place in your application's directory are available to you to use from within your application. This includes images, CSS, JavaScript files, etc.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* You do not have to have your CSS styles in-line like the example. For example, you could create a “css” subdirectory to hold all of your CSS files. Then you can use <link rel="stylesheet" type="text/css" href="css/styles.css" /> in the <head> just like normal.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* You do not have to have your CSS styles in-line like the example. For example, you could create a “css” subdirectory to hold all of your CSS files. Then you can use <link rel="stylesheet" type="text/css" href="css/styles.css" /> in the <head> just like normal.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Theoretically, the files you include (images, JavaScript, CSS) do not have to be relative paths to files in your application's directory. You can also reference remote files using absolute paths. <del class="diffchange diffchange-inline">(i.e. <img src="http://www.google.com/intl/en_ALL/images/logo.gif"/>)</del>.. However, be sure to note that if you reference remote files like this, your application may take longer to load, as the files need to be downloaded over EV-DO or WiFi. Also, if the Pre is unable to get a network connection, there would obviously be problems with this. I'm simply noting that it is possible, and that it does work. However, including remote JavaScript can be extremely helpful with rapid development (TODO: Add example for remote JS development).</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* Theoretically, the files you include (images, JavaScript, CSS) do not have to be relative paths to files in your application's directory. You can also reference remote files using absolute paths... However, be sure to note that if you reference remote files like this, your application may take longer to load, as the files need to be downloaded over EV-DO or WiFi. Also, if the Pre is unable to get a network connection, there would obviously be problems with this. I'm simply noting that it is possible, and that it does work. However, including remote JavaScript can be extremely helpful with rapid development (TODO: Add example for remote JS development).</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* You may include and use jQuery (and other JS libraries, I'm sure), but make sure to include it before Mojo, and use jQuery.noConflict(); since Mojo uses Prototype (TODO: Add jQuery example).</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* You may include and use jQuery (and other JS libraries, I'm sure), but make sure to include it before Mojo, and use jQuery.noConflict(); since Mojo uses Prototype (TODO: Add jQuery example).</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l257" >Line 257:</td>
<td colspan="2" class="diff-lineno">Line 259:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Screenshots:==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Screenshots:==</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[<del class="diffchange diffchange-inline"><image http</del>:<del class="diffchange diffchange-inline">//evan.pro/webos/helloworld/helloworld</del>-launcher.jpg]]</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[<ins class="diffchange diffchange-inline">Image</ins>:<ins class="diffchange diffchange-inline">Helloworld</ins>-launcher.jpg]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[<del class="diffchange diffchange-inline"><image http</del>:<del class="diffchange diffchange-inline">//evan.pro/webos/helloworld/helloworld</del>-screenshot.jpg]]</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[<ins class="diffchange diffchange-inline">Image</ins>:<ins class="diffchange diffchange-inline">Helloworld</ins>-screenshot.jpg]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>Hopspitfirehttp://wiki.webos-internals.org/index.php?title=Tutorials_webOS_Hello_World&diff=1024&oldid=prevHopspitfire: New page: This guide assumes you have a rooted Pre, with SFTP access. If you don't, please follow the other guides on this wiki first. This guide also assumes that you have at least a basic knowledg...2009-07-20T20:21:32Z<p>New page: This guide assumes you have a rooted Pre, with SFTP access. If you don't, please follow the other guides on this wiki first. This guide also assumes that you have at least a basic knowledg...</p>
<p><b>New page</b></p><div>This guide assumes you have a rooted Pre, with SFTP access. If you don't, please follow the other guides on this wiki first. This guide also assumes that you have at least a basic knowledge of HTML, CSS, and maybe a little JavaScript.<br />
<br />
'''Note:''' All of this information was acquired via referencing the applications on the Pre, dissecting the Mojo sources available on the Pre, and possibly other publicly available information. The author of this guide has no access to, or knowledge of Palm's unreleased SDK, aside from what has been made publicly available so far. <br />
<br />
I'll start by walking you through building your first “Hello, world!” application for webOS from scratch, without copying an existing application and modifying it. Then we'll slowly get into the cooler, meatier parts of Mojo, so that you can actually start bringing your ideas to life. This guide will also cover how to “install” your newly created webOS application(s) on your [[Portal:Accessing_Linux | rooted]] Pre.<br />
<br />
== Building your first webOS application:==<br />
<br />
First off, a webOS application requires only three files to become functional:<br />
<br />
* '''appinfo.json''' – This is file contains a simple JSON object, describing basic meta information about your application, such as the name, version, vendor, etc...<br />
* '''index.html''' – This file is really the first file that is run when your application is launched. It doesn't have to be called “index.html” since you specify the name for this file in your appinfo.json file. However, I think index.html fits well, and it seems to be what most (if not, all) of the existing webOS applications are using.<br />
* '''icon.png''' – This is the icon that will be displayed in the launcher for your application. Like index.html, the filename doesn't have to be “icon.png”, since the filename for the launcher icon is specified in your appinfo.json file.<br />
<br />
That's it! Only three files to create a basic webOS/Mojo application... In fact, it would probably work without the launcher icon, but let's be honest... who wants an application without an icon? In a typical application (especially if you follow the Mojo framework's MVC structure) you'll have many more files and directories than this, but for simplicity's sake, we'll start with the basics.<br />
<br />
Anyway, now let's get started building our first webOS application.<br />
<br />
First, create a new, blank directory for your application. Note: Create this directory on your computer. We'll cover how to install your application on your Pre later.<br />
<br />
Now for the first, and arguably the most important part of your webOS application: the appinfo.json file.<br />
<br />
Here's the contents of a typical appinfo.json file:<br />
<br />
<pre><nowiki><br />
{<br />
"title": "Hello, world!",<br />
"version": "0.0.1",<br />
"type": "web",<br />
"main": "index.html",<br />
"id": "org.webosinternals.evanpro.app.helloworld",<br />
"icon": "icon.png",<br />
"vendor": "Evan Coury",<br />
"vendorurl": "http://www.evan.pro/",<br />
"visible": true,<br />
"removable": true<br />
}<br />
</nowiki></pre><br />
<br />
If you're not familiar with JSON, I urge you to [*http://en.wikipedia.org/wiki/JSON read up on it]. JSON has many other valuable uses in building web applications. The appinfo.json file is really just a self-explanatory key-value pair file, defining some simple information about your application. Here are some details on each value:<br />
<br />
<br />
{| border="1" cellpadding="10"<br />
!width="50"| Key<br />
!width="50"| Values<br />
!width="50"| Required<br />
!width="650"| Description <br />
|-<br />
<br />
| title <br />
|| String/Text <br />
|| Y <br />
|| This is the title used in the launcher, and also in the little gray tab thing that's always at the top left... what's that called, again?<br />
|-<br />
<br />
| version <br />
|| Numbers x.y <br />
|| Y <br />
|| Simply put, this is the current version number of your application. This will obviously be used to manage OTA updates of webOS applications, and such.<br />
|-<br />
<br />
| type <br />
|| web <br />
|| Y <br />
|| This is the application type... So far, the only value I've seen for this is “web”, even in more complex, plug-in-based applications such as Classic. This of course hints that there could be other options for this in the future, such as “java” or “native”, or who knows what else. This guide is only going to focus on “web”, though.<br />
|-<br />
<br />
| main <br />
|| index.html <br />
|| Y <br />
|| This is the name of the html file you want to be have run when the user launches the application from the launcher. Typically, this will always be “index.html”, but there's nothing that says it has to be.<br />
|-<br />
<br />
| id <br />
|| any String <br />
|| Y <br />
|| Now, this is a somewhat important one. This is your “Application ID”. Typically, is what this does, is gives the operating system a programmatic way of identifying your application. This must be completely unique, and it's suggested that you stick with the reverse DNS notation used in the existing applications. (ex. org.webosinternals.evanpro.app.helloworld). As a rule of thumb, I'd suggest keeping it all lowercase, and not using anything besides a through z, 0 through 9, and dashes for your application ID. We own the webosinternals.org domain, so you can use that reversed with your IRC nickname appended if you don't own your own domain that you can use here.<br />
|-<br />
<br />
| icon <br />
|| file path <br />
|| N <br />
|| This is, of course, the path and file name of the icon you want to appear in the launcher. Simple enough, right?<br />
|-<br />
<br />
| vendor <br />
|| String <br />
|| N <br />
|| The name of the person / company who made the application.<br />
|-<br />
<br />
| vendorurl <br />
|| String <br />
|| N <br />
|| The URL of the aforementioned vendor.<br />
|-<br />
<br />
| visible <br />
|| boolean, default: true <br />
|| N <br />
|| I'm pretty sure this just indicates whether or not to show the application in the launcher. (Credit to PreGame for pointing this one out)<br />
|-<br />
<br />
| removable <br />
|| boolean, default: true<br />
|| N<br />
|| Tells webOS if this application should removable or not.<br />
|-<br />
<br />
| miniicon <br />
|| path to icon <br />
|| N <br />
|| Path to file for icon to be used in notification area<br />
|-<br />
<br />
| category <br />
|| String <br />
|| N <br />
|| Default category for the application <br />
|-<br />
<br />
| noWindow <br />
|| boolean, default false <br />
|| N <br />
|| Indicates that this is a headless application that will be only called by other apps.<br />
|-<br />
|}<br />
<br />
TODO: Finish specifying which values in the appinfo.json are required and which are optional. Also mention what the default values for optional ones are. Additionally, add any new values as they're discovered.<br />
<br />
In the empty directory you made, create a new file called appinfo.json... In it, paste my sample from above. Feel free to change the title, version, id, vendor, and vendorurl to whatever you want. (Remember what I said about the characters in the application ID, though.)<br />
<br />
Next, either go find or make an application icon. 64 x 64 seems to be a good size for launcher icons, O'Reilly's book states that the icon's image should be about 56 x 56 pixels within the 64 x 64 png bounds. PNG's with alpha transparency obviously will look the best. Note: if your icon is smaller than 64 x 64, I believe the launcher will stretch it to 64 x 64, causing it to look fuzzy or pixelated.<br />
<br />
If you're too lazy to find or make an icon, I've made a little hello world icon that you may use:[[=image http://evan.pro/webos/helloworld/icon.png]]<br />
<br />
<br />
Now that we have an appinfo.json and an awesome icon, we can move onto the fun part: index.html. If you're familiar with the basics of the web (HTML / CSS / JavaScript), then this will be very simple....<br />
<br />
We'll start with the basics... Create an index.html in the directory you created, alongside your appinfo.json and icon.png, and paste the following code into it:<br />
<br />
<pre><nowiki><br />
<?xml version="1.0" encoding="UTF-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br />
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>Hello, world title!</title><br />
<br />
<!-- Load the Mojo Framework --><br />
<script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1"></script><br />
<br />
<!-- Some fancy CSS styles --><br />
<style type="text/css"><br />
#content { <br />
text-align: center;<br />
}<br />
<br />
#app-footer {<br />
margin-top: 25px;<br />
font-size: 80%;<br />
text-align: center;<br />
}<br />
</style><br />
<br />
</head><br />
<br />
<body><br />
<br />
<!-- Make a fancy Pre-looking header --><br />
<div class="palm-page-header"><br />
<div class="palm-page-header-wrapper"><br />
<div class="title"><br />
My First webOS App!<br />
</div><br />
</div> <br />
</div><br />
<br />
<!-- Make a fancy Pre-looking button --><br />
<button class="palm-button" id="my-awesome-button">I'm an awesome button!</button><br />
<br />
<!-- Just some text --><br />
<div id="content"><br />
Hello, world!<br/><br />
<img src="icon.png"/><br />
</div><br />
<br />
<!-- Footer --><br />
<div id="app-footer"><br />
<hr/><br />
&copy; 2009 <a href="http://www.evan.pro/">Evan Coury</a><br />
</div><br />
<br />
</body><br />
</html><br />
</nowiki></pre><br />
<br />
You'll notice that webOS lets you use the exact same HTML / CSS as you would if you were simply developing for a browser.<br />
<br />
The only real distinguishing factor of this application is here:<br />
<br />
<pre><nowiki><br />
<!-- Load the Mojo Framework --><br />
<script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1"></script><br />
</nowiki></pre><br />
<br />
This line tells webOS to load all of the components of the Mojo framework, including pre-built CSS classes for UI elements, and the valuable Mojo JavaScript functions, which are what will allow us to access and interact with all of the fun stuff like GPS, messaging, alerts, vibration, etc, etc.<br />
<br />
Really, if you're just doing some HTML / CSS stuff, and don't wish to use Palm's pre-built UI styles, then you really don't even need to include Mojo... but then what's the point?<br />
<br />
In the example, I use a couple of the pre-built CSS UI styles from Mojo. Firstly, the header...<br />
<br />
<pre><nowiki><br />
<!-- Make a fancy Pre-looking header --><br />
<div class="palm-page-header"><br />
<div class="palm-page-header-wrapper"><br />
<div class="title"><br />
My First webOS App!<br />
</div><br />
</div> <br />
</div><br />
</nowiki></pre><br />
<br />
I don't have a list of all of the palm-* CSS classes, but they're very easy to find by referencing the existing applications.<br />
<br />
The second Mojo style I used was the button:<br />
<br />
<pre><nowiki><br />
<!-- Make a fancy Pre-looking button --><br />
<button class="palm-button" id="my-awesome-button">I'm an awesome button!</button><br />
</nowiki></pre><br />
<br />
Other than that, everything else is just normal HTML and CSS, exactly how you would use it on the web. One thing to note is how I referenced the application icon from within the application using a simple <img> tag.<br />
<br />
Some Protips:<br />
<br />
* Any files you place in your application's directory are available to you to use from within your application. This includes images, CSS, JavaScript files, etc.<br />
* You do not have to have your CSS styles in-line like the example. For example, you could create a “css” subdirectory to hold all of your CSS files. Then you can use <link rel="stylesheet" type="text/css" href="css/styles.css" /> in the <head> just like normal.<br />
* Theoretically, the files you include (images, JavaScript, CSS) do not have to be relative paths to files in your application's directory. You can also reference remote files using absolute paths. (i.e. <img src="http://www.google.com/intl/en_ALL/images/logo.gif"/>).. However, be sure to note that if you reference remote files like this, your application may take longer to load, as the files need to be downloaded over EV-DO or WiFi. Also, if the Pre is unable to get a network connection, there would obviously be problems with this. I'm simply noting that it is possible, and that it does work. However, including remote JavaScript can be extremely helpful with rapid development (TODO: Add example for remote JS development).<br />
* You may include and use jQuery (and other JS libraries, I'm sure), but make sure to include it before Mojo, and use jQuery.noConflict(); since Mojo uses Prototype (TODO: Add jQuery example).<br />
<br />
== Installing your first webOS application:==<br />
<br />
Now that the application has been written, you need to install it on the Pre. Fortunately, installation is quite simple:<br />
# Rename the source directory to match the "'''id'''" tag defined in the //appinfo.json// file.<br />
# Copy the source directory (not just the files) to ///usr/palm/applications// on the Pre so that the full path to your appinfo file looks like this: ///usr/palm/applications/YOURAPPID/appinfo.json//<br />
# Restart the GUI using either of the following methods:<br />
* Reboot the Pre ( '''##FF5500|Orange##''' + '''Sym''' + '''R''' ).<br />
* Stop/restart LunaSysMgr.<br />
* As root, from a shell, execute //initctl stop LunaSysMgr// to stop and //initctl start LunaSysMgr// to restart.<br />
* run the following command to refresh the Launcher Cache:<br />
<br />
<pre><nowiki><br />
luna-send -n 1 palm://com.palm.applicationManager/rescan {}<br />
</nowiki></pre><br />
<br />
== Screenshots:==<br />
[[<image http://evan.pro/webos/helloworld/helloworld-launcher.jpg]]<br />
[[<image http://evan.pro/webos/helloworld/helloworld-screenshot.jpg]]<br />
<br />
<br />
== A couple of scripts to make development easier==<br />
I use two scripts. Say I am creating the "something" app. I'd want to use something like com.foobar.app.something. When I want to move the app over to my Pre, I run the following script from the directory above com.foobar.app.something by typing "moveapp.sh something". Here is the moveapp.sh script<br />
<br />
<pre><nowiki><br />
#!/bin/sh<br />
#moveapp.sh<br />
APP=com.foobar.app.$1<br />
<br />
TIMESTAMP="`date '+%Y%m%d-%H%M'`"<br />
echo archive $APP to "$APP"_$TIMESTAMP.tgz<br />
<br />
echo tar zcvf "$APP"_$TIMESTAMP.tgz $APP<br />
tar zcvf "$APP"_$TIMESTAMP.tgz $APP <br />
<br />
echo scp -P 222 "$APP"_$TIMESTAMP.tgz myaccount@192.168.23.151:new.tgz<br />
scp -P 222 "$APP"_$TIMESTAMP.tgz myaccount@192.168.23.151:new.tgz<br />
</nowiki></pre><br />
<br />
On the pre, I have included adding /media/internal/applicaitons to the application search list in /etc/palm/luna.conf. I ise this script on my phone to unzip ~/new.tgz created and copied above, then rescans so you can run the new app:<br />
<br />
<pre><nowiki><br />
#!/bin/sh<br />
# unpack new app into media internal, reset the command cache, and start watching the log<br />
MYACCOUNT=myaccount<br />
# you should sudo this or run as root <br />
<br />
echo "go to /media/internal/applications/..."<br />
cd /media/internal/applications/<br />
echo "Unpack new code from ~my <br />
unpack $MYACCOUNT/new.tgz <br />
tar zxvf ~$MYACCOUNT/new.tgz <br />
<br />
echo "rescan the the launcher's cache" <br />
luna-send -n 1 palm://com.palm.applicationManager/rescan {}<br />
<br />
echo "tail the log file just in case"<br />
tall -f /var/log/messages<br />
<br />
<br />
</nowiki></pre><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== To Do List:==<br />
* Tips for speeding up the development process with remote JS files (while we wait for the SDK).<br />
* Deeper examples into the Mojo MVC structure (controllers, scenes, etc) and using phone-related functions (GPS, messaging, etc).<br />
<br />
== Development notes: ==<br />
* If you want to interact with the local file system (read text files, etc) you will need to use the serviceRequest of com.palm.applicationManager with an "open" method. However, application Manager checks the registration in command.resource.handers.json to see what applicatoins are registered to handle a particular mime type. So, you will need to add YOUR app to the list for that mime type, or some other app may be passed your file. :-( --RickB<br />
<br />
Can this open method of the appMgr service execute shell cmds and if so how? Can we get some code samples? <br />
<br />
------<br />
<br />
'''Note:''' Despite the //fake// copyright notice in the sample application, the code in the preceding example(s) is released under the MIT license.</div>Hopspitfire