I have a simple GWT app that takes source code in a TextArea, sends it to a remote compiler, and displays the assembly language output and compiler errors in some other TextAreas. The code below works fine in Safari and Chrome, but the TextAreas and Buttons aren't resized to fill the panels in Firefox. I can manually set the sizes of the widgets to 100% and it's almost acceptable, but surely I'm missing some important bit of CSS knowledge. I am setting the document type to the strict HTML4 DTD ("http://www.w3.org/TR/html4/strict.dtd"). The app is running at http://ferret.granberrys.us:8080/Compiler.html.
RootLayoutPanel rootPanel = RootLayoutPanel.get();
DockLayoutPanel panel = new DockLayoutPanel(Unit.EM);
codeArea = new TextArea();
codeArea.setText("int main() {return 0};");
DockLayoutPanel outputPanel = new DockLayoutPanel(Unit.EM);
ListBox compiler = new ListBox();
compiler.addItem("Clang/LLVM");
outputPanel.addNorth(compiler, 2);
assemblyArea = new TextArea();
assemblyArea.setText("Asm");
Button compileButton = new Button();
compileButton.setText("Compile");
outputPanel.addSouth(compileButton, 2);
outputPanel.add(assemblyArea);
panel.addEast(outputPanel, 20);
compilerOutput = new TextArea();
compilerOutput.setReadOnly(true);
compilerOutput.setText("Compiler");
//panel.addWest(codeArea, 800);
panel.addSouth(compilerOutput, 10);
panel.add(codeArea);
rootPanel.add(panel);
According to the documentation you should use <!DOCTYPE html>, but Iḿ not sure if that is the problem here. It also could be the TextArea is a span element, or at least not a css block element. You can do this by adding display:block to the specific widgets.
Related
let's say I have a bunch of pdf files that I want to migrate into a new pdf. BUT the new pdf file is a table-structured file. And the content of the pdf files should fit in the first cell of a two-column-table.
I am not sure if the approach of working with tables is correct. I am open to any other solutions. All I want is at the end some custom text at the top, followed by pdf content and a checkbox on the right side. (One per pdf content)
What I have so far:
`
PdfDocument pdfDoc = new PdfDocument(new PdfWriter(dest));
Document doc = new Document(pdfDoc, PageSize.A4);
doc.SetMargins(0f, 0f, 18f, 18f);
PdfReader reader = new PdfReader(src);
PdfDocument srcDoc = new PdfDocument(reader);
Table table = new Table(new float[] { 2f, 1f });
PdfFormXObject imagePage = srcDoc.GetFirstPage().CopyAsFormXObject(pdfDoc);
var image = new Image(imagePage);
Cell cell = new Cell().Add(image);
cell.SetHorizontalAlignment(HorizontalAlignment.LEFT);
cell.SetVerticalAlignment(VerticalAlignment.TOP);
table.AddCell(cell);
Table checkTable = new Table(2);
Cell cellCheck1 = new Cell();
cellCheck1.SetNextRenderer(new CheckboxCellRenderer(cellCheck1, "cb1", 0));
cellCheck1.SetHeight(50);
checkTable.AddCell(cellCheck1);
Cell cellCheck2 = new Cell();
cellCheck2.SetNextRenderer(new CheckboxCellRenderer(cellCheck2, "cb2", 1));
cellCheck2.SetHeight(50);
checkTable.AddCell(cellCheck2);
table.AddCell(checkTable);
doc.Add(table);
doc.Close();`
My Problem here is that the pdf content has still its margin. Which completely spoils the design. It is so frustrating, I appreciate any help.
You say
My Problem here is that the pdf content has still its margin. Which completely spoils the design.
PDFs (usually) don't know anything about margins. Thus, you have to detect the margins of the page to import first. You can do this by parsing the page content into an event listener that keeps track of the bounding box of drawing instructions, like the TextMarginFinder. Then you can reduce the source page to those dimensions. This can be done by means of the following method:
PdfPage restrictToText(PdfPage page)
{
TextMarginFinder finder = new TextMarginFinder();
new PdfCanvasProcessor(finder).ProcessPageContent(page);
Rectangle textRect = finder.GetTextRectangle();
page.SetMediaBox(textRect);
page.SetCropBox(textRect);
return page;
}
You apply this method in your code right before you copy the page as form XObject, i.e. you replace
PdfFormXObject imagePage = srcDoc.GetFirstPage().CopyAsFormXObject(pdfDoc);
by
PdfFormXObject imagePage = restrictToText(srcDoc.GetFirstPage()).CopyAsFormXObject(pdfDoc);
This causes the Image this XObject will be embedded in to have the correct size. Unfortunately it will be somewhat mispositioned because the restricted page still has the same coordinate system as the original one, merely its crop box defines a smaller section than before. To fix this, one has to apply an offset, one has to subtract the coordinates of the lower left corner of the page crop box which has become the XObject bounding box. Thus, add after instantiating the Image the following code:
Rectangle bbox = imagePage.GetBBox().ToRectangle();
image.SetProperty(Property.LEFT, -bbox.GetLeft());
image.SetProperty(Property.BOTTOM, -bbox.GetBottom());
image.SetProperty(Property.POSITION, LayoutPosition.RELATIVE);
Now the restricted page is properly positioned in your table cell.
Beware: The TextMarginFinder (as its name indicates) determines the margins by text alone. Thus, if the page contains other contents, too, e.g. decorations like a logo, this logo is ignored and might eventually be cut out. If you want such decorations, too, in your overviews, you have to use a different margin finder class.
I use one JTextArea and JScrollBar. It has this problem when I run it and it will fill by text, I can't navigate it. i.e. when I click on arrowkey on scrolbar, nothing happen. although I write the update code for it (by using API), but it doesn't work well. What shall i do? Thanks in advance.
I show my code as bellow:
JTextArea Result_field = new JTextArea(5,10);
Result_field.setPreferredSize(new Dimension(5, 10));
JScrollPane scrollPane = new JScrollPane( Result_field );
scrollPane.setVerticalScrollBarPolicy(ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS);
scrollPane.setHorizontalScrollBarPolicy(ScrollPaneConstants.HORIZONTAL_SCROLLBAR_ALWAYS);
DefaultCaret caret = (DefaultCaret)Result_field.getCaret();
caret.setUpdatePolicy(DefaultCaret.ALWAYS_UPDATE);
PrintStream printStream = new PrintStream(new CustomOutputStreamm(Result_field));
System.setOut(printStream);
MainPanel.add(scrollPane,gbc);
I found out my problem, although we define one JTextArea or ... by the size, But after that we should determine the prefer size again.
we have website which is developed in Telidos platform which is using GWT in side it. but
In that website we need print functionality to be included. When the user clicks on print button, then the application should print the search criteria and the content from that page. I don't know how to implement it. I searched in all the places where i couldn't find any solution.
Please help me on this if anybody have any idea.
Jothi, In GWT we have everything in a GWT widget. It may be a RootPanel. VerticalPanel, SplitPanel ans so on. So try this,
For eg. If you to print a CellTable which is added in a VerticalPanel,
VerticalPanel vPanel = new VerticalPanel();
vPanel.add(cellTable);
Then print it by
String printText = vPanel.asWidget().getElement().getInnerHTML();
printMethod(printText);
And have the following method,
public static native void printMethod(String html) /*-{
var frame = $doc.getElementById('printing');
if (!frame) {
$wnd.alert("Error: Can't find printing frame.");
return;
}
frame = frame.contentWindow;
var doc = frame.document;
doc.open();
doc.write(html);
doc.close();
frame.focus();
frame.print();
}-*/;
where 'printing' is the iframe id.
<iframe id="printing" style="width:0;height:0;border:0">
</iframe>
This should be added in your *.ui.xml for the particular widget like
<g:Verticalpanel><iframe id="printing" style="width:0;height:0;border:0">
</iframe></g:Verticalpanel>
I'm using a GWT library (gwt-openlayers) which allows me to create a map popup containing arbitrary HTML, similar to Google Maps. I need this HTML to contain a GWT Button widget.
I'm creating some HTML elements on-the-fly like this:
Element outerDiv = DOM.createDiv();
outerDiv.getStyle().setOverflow(Overflow.HIDDEN);
outerDiv.getStyle().setWidth(100, Unit.PCT);
outerDiv.appendChild(new HTML(mapPOI.getHtmlDetails()).getElement());
Button popupButton = new Button("View Property");
popupButton.getElement().getStyle().setFloat(com.google.gwt.dom.client.Style.Float.RIGHT);
outerDiv.appendChild(popupButton.getElement());
Then I'm getting the source HTML for these elements by calling
String src = outerDiv.toString();
and inserting this html into my map marker. Now my map marker displays the content ok, including the button. However, the button won't respond to any events! From what I can gather, this is because the buttons onAttach() method is never being called.
Is there a better way to do this?
Thanks,
Jon
~~~~EDIT~~~~
I'm now trying a new way of doing this, which seems to be the accepted method looking at other similar posts.
First I'm creating my div:
String divId = "popup-" + ref;
String innerHTML = "<div id=\"" +divId + "\"></div>";
Then I'm adding this to my map popup and displaying it (which adds it to the DOM). After the popup has been displayed, I'm getting the Element as follows and trying to wrap a HTMLPanel around it:
Element element = Document.get().getElementById(divId);
HTMLPanel popupHTML = HTMLPanel.wrap(element);
My div element is successfully retrieved. However, HTMLPanel.wrap(element); doesn't complete. The reason for this is that wrap(..) calls RootPanel.detachOnWindowClose(Widget widget), which includes the following assertions:
assert !widgetsToDetach.contains(widget) : "detachOnUnload() called twice "
+ "for the same widget";
assert !isElementChildOfWidget(widget.getElement()) : "A widget that has "
+ "an existing parent widget may not be added to the detach list";
I put some breakpoints in and it seems that the 2nd assertion is failing!
Does anybody have any idea why this might be the case? Should failing this assertion really result in a complete failure of the method (no return)?
Your first approach is good, you just need to register onClick event for your button like this:
DOM.sinkEvents(popupButton.getElement(), Event.ONCLICK);
DOM.setEventListener(popupButton.getElement(), new EventListener() {
#Override
public void onBrowserEvent(Event event) {
//implement the logic after click
}
});
I have checked this, it works 100%!
You might try something like
RootPanel.get("idOfYourMapMarker").add(popupButton);
See RootPanel.get()
Unfortunately, RootPanels are AbsolutePanels which aren't so nice for layout but could work if you just have a simple button to add. You could also try RootLayoutPanel which will give you a LayoutPanel (also not so nice when you just want things to flow). You might end up creating a container widget that does the layout for you, and adding that to the RootPanel.
SimplePanel is a DIV. Perhaps that can be used instead?
You added the element, but you have to keep the hierarchy of the actual GWT Widgets too.
I don't see a clean way to do this, but you could use something like jQuery to grab the button by and ID and add a click handler back to it that would call the original click handler.
private static native void registerEvents(String buttonId, MyClass instance)/*-{
var $ = $wnd.$;
//check click
$('#'+buttonId).live('click', function(e) {
e.preventDefault();
instance.#com.package.MyClass::handleButtonClick(Lcom/google/gwt/event/dom/client/ClickEvent;)(null);
});
}-*/;
Call this registerEvents() either in your onAttach or constructor.
I once had a similar problem. You can use the gwt-openlayer's MapWidget as follows:
private MapWidget createMapWidget() {
final MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setDisplayProjection(DEFAULT_PROJECTION);
defaultMapOptions.setNumZoomLevels(TOTAL_ZOOM_LEVELS);
MapWidget mapWidget = new MapWidget(MAP_WIDGET_WIDTH, MAP_WIDGET_HEIGHT, defaultMapOptions);
map = mapWidget.getMap();
return mapWidget;
}
And then add it to any panel be it vertical or horizontal.
MapWidget mapWgt = createMapWidget();
VerticalPanel mainPanel = new VerticalPanel();
mainPanel.add(mapWgt);
...
... add whatever you want
...
You can finally add the created Panel(containing the MapWidget and the gwt widget) to the PopupPanel. Also, you should now be able to add handlers to the gwt button.
Does anybody know how to resize a GWT DockLayoutPanel's child panels? When I add a directional panel I have to give it a size ie:
panel.addSouth(new HTML("south"), 2);
How can I then resize this south panel after the fact?
You can use the setWidgetSize method like this:
DockLayoutPanel panel = new DockLayoutPanel(Style.Unit.EM);
HTML html = new HTML("south");
panel.addSouth(html, 2);
// change the size of the html widget to 4em
panel.setWidgetSize(html, 4);