Instructional for beginners and Hello World 2.0! (Updated 7/16)

[SirataXero]

*NOTE*

For a complete compilation of tutorials available please visit RickNeff's site here.

****Editted for the Official SDK Release July 16, 2009****

*NOTE*: Official documentation and information can be found from Palm's Developer site HERE.

Hey Guys!

I notice a lot of people on this forum have a lot of interest in developing for the Pre but they're not quite sure where to start. Personally, coming from absolutely NO background in HTML/CSS/Java, the route I followed is:

1. Pick up some basic skills from HTMLDog.

2. Download, install and set up the OFFICIAL SDK here. Please sign up for official WebOS Dev status. It makes Palm happy.
<-----------------I'm not too sure if the following instructions still apply------------------->
2a. If you have Vista 64 follow Blubble's instructions here.
2b. If you have a Mac, go here.
<-----------------I'm not too sure if the previous instructions still apply------------------->
I STRONGLY suggest downloading directly to the C:/Palm directory as it makes everything a bit smoother (imho)

3. You may begin looking at the code with Notepad, but I personally suggest something a bit more powerful and accomodating. You will need something that autoformats (Notepad does not) as well has color-coded syntax is a huge plus. Try Notepad++.
The download page from Notepad++ may look a little shady, but I guarantee its from their actual website. You can verify this by clicking on "Download Notepad++ executable files" from their actual website.

4. Navigate into:

Palm/SDK/share/samplecode/tutorial

In there you will see the Hello World folder. Open this folder up and observe the coding style of third party software. Notice the folders, their names, their organization. I strongly suggest future Devs follow these styles as they are simple and easy to read. Granted a lot of people write an entire app within the index.html, Palm does not seem to prefer this method. Personally, I like following Palm guidelines because it seems a bit more organized to me. Use your own preference and code accordingly. Just make sure it works. .

5. Launch the SDK and make sure it works.

6. To begin, launch the command prompt (Start-> run -> cmd) or on Vista (Start-> type "cmd", wait for the icon to show up, right click -> "Run as Admin")

7. The instructions (or explanations) are in parentheses do not include these when you type the following. Type:

cd/ (Thank you Malefickus)

cd Palm/SDK/share/samplecode/tutorial

palm-package HelloWorld

palm-install com.yourdomain.hello_1.0_all.ipk

8. Now go into the emulator and start the launcher, you should see a little crescent shaped icon and the app "Hello World" in there. It's a very simple and basic app with two simple widgets included.

9. Navigate (from your desktop explorer) into the Hello World app folder and go into:

Palm/SDK/share/samplecode/tutorial/HelloWorld/app/assistants

In there you will see two assistant files. The stage-assistant.js is a simple file that seems to tell your app which page (here on referred to as scene, please get into this habit) to open first (in this case there is only one, but you still need to specify)

10. Open up the other assistant (first-assistant.js) and you should see the guts of the app here. Play around with these and find out what each thing does.

11. To find the corresponding html file, go into:

Palm/SDK/share/samplecode/tutorial/HelloWorld/app/views

In this folder, you will see a folder named "first". Each scene in your app has its own folder (the name corresponds to the assistant.js it associates with) Go into this folder and you should see first-scene.html.

12. Open up first-scene.html and look around, and play with some of the options here.

Having fun yet?

Now, to point you in the right direction:

If you would like to start throwing widgets (and very simple basic interactive functionality) into your app, navigate to this folder:

Palm\SDK\share\refcode\webos-framework\191.14\javascripts

OR you can go to the official Palm Widgets site. It has the same information available.

This folder has a list of .js files which are very well commented and teach you how to use the multiple features of Mojo. I strongly suggest going through the widget_*.js list and reading all (if not most) of them. It is good to know what Mojo/Widgets are capable of to build a library of tools you can include in your app. Personally, I havn't done this, as I only like to look up the information I need when I need it, it's good to know where it is, and whether it can be done easily or not.

Now that you know how/where to change things, and where to pick up certain information on how to include things, you only have a few things left to learn:

To begin, I strongly suggest packaging and installing the sample apps included in this folder:

Palm\SDK\share\samplecode\samples

So, for example, if you wanted to look at the UIWidgets sample app, you would go into the command prompt and type in:

palm-package UIWidgets

palm-install com.palmdts.uiwidgets_1.0_all.ipk

Then go into your launcher and you should see an orange Palm logo of the UIWidgets sample app. Go inside the app and see samples of a lot of the widgets available for your app and you can then look inside the app/assistants or app/views folder of this app to see how they are implemented.



Finally, I have included my own app which I began with. It's basically a modified Hello World app with a bunch of Mojo Widgets and functionality built in. I have included buttons, sliders, intpickers, how to include more than one page, hidden lists/groups, as well as menu modifications.

I tried adding some comments in to help future develops, but they are by no means complete instructions and do require some research and understanding on your part. Feel free to look around, steal code or the like.

Final Note:

PLEASE PLEASE PLEASE begin ASAP. I STRONGLY suggest anyone who's interested to hop right in. Reading instructionals is a good way to begin... but reading websites on how to code can take years and personally, gets a little boring. Jump right in, break a few apps, reinstall the SDK do it all over again. Get your hands dirty and have fun.

You might just make a useful app out of the whole deal.

Have Fun and Good Luck!

*note* I would REALLY like to thank all the people on this forum who are SO incredibly helpful, and without whom, I would not be where I am today. People who I can think of right now are: roar, Blubble, PreGame, d2globalinc, rboatright... and MANY MANY more...

Thank you!

I have included the ipk of my file for instant access, as well as the zip so you can go in and have a look around.

*edit*

Originally Posted by rboatright

JSLINT is as close as you will come to the kind of review you get from a compiler in Java or C# or C++. Use it.

You guys heard the man! I'll start getting into the habit myself. Thank's rboatright!

I have modified the attachments to include the app passed through JSLint.

*edit #2*

Originally Posted by rboatright

if you're a complete noob, start here....

Java script tutorial for the total non-programmer

if you have SOME programming, go here:

JavaScript Tutorial - Webmonkey

and no matter WHAT you have as a background... BUY THIS BOOK

Amazon.com: JavaScript: The Good Parts: Douglas Crockford: Books

it's the javascript equivalent of Strunk and White's "Elements of Style." It's little, it's dense as hell, and it's abso-freaking-lutely indisspensable.

*edit 3*

Originally Posted by Blubble

If you are unfamiliar with the necessary files and folder structure, it helps to use palm-generate to automatically create a basic application structure.

Go into command prompt, cd to your SDK/Bin folder and enter palm-generate appname .

In keeping with how to build a skeleton app, here's what it all means:

Originally Posted by rboatright

There are three things, all talking to each other here.

when you're using an app on the WEB there are FOUR things (possibly more) but for now, we will JUST talk about the Pre WITHOUT THE WEB ok?

So, thing number 1 is the HTML. The Pre has a webkit hmtl rendering engine that is really good and really FAST at rendering html. So, if you make up an html page... something like

<html><head></head><body><div id="one">I am not</div> a frog</body></html> and you make a launcher icon for it, the webkit renderer will display it.

it will say

I am not a frog

Whoo hoo. But it's a STATIC web page.

Fine.

Part 2 is the CSS. the CSS file tells the html engine what the html ought to look like, so you can say things like

body { background-color: red; text-alignment: center; }

and so forth. Thus, the semantic content (the html) is seperated from the presentation (the css.) Cool, but still static.

Now comes the javascript.

When the webkit engine rendered the html, it created a symbolic representation of the page in memory. So, you can write software that CHANGES the representation.

for example: We can write a line of javascript that says:

$('one').innerHTML = "Bob is";

and after that ran, the content of the "one" div would be magically changed from "I am not" to "Bob is" and the webkit would re-render and the page would now say

Bob is a frog

you could also write js which did something like

$('one').backgroundColor = 'blue';

I leave it to the student to figure out what THAT does...

The interaction between the DOM (the document object model of the rendered web page) the CSS, and the javascript can be "complex."

but that's what happens.

I hope it helps.

Rick

[Klownicle]

The APi's arn't fully available yet right?

[SirataXero]

Originally Posted by Klownicle

The APi's arn't fully available yet right?

Right. Not entirely, but there should be enough widgets to make something fun and interesting... and get you started.

We can look into useful, functional apps when the SDK is properly released.

*edit*

Still waiting on the "useful, functional apps" part, Palm...

[palmdoc2005]

Thank you very much. This is the sort of thing which helps us noobs. I agree with you that actually doing it is far better than extensive reading. Sort of like "learn along the way". I think if we are going to develop apps, they will be for our specific needs and not all of us will need to know every bit of webos, JS coding unless we want to become professional coders.
Btw, I have been using HTML-kit since I already use that for basic HTML editing and it supports JS and CSS. Is Notepad++ a better option?

[SirataXero]

You're welcome! I try my best to encourage noobs like myself to get up and start coding, trying to build the developer base is as important to and will ultimately lead to a strong and large application library.

I have heard a general consensus from these forums that in order to not have a very powerful software suite which you only use for coding, using Notepad++ provides you the basic functionality you need, with the power required to start and stay organized while coding.

I have never personally heard of HTML-kit, but it sounds a bit like Firebug for Firefox. Have you looked into that at all? I started a thread asking about a good piece of Freeware that would help organize and maintain files while allowing for editing and programming.

[nuzzle]

Awesome... I was looking for something like this... Now I have a kick in the ***, and I can get to putting my imagination to work.
Kudos to you!

[lazybuttalex]

wow..thanks

[frankos72]

Um this is really helping me dive in. I've been wanting to know for days what does "this" mean. I keep seeing it everywhere and if I knew the purpose/function of it I think I could really start to make some headway.

[ruffrydasean]

I'll get to working on something right away... I just need to stop procrastinating...

[SirataXero]

Originally Posted by frankos72

I've been wanting to know for days what does "this" mean. I keep seeing it everywhere and if I knew the purpose/function of it I think I could really start to make some headway.

W00T!

Dude. That took me FOREVER.

Honestly, I STILL don't know what "this.something" does since I have no official JS experience at all.

I've just recently looked into it and you might want to read up on this.



Notice the pun?

As for everyone else,

Your welcome! I honestly had been looking for something like this for a LONG time until I just said "i'm tired of waiting" and dove on in. I KNEW there HAD to be more of those kind of people out there so I decided to release my test app and let them get a head start.

Good Luck!

[rboatright]

WONDERFUL JOB of handing the community a starter app that people can factor off of. Thank you!!!

I've attached a copy of the zip that I ran through JSLINT JSLint, The JavaScript Code Quality Tool

I can not suggest strongly enough that you use jslint with the "Good Stuff" settings to ensure that your code is clean and error free.

JSLINT is as close as you will come to the kind of review you get from a compiler in Java or C# or C++. Use it.

SirataXero, in this case there was a couple of formatting errors that jumped out. Sometimes you did

function () { //right

and sometimes you did
function ()
{ //wrong

javascript RUNS with the second formulation, but it's not safe. See Douglas Crawford's web site for examples of when it will bite you.

Additionally, you had "rather a lot" of missing semi-colons. Javascript WILL put in semi-colons for you, but again, it's been known to do them in the wrong place. Better to not forget.

Anyway, JSLINT'ed zip file attached.

Rick_

[SirataXero]

Originally Posted by rboatright

WONDERFUL JOB of handing the community a starter app that people can factor off of. Thank you!!!

You're Welcome. Just trying to do my part.

Originally Posted by rboatright

I can not suggest strongly enough that you use jslint with the "Good Stuff" settings to ensure that your code is clean and error free.

JSLINT is as close as you will come to the kind of review you get from a compiler in Java or C# or C++. Use it.

Wow. Thank you! I figured I was most probably making very commonplace errors... and writing:
function
{
was just my own personal preference. I guess i'll look a little bit further into JS rules and whatnot. Thank you VERY much for the "compiler". I'll include it in the OP.

Appreciate the help!

[rboatright]

function
{

is perfectly appropriate java formatting. (Sun style isn't it?) but Javascript is NOT JAVA

Boy is that true. Javascript is LISP in a C syntax. But Javascript was the first lambda language widely available. (yes, there is a lambda extension to C++ now.)

Javascript has PROTOTYPICAL inheritance, not CLASSICAL inheritance. That is objects can inherit DIRECTLY FROM OTHER OBJECTS. There's no such thing as a class.

Don't let the syntax fool you into thinking that you're creating classes. You aren't.

Also, it's VERY IMPORTANT for programmers with experiance in the C dialects including Java to be very very aware that braces DO NOT INITIATE SCOPE in Javascript.

Variables are scoped within FUNCTIONS... but only if you initialize them with a var call

Family = function () {
var fred = 'flintstone';
var barney = 'rubble';
};

leave the var off, and those variables are automagically global. Ooooops.

Also, be very careful about == vs ===

Javascript trys hard to be nice when you test something with == So, it casts things hard to try to reduce everything to a string or a number (whichever comes first) and then tests equality.

This leads to a weird failure of transitivity:

0 == '' //true
'' == 0 //false

ooops....

Much better to always use === :-)

[palmdoc2005]

Originally Posted by SirataXero

W00T!

Dude. That took me FOREVER.

Honestly, I STILL don't know what "this.something" does since I have no official JS experience at all.

I've just recently looked into it and you might want to read up on this.



Notice the pun?

Now I know what THIS means

Btw Mods, should this be a sticky?

[groovdafied]

I'm having a small issue, I have the emulator running well and I created the ipk file, but when I do the palm-install, it does not show in my emulator. Am I missing something?

Nevermind, I found it out!

[SirataXero]

Originally Posted by groovdafied

I'm having a small issue, I have the emulator running well and I created the ipk file, but when I do the palm-install, it does not show in my emulator. Am I missing something?

Make sure the ipk file is created properly. Check the directory to double check if there is an ipk file created in there before you try the palm-install command, also make sure there are no errors returned when you hit palm-package.

Also make sure you are entering the correct ipk name when you type the palm-install command. Read the results that come up after you type to make sure there's no errors.

If you can, try to post a screenshot (or type it if you feel brave) the results after you type palm-install.

[groovdafied]

Originally Posted by SirataXero

Make sure the ipk file is created properly. Check the directory to double check if there is an ipk file created in there before you try the palm-install command, also make sure there are no errors returned when you hit palm-package.

Also make sure you are entering the correct ipk name when you type the palm-install command. Read the results that come up after you type to make sure there's no errors.

If you can, try to post a screenshot (or type it if you feel brave) the results after you type palm-install.

Thanks for your reply, but I figured it out. I remembered that I was messing around with the install bat files the day we received the issue with installing homebrew apps. Anyways, my pics are up, I'm having fun!

[SirataXero]

Originally Posted by groovdafied

Thanks for your reply, but I figured it out. I remembered that I was messing around with the install bat files the day we received the issue with installing homebrew apps. Anyways, my pics are up, I'm having fun!

Hahahaha

AWESOME!

I'm glad you figured it out, and I'm glad you jumped on board to have fun. Hope you make something soon and release it!

Good Luck!

[groovdafied]

Originally Posted by SirataXero

Hahahaha

AWESOME!

I'm glad you figured it out, and I'm glad you jumped on board to have fun. Hope you make something soon and release it!

Good Luck!

I need to learn JavaScript, because i want to make this application that will read/write to a text file... but I dont' even know where to begin. lol

[SirataXero]

Originally Posted by groovdafied

I need to learn JavaScript, because i want to make this application that will read/write to a text file... but I dont' even know where to begin. lol

Hey. What you need to do can be done through Ajax get and post requests. Try looking around here:

Originally Posted by SirataXero

1. Pick up some basic skills from HTMLDog.

If not just google ajax.request and try to see if you can learn how to use it/what to do with it.

Good Luck!