1. © Universidad Politécnica de Madrid How to develop a widget in Wirecloud (Application Mashup GE) Hands-on Webinar (November, 2012) Dr. Javier Soriano (jsoriano@fi.upm.es) Dr. Rafael Fernández (rfernandez@fi.upm.es) Dr. Miguel Jiménez (mjimenez@fi.upm.es) Mr. Álvaro Arranz (aarranz@conwet.com )

2. DIAPOSITIVA 2 How to develop a widget © Javier Soriano Things the developer must have in mind: Setting up the development environment Eclipse, VIM, etc... Creating the directory structure (WGT) Defining the template of the widget (config.xml) Following the WDL Template definition Creating the widget: Widget view: an HTML file + CSS Widget app logic: Javascript (using Widget API) Embedded in the HTML file In a set of *.js files (within the /js directory) Uploading the widget to Local Catalogue The WGT file is a ZIP file

3. DIAPOSITIVA 3 Setting up the developer environment © Javier Soriano

4. DIAPOSITIVA 4 Setting up the developer environment © Javier Soriano WGT Directory Structure config.xml Contains the WDL TEMPLATE definition of the widget index.html Defines the widget VIEW (and optionally the application logic) /js Directory where *.js files (APP LOGIC) are stored /css Directory where CSS files are stored /images Directory where images are stored /doc Directory where documentation web pages are stored * red-color denotes a mandatory file The rest of directories and files are optional

5. DIAPOSITIVA 5 Defining the template of the widget: config.xml © Javier Soriano The mandatory config.xml file contains the WDL XML template needed to tell Wirecloud what the widget looks like. This includes: Widget metadata User properties Variables to store the state of the widget Variables to get access to context information Widget inputs and outputs (wiring) Link to the actual widget source code Default rendering information

6. DIAPOSITIVA 6 Defining the template of the widget: config.xml © Javier Soriano

7. DIAPOSITIVA 7 Defining the template of the widget: config.xml © Javier Soriano

8. DIAPOSITIVA 8 Defining the template of the widget: config.xml © Javier Soriano

9. DIAPOSITIVA 9 Creating the widget view: HTML + CSS © Javier Soriano

10. DIAPOSITIVA 10 Creating the widget app. logic: Javascript + widget API © Javier Soriano Based on the Weather Widget available through this linkthis link Widget API is described in the Open SpecsOpen Specs The code on the right shows how to make a HTTP request to an external Web API using the Widget API

11. DIAPOSITIVA 11 Creating the widget app. logic: Javascript + widget API © Javier Soriano The following code shows how to create an input endpoint (wiring) First, it must be declared in the Template (config.xml)

12. DIAPOSITIVA 12 Creating the widget app. logic: Javascript + widget API © Javier Soriano The following code shows how to create an input endpoint (wiring) Then the MashupPlatform.wiring.registerCallback method can be used to set the function that will deal with the received event data

13. DIAPOSITIVA 13 Creating the widget app. logic: Javascript + widget API © Javier Soriano The following code shows how to create an output endpoint (wiring) Likewise the input endpoint, the output endpoint of the widget must be declared in the config.xml file And then data can be sent by using the following javascript snippet:

14. DIAPOSITIVA 14 Uploading the widget to Local Catalogue © Javier Soriano The WGT file is just a simple zip file that contains the directory structure created in the first step of this tutorial

15. DIAPOSITIVA 15 Uploading the widget to Local Catalogue © Javier Soriano The WGT file can be uploaded to Local Catalogue as shown below

16. DIAPOSITIVA 16 Resources © Javier Soriano Wirecloud website Wirecloud entry in the FIWARE catalogue Application Mashup Open Specs Resources for end users Wirecloud platform user guide Demo videos Wirecloud instance in the FI-WARE testbed Resources for administrators Wirecloud platform installation and administration guide Most updated version of the documentation Most recent version of the platform (mirror) Most recent version of the platformmirror Resources for programmers Wirecloud platform programmers guide Tutorial on how to develop a Widget from scratch Widgets and operators currently stored in the CoNWeT Lab's instance of Wirecloud. Most updated version of the documentation