Topic
  • 8 replies
  • Latest Post - ‏2013-07-24T04:14:25Z by VXM7_Sri_Koppula
zeliboba
zeliboba
10 Posts

Pinned topic developing custom widget

‏2010-12-01T12:56:45Z |
Hi, all! Anybody has experience developing custom widget?

For example: I have helloworld.html


<html> <head> <title>Dojo: Hello World!</title>   <!-- SECTION 1 --> <style type=
"text/css"> @

import 
"dojoroot/dijit/themes/tundra/tundra.css"; @

import 
"dojoroot/dojo/resources/dojo.css" </style> <script type=
"text/javascript" src=
"dojoroot/dojo/dojo.js" djConfig=
"parseOnLoad: true"></script> </head> <!-- SECTION 2 --> <script type=
"text/javascript"> dojo.require(
"dijit.form.Button"); dojo.addOnLoad(function() 
{ 
// Create a button programmatically: var button = 

new dijit.form.Button(
{ label: 
"Click me!", onClick: function() 
{ 
// Do something: dojo.byId(
"result1").innerHTML += 
"Thank you! "; 
} 
}, 
"progButtonNode"); 
});   </script> <body class=
"tundra"> <button id=
"progButtonNode" type=
"button"> </button> <div id=
"result1"> </div> </body> </html>


and I want to do mashup widget with it. I've done

helloworld.xml


<?xml version=
"1.0" encoding=
"UTF-8"?> <iw:iwidget name=
"Helloworld" xmlns:iw=
"http://www.ibm.com/xmlns/prod/iWidget" supportedModes=
"view edit" mode=
"view" iScope=
"Helloworld" allowInstanceContent=
"true"> <iw:resource uri=
"dojo.js" /> <iw:resource uri=
"Helloworld.js" /> <iw:resource uri=
"tundra.css" /> <iw:content mode=
"view"> <![CDATA[ <body class=
"tundra"> <button id=
"progButtonNode" type=
"button"> </button> <div id=
"result1"> </div> </body> ]]> </iw:content> <iw:content mode=
"edit">Something</iw:content> </iw:iwidget>


and Helloworld.js


dojo.require(
"dijit.form.Button"); dojo.addOnLoad(function() 
{ 
// Create a button programmatically: var app = 

new App(
'user'); var button = 

new dijit.form.Button(
{ label: 
"Click me!", onClick: function() 
{ 
// Do something: dojo.byId(
"result1").innerHTML += 
"Thank you! "; 
} 
}, 
"progButtonNode"); 
});


Widget works, but obviously that tundra.css and dojo.js are not connected to the widget. How should I do this correctly? Thank you.
Updated on 2010-12-10T22:19:03Z at 2010-12-10T22:19:03Z by drdamour
  • SystemAdmin
    SystemAdmin
    391 Posts

    Re: developing custom widget

    ‏2010-12-02T03:21:02Z  
    I could be wrong, but I don't believe you need to include dojo.js. You should be able to use the dojo.js included by Mashups. To troubleshoot including resources, try using an absolute URL instead of relative. eg, instead of tundra.css use http://server:port/some_path/css/tundra.css. If you are using Firefox, I would recommend checking out the Firebug plugin. It is very useful for showing what the page is loading and can help track down these types of problems.
  • drdamour
    drdamour
    52 Posts

    Re: developing custom widget

    ‏2010-12-02T23:08:41Z  
    You need to read the widget programmers guide on the mashup center wiki, it'll take you through the basic steps of widget development. Your mainn problem is you've said there will be a ecmascript class named helloworld in scope, but there isn't. You declared this with the scope attribute in your widget def. The next problem will be that the dojo addonload event you're hooking to would have fired long ago, widgets load after that event, your hello world object needs a method named onload you can do your load stuff there, but actually what you're doing would be more appropriate in your on view method.


    I am Just a new Boy,
    A Stranger in this Town,
    Where are All the Good Times,
    Who's Gonna Show this Stranger Around?
  • zeliboba
    zeliboba
    10 Posts

    Re: developing custom widget

    ‏2010-12-06T08:10:50Z  
    • drdamour
    • ‏2010-12-02T23:08:41Z
    You need to read the widget programmers guide on the mashup center wiki, it'll take you through the basic steps of widget development. Your mainn problem is you've said there will be a ecmascript class named helloworld in scope, but there isn't. You declared this with the scope attribute in your widget def. The next problem will be that the dojo addonload event you're hooking to would have fired long ago, widgets load after that event, your hello world object needs a method named onload you can do your load stuff there, but actually what you're doing would be more appropriate in your on view method.


    I am Just a new Boy,
    A Stranger in this Town,
    Where are All the Good Times,
    Who's Gonna Show this Stranger Around?
    drdamour, Thank You for your advices! Would you possible give me code of .xml and .js components of this widget? I've read guide, but I have some problems with scope definition. Thank You.
  • zeliboba
    zeliboba
    10 Posts

    Re: developing custom widget

    ‏2010-12-09T11:20:42Z  
    • zeliboba
    • ‏2010-12-06T08:10:50Z
    drdamour, Thank You for your advices! Would you possible give me code of .xml and .js components of this widget? I've read guide, but I have some problems with scope definition. Thank You.
    Hi, drdamour! I did everythig that you said. I've created class in dojobutton.js and changed OnLoad function.
    My code of dojobutton.js

    
    dojo.provide(
    "dojobutton"); dojo.require(
    "dijit.form.Button"); dojo.declare(
    "dojobutton", null, 
    { OnLoad: function() 
    { 
    // Create a button programmatically: var button = 
    
    new dijit.form.Button(
    { label: 
    "Click me!", onClick: function() 
    { 
    // Do something: dojo.byId(
    "result1").innerHTML += 
    "Thank you! "; 
    } 
    }, 
    "progButtonNode"); 
    } 
    });
    


    And use iscope "dojobutton" in dojobutton.xml

    
    <?xml version=
    "1.0" encoding=
    "UTF-8"?> <iw:iwidget name=
    "DojoButton" xmlns:iw=
    "http://www.ibm.com/xmlns/prod/iWidget" supportedModes=
    "view edit" mode=
    "view" iScope=
    "dojobutton" allowInstanceContent=
    "true"> <iw:resource uri=
    "dojobutton.js" /> <iw:resource uri=
    "dojobutton.css" /> <iw:content mode=
    "view"> <![CDATA[ <button id=
    "progButtonNode" type=
    "button"> </button> <div id=
    "result1"> </div> ]]> </iw:content> <iw:content mode=
    "edit">Something else!</iw:content> </iw:iwidget>
    

    But it still doesn't work. I have widget with button, but this button hasn't correct style and it doesn't work. What do you think about this? Thank you for your help.
  • zeliboba
    zeliboba
    10 Posts

    Re: developing custom widget

    ‏2010-12-10T08:54:00Z  
    • drdamour
    • ‏2010-12-02T23:08:41Z
    You need to read the widget programmers guide on the mashup center wiki, it'll take you through the basic steps of widget development. Your mainn problem is you've said there will be a ecmascript class named helloworld in scope, but there isn't. You declared this with the scope attribute in your widget def. The next problem will be that the dojo addonload event you're hooking to would have fired long ago, widgets load after that event, your hello world object needs a method named onload you can do your load stuff there, but actually what you're doing would be more appropriate in your on view method.


    I am Just a new Boy,
    A Stranger in this Town,
    Where are All the Good Times,
    Who's Gonna Show this Stranger Around?
    Bingo! It works... Thank you for your advices about Dojo class and OnLoad function. Next step of my widget's adventure is events wiring. This button should totally copy function of Step Completion Widget's button "Save". (with help of events and wiring I think). How can I realize it?
  • drdamour
    drdamour
    52 Posts

    Re: developing custom widget

    ‏2010-12-10T22:12:19Z  
    • zeliboba
    • ‏2010-12-10T08:54:00Z
    Bingo! It works... Thank you for your advices about Dojo class and OnLoad function. Next step of my widget's adventure is events wiring. This button should totally copy function of Step Completion Widget's button "Save". (with help of events and wiring I think). How can I realize it?
    if you read through http://www.ibm.com/developerworks/data/library/techarticle/dm-1009ecmwidgets3/index.html you'll be half way there. the strategy is to not replicate the functionality of the step completion widget, rather hide it, and work with it through the event mechanisms. Let the step completion widget do all the hard PE REST API work, you just do the still hard UI stuff.

    I am Just a new Boy,
    A Stranger in this Town,
    Where are All the Good Times,
    Who's Gonna Show this Stranger Around?
  • drdamour
    drdamour
    52 Posts

    Re: developing custom widget

    ‏2010-12-10T22:19:03Z  
    • zeliboba
    • ‏2010-12-09T11:20:42Z
    Hi, drdamour! I did everythig that you said. I've created class in dojobutton.js and changed OnLoad function.
    My code of dojobutton.js

    <pre class="jive-pre"> dojo.provide( "dojobutton"); dojo.require( "dijit.form.Button"); dojo.declare( "dojobutton", null, { OnLoad: function() { // Create a button programmatically: var button = new dijit.form.Button( { label: "Click me!", onClick: function() { // Do something: dojo.byId( "result1").innerHTML += "Thank you! "; } }, "progButtonNode"); } }); </pre>

    And use iscope "dojobutton" in dojobutton.xml

    <pre class="jive-pre"> <?xml version= "1.0" encoding= "UTF-8"?> <iw:iwidget name= "DojoButton" xmlns:iw= "http://www.ibm.com/xmlns/prod/iWidget" supportedModes= "view edit" mode= "view" iScope= "dojobutton" allowInstanceContent= "true"> <iw:resource uri= "dojobutton.js" /> <iw:resource uri= "dojobutton.css" /> <iw:content mode= "view"> <![CDATA[ <button id= "progButtonNode" type= "button"> </button> <div id= "result1"> </div> ]]> </iw:content> <iw:content mode= "edit">Something else!</iw:content> </iw:iwidget> </pre>
    But it still doesn't work. I have widget with button, but this button hasn't correct style and it doesn't work. What do you think about this? Thank you for your help.
    > zeliboba wrote:
    > Hi, drdamour! I did everythig that you said. I've created class in dojobutton.js and changed OnLoad function.
    >
    >
    > My code of dojobutton.js
    >
    >
    
    > > dojo.provide(
    "dojobutton"); > dojo.require(
    "dijit.form.Button"); > dojo.declare(
    "dojobutton", null, 
    { >         OnLoad: function() 
    { >             
    // Create a button programmatically: > >             var button = 
    
    new dijit.form.Button(
    { >                 label: 
    "Click me!", >                 onClick: function() 
    { >                     
    // Do something: >                     dojo.byId(
    "result1").innerHTML += 
    "Thank you! "; >                 
    } >             
    }, >             
    "progButtonNode"); >         
    } > 
    }); > >
    

    >
    > And use iscope "dojobutton" in dojobutton.xml
    >
    >
    
    > > <?xml version=
    "1.0" encoding=
    "UTF-8"?> > <iw:iwidget name=
    "DojoButton" xmlns:iw=
    "http://www.ibm.com/xmlns/prod/iWidget" > supportedModes=
    "view edit" mode=
    "view" iScope=
    "dojobutton" allowInstanceContent=
    "true"> >  <iw:resource uri=
    "dojobutton.js" /> >       <iw:resource uri=
    "dojobutton.css" /> >      <iw:content mode=
    "view"> >  <![CDATA[ >                               <button id=
    "progButtonNode" type=
    "button"> >                     </button> >                    <div id=
    "result1"> >                        </div> > ]]> >   </iw:content> >        <iw:content mode=
    "edit">Something else!</iw:content> > </iw:iwidget> > >
    

    >
    >
    > But it still doesn't work. I have widget with button, but this button hasn't correct style and it doesn't work. What do you think about this? Thank you for your help.
    .
    I image your problem was the case sensitivity of the onLoad method (depending on your container).

    Also you should not use dojo.byID in widgets to get a handle to an element as it's entirely possible for a user to add your widget to a page twice, thus which element you get back is undefined. instead use the iContext object's getElementById method which will ensure you're getting the element in the current instance of the widget. ou kind of have to unlearn a lot of dojo to get it right.

    eg:

    
    dojo.provide(
    "dojobutton"); dojo.require(
    "dijit.form.Button"); dojo.declare(
    "dojobutton", null, 
    { ButtonClick : function() 
    { 
    // Do something: this.iContext.getElementById(
    "result1").innerHTML += 
    "Thank you! "; 
    }, OnLoad: function() 
    { 
    // Create a button programmatically: var button = 
    
    new dijit.form.Button(
    { label: 
    "Click me!", onClick: ButtonClick 
    }, 
    "progButtonNode"); 
    } 
    });
    


    the iContext member is provided on your class instance by the container, it contains many useful container functions.


    I am Just a new Boy,
    A Stranger in this Town,
    Where are All the Good Times,
    Who's Gonna Show this Stranger Around?
  • VXM7_Sri_Koppula
    VXM7_Sri_Koppula
    2 Posts

    Re: developing custom widget

    ‏2013-07-24T04:14:25Z  
    • drdamour
    • ‏2010-12-10T22:12:19Z
    if you read through http://www.ibm.com/developerworks/data/library/techarticle/dm-1009ecmwidgets3/index.html you'll be half way there. the strategy is to not replicate the functionality of the step completion widget, rather hide it, and work with it through the event mechanisms. Let the step completion widget do all the hard PE REST API work, you just do the still hard UI stuff.

    I am Just a new Boy,
    A Stranger in this Town,
    Where are All the Good Times,
    Who's Gonna Show this Stranger Around?

    Hi,

    I have the same issue while trying to deploy a custom widget. I am deployed the custom widget and using it in the case manager application.

    I have tried changing the onLoad method to OnLoad. whatsoever my widget does not get the dojo working and does not getting the correct styles.

    Any help on this is higly appreciated! I badly need the dojo working in my widget as I have lot of REST services that needs to be used for my project.

     

    Thanks,

    Sri