WidgetTutorial

PersonalLearningEnvironment

Organizationalissues

•  Choosealearningwidget(learningobject)todevelop:

•  Realizeyourownidea•  LearningObjectsarewidgetsthathelptounderstand/learn/practiceasubjectbetter,moreefficient)–  Takeasubjectwhereyouaregoodat– Definealearnscenario– Makeawidgetoutofit–  LinearAlgebra,Mathematics,Physics,…

•  ManyexampleinPLE(https://my.tugraz.at)=>learningpool,orhttp://learningapps.org

Featurestobesupported

•  Portability– W3CWidgetSpecification(PLEversion)

•  Styleability*–  jQueryMobileUI&CSSFramework

•  Extendibility,Maintainability*– ProvidedJavaScriptModularMVCFramework

•  Localization– GermanandEnglish,optionalotherlanguages

•  UseTemplates

Widgets

•  Window+Gadget •  Presentationlayer+Clientsidelogic•  Browserbased,Desktop,Mobile•  Differentimplementations

– Netvibes,iGoogle,protopage,pageflakes

•  WidgetsinPLEasWidgetcontainer

Widgetpackaging•  Widgetfolderstructure:

– Must•  Containindex.html

–  Maindocumentofwidget,displayedinPLE,shouldproducevalid(X)HTMLmarkup

•  Containconfig.xml–  Manifest(configuration)file,containsinformationnecessaryfor

widgetinitialization:widget'sname,identity,geometry,description,author,iconreference,preferences,…

– Must•  Containicon.png(100*100pxviewableifscaledto16*16px)

– May•  Containotherfilesorsubdirectories(Images,js,css,…)

Widgetfolderstructurei.e.•  helloWorldWidget

–  index.html–  config.xml–  icon.png–  Js

•  controller.init.js•  helper.init.js

–  Css•  mvc.min.css

–  images•  load.gif

WidgetConfigurationFile

•  Rootelement:widget•  2nsused

– xmlns:http://www.w3.org/TR/widgets/–  xmlns:palette:http://palette.ercim.org/ns/

•  Attributes(mustbepresent)–  Id,height,width

•  Childelements– Title,author,description,icon,preferences,…

WidgetConfigurationFilei.e.

<widgetxmlns=http://www.w3.org/TR/widgets/xmlns:palette=http://palette.ercim.org/ns/id=”helloWorldWidget”

width=”200”height=”300”>

<title>HelloWorld!</title><iconsrc="icon.png"width="16"height="16"/><authorurl="http://mmustermann.com"

email="mm@example.org">Mustermann</author><description>WidgetDescription</description></widget>

palette:preferences•  TheextensiontoW3C•  Childelements:‘palette:preference’•  The‘palette:preference’elementAttributes

–  Name•  Variablenameofthepreference•  ^[a-zA-Z0-9_]+$

–  display_name•  displaysalongsidetheuserpreferencesintheeditwindow

–  datataype•  indicatesthedatatypeofthisattribute•  string,bool,number,hidden,enumeration

–  default_value•  userpreference'sdefaultvalue

palette:preferencesi.e.

<palette:preferences><palette:preferencename="name"display_name="Firstname"datatype="string"/>

<palette:preferencename="age"display_name="Age"datatype="number"/>

</palette:preferences>

Theenumerationelement

•  Childofpreferenceelement•  Attributes

– Value•  Valueoftheuserpreference•  ^[a-zA-Z0-9_]+$

–  Display_value•  Displayalongsidetheuserpreferencesintheeditwindow

Theenumerationelementi.e.

<palette:preferences><palette:preferencename="lang"display_name="Language"datatype="enumeration"default_value="fr">

<palette:enumerationvalue="fr"display_value="French"/><palette:enumerationvalue="de"display_value="German"/><palette:enumerationvalue="en"display_value="English"/>

</palette:preference></palette:preferences>

WidgetScriptingInterface•  method<datatype>getPreference(stringkey)

–  returnthevalueoftheuserpreferencewhoseattributenamecorrespondstothekey

•  Built-inXHRfunctions:–  methodvoidhttpGet(stringURI,mapparams,functioncallback,

functionerrorCallback)–  methodvoidhttpPost(stringURI,mapparams,functioncallback,

functionerrorCallbac,[stringcontentType])–  methodvoidhttpGetJSON(stringURI,mapparams,functioncallback,

functionerrorCallbac)•  Others:setter&getterfortitle,height,...

Built-inXHRfunctions•  Params:

–  key/valuepairsthatwillbesenttotheserver•  Callback,errorCallback:

–  Theresultoftherequestpassedasthefirstargument–  isintelligentlyparsed

•  AseitherresponseXMLorresponseText•  ForhttpGetJson:jsonformat

•  ContentType:–  Optional,ignoredifparamsisanobject

•  URI:–  ItMUSTbearelativepath(./)forlocalXHRs–  ItMUSTbeanabsolutepath(http://…)forcrossdomainrequests

XHR(Ajax)Noticesi.e.

–  methodvoidhttpGet(stringURI,mapparams,functioncallback,functionerrorCallback)

–  Noreturnvalue(void)–  Asynchronousprocessing–  SendaGETrequesttoURI–  Sendtheparametersparams–  Oncetheresponsearrives:

•  Ifsuccessfull(HTTPCode==200)–  Callcallback()

•  Iffailed(HTTPCode!=200)–  CallerrorCallback()

Widgetobject

•  ProvidesaccesstoWidgetScriptingInterface–  i.e.Widget().setTitle(‘mywidget’);–  i.e.varusername=Widget().getPreference('username');–  i.eWidget().httpGet('a.txt',null,function(data){alert(data);});

– Otherexamples:•  vardt=Widget().getDefaultTitle();•  vart=Widget().getTitle();•  varh=Widget().getHeight();•  Widget().openURL(„http://tugraz.at“);

•  AccessibleafterWidgetisready=>function‘onWidgetReady()’

WDE

•  WidgetDevelopmentEnvironment– Widgetfoldernamemustbeidenticaltowidgetidspecifiedinconfig.xml

–  TorunWDEandyourwidgetinbrowser:– Eithercall[path/to/WDE/]index.html?MMIS115•  Useownapacheserver:http://localhost/?MMIS115

– Usebuilt-inwebconsoleinbrowser•  ToseethepossibleJSerrors•  Toseedebugmessages

– Usefunction‘debug()’towritedebuginfointotheconsole

jQueryMobileUserInterface

•  jQueryFramework:http://jquery.com/

•  jQueryMobileUI:http://jquerymobile.com

•  jQueryMobileUIDemos&Documentations:– http://jquerymobile.com

•  jQueryMobilethemes– http://demos.jquerymobile.com/1.4.5/– YoushouldusethelastversionofjQueryframework,MobileUI

•  Includeviabower!!!

JavaScriptMVCFramework

Model as data layer - Application data

View as presentation layer - GUI & response to user events

Controller as logic layer - Bridges the gap between two layers

SimpleMVCFramework

Module pattern

Singleton paradigm

Support for private data

Implemented in closure functions

Resemblance to OO classes in server-side programming languages

Simple MVC

Notices

Controllercontrolseverything(logiclayer),doesNODOMmanipulation

Controllerhasnormallythelargestsandbox

ControllertalkswithModelandViewandHelfersifneeded

ViewtalksONLYwithController(eventhandling),andHelfers(Template)ifneeded

ModeltalksnormallywithNOmodules

NEVERuseglobalobjects,puttheminsandboxinstead

NEVERcreateglobalobjects,Donotforget“var”

InteractionswithHTMLisdoneONLYinView

ConsiderCodingstandard

WidgetDesign

Source:http://mockupstogo.net/rich-internet-application-sample-2

Messages:ArrayofstringLinks:ArrayofstringFiles:ArrayofobjectsFile.nameFile.size….Events:arrayofobjectsEvent.dateEvent.place…SaveEvent()getEvent()setLinks()……

PostMassag()showMessages()showLinks()……….

EventhandlinginView

Model Controller

Viewmockup(HTML+CSS+JScode)

$(“#post”).click(function(){varm=$(“input”).value();Conteroller.postMessage(m);});….

WidgetsforservicesonWWW

�  CrossdomainrequestsNOTPOSSIBLEdirectlyperAJAX�  AProxyneededonthesameservertobypasstherequests

�  TheWDEboxprovidesyouabuilt-inproxy�  UseWDEboxtodevelop

�  JustuseXHRfunctionsofWidget()objectasiftheAPIswereonthesamedomain

Widgetsforanownwebservice??

•  Allowedonlyinexceptionalcases,if•  thewidgetisextremelyusefulforthelearningcommunity

•  theserversidecodecannotbeimplementedinJS

•  Writemeanemailforapprovalandprocedure•  Keepitsosimpleaspossible(e.g.PHPscripts)•  ProvideaWebServiceforyourapplication(API)

– PreferablyJSONP– OtherwiseusetheAPIthroughthebuilt-inproxy.

Widget

Proxy

WWW Cloud Services:

Slideshare GVB OEBB RSS ….

Widget: client side logic with JavaScript -  Use no proxy if possible

-  JSONP

-  Use proxy

XHR requests / responses

To be continued with practical examples….

E-Mail: b.taraghi(at)tugraz.at

NG: tu-graz.lv.mmis