Difficulties with plugin icon showing up during conversion from Flex to HTML

[erikDoesStorage]

We are converting our existing Flex plug-in to HTML 5.  We have eliminated the Flex portion and implemented the HTML5 portion.

Everything works great except for one thing, we can't get an icon to show up.  In plugin.xml file for the <icon> tag

the following has tried

../../assets/images/Company-Icon-N-16x16.png

../assets/images/Company-Icon-N-16x16.png

/assets/images/Company-Icon-N-16x16.png

/vsphere-client/company-war-4.0.0-SNAPSHOT/assets/images/Company-Icon-N-16x16.png

company-war-4.0.0-SNAPSHOT//assets/images/Company-Icon-N-16x16.png

/vsphere-client/company-war-4.0.0-SNAPSHOT/assets/images/Company-Icon-N-16x16.png

Here's a plugin.xml snippet:

<plugin id="com.company.MyCompany">

    <!-- Global Config view -->  

   <extension id="com.company.views.global.GlobalMyCompanyJS">

      <extendedPoint>vise.global.views</extendedPoint>

      <object>

         <name>Company Configuration</name>

         <icon>../../assets/images/Company-Icon-N-16x16.png</icon>

         <componentClass className="com.vmware.vsphere.client.htmlbridge.HtmlView">

            <object>

                <root>

                    <url>/vsphere-client/company-war-4.0.0-SNAPSHOT/index.html</url>

                </root>

            </object>

         </componentClass>

      </object>

      <metadata>

            <privilege>Datastore.AllocateSpace,Datastore.Browse,Datastore.Delete,Datastore.DeleteFile,Datastore.FileManagement,Datastore.Move,Datastore.Rename</privilege>

      </metadata>     

   </extension>

What's a programmer got to do to get any icon to show up?

We would prefer NOT to have a .properties file, just the path to the file.

We also noticed that the HTML5 samples in the SDK have both src/main/locale and src/main/webapp/locales/en_US directories with property files in each, which is a bit confusing

[laurentsd]

Yes, this can be a little confusing because the SDK has to support resources in both the Flex and HTML clients.

See the section on "external icons" in the PDF doc/Getting_Started_with_HTML_Client_SDK.pdf.

For icons to show up in the HTML client you need to add a plugin-icons.css as shown in the samples.

For icons to show up in the Flex client you need to declare them in a .properties file, like the chassis sample:

chassis = Embed("../../webapp/assets/images/chassis.png")

addChassis = Embed("../../webapp/assets/images/addChassisIcon.png")

editChassis = Embed("../../webapp/assets/images/editChassisIcon.png")

deleteChassis = Embed("../../webapp/assets/images/removeChassisIcon.png")

[erikDoesStorage]

So then for the Flash client, do we need to ship the localization .swf files?

If so, then will the presence of the files interfere with our being able to load up in a pure HTML client?

[laurentsd]

.swf localization files are only loaded by the Flex client. The HTML client loads the .json and .properties files.  Both types must be present in your plugin .war file in order for the plugin to work with both clients.

[erikDoesStorage]

Hi Laurent,  Thanks for your answer.  

I am still not sure I quite understand how the wiring works to have our plugin icons work in both the Flash client and the HTML client.  

I looked around in the HTML SDK samples directory.  I don't see any .json file that I can spot having icon information.  I did see some .css files that maybe had a reference.  

Would you be able to point out in one of the samples the files and the lines in those files that connect the icon information together so that they appear, particularly for the HTML client.  

Thanks.

[laurentsd]

Sure. Let's take the ChassisA-html sample:

- In src/main/webapp/assets/css/plugin-icons.css the icons are defined as CSS classes like this for the HTML client:

.com_vmware_samples_chassisa-addChassis {

    background: url("../images/addChassisIcon.png");

    width: 16px;

    height: 16px;

    display: inline-block;

    vertical-align: text-bottom;

    margin: 1px 4px 0;

}

etc.

Note that the name com_vmware_samples_chassisa before -addChassis must match the bundle name defined in plugin.xml

<plugin id="com.vmware.samples.chassisa"

   defaultBundle="com_vmware_samples_chassisa">

- In src/main/webapp/locales/com_vmware_samples_chassisa_en_US.properties the same icons are defined for the Flex client (this file is compiled into a .swf file loaded by the Flex client):

# External icons used in plugin.xml

chassis = Embed("../../webapp/assets/images/chassis.png")

addChassis = Embed("../../webapp/assets/images/addChassisIcon.png")

editChassis = Embed("../../webapp/assets/images/editChassisIcon.png")

deleteChassis = Embed("../../webapp/assets/images/removeChassisIcon.png")

[SolidFireMike]

I still don't understand where the .json file goes or what's in it.
Can you clarify?  Thanks.