Tweet
[QUOTE=SirataXero;1746636]****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:
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:
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:
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:
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? :D
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:
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:
So, for example, if you wanted to look at the UIWidgets sample app, you would go into the command prompt and type in:
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.
:D
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*
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*
if you're a complete noob, start here....
if you have SOME programming, go here:
and no matter WHAT you have as a background... BUY THIS BOOK
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*
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:
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.
*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:
Code:
Palm/SDK/share/samplecode/tutorial
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:
Code:
cd/ (Thank you Malefickus) cd Palm/SDK/share/samplecode/tutorial palm-package HelloWorld palm-install com.yourdomain.hello_1.0_all.ipk
9. Navigate (from your desktop explorer) into the Hello World app folder and go into:
Code:
Palm/SDK/share/samplecode/tutorial/HelloWorld/app/assistants
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:
Code:
Palm/SDK/share/samplecode/tutorial/HelloWorld/app/views
12. Open up first-scene.html and look around, and play with some of the options here.
Having fun yet? :D
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:
Code:
Palm\SDK\share\refcode\webos-framework\191.14\javascripts
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:
Code:
Palm\SDK\share\samplecode\samples
Code:
palm-package UIWidgets palm-install com.palmdts.uiwidgets_1.0_all.ipk
:D
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*
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.
Code:
http://www.jslint.com/
I have modified the attachments to include the app passed through JSLint.
*edit #2*
if you're a complete noob, start here....
Code:
http://www.webteacher.com/javascript/
Code:
http://www.webmonkey.com/tutorial/JavaScript_Tutorial
Code:
http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrrldwideweb
*edit 3*
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:
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.