What else is needed to use DrawPane drawing API's ?

[jimwaschura]

I'm adding the use of DrawPane and various DrawItems to my smartgwt application.

Per documentation, I have added inherits for the com.smartgwt.Drawing to my xxx.gwt.xml file as shown below:

======================================================
<!-- Other module inherits -->

<inherits name="com.smartgwt.tools.SmartGwtTools"/>
<inherits name="com.smartgwt.Drawing"/>
<inherits name="com.smartgwt.SmartGwtNoTheme"/>
<inherits name="com.smartclient.theme.blackops.BlackOps"/>
=======================================================

However, when I try to create a simple test case from the showcase examples, and then add it as an item to a portlet I have previously created and used, a failure occurs at the moment of calling addItem(mainPane).

=======================================================
mainPane = new DrawPane();
mainPane.setWidth(400);
mainPane.setHeight(300);
mainPane.addDrawHandler( new DrawHandler() {
@Override
public void onDraw(DrawEvent event )
{
DrawTriangle drawTriangle = new DrawTriangle();
drawTriangle.setPoints(new Point(100, 50), new Point(150, 150), new Point(50, 150));
drawTriangle.setTitle("Triangle");

drawTriangle.setDrawPane(mainPane);
drawTriangle.draw();
}
});

Trace.LogX("ABOUT TO ADD ITEM");

try {
getPortlet().addItem(mainPane);
}
catch( Exception e)
{
Trace.LogX("Exception encountered: " + e.getMessage() );
}
=======================================================

The output produced is shown below. A TypeError exception occurs after logging "ABOUT TO ADD ITEM" message.

=======================================================
ABOUT TO ADD ITEM
Exception encountered: (TypeError)
__gwt$exception: <skipped>: Cannot read property 'create' of undefined
AppBlock::AppBlock exception: (TypeError)
__gwt$exception: <skipped>: Cannot read property 'create' of undefined
EXCEPTION: (TypeError)
__gwt$exception: <skipped>: Cannot read property 'create' of undefined
=======================================================

I suspect that I haven't fully configured my project or run-time for using the drawing libraries. When I do a compile, everything reports okay though.

=======================================================
Invoking Linker SmartGwtScriptInjector
Creating loadScriptTagFiles.js to manually load the following script tags:
sc/modules/ISC_Drawing.js
sc/modules/ISC_Core.js
sc/modules/ISC_Foundation.js
sc/modules/ISC_Containers.js
sc/modules/ISC_Grids.js
sc/modules/ISC_Forms.js
sc/modules/ISC_RichTextEditor.js
sc/modules/ISC_Calendar.js
sc/modules/ISC_DataBinding.js
sc/skins/BlackOps/load_skin.js
Link succeeded
Compilation succeeded -- 48.256s
=======================================================

My eclipse project has the smartgwt.jar and the smartgwt-skins.jar files explicitly specified in the explorer-tree, but nothing specific to drawing.

Any suggestions you may be able to provide will be greatly appreciated. Thank you.

[Isomorphic]

Place the Drawing module <inherits> after SmartGwtNoTheme.

Make sure you've run a new GWT compile after making that change.

If that's still not working, use the browser's built-in tools to see if some files are not being loaded from the server (would show up as 404s on the tab that shows network requests).

[jimwaschura]

Yes that worked, I see the triangle now. Thank you.

[DevMo]

For what it's worth, I find that inheriting the Drawing module in my module.gwt.xml file has no effect:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN"
   "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module rename-to="TabbedScreen">

    <!--     Note: You need to add <url-pattern> for <servlet-mapping> to Web.XML for this module. -->

    <!-- Inherited GWT & Smart GWT Modules -->
    <inherits name='com.google.gwt.user.User' />

    <inherits name="com.smartgwt.tools.SmartGwtTools" />
    <inherits name="com.smartgwtee.tools.Tools" />
    <inherits name="com.smartgwtee.SmartGwtEE" />
    <inherits name="com.smartgwt.Drawing"/>  

    <!-- Super Dev Mode settings for GWT 2.5.1 per http://www.gwtproject.org/articles/superdevmode.html -->
    <add-linker name="xsiframe" />
    <set-configuration-property name="devModeRedirectEnabled" value="true" />
    <set-property name="compiler.useSourceMaps" value="true" />

    <!-- GWT EntryPoint class initializes framework and launches app -->
    <entry-point class="com.smartgwt.sample.client.TabbedScreen" />
</module>

But loading from the HTML file does work:

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>Index Baby!</title>

<!-- Must have corresponding <url-pattern> per <servlet-mapping> in web.xml file. -->
    <script> var isomorphicDir = "TabbedScreen/sc/"; </script>
    
    <script type="text/javascript" language="javascript" src="TabbedScreen/TabbedScreen.nocache.js"></script>

<!--    Load ALL Smart GWT Scripts -->
<!--    <script type="text/javascript" language="javascript" src="TabbedScreen/loadScriptTagFiles.js"></script> -->
    
<!--    Or Load Individual Scripts -->
<!--    You can load these scripts from this module or isomorphicDir, they are same.  -->
<!--     Load order matters, do not alphabetize! -->
    <script src="TabbedScreen/sc/modules/ISC_Core.js">          </script>
    <script src="TabbedScreen/sc/modules/ISC_Foundation.js">    </script>
    <script src="TabbedScreen/sc/modules/ISC_Containers.js">    </script>
    <script src="TabbedScreen/sc/modules/ISC_Grids.js">         </script>
    <script src="TabbedScreen/sc/modules/ISC_Forms.js">         </script>
<!--     <script src="TabbedScreen/sc/modules/ISC_RichTextEditor.js"></script> -->
<!--     <script src="TabbedScreen/sc/modules/ISC_Calendar.js"></script> -->    
    <script src="TabbedScreen/sc/modules/ISC_DataBinding.js">   </script>
    <script src="TabbedScreen/sc/modules/ISC_Drawing.js">   </script>
    
    <script src="load_skin.js"></script>

  </head>

  <body>
  
    <!-- OPTIONAL: include this if you want history support -->
<!--     <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> -->

  </body>
  
</html>

My situation may be unusual in that my rig is a bit old (GWT 2.5.1 w/ Smart GWT 4.1), but I just note this in case it's helpful to anyone.

[Isomorphic]

When running SuperDevMode you do need to add a script tag for optional modules such as Drawing. It's not necessary when running in classic Dev Mode. This is covered in the Debugging overview.