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.

So what is a good use for an ambient display? Lots of things! The classic examples are a clock or a photo slideshow but there is so much more you could do with the concept. What information would be useful if you could glance at it rather than directly interacting with it? How about a realtime weather map? A list of tweets posted to a hashtag during a party?  A music visualizer? A webcam display? How about showing the status of the last 4 builds on your continuous build server? If the build breaks it flashes red and plays an alarm. The possibilities really are endless.

Since we are getting to the holiday season I chose to make a clock that displays the number of days to Christmas, in decimal. And just to make it a bit more fun I added falling snowflakes.  The code was actually quite simple. I used my open source drawing program, Leonardo Sketch, to  draw the entire interface, then exported it to a webpage using Amino to draw everything with Canvas. Finally I added the snow and text effects with hand coding. Once I knew it worked in Chrome I just added an appinfo.json file and packaged it up. Nothing special is required; not even Enyo initialization (Amino will do the PalmStage stuff for you).

Turning Christmas Countdown into an exhibition mode app was really easy.  I just added the line  "dockMode": true to my appinfo.json file. webOS detects this and lets the user choose my app from the Exhibition Mode preferences.  That’s all there is to it.  This page has more on how to use Exhibition mode, including how to tell which way your app is launched.

You can find the source for my at our new App Hack Github repository here. It’s also available in the catalog here.

You’ve got one week to make an interesting app that uses Exhibition mode. We can’t wait to see what you come up with!

The Rules

1) Submit your app based on the sample above to the App Catalog by October 18th at 11:59pm Pacific Daylight Time. We will be accepting both new apps as well as incorporation of the theme into existing apps as an improvement. A submission to the Beta catalog is acceptable.

2) Notify us that you want to participate in the App Hack by sending us an email containing your app redirect link (it’s generated automatically and placed on the app’s detail page in “My Apps”) and any extra information you want to share with us at apphack@palm.com. This is also due by October 18th at 11:59pm Pacific Daylight Time.  If you do not send us this note, your app will not be considered for the App Hack.

3) By the end of the day on Friday, October 21st, the Developer Relations team will announce the winning app (along with honorable mentions and other entrants). The winner will get a blog post dedicated to him/her and his/her fantastic app.

Additional terms and conditions

NO PURCHASE NECESSARY AND PURCHASE WILL NOT INCREASE CHANCE OF WINNING. OPEN ONLY TO REGISTERED DEVELOPERS.  HP reserves the right to request additional information for consideration. False information disqualifies you and your app from consideration, making it subject to review under applicable laws. Violators may be prosecuted. This offer is void where prohibited or restricted by law. Taxes, if applicable, are winner’s responsibility.  HP employees are not eligible.  Winner may have to sign and return an eligibility and liability release, unless prohibited.  If eligible winner fails to sign and return required documents, prize may be forfeited.  HP is committed to protecting your privacy. Your personal information will not be passed on from HP without your explicit consent.  Visit our Online Privacy Statement to learn how we use automatic data collection tools and your personal information to tailor your communications. Neither party acquires any patent, copyright, mask work or trademark rights during this event. Participation imposes no obligation on either party to purchase, sell, license, transfer or otherwise dispose of any technology, services or products, and does not create any agency or partnership relationship. The terms herein may be added to or modified by HP at any time at its sole discretion. Additional terms and conditions may apply. Entry constitutes agreement to rules and HP’s decisions. Entrants release and hold harmless HP, its subsidiaries, affiliates, and their officers, directors, employees, agents from any claim arising out of entry or prize receipt or use.

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

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):

enyo.kind({
    name: "MyKind",
    kind: enyo.VFlexBox,
    components: [
        {name: "header", kind: enyo.Header, content: "Header"},
        {name: "scroller", kind: enyo.Scroller, flex: 1},
        {name: "footer", kind: enyo.Toolbar}
    ],
    create: function() {
        this.inherited(arguments);
    }
});

And here is an action shot of this kind:

Next, let’s use our new kind and add something to its components block:

enyo.kind({
    name: "Display",
    kind: enyo.Control,
    components: [
        {kind: "MyKind", className: "enyo-fit", components: [
            {name: "list", kind: enyo.VirtualRepeater, onSetupRow: "setupRow", components: [
                {kind: enyo.Item, components: [
                    {name: "itemName"}
                ]}
            ]}
        ]}
    ],
    create: function() {
        this.inherited(arguments);
    },
    setupRow: function(inSender, inIndex) {
        if (inIndex < 15) {
            this.$.itemName.setContent("webOS");
            return true;
        }
    }
});

Here’s what you get:

Okay, that doesn’t look right. First, the repeater is in the wrong place. It has been rendered below the footer of the kind we wanted to contain it. Second, it doesn’t scroll. Fixing the first issue will fix the second. The first issue is caused by the fact that any time a component is added to a kind, it is appended to the list of components that already exist.

One option to get around this would be to write some custom methods in MyKind that could be used to populate the Scroller, but it would be a lot easier if you could declare the components block and have it “just work.”  

Luckily, there is an easy way to specify where new components should be rendered for a particular kind. Add a component to your kind with the name client and any new components will be appended there. This should work for any component type, but it is probably a good idea to stick with something like a V/HFlexBox, Scroller, or any other kind designed to hold other components. In this example, we can just rename the Scroller in MyKind:
 

...
{name: "client", kind: enyo.Scroller, flex: 1},
...

 
Now when the Display kind creates its VirtualRepeater, here is what you will get:

Perfect!  Now anything added to MyKind will go into the Scroller.  Using this feature should enable application developers to gain more control over their custom kinds and how they interact when used in other projects.

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.

Sample Application

 
This article demonstrates these concepts by means of a simple Enyo sample application. The full source can be downloaded from this link:

EnyoCanvas Sample Application Source Code

The application looks like this when run on the HP TouchPad:

EnyoCanvas Sample Application Screen Shot

HTML5 Specific Enyo Kinds

 
The easiest form of Enyo HTML5 support is those cases where Enyo provides built-in kinds for specific HTML5 features. Two examples of this are the Enyo.Video and the Enyo.Sound kinds, which implement HTML5 video and audio, respectively. For example, adding HTML5 video to an Enyo application is as simple as adding an Enyo.Video component to your application:
 

   {kind: "Enyo.Video",
    name: "video",
    style:"width:1024px; height:640px;",
    src:'http://.../somevideo.mp4'}

 
In the resulting application, the Enyo.Video instance is rendered as an HTML5 element with the specified properties.
 

What if There Isn’t a Kind for That?

 
This is all great, but what if you want to integrate an HTML5 feature that doesn’t have a corresponding kind as part of the Enyo framework? Fortunately, creating your own custom Enyo kinds to supplement Enyo’s HTML5 support is easy. Thanks to the Enyo.DomNode kind, you can create custom kinds that render any HTML5 tag you like. You can also specify a collection of custom tag properties through the domAttributes property. Let’s take a look at how to build a custom Enyo kind to implement an HTML5 feature that is not specifically part of the Enyo framework. In the following example, we’ll create a simple HTML5 canvas Enyo kind.
 

Implementing an HTML5 Canvas Kind

 
We will define a new Enyo kind called Enyo.CanvasControl, derived from Enyo.Control. Since Enyo.Control has Enyo.DomNode as a parent in its inheritance hierarchy, Enyo.CanvasControl has nodeTag and domAttributes properties that we can customize.
 

enyo.kind({
   name: "MyApps.CanvasControl",
   kind: "enyo.Control",
   nodeTag: "canvas",
   canvas: "",
   context: "",
   domAttributes: {
      width: window.innerWidth,
      height:"200px"
   }
   ...
};

 
Our kind specifies “canvas” as the nodeTag, and sets “domAttributes” to a width and height value. When rendered on my TouchPad, Enyo produces markup with the tag and those width and height attribute values as follows:

<canvas width="768" height="200" id="mainView_canvasControl">

 
At this point, we now have an HTML5 canvas embedded in an Enyo application. We can do whatever canvas 2D drawing we like now in the context of this application. A key part of making this happen is overriding the rendered method which is called by the Enyo framework once the underlying DOM element has been created and rendered.
 

rendered: function() {
   this.hasNode();	 //Sets the node property of the rendered DOM node
   this.canvas = this.node;
   this.context = this.canvas.getContext('2d');
   this.drawCanvas();
}

 
This code sets and stores the canvas and 2D context values in our associated CanvasControl properties, canvas and content, for use in other parts of the code. We then call drawCanvas to perform some 2D graphics. Specifically, we fill a rectangle with a gradient based on the color selected in the application’s Enyo based color picker:
 

drawCanvas: function() {
    var gradient = this.context.createLinearGradient(0, 0, this.canvas.width, this.canvas.height);
    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, this.color);
    this.context.fillStyle = gradient;
    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
}

 
Nothing fancy, but it gives you the idea of how to bake custom HTML5 features into an Enyo application.
 

Enyo And HTML5 – Better Together!

 
Not only does this mean that we can now do all kinds of cool HTML5 canvas drawing in the application, but we can integrate Enyo user interface elements into the same application. Developers can thus build TouchPad style user interfaces into canvas or other HTML5 applications without having to build UI components themselves.

To see how this is done, let’s take a look at how I embedded an instance of our CanvasControl kind into my application. This is done in MainView.js:
 

enyo.kind({
   name: "MyApps.MainView",
   kind: "enyo.VFlexBox",
   components:[
      {kind: "PageHeader", components: [
           {content: "Simple HTML5 Canvas + Enyo Demo", flex: 4},
           {kind: "ListSelector", name: "colorPicker", ...}
      ],
      {kind: "MyApps.CanvasControl", name: "canvasControl"},
      {kind: "Button", name: "clearCanvasButton", caption: "Clear Canvas", ...}
   ]
   ...
});

 
From this code snippet, you can see that our custom Canvas kind is integrated with standard Enyo framework UI elements in the same application.
 

Next Steps

 
If you haven’t already, it’s time to get started with webOS 3.0 and Enyo development by downloading the webOS 3.0 SDK!

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.

Others have taken notice as well. Sencha recently reviewed the TouchPad’s HTML support on their blog and they said it had “the fastest Canvas implementation [they've] seen thus far”:

“We had heard good things about the Canvas support so we decided to push the browser further. So, we tried some of the Microsoft mobile performance tests to stress canvas. Here the TouchPad screams—it has the fastest Canvas implementation we’ve seen thus far. For example, on the Mobile Speed Reading test, the TouchPad gets 16 FPS (PlayBook gets 10 FPS, iPad 2 gets 3 FPS, and the Xoom fails to load the test). Even more impressive is the Fish Tank demo, where the TouchPad hovers around 25 FPS. Canvas performance is stellar.”

Of course, we’re not stopping there. We’re already working on making future updates even better.

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;
}

If you switch the value for box-orient (with the Webkit extension, -webkit-box-orient) to vertical, the children boxes are displayed vertically.

A box is not flexible by default, and it is flexible only when the property box-flex has a defined value and the property defines its flexibility ratio relative to the siblings. The box-flex is similar to percent sizing, except that the calculations are based on available space (not total space).

Let’s try the last box to be flexible, which takes up all the available space:

.container > div:last-child {
  -webkit-box-flex: 1;
}

To align a horizontally oriented boxes, use box-pack to distribute space in horizontal axis (in the same direction to the orient), and box-align for vertical axis (in the opposite direction to the orient).
By giving the value center to both properties, the children align up in the center of each box vertically and horizontally:

.container {
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

Enyo Flex Layouts

Enyo’s flex layouts are based on the CSS3 Flexible Box Model.
In Enyo, the Control object may use Layout objects to enhance the rendering of their child controls. You can lay the objects out by specifying a value of the layoutKind property.
The VFlexBox and HFlexBox kinds are simply controls that have layoutKind set by default (layoutKind: enyo.VFlexLayout and layoutKind: enyo.HFlexLayout, respectively).

So creating the same example with horizontally aligned boxes (well, let’s make it with Enyo buttons!) can easily be created with Enyo as follows:

{name: "container", kind: "HFlexBox", components:[
  {kind: "Button", caption: "1"},
  {kind: "Button", caption: "2"},
  {kind: "Button", caption: "3"},
]}

If want the 3rd box to be flexible, you can simply give the property, flex the value 1.

{kind: "Button", caption: "3", flex: 1}

Creating App UI with Enyo FlexBox

Here are some more practical examples you might find useful in your own applications.

This basic user-interface is created with enyo.VFlexBox. And the entire UI code is shown below.

enyo.kind({
  name: "Main",
  kind: "VFlexBox",
  components: [
    {kind: "PageHeader", content: "FlexBox is awesome!", style: "text-transform: capitalize"},
      {kind: "VirtualList", flex: 1},
      {kind: "Toolbar"}
  ],

  create: function() {
    this.inherited(arguments);
  }
});

Notice that the container itself is the enyo.VFlexBox kind, and the object in the middle (where the enyo.VirtualList is) has the flex property value that tells the layout to take up the all available space. If you do not specify the value, the middle section and the footer section (enyo.Toolbar) flow just like the regular box model – the footer is rendered just below where the middle section content ends (which is empty, in this case), instead of staying at the very bottom of the screen.

The flex layout can be applied anywhere else in your UI components. Let’s say you have some list items within the VirtualList and each item is composed with an avatar picture at the left, and two lines of a person’s info at the right side. You can achieve the layout using:

...
{kind: "VirtualList", flex: 1, onSetupRow: "setupRow", components:[
  {kind: "Item", layoutKind: "HFlexLayout", components: [
    {kind: "Image", className: "avatar"},
    {kind: "VFlexBox", pack: "center", flex: 1, components: [
      {name: "fullName"},
      {name: "jobTitle", className: "enyo-item-secondary"}
    ]}
]},
...

See how the horizontal and vertical flex layout are nested, and how the flex and pack properties are used.

Performance Considerations

You should be aware that while the flexible box model is very convenient, it should not be applied unnecessarily. When flexible boxes are nested inside more flexible boxes, the time it takes to render goes up exponentially. Luckily this penalty is small enough to be negligible for a few levels of nesting, but after three layers of nested flexible boxes you will start seeing your application slow down when rendering. In these instances, try to evaluate if all your flexible boxes are absolutely necessary, or if simpler CSS attributes such as “width: 25%” would meet your goals.

Conclusion

The flexbox model layout is pretty simple and easy to architect your app UI and create components, especially with Enyo. For more information of the original specs of the CSS3 flexbox model that the current WebKit supports, see W3C spec page.

Happy coding!

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

Sample Application

Included with this article is a sample Enyo application that demonstrates some of the key features and capabilities of the Enyo localization libraries.  While it doesn’t cover every single detail of the framework, this sample application should get you started with the most essential elements of building webOS 3.0 applications for the global market.  A screen shot of the application is shown below.

The full source code for the sample application can be found here:
Sample Application Source Code

The g11n library

Enyo’s globalization support is implemented in the g11n library.  This library includes g11n-base, which defines core globalization features, including locale, Enyo kinds for formatting dates, times, numbers and the like, and resources.  g11n also contains libraries for parsing and formatting addresses, phone numbers, and names.

As the concepts of locale and resources are fundamental to localizing any application, let’s start with these topics.

Locale

Simply put, a locale is a set of information that describes the language and country that determine the user interface of a device and its applications.  A locale is primarily used to determine how textual information is to be displayed, such as which translations of text strings to use, how dates and currencies are to be formatted, and the like.  Locale can also be used for non-textual information, such as default paper sizes for printing utilities and determining standard photo sizes for imaging applications.

In Enyo applications, a locale is defined with a specification string in the following format:

  [language][_region][_variant]

The language is a two-letter language ISO 639 language code, such as en for English, es for Spanish, fr for French, and so on.  The region value is a two-letter ISO 3166 country code.  Together, the language and region codes can thus specify country or regional variants of the same primary language.  Typical cases are European vs. Canadian French (represented as “fr_fr” and “fr_ca”, respectively,) or European vs. Americas Spanish (represented as “es_es” and “es_us”, respectively.) The variant qualifier can be any ASCII string of characters (except for spaces and underscores) that further differentiates languages.  These are not used as commonly as language and variant, and generally localized applications are limited to these.

In Enyo, a locale is represented by an instance of the enyo.g11n.Locale kind.  You create an instance by passing a locale specification string.  For example, to create a US English locale:

var myLocale = new enyo.g11n.Locale(“en_us”);

Current  Locale

An Enyo application can read the locale currently in use by the host device by calling the currentLocale() method:

var currentLocale = new enyo.g11n.currentLocale();

The return value is an enyo.g11n.Locale instance that contains the details about the current locale.  The locale details can be read using value methods defined by the Locale kind.  For example, the full locale specification string can be read using the getLocale method:

var locale_spec = currentLocale.getLocale();

If the device’s current locale was Canadian French, locale_spec would contain the string “fr_ca.”  Other methods can be used to parse out the locale details, such as getLanguage, getRegion and getVariant.

Resource Files

Applications use locale to help localize their user interfaces for the language and culture of their users.  The biggest component of application localization is displaying strings in the right language, and possibly, regional dialect.  A localized application thus needs to include a set of translated strings for all user interface text in each of the languages supported by the application.

In Enyo, these strings are packaged with the application as one of more resource JSON files.  These files use the naming convention language_variant.json.  For example, an application might contain the file es_us.json to store Spanish strings:

{
  "Hello":"Hola",
  "Goodbye":"Adios",
  "Choose A Language":"Elige un idioma"
}

Each line of an Enyo resource JSON file contains an English string followed by the translated equivalent.  The files are stored in a folder named “resources” right under the application root folder.  Resource JSON files need to be saved in UTF-8 format for any special characters in the translated strings to render properly.  Also, note that the byte order marker at the beginning of UTF-8 files can confuse the g11n resource loader.  Some editors, like Notepad++, include the byte order mark when saving UTF-8 files.  Editors like Sublime Text and Eclipse do not, so you might want to use one of these for creating your resource files.

Resources can then be loaded for use in the application using the enyo.g11n.Resources kind:

var resources = new enyo.g11n.Resources(locale);

The locale argument can either be a Locale instance, or a JSON formatted locale specifier, such as:

var resources = new enyo.g11n.Resources({locale: "es_us"});

Now let’s take a look at where the rubber hits the road, specifically how to load individual localized strings into your Enyo application.

The $L Function

The Enyo g11n library defines a global function, called $L, which is used to load localized resource strings.  This function takes one string argument.  The function will load the corresponding translated resource string in the resource JSON file corresponding to the default device locale.  If there is no such resource string, $L returns the string argument unchanged.  For example, if the default locale is es_us, using the example es_us.json file above:

var helloString = $L("Hello");

would return the string “Hola.”

In addition to the global $L function, enyo.g11n.Resources also defines a $L method.  This works the same way as the global version in that it loads the specified localized string.  However, the string that is returned is the version from the resource JSON file used to create the Resources instance.  Thus an application that lets the user change language can load the right resource strings at runtime:

enyo.kind({
  name: "MyApps.MainView",
  kind: "enyo.Control",

    components: [
      {content: "Your String Here", name: "locstring"},
      {kind: "Picker", name: "languagePicker",
        label: "Device Default", value: "0", items: [
         {caption: "Device Default", value: "0"},
         {caption: "English", value: "en_us"},
         {caption: "Spanish", value: "es_us"},
         {caption: "French",  value: "fr_fr"},
         {caption: "Canadian French", value: "fr_ca"},
         {caption: "German", value: "de_de"},
         {caption: "Italian", value: "it_it"},
         {caption: "Turkish", value: "tr_tr"}
     ],
  onChange: "onLanguageSelected"
}],

onLanguageSelected: function(inSender) {
  var selectedLanguage = inSender.getValue();
  var currentLocale;
  var localizedResources;

  if (selectedLanguage === "0") {
    currentLocale = enyo.g11n.currentLocale();
  } else {
    currentLocale = new enyo.g11n.Locale(selectedLanguage);
  }

  localizedResources = new enyo.g11n.Resources(currentLocale);
  this.$.locstring.setContent(localizedResources.$L("Hello"));
  }
});

Formats

Text strings are not the only things that need to get localized in a world-ready application.  Many other things like dates, numbers, currency values, and even paper sizes are dependent on locale.  Enyo provides a set of kinds for formatting such values, as well as phone numbers, addresses and names.  To introduce the concepts, we will focus next on two of these, date and number formatting.

Date Formats

enyo.g11n.DateFmt is the Enyo date / time formatter kind.  Instances of this kind are created by passing one argument to the constructor, either a JSON object specifying a set of date formatting properties, or a string containing the custom date / time format to use.  An example of the JSON approach is:

  dateFmt = new enyo.g11n.DateFmt({
  locale: "es_us",
  date: "long",
  time: "long",
  twelveHourFormat: true,
  weekday: true
});

This locale property specifies the locale to use when formatting.  If omitted, the device default will be used.  The data and time properties are set to “long”, one of the predefined formats.  The others are “short”, “medium”, and “full”, each of which renders different levels of date / time detail.  Date and time can also be custom format strings if you want to fully customize information rendered.  The full specification of allowed format strings can be found in the developer documentation here:

https://developer.palm.com/content/api/dev-guide/enyo/globalization.html#enyo.g11n.datefmtparams

The sample application included with this article includes some controls for experimenting with the standard and custom date / time formatting options.

Number Formats

Number formatting is accomplished in a manner similar to date / time formatting.  The enyo.g11n.NumberFmt is the kind to use for formatting numbers, currency values, and percentages.  You specify a JSON object with the various formatting properties.  These include locale, style, currency, currencyStyle, and fractionDigits.  Not all of these are meaningful in all cases: the value of style determines what type of number is being formatted.  The style property can be one of “number”, “percent”, or “currency”.  fractionDigits specifies the number of places displayed after the decimal point.  If currency is specified as the style, currencyStyle can be set to “iso” or “common” to specify how the currency sign is rendered.  If “iso” is specified, the ISO 4217 currency code is used.  If “common”, the locale specific currency symbol is used (for example, USD versus $.)  The currency property lets you specify the ISO 4217 currency code.  So, if you wanted to format 12.50 Argentinean Pesos by specifying the ISO 4217 currency code (ARS) but display the value with the peso symbol, you could do this:

  var numFmt = new enyo.g11n.NumberFmt({
  style: "currency",
  currency: "ARS",
  currencyStyle: "common"
});

  var pesosString = numFmt.format("12.50");

Next Steps

With this introduction to the Enyo g11n library, you should be well prepared to dive into building your first global webOS 3.0 application.  If you haven’t already, get started by downloading the webOS 3.0 SDK.

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.

Here is the original code for the app without any encapsulation besides that provided by the built-in Enyo controls themselves. Even with this simple example, it’s easy to see how the code can start to get out of hand as more components are added.

enyo.kind({
  name:  'SimpleTimerApp',
  kind:  'enyo.Control',
  components: [
    {name: "simpleTimer", kind: "RowGroup", caption: "Simple Timer", components: [
      {name: "animator", kind: enyo.Animator, easingFunc: enyo.easing.linear,
        duration: 30000, tick: 1000, onBegin: "beginAnimation",
        onAnimate: "stepAnimation", onEnd: "endAnimation"
      },
      {kind: "Control", layoutKind: "HFlexLayout", pack: "start", align: "center",
         components: [
           {name: 'timerProgress', kind: "ProgressBar", flex:1, minimum: 0,
             maximum: 30, position: 0}
      ]}
    ]},
    {kind: "Control", layoutKind: "HFlexLayout", pack: "center", align: "center",
      components: [
        {name: "selTimerDuration", kind: "RadioGroup", width: "360px",
           onChange: "timerDurationChanged", components: [
            {caption: "10 Sec.", value: "10"},
            {caption: "30 Sec.", value: "30"},
            {caption: "60 Sec.", value: "60"}
      ]}
    ]},
    {kind: "Control", layoutKind: "HFlexLayout", pack: "center", align: "center",
       components: [
        {name: 'startTimer', kind:'Button', caption:'Start Timer', width:'360px',
          onclick:'timerStart' }
    ]}
  ],

  constructor: function () {
    this.inherited(arguments);
    this.timerDuration = 30;
  },

  create: function () {
    this.inherited(arguments);

    this.$.selTimerDuration.setValue(this.timerDuration);

    this.$.simpleTimer.setCaption("Simple Timer (" + this.timerDuration + " seconds)");
    this.$.timerProgress.setMaximum(this.timerDuration);
    this.$.animator.setDuration(this.timerDuration * 1000);
  },

  timerStart: function () {
    this.$.animator.play(0, this.timerDuration);
  },

  stepAnimation: function(inSender, inValue) {
    this.$.timerProgress.setPosition(inValue);
  },

  beginAnimation: function(inSender, inStart, inEnd) {
    this.$.timerProgress.setPosition(0);
    this.$.startTimer.setDisabled(true);
  },

  endAnimation: function(inSender, inValue) {
    this.$.timerProgress.setPosition(0);
    this.$.startTimer.setDisabled(false);
  },

  timerDurationChanged: function(inSender, inValue, inOldValue) {
    this.timerDuration = inValue;
    this.$.simpleTimer.setCaption("Simple Timer (" + inValue + " seconds)");
    this.$.timerProgress.setMaximum(inValue);
    this.$.animator.setDuration(inValue * 1000);
  }
});

Creating a control

A general programming rule of thumb is that indentation should not go more than three levels deep. Examination of the components section of the source code shows that the app can be broken down into three parts. One is the timer itself, which consists of a progress bar to provide feedback, an animator control and a few other controls. The second part contains the radio buttons for setting the duration of the timer, and the third part is the button to start the timer. All the components in the first part make up the actual timer used in the app and are related to each other, so that will become a custom control named SimpleTimer that will be broken out into its own Enyo kind at the same level as the app kind.

enyo.kind({
  name:  'SimpleTimer',
  kind: "RowGroup",
  caption: "Simple Timer",
  published: {
    timerDuration: 30
  },
  events: {
    onSimpleTimerStart: "",
    onSimpleTimerEnd: ""
  },
  components: [
    {name: "animator", kind: enyo.Animator, easingFunc: enyo.easing.linear,
      duration: 30000, tick: 1000, onBegin: "beginAnimation",
     onAnimate: "stepAnimation", onEnd: "endAnimation"
    },
    {kind: "Control", layoutKind: "HFlexLayout", pack: "start", align: "center",
       components: [
        {name: 'timerProgress', kind: "ProgressBar", flex:1, minimum: 0,
           maximum: 30, position: 0
         }
    ]}
  ],

  create: function () {
    this.inherited(arguments);
    this.setCaption("Simple Timer (" + this.timerDuration + " seconds)");
    this.$.timerProgress.setMaximum(this.timerDuration);
    this.$.animator.setDuration(this.timerDuration * 1000);
  },

  start: function () {
    this.$.animator.play(0, this.timerDuration);
  },

  stepAnimation: function(inSender, inValue) {
    this.$.timerProgress.setPosition(inValue);
  },

  beginAnimation: function(inSender, inStart, inEnd) {
    this.$.timerProgress.setPosition(0);
    this.doSimpleTimerStart();
  },

  endAnimation: function(inSender, inValue) {
    this.$.timerProgress.setPosition(0);
    this.doSimpleTimerEnd();
  },

  timerDurationChanged: function() {
    this.setCaption("Simple Timer (" + this.timerDuration + " seconds)");
    this.$.timerProgress.setMaximum(this.timerDuration);
    this.$.animator.setDuration(this.timerDuration * 1000);
  }
});

enyo.kind({
  name:  'SimpleTimerApp',
  kind:  'enyo.Control',
  components: [
    {name: "simpleTimer", kind: "SimpleTimer",
       onSimpleTimerStart: 'simpleTimerStarted',
       onSimpleTimerEnd: 'simpleTimerEnded'
    },
    {kind: "Control", layoutKind: "HFlexLayout", pack: "center", align: "center",
        components: [
        {name: "timeLimit", kind: "RadioGroup", width: "360px",
           onChange: "radioButtonSelected", components: [
             {caption: "10 Sec.", value: "10"},
             {caption: "30 Sec.", value: "30"},
             {caption: "60 Sec.", value: "60"}
      ]}
    ]},
    {kind: "Control", layoutKind: "HFlexLayout", pack: "center", align: "center",
      components: [
        {name: 'startTimer', kind:'Button', caption:'Start Timer',
           width: '360px', onclick:'timerStart'
        }
    ]}
  ],

  create: function () {
    var initialDuration = 10;
    this.inherited(arguments);
    this.$.timeLimit.setValue(initialDuration);
    this.$.simpleTimer.setTimerDuration(initialDuration);
  },

  radioButtonSelected: function (inSender) {
    this.$.simpleTimer.setTimerDuration(inSender.getValue());
  },

  timerStart: function () {
    this.$.simpleTimer.start();
  },

  simpleTimerStarted: function () {
    this.$.startTimer.setDisabled(true);
  },

  simpleTimerEnded: function () {
    this.$.startTimer.setDisabled(false);
  }

});

Communicating with the control

In the original sample application, code that was used by the timer was spread out throughout the application. Changing any part of the timer code meant the possibility of affecting other code in the application. But now that the code for the new SimpleTimer control is encapsulated in its own kind, how does the app communicate with the components within the control? The SimpleTimer control acts as a gateway or buffer between the application and whatever components and code are inside the control.

Calling methods in the control

To tell the control to do something, methods belonging to the control are called. The SimpleTimer control has a start() method that starts the timer. All the work that goes into initializing the internal controls and starting the timer happens inside the SimpleTimer control itself.

Receiving events

When the control needs to tell the app about something, it sends events. The SimpleTimer sends simpleTimerStart and simpleTimerEnd events to the application. In this particular implementation, the events start out as onBegin and onEnd events from the Animator control. The SimpleTimer control processes these internal events and passes them on as its own simpleTimerStart and simpleTimerEnd events to the application.

Getting and setting properties

Properties within the control can be published to give the application access to them. When a property is published, it automatically gets a get<property name>() and a set<property name>() method. If a <property name>Changed() method is created, it will get called whenever there is a change to the property. In the SimpleTimer control, the timerDuration property was published, so it has the getTimerDuration() and setTimerDuration() methods. A timerDurationChanged() method was also created to update the animator control and some UI controls whenever the timerDuration property is changed.

Conclusion

The overall size of the app has increased slightly, but the code is easier to maintain because everything related to the SimpleTimer component is contained within the kind. The component can be used in several places within the app and can be easily copied and used in other projects. Thanks to encapsulation, the inner workings of the component can be changed with little to no impact on the app itself – for instance, swapping out the animator control with some other sort of timer code or changing the UI from a progress bar to a numeric display.

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.