Helloworld Samples

The two helloworld plugins display a simple "helloworld" view. The first one uses hard-coded strings, the 2nd one uses localized resources.

helloworld-ui

Description

This is the simplest plugin you can start with because it doesn't do much! (simpler that the default UI plugin created by the SDK tool) But it does introduce a few interesting concepts:

Usage

After importing and building the helloworld-ui project in Eclipse, deploy the bundle to your local server and start a client session. You should see a new Helloworld button in the Home view, under Inventories. This is the shortcut to the "Helloworld App": click on it to open the HelloworldView which contains just a string.

Implementation notes

See how the extension points vise.home.shortcuts and vise.global.view are used in plugin.xml. Note that a default icon is used when no icon is defined for vise.home.shortcuts.

Shortcuts in the Home page should be reserved to a solution's "entry point", i.e. giving access its main screen. For instance solutions which are extending the views of vSphere objects don't need shortcuts in Home.

Exercises

  1. Add code to HelloworldView to make it more interesting (any "standalone flex code" should work here, you are not trying to call SDK APIs yet)
  2. Change the categoryUid of the object extending vise.home.shortcuts to put the shortcut in the Administration section of the Home page.

helloworld-i18n-ui

Description

The helloworld-ui sample above is using hard-coded strings which is fine for starting quickly, however it is best to localize your application as early as possible. The incremental effort of using resources is much lower than postponing localization until the very end!

Usage

After importing and building the helloworld-i18n-ui project in Eclipse, deploy the bundle to your local server and start a client session. You should see a new Helloworld button in the Home view, using a custom icon. Click on it to open a different HelloworldView which contains an image.

To run the French version of this plugin, use the URL https://localhost:9443/vsphere-client/?locale=fr_FR: Hello World! becomes Bonjour Le Monde!

Implementation notes

The only difference with helloworld-ui is the use of resources, plus some css and image assets. Since this project contains resource files the Ant build script creates resource modules (.swf files) separate from the code module. The locales supported by VWC are: en_US, de_DE, fr_FR, ja_JP, ko_KR, zh_CN. If a resource is not available for a particular locale the english version will be used by default.

In theory the compiled resources could be merged with the main module, but the VWC platform uses a lazy-loading model which allows to load resources in advance, for instance to display an application label or menu item. The code module is loaded on-demand later, when the plugin is actually used.

The plugin's resource module(s) must be declared in plugn.xml to to be loaded at runtime. In addition plugin.xml should contain localized strings and images (names, icons, etc.) so that the right language version is used at runtime.

defaultBundle declares the resource bundle to be used in this file when referencing resource ids without a bundle name, as in .
Note that resource bundle names must be unique across all plugins to avoid collisions, so a qualified name is highly recommended!

The <resources> section lists the resource module(s) to be loaded for that plugin (in general you will have only one). Using the variable {locale} instead of hard-coded locales (en_US, fr_FR, etc.) ensures that the current browser locale will be used.

The module uri must be the path of the resource module relative to the main code module. Here it matches what is generated the Ant script build.xml, this could be different in your production build system.

Setting the resource module to helloworld-{locale} means that your plugin must include all 6 files (helloworld-en_US, helloworld-fr_FR, etc.) even if you are not translating everything. Otherwise Flex throws a ResourceEvent.ERROR when the corresponding helloworld-{locale} cannot be found. See how the script build-flex.xml makes copies of helloworld-en_US.swf for the 4 locales not supported in this sample. Another solution would be to hard code the english version in plugin.xml, i.e. use locales/helloworld-en_US.swf, until you have the other locales ready.

#{helloworld.shortcut} and #{helloworld.icon} are resource ids for the name and icon of this shortcut. The notation #{..} means that their values will be found in the default resource bundle. You can put a bundle name in front of the id to reference another resource bundle, like that: #{com_example_bundle:helloworld.shortcut}.

See the values of helloworld.shortcut, helloworld.icon and other resources in locale/en_US/com_vmware_samples_helloworld.properties.

Image files are referenced with Embed("../../assets/images/helloworldIcon.gif") where the path to the assets folder is relative to the .properties file. Note that it is possible to use the Embed() notation in plugin.xml instead of image resources, i.e. <icon>Embed("assets/images/helloworldIcon.gif")</icon>, but it is not recommended for two reasons: first, it is easier to re-use a resource id than hard-coding the image path, and second, an image may have different versions for each locale.

The other place where the resource bundle must be declared is in the main plugin module, i.e. swf/src/main/flex/Helloworld.mxml. See the code snippet below, it shows also how the module imports styles from /assets/css/helloworld.css.

   <mx:Metadata>
      [ResourceBundle("com_vmware_samples_helloworld")]
   </mx:Metadata>

   <mx:Style source="/assets/css/helloworld.css"/>

To learn more about Flex resource bundles see this Adobe doc.

Exercises

  1. Add support for another locale in this sample.

See also: Other samples - SDK Tutorial - FAQs - Flex API docs - Java API docs