Topic
7 replies Latest Post - ‏2011-03-28T08:17:21Z by SystemAdmin
SystemAdmin
SystemAdmin
9224 Posts
ACCEPTED ANSWER

Pinned topic Getting dojo widget in iwidget

‏2008-12-15T10:13:31Z |
NOTE: this thread was migrated from projectzero.org. Some content and formatting may have been lost in the move.


Originally posted by projectzero userid: khit - f=4&t=1413#p5895
Hello,
Does anyone know how to get dojo widget in iWidget?
I tried dijit.byId("_" + this.iContext.widgetId + "_xxx") and set my dijit's id "_IWID_xxx". but it's not worked. (otherwise it worked for dojo.byId)

here is some my codes.
myiwidgets.xml

<br/> <!-- abbr --><br/> <iw&#58;content mode=
"view"><br/> <![CDATA[<br /> <span><br/> <!-- abbr --><br/> <div dojoType=
"dijit.layout.ContentPane" <br/> title=
"Pane"<br/> style=
"width: 500px; height: 328px;"<br/> class=
"dijitContentPane"><br/> <div id=
"_IWID_grid" <br/> dojoType=
"dojox.Grid"<br/> style=
"width: 470px; height: 265px;"<br/> model=
"gridModel" structure=
"layout"/><br/> </div><br/> </span><br/> ]]><br/> </iw&#58;content><br/> <!-- abbr --><br/>


myiwidgets.js

<br/> dojo.declare(
"helloScope",null,
{ <br/> onReceiveName:function(iEvent)
{ <br/> var data = iEvent.payload;<br/> 

if (typeof data == 
"undefined" || data == 

null) 
{

return;
} <br/> var name = data.enteredName;<br/> this.submit(name);<br/> 
},<br/> <br/> submit: function(key) 
{ <br/> 
//var myGridNode = this.iContext.getElementById("grid");<br/> var gridid = 
"_" + this.iContext.widgetId + 
"_grid"; <br/> console.debug (gridid);<br/> var myGridNode = dojo.byId(gridid); 
//worked<br/> console.debug (myGridNode);<br/> var myGrid = dijit.byId(gridid);  
//undifined..<br/> <br/> 
//abbr<br/> <br/> 
}<br/> <br/> 
});<br/>



thanks.
Updated on 2011-03-28T08:17:21Z at 2011-03-28T08:17:21Z by SystemAdmin
  • SystemAdmin
    SystemAdmin
    9224 Posts
    ACCEPTED ANSWER

    Re: Getting dojo widget in iwidget

    ‏2008-12-15T11:39:19Z  in response to SystemAdmin

    Originally posted by projectzero userid: edgraaff - f=4&t=1413#p5898
    What does dijit.byId("_IWID_grid") return? (maybe IWID didn't get replaced, dojo.byId searches in the DOM and dijit.byId searches the widget in a map). Alternatively, you could put an empty div in your widget and initialize the dojox.Grid from JavaScript (using dojo.place to place that widget in the empty DIV node).
  • SystemAdmin
    SystemAdmin
    9224 Posts
    ACCEPTED ANSWER

    Re: Getting dojo widget in iwidget

    ‏2008-12-15T13:30:08Z  in response to SystemAdmin

    Originally posted by projectzero userid: ngawor - f=4&t=1413#p5899
    We are working on getting out a sample that uses dojo widgets within iwidgets... Hopefully it will be out soon. In the sample, we use this.iContext.getElementById("name") to get references to whichever dojo widgets we need. I would expect that this is preferable to using dijit.byId because it is part of the iwidget spec. For example,

    var has_energy_saver_box = this.iContext.getElementById("has_energy_saver")

    gets us a reference to

    <select dojoType="dijit.form.ComboBox" id="has_energy_saver"<br />
    value="false" readonly="true">
    <option value="true">true</option>
    <option value="false">false</option>
    </select>

    However, your more important issue (and the one that likely is causing your current failure) is that your dojo widget will not be parsed because it is within an iwidget that doesn't get loaded until after initial page load. To work around this, do something like the following in your onView method (or onEdit, etc.), i.e. put your requires in the onView, and then grab a top level element by id (in this case probably the contentPane) and force dojo to reparse.

    Example:

    onview: function() {
    dojo.require("dojo.parser");
    dojo.require("dijit.form.Form");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");

    // cause dojo to reparse the form so the dojo widgets are displayed
    var container = this.iContext.getElementById('energyUsageForm');
    dojo.parser.parse(container);

    Let us know if you have any further questions.

    Thanks,
    Nell
  • SystemAdmin
    SystemAdmin
    9224 Posts
    ACCEPTED ANSWER

    Re: Getting dojo widget in iwidget

    ‏2008-12-16T07:14:06Z  in response to SystemAdmin

    Originally posted by projectzero userid: khit - f=4&t=1413#p5902
    Thanks edgraaff and Nell,
    My iwidget goes well by declaring onview function.

    I hope your sample will help us for future problems, Nell.
    thank you!
  • SystemAdmin
    SystemAdmin
    9224 Posts
    ACCEPTED ANSWER

    Re: Getting dojo widget in iwidget

    ‏2008-12-30T02:26:35Z  in response to SystemAdmin

    Originally posted by projectzero userid: iwinoto - f=4&t=1413#p5965
    khit, thanks for the question, it came just in time for me.
    Nell, thanks for the response and added insights on how iWidget works.

    I got the same result by putting the requires at the top of the js file, above the dojo.declare, and forcing the parse in the onLoad handler method (called when the widget is loaded). My widget only had view mode, so I didn't need to handle onView and onEdit.

    Forcing the parse made sure my declared dojoTypes were processed, so now my dijit.form.ComboBox is now also working properly.

    Iwan
  • SystemAdmin
    SystemAdmin
    9224 Posts
    ACCEPTED ANSWER

    Re: Getting dojo widget in iwidget

    ‏2008-12-30T03:20:42Z  in response to SystemAdmin

    Originally posted by projectzero userid: ngawor - f=4&t=1413#p5966
    The sample is now available as part of an online trial at:

    http://www.ibm.com/developerworks/downl ... SANDBOX#lf

    (Managing Local Carbon Footprint)

    Thanks,
    Nell
  • SystemAdmin
    SystemAdmin
    9224 Posts
    ACCEPTED ANSWER

    Re: Getting dojo widget in iwidget

    ‏2009-01-06T14:07:00Z  in response to SystemAdmin

    Originally posted by projectzero userid: edchat - f=4&t=1413#p5982
    Another easy option for creating a sample iWidget which uses a dojo widget is to use the App Builder's new Sample iWidget template.
    To create a Sample iWidget named "foo" do the following:
    From the App Builder,
    1. Create the new application named iWidTest
    2. Open the iWidTest
    3. Click New File and select iWidget in app/iwidgets
    4. Type Foo descriptive name in the Descriptive Name field.
    5. Type foo in the Widget name field.
    6. Select Sample iWidget as the Template Name. Note For Smash DE 1.0.x testing the Sample iWidget template is not available, so you should select the default.xml template, and check the box for Create a working iWidget sample
    7. Check the box for Create a test html file to display this iWidget
    8. Type index.html in the Test html file name: field (if you don't already have an index.html file) and click Create
    9. You may get a "Missing Dependency" prompt, and click "Add".

    These files should have been created foo.xml (opened in the editor), foo.js, foo.css, testImage.png and index.html.

    This sample iWidget shows how to use a dojo widget, a css file, an image file, and how to send and receive data in an iWidget.

    To test the sample iWidget start the application, click the link http://localhost:8080 to open a browser tab to the index.html test file.
    The test html for the sample iWidget includes 2 copies of the iWidget wired together on the html page.

    Type first in the the Test Data: field on the first foo iWidget and press Send Data
    The first first foo iWidget should turn the Sent Data: first green and second turns the Received Data: first green.
  • SystemAdmin
    SystemAdmin
    9224 Posts
    ACCEPTED ANSWER

    Re: Getting dojo widget in iwidget

    ‏2011-03-28T08:17:21Z  in response to SystemAdmin

    Originally posted by projectzero userid: brij - f=4&t=1413#p9340
    Hi, I am a newbie to iWidget and want to use a Dojo widget in iWidget.

    The Dojo widget works fine in an HTML or JSP but how to use the code in the iWidget XML?

    //MySampleDojo.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true"> </script>
    <script type="text/javascript"><br />
    dojo.require("dijit.Menu");<br />
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
    </head>

    <body class="claro">
    My Tools
    </body>
    </html>

    <script><br />
    dojo.require("dijit.Menu");<br />
    var pMenu;<br />
    <br />
    dojo.addOnLoad(function(){<br />
    <br />
    pMenu = new dijit.Menu({<br />
    targetNodeIds: <br />
    });<br />
    <br />
    pMenu.addChild(new dijit.MenuItem({<br />
    label: "ECRM",<br />
    onClick: function() {<br />
    open_window("http://insider.web.att.com/");<br />
    }<br />
    }));<br />
    pMenu.addChild(new dijit.MenuItem({<br />
    label: "EFMS",<br />
    onClick: function() {<br />
    open_window("http://insider.web.att.com/");<br />
    }<br />
    }));<br />
    <br />
    pMenu.startup();<br />
    <br />
    dojo.connect(dojo.byId("MyMenu"),"onmouseover", openMenu);<br />
    dojo.connect(pMenu,"onMouseLeave",closeMenu);<br />
    });<br />
    <br />
    function openMenu(e){<br />
    pMenu._openMyself(e);<br />
    }<br />
    <br />
    function closeMenu() {<br />
    dijit.popup.close(pMenu);<br />
    }<br />
    <br />
    open_window=function(appURL){<br />
    var newWindow;<br />
    var winOptions;<br />
    <br />
    winOptions = 'status=yes,menubar=yes,scrollbars=yes,resizable=yes,toolbar=yes';<br />
    winOptions = winOptions + ',width=' + (screen.availWidth ).toString();<br />
    winOptions = winOptions + ',height=' + (screen.availHeight ).toString();<br />
    winOptions = winOptions + ',screenX=0,screenY=0,left=0,top=0';<br />
    <br />
    newWindow = window.open( '', '', winOptions );<br />
    newWindow.location = appURL;<br />
    newWindow.focus();<br />
    return newWindow;<br />
    };<br />
    <br />
    </script>



    And the iWidget XML where I wanna use the above code is given below
    <iw:iwidget name="commonActions" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" iScope="com.ibm.mm.builder.CommonActions" supportedModes="view" mode="view">
    <iw:resource uri="/mum/widget-catalog/commonActions.js" />
    <iw:resource uri="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" />
    <iw:resource uri="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" />
    <iw:itemSet id="attributes" private="true">
    <iw:item id="version" value="1.0.0.0.0"/>
    <iw:item id="helpurl" readOnly="false" value='/BusinessSpaceHelp/index.jsp?topic=/com.ibm.bspace.help.main.doc/welcome/bspace_welcome.html'/>
    <iw:item id="helptooltip" readOnly="false" value=''/>
    </iw:itemSet>
    <iw:content mode="view">
    <![CDATA[<br />
    <div><br />
    <br />
    </div><br />
    ]]>
    </iw:content>
    </iw:iwidget>





    So basically, I am wondering how to use the MySampleDojo.html code in the iWidget XML file?

    Any suggestions are much appreciated.
    Thanks,
    Brij