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

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
    ACCEPTED ANSWER

    Re: developing custom widget

    ‏2010-12-02T03:21:02Z  in response to zeliboba
    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
    ACCEPTED ANSWER

    Re: developing custom widget

    ‏2010-12-02T23:08:41Z  in response to zeliboba
    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
      ACCEPTED ANSWER

      Re: developing custom widget

      ‏2010-12-06T08:10:50Z  in response to drdamour
      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
        ACCEPTED ANSWER

        Re: developing custom widget

        ‏2010-12-09T11:20:42Z  in response to zeliboba
        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.
        • drdamour
          drdamour
          52 Posts
          ACCEPTED ANSWER

          Re: developing custom widget

          ‏2010-12-10T22:19:03Z  in response to zeliboba
          > 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?
    • zeliboba
      zeliboba
      10 Posts
      ACCEPTED ANSWER

      Re: developing custom widget

      ‏2010-12-10T08:54:00Z  in response to drdamour
      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
        ACCEPTED ANSWER

        Re: developing custom widget

        ‏2010-12-10T22:12:19Z  in response to zeliboba
        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?
        • VXM7_Sri_Koppula
          VXM7_Sri_Koppula
          2 Posts
          ACCEPTED ANSWER

          Re: developing custom widget

          ‏2013-07-24T04:14:25Z  in response to drdamour

          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