adam peller interoperable ajax tools and mashups
Post on 06-May-2015
2.557 Views
Preview:
TRANSCRIPT
Interoperable Ajax Tools and Mashups
Jon FerraioloAdam PellerIBM and OpenAjax Alliance
Sept. 14, 2009
2Interoperable Ajax Tools and Mashups
Agenda
Introducing OpenAjax Alliance Interoperability with Ajax Tools – OpenAjax
Metadata Interoperability with Ajax Mashups –
OpenAjax Hub Demo, Wrap-up, Q&A
Introducing OpenAjax Alliance Interoperability with Ajax Tools – OpenAjax
Metadata Interoperability with Ajax Mashups –
OpenAjax Hub Demo, Wrap-up, Q&A
3Interoperable Ajax Tools and Mashups 3
OpenAjax Alliance
Consortium of leading vendors, open source projects, and individual members
Mission is to promote success of Open Web technologies, particularly Ajax (HTML + JavaScript + …)
Key focus is interoperability - ability to mix and match solutions from Ajax technology providers
Consortium of leading vendors, open source projects, and individual members
Mission is to promote success of Open Web technologies, particularly Ajax (HTML + JavaScript + …)
Key focus is interoperability - ability to mix and match solutions from Ajax technology providers
4Interoperable Ajax Tools and Mashups 4
Membership
120 members, mostly companies, some individuals
Big guys: Cisco, Google, IBM, Oracle, SAP
Ajax toolkits: Backbase, Dojo, DWR, jQuery, Laszlo
Tools: Adobe, Aptana, Eclipse, IBM/Rational, Microsoft
Mobile: FranceTelecom/Orange, Opera, Vodafone
Other standards organizations: Eclipse, HR-XML, W3C
Ajax “users”: American Greetings, Fidelity, MITRE
120 members, mostly companies, some individuals
Big guys: Cisco, Google, IBM, Oracle, SAP
Ajax toolkits: Backbase, Dojo, DWR, jQuery, Laszlo
Tools: Adobe, Aptana, Eclipse, IBM/Rational, Microsoft
Mobile: FranceTelecom/Orange, Opera, Vodafone
Other standards organizations: Eclipse, HR-XML, W3C
Ajax “users”: American Greetings, Fidelity, MITRE
5Interoperable Ajax Tools and Mashups
OpenAjax Alliance Scope of Activities
Interoperability Ajax IDEs (OpenAjax Metadata for JS APIs and Widgets)
today’s focus Mashups and widgets (OpenAjax Hub 2.0 & Metadata) today’s
focus Ajax client libraries (OpenAjax Registry)
Browser wishlist 2008: chaired by Nexaweb and IBM 2009: chaired by Microsoft
Ajax Security White paper: “Ajax and Mashup Security” Mashup single sign-on
Mobile Ajax White paper: “Introduction to Mobile Ajax for Developers” Device APIs initiative (2007-2008, transitioned to OMTP and W3C)
Ajax Accessibility RIA accessible tooling – conformance requirements, tools and
best practices
Marketing, education and evangelism
Interoperability Ajax IDEs (OpenAjax Metadata for JS APIs and Widgets)
today’s focus Mashups and widgets (OpenAjax Hub 2.0 & Metadata) today’s
focus Ajax client libraries (OpenAjax Registry)
Browser wishlist 2008: chaired by Nexaweb and IBM 2009: chaired by Microsoft
Ajax Security White paper: “Ajax and Mashup Security” Mashup single sign-on
Mobile Ajax White paper: “Introduction to Mobile Ajax for Developers” Device APIs initiative (2007-2008, transitioned to OMTP and W3C)
Ajax Accessibility RIA accessible tooling – conformance requirements, tools and
best practices
Marketing, education and evangelism
6Interoperable Ajax Tools and Mashups
Agenda
Introducing OpenAjax Alliance Interoperability with Ajax Tools – OpenAjax
Metadata Interoperability with Ajax Mashups –
OpenAjax Hub Demo, Wrap-up, Q&A
Introducing OpenAjax Alliance Interoperability with Ajax Tools – OpenAjax
Metadata Interoperability with Ajax Mashups –
OpenAjax Hub Demo, Wrap-up, Q&A
7Interoperable Ajax Tools and Mashups
What should be possible
(JSDT and WTP)
Ajax Developer Tools:
(and many more ….)
Ajax Toolkits:
• Dojo/Dijit
• ExtJS
• jQuery/jQueryUI
• MooTools
• Prototype
• qooxdoo
• script.aculo.us
• Spry
• YUI
(and countless more ….)
Plug-and-Play Interoperability
8Interoperable Ajax Tools and Mashups
Key IDE features to enable
Code assistCode assist WYSIWYG authoringwith widgets
WYSIWYG authoringwith widgets
9Interoperable Ajax Tools and Mashups
What we have today A sparse matrix
Only a small percentage of matches between N toolkits x M tools
Monolithic tool/toolkit combinations In order to use a particular developer tool, you have to commit to a
particular platform Examples: Backbase, Dreamweaver CS3, Ext 2.0 IDE, TIBCO GI,
WaveMaker
A handful of tools support multiple Ajax toolkits by leveraging abstractions Aptana:
• Intelligent code assist for Dojo, Ext, jQuery, MochiKit, MooTools, Prototype, script.ac.ulous, Spry
• Achievable via ScriptDocXML and OpenAjax Metadata (for JavaScript APIs)
Adobe Dreamweaver CS4• Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)• Achievable via Dreamweaver Extensions and OpenAjax Metadata (for
Ajax widgets) Eclipse JSDT
• Intelligent code assist for OpenAjax Metadata (for JavaScript APIs) IBM Rational Application Developer
• Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)• Achievable via OpenAjax Metadata (for Ajax widgets)
A sparse matrix Only a small percentage of matches between N toolkits x M tools
Monolithic tool/toolkit combinations In order to use a particular developer tool, you have to commit to a
particular platform Examples: Backbase, Dreamweaver CS3, Ext 2.0 IDE, TIBCO GI,
WaveMaker
A handful of tools support multiple Ajax toolkits by leveraging abstractions Aptana:
• Intelligent code assist for Dojo, Ext, jQuery, MochiKit, MooTools, Prototype, script.ac.ulous, Spry
• Achievable via ScriptDocXML and OpenAjax Metadata (for JavaScript APIs)
Adobe Dreamweaver CS4• Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)• Achievable via Dreamweaver Extensions and OpenAjax Metadata (for
Ajax widgets) Eclipse JSDT
• Intelligent code assist for OpenAjax Metadata (for JavaScript APIs) IBM Rational Application Developer
• Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)• Achievable via OpenAjax Metadata (for Ajax widgets)
10
Interoperable Ajax Tools and Mashups
Leading developer tools came together in the OpenAjax Alliance
IDE Working Group Aptana Studio
Adobe Dreamweaver (Spry toolkit)
Eclipse JSDT
Microsoft Visual Studio (ASP.NET AJAX toolkit)
IBM Rational Application Developer
Sun jMaki/Netbeans
TIBCO (GI toolkit)
OpenLink SW (OAT framework)
Aptana Studio
Adobe Dreamweaver (Spry toolkit)
Eclipse JSDT
Microsoft Visual Studio (ASP.NET AJAX toolkit)
IBM Rational Application Developer
Sun jMaki/Netbeans
TIBCO (GI toolkit)
OpenLink SW (OAT framework)
11
Interoperable Ajax Tools and Mashups
Advantages of universal plug&play
Standards improve industry efficiency Ajax tools only have to consume a single standard format
in order to work with all toolkits Ajax toolkits only have to generate a single standard
format in order to work with all tools Tools and toolkits don’t have to have one-off meetings to
coordinate integration efforts (and continue to meet with each new release)
Standards unlock innovation Toolkit and tool developers can work on important new
features
Ajax developers can choose best-of-breed solutions Ajax should not have to commit to a particular toolkit in
order to use a particular developer tool
Standards improve industry efficiency Ajax tools only have to consume a single standard format
in order to work with all toolkits Ajax toolkits only have to generate a single standard
format in order to work with all tools Tools and toolkits don’t have to have one-off meetings to
coordinate integration efforts (and continue to meet with each new release)
Standards unlock innovation Toolkit and tool developers can work on important new
features
Ajax developers can choose best-of-breed solutions Ajax should not have to commit to a particular toolkit in
order to use a particular developer tool
12
Interoperable Ajax Tools and Mashups
Solution: OpenAjax Metadata OpenAjax Metadata for JavaScript APIs
Embraced an industry leader: Aptana ScriptDoc XML Standard stuff: <class>, <namespace>, <method>,
<parameter>, etc. Open source
• JSDoc to OpenAjax Metadata (extension to JSDoc Toolkit)• YUI to OpenAjax Metadata (and probably vice versa)
OpenAjax Metadata for Widgets Embraced an industry leader: Adobe Dreamweaver
widget format Standard stuff: <widget>, <content>, <require>,
<author>, <icon>, etc. Open source
• OpenAjax widget loader• Sample widgets• Reference implementation of a simple mashup editor
OpenAjax Metadata for JavaScript APIs Embraced an industry leader: Aptana ScriptDoc XML Standard stuff: <class>, <namespace>, <method>,
<parameter>, etc. Open source
• JSDoc to OpenAjax Metadata (extension to JSDoc Toolkit)• YUI to OpenAjax Metadata (and probably vice versa)
OpenAjax Metadata for Widgets Embraced an industry leader: Adobe Dreamweaver
widget format Standard stuff: <widget>, <content>, <require>,
<author>, <icon>, etc. Open source
• OpenAjax widget loader• Sample widgets• Reference implementation of a simple mashup editor
13
Interoperable Ajax Tools and Mashups
OpenAjax Metadata: why XML (vs JSON)?
Started from two existing XML formats JavaScript APIs: Aptana ScriptDoc XML Widgets: Adobe Dreamweaver widget format
XML had a couple of advantages Validation – could provide validation tool for developers to
check their files Extensibility – via namespaces (Dreamweaver uses this in a
couple of places)
But OAA members realize the benefits of JSON, so: Designed XML format so that there was a straightforward
mapping into JSON Architected the open source implementation into two
phases• Step 1: XML to JSON preprocessor (can be done on server or
batch process)• Step 2: All subsequent logic uses the JSON
Future version of OpenAjax Metadata might define a JSON option version 1.1?
Started from two existing XML formats JavaScript APIs: Aptana ScriptDoc XML Widgets: Adobe Dreamweaver widget format
XML had a couple of advantages Validation – could provide validation tool for developers to
check their files Extensibility – via namespaces (Dreamweaver uses this in a
couple of places)
But OAA members realize the benefits of JSON, so: Designed XML format so that there was a straightforward
mapping into JSON Architected the open source implementation into two
phases• Step 1: XML to JSON preprocessor (can be done on server or
batch process)• Step 2: All subsequent logic uses the JSON
Future version of OpenAjax Metadata might define a JSON option version 1.1?
14
Interoperable Ajax Tools and Mashups
OpenAjax Metadata for JavaScript APIs
Sample JavaScript with JSDoc
/** * Processes a method found in the JSDoc data structure. * Produces an OpenAjax 'method' element. * @param {object} method JSDoc object that holds info on this method * @param {number} indent Current indent level for pretty printing */ this.method_element = function(method, indent) { … }
Corresponding OpenAjax Metadata
<method name="method_element"> <description> Processes a method found in the JSDoc data structure. Produces an OpenAjax 'method' element. </description> <parameter name="method" datatype="Object" usage="required"> <description>JSDoc object that holds info on method</description> </parameter> <parameter name="indent" datatype="Number" usage="required"> <description>Current indent level for pretty printing</description> </parameter> </method>
Sample JavaScript with JSDoc
/** * Processes a method found in the JSDoc data structure. * Produces an OpenAjax 'method' element. * @param {object} method JSDoc object that holds info on this method * @param {number} indent Current indent level for pretty printing */ this.method_element = function(method, indent) { … }
Corresponding OpenAjax Metadata
<method name="method_element"> <description> Processes a method found in the JSDoc data structure. Produces an OpenAjax 'method' element. </description> <parameter name="method" datatype="Object" usage="required"> <description>JSDoc object that holds info on method</description> </parameter> <parameter name="indent" datatype="Number" usage="required"> <description>Current indent level for pretty printing</description> </parameter> </method>
15
Interoperable Ajax Tools and Mashups
OpenAjax Metadata for JavaScript APIs
Sample JavaScript with JSDoc
/** * Processes a method found in the JSDoc data structure. * Produces an OpenAjax 'method' element. * @param {object} method JSDoc object that holds info on this method * @param {number} indent Current indent level for pretty printing */ this.method_element = function(method, indent) { … }
Corresponding OpenAjax Metadata
<method name="method_element"> <description> Processes a method found in the JSDoc data structure. Produces an OpenAjax 'method' element. </description> <parameter name="method" datatype="Object" usage="required"> <description>JSDoc object that holds info on method</description> </parameter> <parameter name="indent" datatype="Number" usage="required"> <description>Current indent level for pretty printing</description> </parameter> </method>
Sample JavaScript with JSDoc
/** * Processes a method found in the JSDoc data structure. * Produces an OpenAjax 'method' element. * @param {object} method JSDoc object that holds info on this method * @param {number} indent Current indent level for pretty printing */ this.method_element = function(method, indent) { … }
Corresponding OpenAjax Metadata
<method name="method_element"> <description> Processes a method found in the JSDoc data structure. Produces an OpenAjax 'method' element. </description> <parameter name="method" datatype="Object" usage="required"> <description>JSDoc object that holds info on method</description> </parameter> <parameter name="indent" datatype="Number" usage="required"> <description>Current indent level for pretty printing</description> </parameter> </method>
16
Interoperable Ajax Tools and Mashups
OpenAjax Metadata for JavaScript APIs
Main elements
<alias> <ancestor> <class> <constructor> <event> <exception> <globals> <handlerFunction> <interface> <method> <mix> <mixin> <namespace> <parameter> <property> <returnType> <singleton>
Main elements
<alias> <ancestor> <class> <constructor> <event> <exception> <globals> <handlerFunction> <interface> <method> <mix> <mixin> <namespace> <parameter> <property> <returnType> <singleton>
Other features
Localization (compatible with OpenSocial) Descriptive metadata:<description>, <shortDescription>, <example>, etc. Datatypes: ‘datatype’ and ‘format’
attributes‘format’ is mostly for widgets. Gives hint to IDE about what
type of special UI to use within property editor. For example, format=“color” might result in color picker.
Enumerations: <enum>, <options>, <option>
Object literals: <config> Required vs. optional #Occurrences (e.g., zero or more, exactly
one, …) Function prototype definitions<parameter name=“foo” datatype=“Function”> <parameter name=“opts” datatype=“Object”/></parameter> Factory methods Compatibility metadata<userAgent>, <available>, <deprecated> Variable substitutionPrimary usage scenario are widgets.
Other features
Localization (compatible with OpenSocial) Descriptive metadata:<description>, <shortDescription>, <example>, etc. Datatypes: ‘datatype’ and ‘format’
attributes‘format’ is mostly for widgets. Gives hint to IDE about what
type of special UI to use within property editor. For example, format=“color” might result in color picker.
Enumerations: <enum>, <options>, <option>
Object literals: <config> Required vs. optional #Occurrences (e.g., zero or more, exactly
one, …) Function prototype definitions<parameter name=“foo” datatype=“Function”> <parameter name=“opts” datatype=“Object”/></parameter> Factory methods Compatibility metadata<userAgent>, <available>, <deprecated> Variable substitutionPrimary usage scenario are widgets.
17
Interoperable Ajax Tools and Mashups
Tool support (JS APIs) Eclipse provides JavaScript
code assist via JSDT using OpenAjax Metadata
Has been shipping support for OpenAjax Metadata since late 2008
Aptana provides JavaScript code assist for any of the following:
ScriptDocXML or OpenAjax Metadata files (two formats are very similar)
ScriptDoc inline comments (similar to JSDoc)
http://aptana.com/dev/index.php/Adding_support_for_a_new_Ajax_library#Adding_Code_Assist
Microsoft Visual Studio Regular attendee in
committee meetings, valuable contributions, but no public statements so far about product support
Eclipse provides JavaScript code assist via JSDT using OpenAjax Metadata
Has been shipping support for OpenAjax Metadata since late 2008
Aptana provides JavaScript code assist for any of the following:
ScriptDocXML or OpenAjax Metadata files (two formats are very similar)
ScriptDoc inline comments (similar to JSDoc)
http://aptana.com/dev/index.php/Adding_support_for_a_new_Ajax_library#Adding_Code_Assist
Microsoft Visual Studio Regular attendee in
committee meetings, valuable contributions, but no public statements so far about product support
Mozilla Bespin Under consideration
18
Interoperable Ajax Tools and Mashups
OpenAjax Metadata for Widgets<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
19
Interoperable Ajax Tools and Mashups
OpenAjax Metadata for Widgets<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
<widget> is the root element.
20
Interoperable Ajax Tools and Mashups
OpenAjax Metadata for Widgets<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
<library> and <require> elements identify the dependencies, such as the Ajax libraries and supplemental files (e.g., calendar.js) needed by this widget.
21
Interoperable Ajax Tools and Mashups
OpenAjax Metadata for Widgets<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
<property> elements specify the list of widget parameters that should appear in property editor dialogs.
You can make the widget “mashable” by enabling cross-widget property sharing via the ‘sharedAs’ attribute and cross-widget pubsub via the <topic> element (not shown).
22
Interoperable Ajax Tools and Mashups
OpenAjax Metadata for Widgets<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>
<content> element contains the HTML snippet for the visual rendering of the widget.
23
Interoperable Ajax Tools and Mashups
Industry support (Widgets) Dreamweaver CS4 uses OpenAjax
Widgets as a preferred way to import contributed widgets With CS4, transitioned from
Dreamweaver’s old proprietary widget format to OpenAjax’s format
Works with most Ajax toolkits: Dojo, ExtJS, jQueryUI, YUI, etc.
Can post your widgets at Dreamweaver Exchange
http://labs.adobe.com/wiki/index.php/Dreamweaver_Widget_Packager:Developer%27s_Guide_to_the_WDF
IBM Rational Application Developer
IBM Blue Spruce: “Collaborative Web”
Demos or in process: IBM Mashup Center, TIBCO, SAP, RadWebTech
Dreamweaver CS4 uses OpenAjax Widgets as a preferred way to import contributed widgets With CS4, transitioned from
Dreamweaver’s old proprietary widget format to OpenAjax’s format
Works with most Ajax toolkits: Dojo, ExtJS, jQueryUI, YUI, etc.
Can post your widgets at Dreamweaver Exchange
http://labs.adobe.com/wiki/index.php/Dreamweaver_Widget_Packager:Developer%27s_Guide_to_the_WDF
IBM Rational Application Developer
IBM Blue Spruce: “Collaborative Web”
Demos or in process: IBM Mashup Center, TIBCO, SAP, RadWebTech
24
Interoperable Ajax Tools and Mashups
OpenAjax Metadata 1.0: current status Specification – in final review phase
http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification Word-for-word proofreading of the spec Should finish review in Oct 2009 Then send to members for finalization and approval (Nov 2009?)
Open source implementations Eclipse JSDT has implemented the JavaScript API features OpenAjax widget loader has implemented the widget features
(@OAA) Sample mashup application uses the widget loader (@OAA) and
provides sample widgets JSDoc to OpenAjax Metadata converter (@OAA) YUI to Openajax Metadata converter (@OAA) Dojo XML file for API docs is 90% the same as OpenAjax Metadata
Commercial implementations (described earlier) Adobe Dreamweaver, Aptana, IBM Rational Application Developer,
Lotus Mashups, SAP, TIBCO
Formal language schema and validator http://www.openajax.org/schema/OpenAjaxMetadata/1.0/
ValidatorPage.php
Futures – version 1.1 of OpenAjax Metadata? JSON version of OpenAjax Metadata (in addition to current XML version)? JSDoc standards?
Specification – in final review phase http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification Word-for-word proofreading of the spec Should finish review in Oct 2009 Then send to members for finalization and approval (Nov 2009?)
Open source implementations Eclipse JSDT has implemented the JavaScript API features OpenAjax widget loader has implemented the widget features
(@OAA) Sample mashup application uses the widget loader (@OAA) and
provides sample widgets JSDoc to OpenAjax Metadata converter (@OAA) YUI to Openajax Metadata converter (@OAA) Dojo XML file for API docs is 90% the same as OpenAjax Metadata
Commercial implementations (described earlier) Adobe Dreamweaver, Aptana, IBM Rational Application Developer,
Lotus Mashups, SAP, TIBCO
Formal language schema and validator http://www.openajax.org/schema/OpenAjaxMetadata/1.0/
ValidatorPage.php
Futures – version 1.1 of OpenAjax Metadata? JSON version of OpenAjax Metadata (in addition to current XML version)? JSDoc standards?
25
Demo: OpenAjax Sample Mashup Application
http://www.openajax.org/samples/mashupapp/gadgets/samples/ from OpenAjax interopFest 2008 Test implementation for metadata spec
http://www.openajax.org/samples/mashupapp/gadgets/samples/ from OpenAjax interopFest 2008 Test implementation for metadata spec
25
26
Interoperable Ajax Tools and Mashups
OpenAjax Hub 1.0 – an example
OpenAjax Hub 1.0 Example
This is a mockup of a Web application that uses UI controls from multiple Ajax toolkits.
Assume multiple Ajax toolkits:• UTILS.js – Various utils, inc. XHR
• CALENDAR.js – Calendar control
• DATAGRID.js – Powerful tables
• CHARTS.js – Charting utilities
The visual controls need to react to new server data and to each other and update their views appropriately.
27
Interoperable Ajax Tools and Mashups
Example – under the hood
<html> <head> ... <script type="text/javascript" src="OpenAjax.js"/> <script type="text/javascript" src="UTILS.js"/> <script type="text/javascript" src="CALENDAR.js"/> <script type="text/javascript" src="CHARTS.js"/> <script type="text/javascript" src="DATAGRID.js"/> <script type="text/javascript"> ... function MyCalendarCallback(...) { OpenAjax.hub.publish("myapp.newdate", newdate); } ... function NewDateCallback(eventname, publisherData, subscriberData) { ...update the given visualization widget... } OpenAjax.hub.subscribe("myapp.newdate", NewDateCallback); ... </script> </head> ...
28
Demo: OpenAjax Sample Mashup Pub-Sub example
http://www.openajax.org/samples/mashupapp/gadgets/samples/ data visualization example
http://www.openajax.org/samples/mashupapp/gadgets/samples/ data visualization example
29
Interoperable Ajax Tools and Mashups
Agenda
Introducing OpenAjax Alliance Interoperability with Ajax Tools – OpenAjax
Metadata Interoperability with Ajax Mashups –
OpenAjax Hub Demo, Wrap-up, Q&A
Introducing OpenAjax Alliance Interoperability with Ajax Tools – OpenAjax
Metadata Interoperability with Ajax Mashups –
OpenAjax Hub Demo, Wrap-up, Q&A
30
Mashup Applications
Combining data sources or services to create a new application
Easy, fast integration
Combining data sources or services to create a new application
Easy, fast integration
30
31
Interoperable Ajax Tools and Mashups
Two types of mashups
Programmer mashups Web developer creates a mashup by coding in HTML
and JavaScript
End-user mashups Non-programmer builds a mashup using mashup
assembly software
OpenAjax Hub Applies to both But particularly focused on special requirements of
end-user mashups
Programmer mashups Web developer creates a mashup by coding in HTML
and JavaScript
End-user mashups Non-programmer builds a mashup using mashup
assembly software
OpenAjax Hub Applies to both But particularly focused on special requirements of
end-user mashups
32
Interoperable Ajax Tools and Mashups
End-user mashups – the self-service business pattern
33
Interoperable Ajax Tools and Mashups
Business value of end-user mashups
• Faster, cheaper delivery of applications• Save time and money through reuse and
lightweight integration techniques• Lower skill set needed to assembly new
applications• Support innovation and new business
opportunities• Users empowered to innovate and explore• Gain valuable insights• Due to remixing enterprise and web
information• Better align IT and business• Do-it-yourself IT will be expected by
Facebook generation • Extend reach and value of SOA• Service reuse illuminates the business value
of SOA
34
Interoperable Ajax Tools and Mashups
Mashup software
• Mashup tools• Widget and feed discovery• Application assembly• Instant deployment
• Mashable Widgets • Pre-packaged, remixable mini-applications• Usually tied to a back-end web service• Sometimes leveraging previous investment in
SOA• Public or company-private
35
IBM Lotus Mashups
36
IBM Project “Blue Spruce”
collaborativeinteractive mashups
37
Interoperable Ajax Tools and Mashups
Widget innovation – no shortage
Widgets are the natural evolution path for Web Services and SOA•A widget represents the pre-packaged browser UI for a Web Services (SOA or WOA)•Already common in consumer space (e.g., Google Maps)•Will grow over time within Enterprise IT
38
Interoperable Ajax Tools and Mashups
End-User Mashup Step 1: Widget and Feed
Discovery and Cataloging
Widget Catalog•Widget-A (public data feed)•Widget-B (customized public data feed)•Widget-C (company data feed)•Widget-D (personal data)•Widget-E (3rd party widget)•Widget-F (company widget)•etc.
• Feeds• Widgets• Other data
Public site 1
Personal data
Company site 2
Public site 2
Public site 3
Company site 1
Public site 4
Data transform
Data merge and transform
(Feeds are packaged as widgets)
39
Interoperable Ajax Tools and Mashups
End-user Mashup Step 2: Mashup Assembly
Widget CatalogWidget-AWidget-BWidget-CWidget-DWidget-EWidget-Fetc.
Web browser
URL: http://example.com/mashup_builder
Widget-C Widget-E
Widget-AUser drags widgets from widget catalog and drops onto the canvas
Using the mashup tool, the mashup designer links event publishers with event subscribers.
As a result, user actions on one particular widget will cause a message to be sent to the other widgets, thereby triggering updates in those other widgets
40
Interoperable Ajax Tools and Mashups
As the mashup runs, widgets communicate with each other and
with various serversWeb browser
URL: http://example.com/mashup_builder
Widget-C Widget-E
Widget-A
Communicates in the background with one of the
company’s web servers
Company server
Communicates in the background with a public web server
Message passing
between the widgets
Public server 1
Communicates in the background with a public web server
Public server 2
41
Interoperable Ajax Tools and Mashups
Industry challenges
Security The power of mashups –
comes largely from discovering and integrating great widgets from 3rd parties
But 3rd party widgets might be malicious
Security The power of mashups –
comes largely from discovering and integrating great widgets from 3rd parties
But 3rd party widgets might be malicious
42
Interoperable Ajax Tools and Mashups
Mashup security challengeWeb browser
URL: http://example.com/mashup_builder
Widget-C Widget-E
Widget-A
Communicates in the background with one of the
company’s web servers
Company server
(trusted)
Communicates in the background with a public web server
Message passing
between the widgets
Public server 1
(untrusted)
Communicates in the background with a public web server
Public server 2
(untrusted)
What if one of the widgets is malicious? • Is it able to bridge across to other widget’s client-side
JavaScript to access company and user private information (get and set)?
• Is it able to piggyback user credentials to access other servers?
43
Interoperable Ajax Tools and Mashups
Browser Security
Browsers only offer limited ability to isolate components IFRAMEs from different domains (and subdomains)
cannot communicate with each other via DOM bridging or JavaScript bridging
In practice, two main techniques for isolating 3rd party components IFRAMEs isolation – untrusted components placed into
IFRAMEs with different domains (and subdomains) JavaScript containment – restrict untrusted components
to a well-defined subset the JavaScript language to prevent access to global JavaScript environment and other components (e.g., ADsafe, Caja). Note: ADsafe is built into JSLint.
OpenAjax Hub 2.0 uses IFRAME isolation approach Allows use of Ajax toolkits that use JavaScript features
that Caja disallows
Browsers only offer limited ability to isolate components IFRAMEs from different domains (and subdomains)
cannot communicate with each other via DOM bridging or JavaScript bridging
In practice, two main techniques for isolating 3rd party components IFRAMEs isolation – untrusted components placed into
IFRAMEs with different domains (and subdomains) JavaScript containment – restrict untrusted components
to a well-defined subset the JavaScript language to prevent access to global JavaScript environment and other components (e.g., ADsafe, Caja). Note: ADsafe is built into JSLint.
OpenAjax Hub 2.0 uses IFRAME isolation approach Allows use of Ajax toolkits that use JavaScript features
that Caja disallows
44
Interoperable Ajax Tools and Mashups
OpenAjax Hub 2.0 OpenAjax Hub 2.0 – framework for secure mashups
Client-side JavaScript Runs in today’s browsers (without plugins) Untrusted widgets are isolated into secure sandboxes
• Using IFRAMEs and browser same-domain policy Trusted widgets can be placed inline
• Using DIVs for lower overhead and faster performance All inter-widget communication managed by container
application• Mashup app provides callbacks that implement policy manager
Based on “SMash” technology from IBM Research Open-sourced (openajaxallianc.sourceforge.net) in August
2007 Research Paper describing SMash in WWW 2008 Conference
Cross-widget messaging via pub-sub APIs Key APIs: hubClient.publish() and hubClient.subscribe()
High-level APIs, independent of implementation technology Fragment communication, HTML5 postMessage, etc.
OpenAjax Hub 2.0 – framework for secure mashups Client-side JavaScript Runs in today’s browsers (without plugins) Untrusted widgets are isolated into secure sandboxes
• Using IFRAMEs and browser same-domain policy Trusted widgets can be placed inline
• Using DIVs for lower overhead and faster performance All inter-widget communication managed by container
application• Mashup app provides callbacks that implement policy manager
Based on “SMash” technology from IBM Research Open-sourced (openajaxallianc.sourceforge.net) in August
2007 Research Paper describing SMash in WWW 2008 Conference
Cross-widget messaging via pub-sub APIs Key APIs: hubClient.publish() and hubClient.subscribe()
High-level APIs, independent of implementation technology Fragment communication, HTML5 postMessage, etc.
45
Interoperable Ajax Tools and Mashups
Web browser
URL: http://example.com/mashup_builder
Widget-A
Widget-B
Malicious Widget
Communicates in the background with one of the company’s web servers
Company server
Communicates in background with a trustworthy public server
Trustworthy Public Server
Communicates in background with a malicious public server
Malicious Public Server
OpenAjax Hub 2.0 – Widget Isolation and Messaging Mediator
Hub 2.0 only permits cross-widget communication via a mediated publish/subscribe messaging bus
Hub 2.0 isolates each widget into its own sandbox
OpenAjax Hub 2.0 Security Overview
46
Interoperable Ajax Tools and Mashups
Hub 2.0 Initialization
5
Web browser
URL: http://example.com/mashup_builder/my_mashup2
Using the Managed Hub
Load OpenAjax Hub1
Create a “ManagedHub” instance, identifying security manager callbacks
2
Create containers for each component in the mashup and then load/initialize the components within those containers
3
4
As application runs, components publish messages to other components
3
Typically at initialization time, components subscribe to message topics of interest
Container
HubClient
Component-A HTML/JavaScript
Container
HubClient
Component-B HTML/JavaScript
OpenAjax.hub
ManagedHub instance
1
2
2
Security manager callbacks
3
Component subscribes to message topics: OpenAjax.hub.HubClient.subscribe(…);
4
Component publishes messages on Hub: OpenAjax.hub.HubClient.publish(…);
5
47
Interoperable Ajax Tools and Mashups
Run-time message passing with Hub 2.0
Web browser
URL: http://example.com/mashup_builder/my_mashup2
Managed Hub Message Passing
OpenAjax.hub
ManagedHub instance
Security manager callbacks
Component-B publishes a message1
IFrame container marshalls the message across browser frames
2
IFrame container sends message to Managed Hub
3
Security manager callbacks decide whether to let the message through
4
5
Component-A’s callback is invoked6
Message sent to Component-A’s container
4
IframeContainer
HubClient
Component-B HTML/JavaScriptComponent publishes messages on Hub: OpenAjax.hub.HubClient.publish(…); 1
<iframe> (for component isolation)
InlineContainer
HubClient
Component-A HTML/JavaScriptComponent subscribes to message topics: function MyCallBack() {…} OpenAjax.hub.HubClient.subscribe(…);
<div> (inline component)
2
6
3
5
48
Interoperable Ajax Tools and Mashups
OpenAjax Hub 2.0: current status
Specification – approved July 2009 Open source
Commercial-grade open source implementation Comprehensive test suite Sample mashup application uses Hub 2.0 and OA widget
loaders
White papers on OpenAjax site “Introducing OpenAjax Hub 2.0 and Secure Mashups” “OpenAjax Hub 2.0 and Mashup Assembly Applications”
Industry support – demos, in process, or stated intentions IBM Mashup Center (primary contributor to Hub 2.0 effort) TIBCO (primary contributor to Hub 2.0 effort) JackBe, RadWebTech, SAP (demo’d in 2008), Software AG Financial companies (internally)
Next step Samples that show how to use Hub 2.0 with single sign-on
technologies such as OpenID and SAML
Specification – approved July 2009 Open source
Commercial-grade open source implementation Comprehensive test suite Sample mashup application uses Hub 2.0 and OA widget
loaders
White papers on OpenAjax site “Introducing OpenAjax Hub 2.0 and Secure Mashups” “OpenAjax Hub 2.0 and Mashup Assembly Applications”
Industry support – demos, in process, or stated intentions IBM Mashup Center (primary contributor to Hub 2.0 effort) TIBCO (primary contributor to Hub 2.0 effort) JackBe, RadWebTech, SAP (demo’d in 2008), Software AG Financial companies (internally)
Next step Samples that show how to use Hub 2.0 with single sign-on
technologies such as OpenID and SAML
49
Interoperable Ajax Tools and Mashups
Mashup and Widget Interoperability
Reminder: two challenges to overcome with mashups Security (discussed in previous slides) Interoperability (this slide)
Two widget interoperability standards OpenAjax Widgets (within OpenAjax Metadata specs)
• Includes “mashable widgets” extensions• Pubsub metadata (via <topic> element)• Shared property metadata (via ‘sharedAs’ attribute on <property>
element)• Widget APIs (onLoad, onUnload, adjustDimensions, etc.)
OpenSocial Gadgets• 90% overlap with OpenAjax Widgets• But last 10% is important – e.g., mashup wiring metadata (topics and
props), inline widgets, Ajax library sharing
Two widget standards? One possible approach Have mashup applications support both OA Widgets and OS
Gadgets Use Hub 2.0 underneath for security Work with OpenSocial, Shindig to address remaining 10% needed
for user-built mashups For widgets requiring certain key features, use OA Widgets (for
time being)
Note: OpenAjax Alliance and OpenSocial Foundation are in discussions about coordinating efforts
Reminder: two challenges to overcome with mashups Security (discussed in previous slides) Interoperability (this slide)
Two widget interoperability standards OpenAjax Widgets (within OpenAjax Metadata specs)
• Includes “mashable widgets” extensions• Pubsub metadata (via <topic> element)• Shared property metadata (via ‘sharedAs’ attribute on <property>
element)• Widget APIs (onLoad, onUnload, adjustDimensions, etc.)
OpenSocial Gadgets• 90% overlap with OpenAjax Widgets• But last 10% is important – e.g., mashup wiring metadata (topics and
props), inline widgets, Ajax library sharing
Two widget standards? One possible approach Have mashup applications support both OA Widgets and OS
Gadgets Use Hub 2.0 underneath for security Work with OpenSocial, Shindig to address remaining 10% needed
for user-built mashups For widgets requiring certain key features, use OA Widgets (for
time being)
Note: OpenAjax Alliance and OpenSocial Foundation are in discussions about coordinating efforts
50
Interoperable Ajax Tools and Mashups
Agenda
Introducing OpenAjax Alliance Interoperability with Ajax Tools – OpenAjax
Metadata Interoperability with Ajax Mashups –
OpenAjax Hub Demo, Wrap-up, Q&A
Introducing OpenAjax Alliance Interoperability with Ajax Tools – OpenAjax
Metadata Interoperability with Ajax Mashups –
OpenAjax Hub Demo, Wrap-up, Q&A
51
DaVinci builder
DEMO DEMO
51
52
Interoperable Ajax Tools and Mashups
Thank you! Any questions?
For more information:
Web site: http://www.openajax.org
Wiki: http://www.openajax.org/member/wiki
Blog: http://www.openajax.org/blog
Mail list: public@openajax.org
Email: Adam Peller (apeller@us.ibm.com)
Jon Ferraiolo (jferrai@us.ibm.com)
For more information:
Web site: http://www.openajax.org
Wiki: http://www.openajax.org/member/wiki
Blog: http://www.openajax.org/blog
Mail list: public@openajax.org
Email: Adam Peller (apeller@us.ibm.com)
Jon Ferraiolo (jferrai@us.ibm.com)
top related