VMworld 2013: vSphere UI Platform Best Practices: Putting the Web Client SDK Into Action

vSphere UI Platform Best Practices: Putting the Web

Client SDK Into Action

Max Daneri, VMware

Laurent Delamare, VMware

Nimish Sheth, VMware

TEX4845

2

Disclaimer

This presentation may contain product features that are currently

under development.

This overview of new technology represents no commitment from

VMware to deliver these features in any generally available

product.

Features are subject to change, and must not be included in

contracts, purchase orders, or sales agreements of any kind.

Technical feasibility and market demand will affect final delivery.

Pricing and packaging for any new technologies or features

discussed or presented have not been determined.

3

Agenda

Review of vSphere Web Client architecture and extensibility

Plugin development experience from the field

SDK 5.5 changes

Roadmap

4

vSphere Web Client (VWC) Architecture Overview

VWC main characteristics for plugin developers

Open platform with a true web architecture

Extensibility at its core

• UI extensibility

• Data extensibility

Easy to build a unified user experience

• Consistent look & feel

• Data mash-ups

Rich SDK and developer tools

5

vSphere Web Client Architecture Overview

3-Tier Architecture

App Server

Solution 1 Solution N Backend for

Solution A vCenter

Server

vCenter

Server 1

Web Client (Flex)

Mid-tier app server (Java)

Access to vCenter and

other backend services

App Server App Server

6

Leveraging the UI and Java Platforms

vCenter 1.. N

Back-end Server

or Database

VWC UI plugins 3rd party plugins

• Plugin Architecture

• MVC Framework

• Data Access API

Web Client

App Server

(stateless) 3rd party services

• Data Manager

• Session Manager

• OSGI services

Java remoting (BlazeDS)

through secure AMF channel

vSphere Web Service SDK

Or any remote access to backend

Direct access is

possible but not as

well integrated

• Extension points

• Java services proxy

• Dependency injection

VWC services

VWC

platform

VMware

components

UI Platform

Java Platform

Partner

solutions

Back-ends

7

Data Extensibility & Client Commands

VM UI

Data Services

VM Service

myPlugin Adapter

Host UI

myPlugin UI

VC Adapters

Data Access Framework

myPlugin Service

vCenter 1.. N

(inventory service)

Back-end Server

or Database

Data Request

Events

Normalized

queries

Service calls

VWC

platform

VMware

components

Partner

solutions

Dispatching

Queries to back-ends

Aggregated

results

Web

Client

App

Server

Java to back-ends

Java Services Proxy

No complex business

logic

in server plugins

8

Extensibility Framework

Design Goals

Promote extensibility by design rather than implementation

Enable UI customization, consistency and easy navigation

Keep optimal footprint

• Lazy loading of metadata, resources & code modules

9

Extensibility Framework

Key Concepts

Extension Point

• Declaration of an extensible feature

Extension

• Implements an extension point

Plugin

• Bundle of metadata, code

and resources

Plugin package

UI plugin bundle1 (.war)

UI plugin bundle2 (.war)

Java service bundle3 (.jar)

Data adapter bundle4 (.jar)

3rd party library X (.jar)

plugin-package manifest (.xml)

my-packaged-solution (.zip)

10

Packaging & Deployment

Example of a plugin-package manifest

<pluginPackage id="com.vmware.samples.viewspropertiesui"

version="1.0.0"

name="Views Sample”

vendor="VMware" >

<dependencies>

<pluginPackage id="com.vmware.vsphere.client" version="5.5.0" />

</dependencies>

<bundlesOrder>

<bundle id="com.vmware.wsvim25" />

<bundle id="com.google.gson" />

<bundle id="com.vmware.samples.custompropertyprovider" />

<bundle id="com.vmware.samples.custompropertyui" />

<bundle id="com.vmware.samples.viewspropertiesui" />

<bundle id="com.vmware.samples.wssdkprovider" />

<bundle id="com.vmware.samples.wssdkui" />

</bundlesOrder>

</pluginPackage>

11

Packaging & Deployment

How do you deliver your new plugin to users?

1. Create a plugin-package .zip

2. Provide a script to register the plugin as a vCenter extension,

with a URL pointing to the plugin-package .zip location.

3. When a new user session starts, VWC finds your plugin and hot-

deploys it to the app server if necessary.

What about new versions?

Only the latest version of the plugin is deployed.

When a newer plugin version is registered the older one is

un-deployed automatically.

12

Extension Templates

A collection of pre-defined extension points and extensions

Out-of-the-box templates

• Instantiating an object workspace for new object types

• Instantiating a summary view

<!-- Chassis object view template instance.

Defines the object workspace (right hand side) for the Chassis object. -->

<templateInstance id="com.vmware.samples.chassis.viewTemplateInstance">

<templateId>vsphere.core.inventory.objectViewTemplate</templateId>

<variable name="namespace" value="com.vmware.samples.chassis"/>

<variable name="objectType" value="Chassis"/>

</templateInstance>

13

Extension Templates – Custom object workspace

14

Extension Filtering

Allows filtering based on runtime conditions

3 filters

• Object type

• Typically used for actions

• e.g. Show the extension only if the selected object is a VirtualMachine

• Object properties

• e.g. Show the extension only if the VM is FT enabled

• Privileges

• e.g. Show the extension only if the user has a specific privilege

15

Extension Filtering – Type Filter

<extension id="vsphere.core.vm.faultToleranceTurnOnActionSet">

<extendedPoint>vise.actions.sets</extendedPoint>

<object>

…

</object>

<metadata>

<objectType>VirtualMachine</objectType>

</metadata>

</extension>

Example of an action appearing only for VirtualMachine objects:

16

Extension Filtering – Privilege Filter

<extension id="vsphere.core.vm.ftView">

<extendedPoint>vsphere.core.vm.summarySectionViews</extendedPoint>

<object>

…

</object>

<metadata>

<privilege>VirtualMachine.Interact.CreateSecondary</privilege>

</metadata>

</extension>

Example of a portlet extension for users who have a specific privilege:

17

Extension Filtering – Object Property Filter

<extension id="vsphere.core.vm.ftView">

<extendedPoint>vsphere.core.vm.summarySectionViews</extendedPoint>

<object>…</object>

<metadata>

<privilege>VirtualMachine.Interact.CreateSecondary</privilege>

<propertyConditions>

<com.vmware.vsphere.client.filters.PropertyConditionsInfo>

<conditions>

<com.vmware.vsphere.client.filters.ComparisonInfo>

<propertyName>runtime.faultToleranceState</propertyName>

<comparisonOperator>EQUALS</comparisonOperator>

<propertyValue>enabled</propertyValue>

</com.vmware.vsphere.client.filters.ComparisonInfo>

</conditions>

<conjoiner>AND</conjoiner>

</com.vmware.vsphere.client.filters.PropertyConditionsInfo>

</propertyConditions>

</metadata>

</extension>

Portlet extension restricted to VMs with a specific property enabled:

18

Agenda

Review of vSphere Web Client architecture and extensibility

Plugin development experience from the field

SDK 5.5 changes

Roadmap

19

Demo

A real life plugin, which displays special VM guestOS information

which is not normally visible in the vSphere Client

20

My Challenges

vSphere Web Client extensions works in a different manner compared

to .NET client

vSphere Web Service SDK is used in a different way

• No need for WaitOptions, RetrieveServiceContent and login

(.NET lovers) .NET UI extensions are not possible, but a plugin can call

an external .NET web service

21

What I Learned from My Mistake

Start simple – don’t try to start creating complex and fantastic code,

start simple, your self-esteem will thank you

Don’t reinvent the wheel – everything needed to manage a vSphere

infrastructure is here, no need to develop strange server component

Read the documentation – example codes are very important but

sometime reading the doc is a must!

22

Agenda

Review of vSphere Web Client architecture and extensibility

Plugin development experience from the field

SDK 5.5 changes

Roadmap

23

Compatibility Story

Ground rules:

• vSphere Web Client works with the previous vCenter release

• Plugins are supported for at least one more VWC release

Compatibility w/ vCenter 5.0 vCenter 5.1 vCenter 5.5

VWC 5.1 OK OK No

VWC 5.5 No OK OK

Compatibility w/ VWC 5.1 VWC 5.5

Plugin + SDK 5.1 OK OK

Plugin + SDK 5.5 No (1) OK

(1) Cannot use 5.5 features in a plugin targeting VWC 5.1, otherwise it is OK.

24

SDK 5.5 Changes

New features

• Solution menus

• A better way to build solution-specific menus

• Action prioritization

• 2 new extension points to order or promote actions

• Finally possible to put a global action in the list toolbar

• AdvancedMouseEvent

• Listen to right-click events in your own widgets

• DisposeManager improvements and new extension point

• You can decide under which namespace your Flex objects will be GC’d

• Dialogs and Wizards

• Wizard data can be saved during the user session or across sessions

• But support limited to 5.5 for now because of upcoming platform changes

25

SDK 5.5 Changes (cont’d)

Other important changes

• Better samples

• Virgo updated to 3.6

• Spring Framework libraries updated

• Java version 1.7 (compile with target 1.6)

• Flash Player version >= 11.5

• Web-ContextPath must use this format: vsphere-client/plugin-name

• See [SDK]/docs/release-notes.html for all details

Your plugin package must now include a 5.5.0 dependency

<pluginPackage id="com.acme.acme-plugin" version="1.0.0”

name=”Acme solution” vendor=”ACME">

<dependencies>

<pluginPackage id="com.vmware.vsphere.client" version="5.5.0" />

</dependencies>

...

26

Agenda

Review of vSphere Web Client architecture and extensibility

Plugin development experience from the field

SDK 5.5 changes

Roadmap

27

SDK Roadmap

We’re moving away from Flex as UI technology

Our future HTML 5 platform will preserve your investments

The Java tier doesn’t change

You will be able to take several paths during this transition

• Keep using Flex UIs in the short term

• Mix Flex UIs with HTML

• Use only HTML/Javascript

• Stick with C# client Script plugins

28

SDK Roadmap (cont’d)

Flex UI plugins

• For the short term this is still the best way to integrate your UI with VWC

• The entire vSphere UI suite is using this!

• Will be supported by HTML 5 platform

• Except deprecated APIs

• Columns extensions and portlets have limitations

Use cases

• Continuing existing investment

• Starting a simple plugin

• Building a UI plugin for vSphere 5.1 and 5.5

Tips

• Reducing your UI code will make the transition easier

• For complex UIs consider mixing some HTML views

29

SDK Roadmap (cont’d)

C# client script plugins

• Can use HTML/Javascript

• Limited integration with the Web Client

• Fewer extension points, views displayed in separate tab Classis Solutions

• Security warning because of HTTPS link to external server

• Missing APIs (no callback into Flex)

• No Java service layer

• Will be supported in HTML 5 platform with some exceptions

Use case

• Re-using or enhancing an existing script plugin

• Writing a new plugin that must also work in the C# client

Tips

• All new development should focus on true Web Client plugin, with a Java

service layer, and a UI either in Flex or HTML

30

SDK Roadmap (cont’d)

New HTML/Javascript plugin support

• Coming with the existing VWC 5.5 platform!

• Full SDK support, all extensions are supported

• Easiest transition to future HTML 5 platform

• Use the HTML widgets and Javascript libraries of your choice

• Add or re-use Java services in the mid-tier

• Possible to mix Flex and HTML

Beta-release coming soon

31

HTML Bridge Overview

vCenter 1.. N

Back-end Server

or Database

Web

Client

App

Server

• Data Manager

secure AMF channel

vSphere Web Service SDK

UI Flex Platform

Java Platform

Partners Back-ends

VWC platform

VMware

Any remote access API

Html views invoked by bridge.

Javascript callbacks available

for some Flex APIs

REST apis to get/post

data with java controllers

Integration at the data level

is independent of the UI

rendering technology

VWC UI plugins 3rd party Flex plugins HTML plugins

HTML

Bridge • Data Access API

• Extension points

VWC adapters

3rd party controllers

3rd party data adapters

3rd party services

Controllers get data through

Data Manager, or call

services to access back-end

Solution can mix Flex & Html

HTTPS Ajax

32

HTML Bridge Demo

33

• TAP Access membership includes:

New TAP Access NFR Bundle

• Access to NDA Roadmap sessions at VMworld, PEX and Onsite/Online

• VMware Solution Exchange (VSX) and Partner Locator listings

• VMware Ready logo (ISVs)

• Partner University and other resources in Partner Central

• TAP Elite includes all of the above plus:

• 5X the number of licenses in the NFR Bundle

• Unlimited product technical support

• 5 instances of SDK Support

• Services Software Solutions Bundle

• Annual Fees

• TAP Access - $750

• TAP Elite - $7,500

• Send email to tapalliance@vmware.com

TAP Membership Renewal – Great Benefits

34

TAP

• TAP support: 1-866-524-4966

• Email: tapalliance@vmware.com

• Partner Central:

http://www.vmware.com/partners/partners.html

TAP Team

• Kristen Edwards – Sr. Alliance Program Manager

• Sheela Toor – Marketing Communication Manager

• Michael Thompson – Alliance Web Application Manager

• Audra Bowcutt –

• Ted Dunn –

• Dalene Bishop – Partner Enablement Manager, TAP

TAP Resources

VMware Solution Exchange

• Marketplace support –

vsxalliance@vmware.com

• Partner Marketplace @ VMware

booth pod TAP1

THANK YOU

vSphere UI Platform Best Practices: Putting the Web

Client SDK Into Action

Max Daneri, VMware

Laurent Delamare, VMware

Nimish Sheth, VMware

TEX4845