I'm trying to build a Mind Mapping application within GWT by using RDF to store the Mind Map (I'm using Jena as the RDF Library).
But I'm having to problems:
When I load the map, In java swt theres is a way a canvas draw an string as an image. But with the GWT canvas I can't do that. So, how can I convert an string to an "image" in order to put it within the GWT canvas.
Im have kind of concepts (boxes) displayed within the GWT canvas. Its posible to have a "click handler" that can identify the coordinates there the user clicks the canvas?
Thank you very much for the help :)
1) I noticed the following library which provides font rendering for the GWT Canvas. Hope that helps.
2) In a comment on the GWTCanvas wiki the following code was pasted by 'matt.d.hilliard' (direct linking appears impossible alas):
import com.google.gwt.event.dom.client.HasMouseDownHandlers;
import com.google.gwt.event.dom.client.MouseDownEvent;
import com.google.gwt.event.dom.client.MouseDownHandler;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.widgetideas.graphics.client.GWTCanvas;
public class Canvas extends GWTCanvas implements HasMouseDownHandlers {
public Canvas() {
super();
}
public Canvas(int coordX, int coordY) {
super(coordX, coordY);
}
public Canvas(int coordX, int coordY, int pixelX, int pixelY) {
super(coordX, coordY, pixelX, pixelY);
}
public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
return addDomHandler(handler, MouseDownEvent.getType());
}
}
Related
I am trying to create a plug-in, which will show local .html file inside internal browser. Currently i am extending class ViewPart, and writing code into its createPartControl method. Most of people are using this snippet
IWebBrowser browser = PlatformUI.getWorkbench().getBrowserSupport().createBrowser("SOMELABEL");
browser.openURL(url);
Problem is that this snippet opens another view where internal browser is opened, but in my case it needs to be in this view...
I also tried other forms of createBrowser method, e.g.
createBrowser(int style, String browserId, String name, String tooltip);
where i tried to configure flags, but all of these options just open another view or editor. Is there a way do draw HTML inside my view?
I have found the solution. Yes i have tried Browser control before, but i did not created Browser properly (wrong arguments). If anybody else tries to implement ViewPart displaying html pages via SWT, here is the code snippet.
public class CustomView extends ViewPart {
private static final String URL = "file:///d:/playground/d3/project.html";
#Override
public void createPartControl(Composite parent) {
final Browser browser = new Browser(parent, SWT.NONE);
browser.setUrl(URL);
}
#Override
public void setFocus() {
}
}
I have couple of drop downdowns and a download link button. Based on the user selection, i get the file to be downloaded. if the user did not make a selection I show an error on the feedback panel. if the user then makes a selection and clicks on download link it works fine, but the previous feedback message is still visible. How do I clear it.
onclick of the download link, i tried the following, but no use
FeedbackMessages me = Session.get().getFeedbackMessages();
me.clear();
Probably it is
Session.get().cleanupFeedbackMessages()
even it has been changed in Wicket 6.x
I've found this post and I think it is time to share the way for Wicket 6.x and for Wicket 7.x, because Session.get().cleanupFeedbackMessages() was deprecated already.
To do it for Wicket 6.x you have to implement additional filter for the feedback panel. Where to do it, it is your decision to decide.
Create a new FeedbackPanel implementation by extending from the existing FeedBackPanel class
private class MessagesFeedbackPanel extends FeedbackPanel{
private MessageFilter filter = new MessageFilter();
public MessagesFeedbackPanel(String id){
super(id);
setFilter(filter);
}
#Override
protected void onBeforeRender(){
super.onBeforeRender();
// clear old messages
filter.clearMessages();
}
}
Provide a new Filter implementation, by implementing the existing IFeedbackMessageFilter interface
public class MessageFilter implements IFeedbackMessageFilter{
List<FeedbackMessage> messages = new ArrayList<FeedbackMessage>();
public void clearMessages(){
messages.clear();
}
#Override
public boolean accept(FeedbackMessage currentMessage){
for(FeedbackMessage message: messages){
if(message.getMessage().toString().equals(currentMessage.getMessage().toString()))
return false;
}
messages.add(currentMessage);
return true;
}
}
Following code works for me in Wicket 6:
public class MyComponent extends Panel {
...
FeedbackMessages feedback = getFeedbackMessages();
feedback.clear();
I have a TabLayoutPanel where I am putting custom widgets in for the tabs to be able to display some images next to the text. I originally worked with TabPanel and using custom HTML for the tab text, but custom tab widgets allows me to modify the image on the fly as needed.
My tab widget is essentially a HorizontalPanel, a number of small images, and a line of text. The problem I'm having is that the tab doesn't want to stick to the bottom of the tab bar like normal. The tab is getting positioned at the top of the space reserved for the tab bar, and there's a gap between it and the bottom of the tab bar. I uploaded an image of the problem to http://imgur.com/fkSHd.jpg.
Is there some style that I need to apply to custom widget tabs to make them appear correctly?
In my brief experience, the newer standards mode panels (they all end in "LayoutPanel") don't get along with the older ones (the ones that just end in "Panel"). So you might consider trying a DockLayoutPanel instead of the HorizontalPanel, and it may be more cooperative.
See https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels, particularly the section called "What won't work in Standards Mode?":
HorizontalPanel is a bit trickier. In some cases, you can simply
replace it with a DockLayoutPanel, but that requires that you specify
its childrens' widths explicitly. The most common alternative is to
use FlowPanel, and to use the float: left; CSS property on its
children. And of course, you can continue to use HorizontalPanel
itself, as long as you take the caveats above into account.
After a bit more research, I found the answer here: https://groups.google.com/d/msg/google-web-toolkit/mq7BuDaTNgk/wLqPm5MQeicJ. I had to use InlineLabel or InlineHTML widgets instead of normal Label or HTML widgets. I've tested this solution and it does exactly what I want. I pasted the code of the class below for completeness. Note two things here:
The "float" attribute cannot be set on the last element (the InlineLabel) or the incorrect drawing condition occurs again.
The code could be cleaned up a bit further by having the class extend directly from FlowPanel instead of making it a composite containing a FlowPanel.
package com.whatever;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Float;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.InlineLabel;
public class StatusTab extends Composite
{
public interface StatusImages extends ClientBundle
{
public static StatusImages instance = GWT.create(StatusImages.class);
#Source("images/status-green.png")
ImageResource green();
#Source("images/status-red.png")
ImageResource red();
}
private final ImageResource greenImage;
private final ImageResource redImage;
private final FlowPanel flowPanel;
public LinkStatusTab(String text, int numStatuses) {
greenImage = StatusImages.instance.green();
redImage = StatusImages.instance.red();
flowPanel = new FlowPanel();
initWidget(flowPanel);
for (int i = 0; i < numStatuses; i++)
{
Image statusImg = new Image(redImage);
statusImg.getElement().getStyle().setMarginRight(3, Unit.PX);
statusImg.getElement().getStyle().setFloat(Float.LEFT);
flowPanel.add(statusImg);
}
flowPanel.add(new InlineLabel(text));
}
/**
* Sets the image displayed for a specific status entry.
*/
public void setStatus(int which, boolean status)
{
Image image = (Image)flowPanel.getWidget(which);
if (status)
image.setResource(greenImage);
else
image.setResource(redImage);
}
}
I'm using GWT 2.4 with JUnit 4.8.1. When writing my class that extends GWTTestCase, I want to simulate clicking on a button on the page. Currently, in my onModuleLoad method, this button is only a local field ...
public void onModuleLoad() {
final Button submitButton = Button.wrap(Document.get().getElementById(SUBMIT_BUTTON_ID));
...
// Add a handler to send the name to the server
GetHtmlHandler handler = new GetHtmlHandler();
submitButton.addClickHandler(handler);
How do I simulate clicking on this button from the GWTTestCase? Do I have to expose this button as a public member accessor is there a more elegant way to access it? Here is what I have in my test case so far ...
public class GetHtmlTest extends GWTTestCase {
// Entry point class of the GWT application being tested.
private Productplus_gwt productPlusModule;
#Override
public String getModuleName() {
return "com.myco.clearing.productplus.Productplus_gwt";
}
#Before
public void prepareTests() {
productPlusModule = new Productplus_gwt();
productPlusModule.onModuleLoad();
} // setUp
#Test
public void testSuccessEvent() {
// TODO: Simulate clicking on button
} // testSuccessEvent
}
Thanks, - Dave
It can be as easy as buttonElement.click() (or ButtonElement.as(buttonWidget.getElement()).click(), or ButtonElement.as(Document.get().getElementById(SUBMIT_BUTTON_ID)).click())
But remember that a GWTTestCase doesn't run in your own HTML host page, but an empty one, so you'll first have to insert your button within the page before simulating your module's load.
gwt-test-utils seems to be the perfect framework to answer your need. Instead of inheriting from GWTTestCase, extend the gwt-test-utils GwtTest class and implement your click test with the Browser class, like shown in the getting starting guide :
#Test
public void checkClickOnSendMoreThan4chars() {
// Arrange
Browser.fillText(app.nameField, "World");
// Act
Browser.click(app.sendButton);
// Assert
assertTrue(app.dialogBox.isShowing());
assertEquals("", app.errorLabel.getText());
assertEquals("Hello, World!", app.serverResponseLabel.getHTML());
assertEquals("Remote Procedure Call", app.dialogBox.getText());
}
If you want to keep your button private, you'd be able to retrieve it by introspection. But my advice is to make you view's widgets package protected and to write your unit test in the same package so it could access them. It's more convinent and refactoring-friendly.
gwt-test-utils provide introspection convinence. For example, to retrieve the "dialogBox" field which could have been private, you could have do this :
DialogBox dialogBox = GwtReflectionUtils.getPrivateFieldValue(app, "dialogBox");
But note that using GwtReflectionUtils is not mandatory. gwt-test-utils allows you to use ANY java classes in GWT client side tests, without restriction :)
You can do it like this:
YourComposite view = new YourComposite();
RootPanel.get().add(view);
view.getSubmitButton.getElement().<ButtonElement>cast().click();
I'm working on learning GWT (total newb) and have a question regarding the Visualiztion API provided by Google. This page:
http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted
Describes getting started with a pie chart (which is what I need). However I'm trying to do this in a composite UI using UiBinder. To that end I don't know how to handle the callback correctly that is shown:
public class SimpleViz implements EntryPoint {
public void onModuleLoad() {
// Create a callback to be called when the visualization API
// has been loaded.
Runnable onLoadCallback = new Runnable() {
public void run() {
Panel panel = RootPanel.get();
// Create a pie chart visualization.
PieChart pie = new PieChart(createTable(), createOptions());
pie.addSelectHandler(createSelectHandler(pie));
panel.add(pie);
}
};
// Load the visualization api, passing the onLoadCallback to be called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
}
My First assumption is this would go in the UiBinder constructor, correct? Yet this assumes that I want to place the element in the RootLayoutPanel, and I don't. I can't see an elegant and obvious way of placing it in the binder. I submit that even this guess may be wrong. Any ideas from the experts?
EDIT:
I should make clear my attempt:
public GraphPanel() {
initWidget(uiBinder.createAndBindUi(this));
Runnable onLoadCallback = new Runnable() {
public void run() {
//LayoutPanel panel = RootPanel.
// Create a pie chart visualization.
PieChart pie = new PieChart(createPieTable(), createPieOptions());
pie.addSelectHandler(createSelectHandler(pie));
mySelf.getElement().appendChild(pie.getElement()); // .add(pie);
}
};
// Load the visualization api, passing the onLoadCallback to be called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
}
When run I get the following in the Composites DIV:
<div class="gwt-viz-container"></div>
But I see no graph using the code from the above page.
EDIT 2:
This link may provide additional information. However, the solution suggested is not optimal since the app then needs to know more about the widget (and if the widget is even there).
http://vaadin.com/forum/-/message_boards/message/97850
EDIT 3:
It shouldn't matter, but just in case, I'm running FF on Linux. Some articles I've read have implied that this is a problem.
EDIT 4:
Adding:
pie.draw(createPieTable(), createPieOptions());
after the append child gets the graph to display. This implies that the ordering of the example is wrong. If so what is the optimum?
It is also important to know that although the GWT JRE Emulation library supports the Runnable interface, it can't really be used for parallel processing in a separate thread, as the code is compiled into JavaScript which in turn runs single-threaded in the browser. Same goes for the synchronized keyword.
I also would recommend doing all preparation logic in the Widget/Composite's constructor but any actual drawing in the onLoad callback, which you need to override. This callback is called when the widget is loaded in the browser document, it is only then that you can perform any page/layout interaction, like enabling/disabling controls or requesting focus.
Either way you suggest would work. If the Visualization API is used by a bunch of different widgets on the page, then it might be simpler to put the loadVisualizationApi call in the EntryPoint class - an example of this is below.
You can write the Composite like so:
public MyPieChartContainer extends Composite {
interface MyUiBinder extends UiBinder<Widget, MyPieChartContainer>;
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
#UiField Panel panel;
public MyPieChartContainer() {
initWidget(uiBinder.createAndBindUi(this));
PieChart pie = new PieChart(createTable(), createOptions());
pie.addSelectHandler(createSelectHandler(pie));
panel.add(pie);
}
}
And then do this in the EntryPoint:
public class SimpleViz implements EntryPoint {
public void onModuleLoad() {
// Create a callback to be called when the visualization API
// has been loaded.
Runnable onLoadCallback = new Runnable() {
public void run() {
Panel panel = RootPanel.get();
MyPieChartContainer myPieChartContainer = new MyPieChartContainer();
panel.add(myPieChartContainer);
}
};
// Load the visualization api, passing the onLoadCallback to be called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
}