<map> <area> tags issues in Design mode [solved]

[peterblazejewicz]

Hello everyone,

today I've wrote ImageMap widget after reading request on GWT google groups.
I found following issue which I need to be solved somehow:
- once <map> tag is attached to root panel (or its descendant) everything is erased from view and it cannot be restored, e.g. by commenting lines which adds map tags,
I recreated that using HTMLPanel which accepts img + image map tags e.g. from that example page:
http://www.w3schools.com/tags/tag_map.asp
should it be escaped with isDesignTime() solution (which was not working for me when using my widget for some reason)?

Anyone already used image maps in gwt-based apps?

Code: Select all

package com.mycompany.project.client;

import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class ImageViewer {
   private HTMLPanel panel;

   public void onModuleLoad() {
      RootPanel rootPanel = RootPanel.get();
      String htmlString = "";
      if (isDesignTime() == false) {
         htmlString = "<img src=\"http://www.w3schools.com/tags/planets.gif\" "
               + "\r\nwidth=\"145\" height=\"126\"\r\nalt=\"Planets\" "
               + "\r\nusemap=\"#planetmap\" />\r\n\r\n<map id=\"planetmap\" "
               + "name=\"planetmap\">\r\n\r\n<area shape=\"rect\" "
               + "\r\ncoords=\"0,0,82,126\" \r\nalt=\"Sun\"\r\nhref=\"sun.htm\" "
               + "/>\r\n\r\n<area shape=\"circle\" \r\ncoords=\"90,58,3\" "
               + "\r\nalt=\"Mercury\"\r\nhref=\"mercur.htm\" "
               + "/>\r\n\r\n<area shape=\"circle\" "
               + "\r\ncoords=\"124,58,8\" "
               + "\r\nalt=\"Venus\"\r\nhref=\"venus.htm\" "
               + "/>\r\n\r\n</map>";
      }
      panel = new HTMLPanel(htmlString);

      rootPanel.add(panel, 5, 5);
      panel.setSize("300px", "300px");
      //
   }

   private static final boolean isDesignTime() {
      return false;
   }
}


thanks,
regards,
Peter

[Eric Clayberg]

I see two problems with your example:

1) Your class is missing the text "implements EntryPoint". Without that, Designer is unable to correctly identify and re-parse the class. Add that text back in and your example will work fine (without the need for an isDesignTime() check).

2) The format of the isDesignTime() check in wrong. For the parser to parse and recognize that, it needs to exactly match the pattern described in the docs.

Code: Select all

        if (!isDesignTime()) {
            // runtime only code
        }

[peterblazejewicz]

hi Eric,
my fault and thanks for being patient,
I was using template used for different test,
Handcoded map via HTMLPanel works fine now. I'll try panel created via widget implementation later. After "clean" eclipse start I have no issues with map tags now,
You are correct about entry point. Its required by designer, however without interface inheritence project will compile/run just fine (that is that other design flow I was testing, it was reported on GWT group recently),
sorry for taking time
regards,
Peter

[Eric Clayberg]

The interface tells Designer what kind of window it is.

"other design flow"? I don't understand the reference.

[peterblazejewicz]

hi Eric,
sorry for not expressing myself better:
There is a desing flow in GWT compiler which actually allows to compile and run entry point/module without having class implement EntryPoint interface:
http://code.google.com/p/google-web-too ... 9&sort=-id
GWT designer won't catch that but simply will refuse to render content within Design area,

Consider example:
#1
start wizard and pick New>GWT Java Project
#2
enter correct data for Module name and package
#3
Wizard generates default hello world like code,

now:
#4
remove "implements EntryPoint" from class header and from imports,
code should be like:

Code: Select all

package com.mycompany.project.client;

import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class TestModule {
   private Button clickMeButton;

   public void onModuleLoad() {
      RootPanel rootPanel = RootPanel.get();

      clickMeButton = new Button();
      rootPanel.add(clickMeButton);
      clickMeButton.setText("Click me!");
      clickMeButton.addClickListener(new ClickListener() {
         public void onClick(Widget sender) {
            Window.alert("Hello, GWT World!");
         }
      });
   }
}

#5
switch to Design view, nothing will be rendered,
#6
no errors are thrown though nothing is rendered in design no matter what code will be added or what will be changed
#7
try to run application, It will compile fine and will start hosted mode,

I think you could add at least FAQ entry about that issue for people who import other non-generated code into project. It could happen that designer will show nothing in Design view due to that lacking implementation declaration,

regards,
Peter[/code]

[Eric Clayberg]

Please give the latest build a try.

The "implements EntryPoint" requirement has been removed.

[peterblazejewicz]

Handcoded map via HTMLPanel works fine now. I'll try panel created via widget implementation later.

hi all,
if someone is interested in widget-based component WORKING in Design view i've just wrote sample on GWT group:
http://groups.google.com/group/Google-W ... 68fee7411#
regards,
Peter

[Eric Clayberg]

if someone is interested in widget-based component WORKING in Design view i've just wrote sample on GWT group:
http://groups.google.com/group/Google-W ... 68fee7411#

Looks good. We'll have to add a link to it in our docs.