How to develop a widget in Wirecloud Application

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 Universidad Politécnica de Madrid )

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

Setting up the developer environment © Javier Soriano DIAPOSITIVA 3

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

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

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

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

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

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

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

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

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

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

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

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

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