dchoung

Ares is Palm's extra push for developers to get into the webOS game. If you're turned off by staring at lines of code in the hope that they will display your desired result, Ares is definitely for you.

What's even better is that if you're the type that has to act on a great idea ASAP, but always has to wait until you get back to your home, Ares is perfect because it's an online application. That's right, you can access it anywhere!

Jumping in then, your first step is to log on to Ares at http://ares.palm.com.

Then, from the top menu, select 'New' and then 'Application' in the dropdown. Ares will then put together the basic building blocks of an app for you.

On top of the standard stuff Ares also adds a few IDE-specific extras, like a .js file to accompany every view folder. This is mainly so you can mess with the IDE's GUI rather then bother to enter HTML markup directly onto the .html file. Also, Ares-generated code is meant to be a lot cleaner or more efficient, then standard Mojo code so some items might look a bit off to the seasoned webOS developer, but no worries, it still works great.

Moving on then, select 'Palette' at the top of the left column interface. Here you see a nice selection of various elements such as UI Widgets and functions for webOS. Adding them is as simple as clicking and dragging over to the center column.

Let's start with a header. Click and drag the 'Header' pill (we're going to be calling that element a pill) over to the center column. With the header pill selected, let's shift our attention to the right column, where we can manipulate various attributes in regard to the header pill. Let's go to 'Settings' in the right column and select 'label' with the mouse pointer. Type in the title of your app, in this case it will be 'Hello World: Extreme'.

Not Another Hello World app!

That's right, you're making another Hello World app, but this time it will be EXTREME! Makes all the difference, honestly.

One thing that I was never able to resolve completely is spacing between widgets, through Ares. Since I can't, or maybe shouldn't, try to directly manipulate the .html file what other way is there to do it then through the left column UI elements? Scroll down to the 'Layout' section and select 'Panel', it's located in the second column, third row. Let's drag it over to the center column and work the attributes, shall we?

There's not too much I want to do with Panel, it's basically just a spacer for the button I want to add next. So, selecting 'Styles' from the right column, let's use the 'Opacity' slider and scroll it all the way to 0%.

Now for the final element to this scene, the button! Just as before, you will find the 'button' widget in the left column under 'UI Widgets'. Second column, first row. Drag it over to the center column, below the Panel we just added. By default, it is named 'Button'. Let's change the name of it in the 'Settings' located in the right column. Going to 'label', let's change it to 'Submit'.

Taking it to the Extreme

But wait, it's not over yet, where does that button take you? To another scene of course! Currently, we don't have another scene though, only the default 'main' scene that Ares generated. So let's go back to the 'New' dropdown in the top menu and select 'Scene' to add a new one. When prompted to enter a name for it let's call it 'extreme'.

If you hit the 'Files' button in the left column you'll see a new folder called 'extreme'. That's what we want.

Now, to mess with the code! I know what you're thinking, "Oh no, I have to mess with code." but hey, such is life, and it's actually a lot less than what you would be dealing with if there was no Ares.

Under 'Files' double click 'main-chrome.js' to bring up the 'main' scene view again, it should be the one that you added the header, label, and button to. Select the button in the center column, it should be named 'Submit' at this point. Then in the right column, select 'Events', and then click on the file icon in 'ontap'. You will see something like 'button1Tap' pop up. That's what we want. The center column should automatically display the 'main-assistant.js' code file and have your cursor blinking within a 'button1Tap' function.

Type this in: this.controller.stageController.pushScene("extreme");

What this does is tell the button to bring up the 'extreme' scene once it is tapped. Try launching the app by going to the blue triangle in the top menu, and selecting 'Launch'. You should see the 'main' scene, button and all. Tap the button and you will get a nice blank screen. That's what we're going to fill up next.

Filling a Scene

In 'Files', double click the 'extreme-chrome.js' file to bring up the 'extreme' view. We're going to add two items here, an HTML widget and a Webview widget. They're both located in the 'UI Widgets' section of the left column. Click and drag them over to the center column. Place the HTML widget above the Webview widget.

We're going to add some text to the HTML widget so select it in the center column, and then select 'Settings' in the left column. You will see a section titled 'Common', click on the icon under 'content'. Enter 'This is EXTREME!' in the text entry popup. Then hit 'OK'. Move over to the 'Styles' section so we can pretty it up a bit. Under 'Text' select the 'center alignment' icon, scroll down to the 'Text' section in the same column and enter 'orange' in the 'textColor' box, and '20' in the 'fontSize' box.

The End of the Story

Final step, the Webview widget. Select it in the center column. Look for the 'General' section in the right column then, under 'Settings'. Find the 'url' box and enter this address 'http://www.meetup.com/socal-webOS-Development-Group/'.

Go back to the top menu and select 'Save All' from the 3.5 disk icon. Launch it again and press the 'Submit' button, it should take you to the 'extreme' scene which displays the previously entered text 'This is EXTREME!' right above a webview of the SoCal webOS Development Group meetup site.

Cool things I didn't mention in the tutorial:
Palm provides a Debugger and realtime LogViewer for you to check as your app is running, whether it's running off your dev'd out phone or the emulator. Have a look at it, it's nice. All you have to do is open up one of the .js files to view the code, you will see the Debug, Log Viewer, JSLint, and Find and Replace buttons at the bottom of the center column.

Hope this all helps!