HP webOS Developer Blog

Do you have questions about best practices for using buttons in your app? Maybe you’d like advice on the best way to use buttons in a dialog box. Well, our own Tomomi Imura, webOS Developer Relations’ in-house UI wizard is here to help with her new tutorial, “Creating Usable UI—Buttons and Interactive Dialogs”, available now on the webOS Developer Portal. She’ll walk you through button setup, the proper use of color and text, and how best to use buttons in intuitive, consistent user dialogs.

Consistent user interaction is one of the keys to happy users. So, check out Tomomi’s tutorial and get coding!

The apps are in and judging has begun. We will have the winners of the Text to Speech challenge up in a few days. Thanks to everybody who submitted apps!

This week’s challenge is to do something with Exhibition Mode, one of the most under-appreciated features of webOS.

Exhibition mode is a way to turn your TouchPad into an ambient display. When the user puts their TouchPad onto the TouchStone dock, the device will go into a special mode where a single app is shown and the screen will never turn off.  Exhibition mode apps are used for things the user wants to see in the background rather than something they will focus their attention on.

Read more ‣

Have you been wanting to add maps, complete with pushpins and infoboxes to your Enyo-based app? We’ve added a tutorial from our own Markus Leutwyler (@twtomcat for those following him on Twitter) that shows you all the details.

You’ll find the article on the HP webOS Developer Center here.

In this article, I want to share how you can help ensure that your custom kind’s components are contained where you want them to be.

Let’s start with the following example: Here is a kind that is simply a VFlexBox with a Header (for a header), a Scroller (for holding whatever gets added later), and a Toolbar (for a footer):
Read more ‣

Developers building applications with webOS 3.0 are enjoying the benefits of the Enyo framework. Enyo is HP’s JavaScript-based framework for building mobile web applications which abstracts the complexities of building features like web service access, localization and complex user interfaces into mobile applications away from the developer. At the same time, mobile developers are increasingly using HTML5 specific features like video, audio, canvas, to name a few, in their applications.

Fortunately, webOS is built on a WebKit engine with strong HTML5 support. HTML5 development for webOS is thus supported by default. Furthermore, the Enyo framework allows developers to take advantage of these HTML5 features in their webOS applications. However, not all supported HTML5 elements are wrapped with convenient Enyo kinds “out of the box.” But it is relatively easy for developers to extend Enyo’s HTML5 support. In this article we explore how to extend Enyo to integrate HTML5 features that are not part of the Enyo framework.

Read more ‣

As you know, we’re big fans of web standards. The Canvas API is a crucial part of HTML 5 web standards, letting you draw complex 2D graphics in the middle of your web content without any plugins. All it takes is some simple JavaScript. I just wanted to go over some of the improvements we’ve made to the Canvas API for webOS 3.0.

Here are some of the highlights:

• - The Canvas.toDataURL function is now supported – you can manipulate pixels to your heart’s content, getting the results out as a Base64 encoded PNG. From there you can use it as the source to an IMG tag, upload it to a web service, or save it locally.
• - Line caps and Line Joins are fully implemented. This makes charts and graphs a lot prettier.
• - More composite modes.
• - Multi-touch events: While this isn’t specific to Canvas, it’s common for Canvas apps to use multi-touch events.  Now webOS can join the fun.
• - Bug fixes: Lots and lots of bug fixes, including some around transforms and arc drawing.

Beyond features and bug fixes, one of the biggest changes is speed. We’ve been working hard to improve HTML Canvas performance and I think the results speak for themselves. As a frame of reference, my particle demo previously would reach around 90 or 100 particles before dropping below 20 frames per second. Now, I can get to 200 particles in the same demo, which is a significant bump in basic drawing performance.

Read more ‣

I’d like to talk about the fundamental concept of CSS 3 Flexible Box Models and how you can take advantage of it as you create the interface using the Enyo framework. In addition, I’d also recommend checking out one of our previous posts, “Getting Familiar with the Flexible Box Layout Model.”

CSS 3 Flexible Box Model (“Flexbox”)

The flexbox model is a new box model introduced in CSS 3. The flexbox model determines how the children of a box are laid out either horizontally or vertically, and determine how to share the available space.

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.container {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}

Read more ‣

The HP TouchPad with webOS 3.0 and the Enyo application programming framework bring significant opportunities for developers to leverage web standards for building great mobile applications and services.  The growing availability of the TouchPad in countries outside North America means that developers like you will be able to bring their content to an expanding global audience.  For the greatest opportunity to reach the widest consumer audience possible, it’s thus beneficial to ensure that your applications are available in the native languages of your target market countries.

The Enyo application programming framework makes it very easy to localize your applications.

Read more ‣

For developers that are just getting started with webOS 3.0 and familiarizing themselves with our Enyo framework, the concept of encapsulation – a way to break your app down into smaller, self-contained parts – can make your code easier to understand and maintain.

Once an Enyo app is broken down into self-contained components, they need to be able to interact with each other to perform actions or expose and change properties they contain. In this blog post we will explore encapsulation using Enyo components and the methods that can be used to interact with them.

A simple example

Here is a simple Enyo application without encapsulation. The app will be modified to encapsulate some of its functionality later. The app is a timer that will show a progress bar increasing in value from 0% to 100% over the course of 10, 30 or 60 seconds. It also has radio buttons that determine the duration of the timer and a button to start the timer.
Read more ‣

Around the webOS Developer Relations team, we often like to say that the developer is our customer. It drives what we do and constantly pushes us to keep asking, how can we improve the experience for every developer on our platform?

Investing in your success: Device discounts, support and marketing
Today, we’re excited to announce some significant updates to the HP webOS Developer Program, to provide even more of the resources you need to create, market and sell great apps in the webOS App Catalog.

These updates include:

- Larger discounts on devices, up to 60%
- Loaner device program
- Enhanced support
- Marketing asset kits
- HP co-marketing opportunities
- Access to market development funds

Simply put, we’re investing in developers that invest in webOS. We factor in the apps you develop, your development expertise and your desire to build a thriving business around webOS.

Read here to get all the details.

Announcing HP webOS Certified Developers Program
Another significant update is the addition of the HP webOS Certified Developers program. This program offers certification to developers that want to make their services available to other companies looking for webOS development expertise. Developers are certified around the quantity and quality of apps they have developed, as well as training they’ve completed and other relevant experience they bring to the table.

One of the biggest benefits of being a webOS Certified Developer is significant promotion and referrals from HP, opening up incredible opportunities that leverage you webOS expertise.  Other benefits include:

- Listing in the HP webOS Developer Center for third-party developers
- Dedicated highlight page on the HP webOS Developer Center
- Access to pre-production testing devices
- “webOS Certified developer” marketing assets
- Priority support access

Read here to learn more about the certified developer program.

Along with webOS Pivot, which takes app discovery to a new level and our commitment to offering free membership for all our programs, webOS provides developers with an experience and set of opportunities unmatched by any platform.