Version 5.0 of vSphere supported Flex/Flash for UI (developed VCP on client side). The HTML Bridge was added to the SDK in version 5.5.1. It allows you to develop UI plugins with HTML and Javascript instead of Flex.
The HTML bridge has been tested on Windows and Mac OS, with the browsers currently supported by vSphere 6.0, i.e. IE 10, 11 and Chrome and Firefox versions N and N-1. In this version, developers are free to use any third party library.
VMware are rapidly trying to make vSphere flexible for UI development. VMware announced in May 2016 that the Legacy C# Client will no longer be available with the vSphere 6.5 release.
Features Summary of HTML5 version:
- Any UI extensions or component can be built with HTML and Javascript. All extension points are supported.
- New Javascript APIs provide the same level of functionality as the Flex API
- You can use the Javascript libraries of your choice for UI development.
- Easy access to the Web Client server with REST calls and Spring Web MVC integration.
- The Java API doesn’t change, so data adapters and java services are similar as with the standard SDK.
- New HTML versions of the standard SDK samples, as well as new samples.
- Eclipse wizard updated to create a new HTML project from scratch.
- Compatibility with the future Web Client HTML platform when using our guidelines.
The vSphere Web Client benefits:
- Scalability – Handles more objects and more concurrent admin access.
- Bookmarking URLs – Allows quick return to specific objects or views and share them with others (such as in an email support ticket or instant message).
- Recent Objects – Quickly navigate between things we are working on.
- Work-In-Progress – Save your place in various wizards and come back to it later, even from another computer.
- Enhanced Linked Mode – View all of the vCenter Servers and inventory within an SSO Domain in one single interface.
- Remembers user customizations to the UI – Enables column selections, widths on grids, and portlets on summary pages.
How to To Start with HTML Bridge
The Javascript API of HTML Client SDK 6.5 is identical to the HTML Bridge released since Web Client SDK 5.5.1. This API allows building HTML plugins that are compatible with both the HTML Client and Flex Client.
If you are already familiar with the HTML Bridge from older SDKs, you won’t see any difference in terms of APIs but just some minor differences in terms of packaging. The HTML SDK reuses the same APIs on purpose, it is the only way to provide compatibility with vSphere Web Client 6.0 and 6.5. If you have only used the Web Client SDK in the past, or are new to plug-in development then the HTML SDK is the way forward for any solution that extends the vSphere client! HTML Bridge was released in March 2014 as part of the Web Client SDK 5.5.1. It’s goal was to support HTML plug-ins while still running inside a Flex client.
Soon the HTML client will become the primary vSphere UI and the HTML SDK guarantees compatibility but will provide additional extensibility if you opt for HTML-only plug-in.
To get started with your HTML plug-in development you need the following:
- A Windows or Mac computer with a minimum of 8GB of RAM (16GB recommended) and 20GB of free disk space.
- The latest HTML Client SDK release
- Access to a vCenter Server for Windows or vCenter Server Appliance 6.0
- A good understanding of web application development using HTML/Javascript.
- A basic understanding of Java development.
Download the vSphere Client SDK zip file. While unzipping the build file on your development machine, we recommend that you pick a top directory without spaces because long paths and paths with spaces may cause server deployment errors or script errors.
Setup:
- Install Java JDK: version 1.7.0_21 or above for vCenter 6.0, version 1.8.0 for vCenter 6.5.
- Set the JAVA_HOME env variable to the local JDK location.
- Java version 1.8 is required for your local Virgo runtime to work with the vCenter 6.5 release. From a plug-in compilation standpoint it doesn’t make any difference because the build script must have Java target version set to 1.7 for the plug-in Java bundle to be compatible with vCenter 6.0.
- Set the env variable ANT_HOME to your local Ant folder on your disk. ● Set the env variable VSPHERE_SDK_HOME env to your /html-client-sdk directory.
- You can pick any IDE or just use a code editor. Since the UI code is in Javascript your UI debugging will be done directly in the browser. A Java debugger will be useful when developing a service that runs in the Java layer
Server Registration:
This setup section is required each time you pick a different vCenter Server to test your plug-in locally. The vCenter Server registration consists of generating special files that will connect the local client in your development environment (the Virgo server) to the remote vCenter instance.
- For vCSA: copy dev-setup.sh to your vCSA root directory and make it executable. For vCenter Server for Windows: copy dev-setup.bat to the administrator directory.
- Run the dev-setup script. Three files get generated: webclient.properties, store.jks and ds.properties.
- Copy these files to your dev machine at the following locations: webclient.properties Windows: C:\ProgramData\VMware\vCenterServer\cfg\vsphere-client\ Mac OS: /var/lib/vmware/vsphere-client/vsphere-client/ store.jks
Windows: C:\ProgramData\VMware\vCenterServer\cfg\ Mac OS: /var/lib/vmware/vsphere-client/ ds.properties Windows: C:\ProgramData\VMware\vCenterServer\cfg\vsphere-client\config\ Mac OS: /var/lib/vmware/vsphere-client/vsphere-client/config/ |
- Set the environment variable VMWARE_CFG_DIR to the following location: Windows: C:\ProgramData\VMware\vCenterServer\cfg\ Mac OS: /var/lib/vmware/vsphere-client/
- If you are on Mac OS execute the following steps:
- (First time only) Edit vsphere-ui/server/configuration/tomcat-server.xml And replace the Windows path for keystoreFile with keystoreFile=”/var/lib/vmware/vsphere-client/store.jks”
- Change keystore.jks.path in webclient.properties and solutionUser.keyStorePath in ds.properties to use the correct path for Mac OS, i.e. /var/lib/vmware/vsphere- client/store.jks
Demo Samples of SDK:
The vSphere HTML Client SDK provides several sample plug-ins which demonstrate some of the functions and capabilities of the SDK. All samples are already configured and built with the SDK deliverable.
The current SDK samples are:
- globalview
- chassisA
- chassisB
- vsphere-wssdk ● custom-object (added in vSphere 6.5 Update 1)
(Path: /html-client-sdk/samples)
(The samples are already built and deployed in the Virgo server location: /html-client-sdk/vsphere-ui/plugin-packages )
How to Build:
To build the globalview, chassisA, chassisB and vsphere-wssdk samples, execute the following steps from the command line:
- Go to samples/
- Run ./build-all.sh on Mac or build-all.bat on Windows.
- The build output is in samples/build/plugin-packages
- Copy the folders from samples/build/plugin-packages to vsphere-ui/plugin-packages (confirm that you want to replace existing files) Note: vsphere-ui/plugin-packages is where local plug-ins are picked up automatically when the server starts.
How to Run:
- Start or restart the Virgo server from the command line: ○ Run vsphere-ui/server/bin/startup.[sh,bat] -debug
- Check that there are no errors in the console or in the Virgo logs.
- Login to your local HTML Client at https://localhost:9443/ui/ to see the samples in action.
- See the Troubleshooting section in docs/FAQ.html in case of problems.
To stop running samples in your local client, delete the sample folders from vsphere-ui/plugin-packages and restart the server, the ones with the name ending with -sample. Do not delete other plugin packages or the entire plugin-packages.
HTML bridge plug-ins will be compatible with both the Flex Web Client and the HTML5 vSphere Client, offering an excellent transition path. VMware is currently working on support for these plug-ins within the HTML5 vSphere Client, and providing more documentation. If you want to get started with the HTML Bridge, follow these steps:
- Download the SDK from https://my.vmware.com/group/vmware/get-download?downloadGroup=WEBCLIENTSDK60U2.
- downloadGroup=WEBCLIENTSDK60U2.
- Extract the file to local directory.
- Open the vSphere-client-sdk\html-bridge\Read Me First.html file in any browser.
The latest HTML SDK which was released as part of the vSphere HTML5 Web Client Fling is available at VSPHERE HTML5 WEB CLIENT (https://labs.vmware.com/flings/vSphere-html5-web-client#summary).
[Tweet “Strength of vSphere Version for UI Development. ~ via @CalsoftInc”]
