GWT CSS String Parser - gwt

Does gwt have a built in parser for converting css based strings to java constructs?
IE I'm interested in writing my own widget that takes for instance height/width:
public class MyWidget extends Composite{
private double width;
private Style.Unit widthUnit;
private double height;
private Style.Unit heightUnit;
/**
* #width - width of my widget in CSS dimensions (ie. "10px", "1em" ...)
* #height - height of my widget in CSS dimensions (ie. "10px", "1em" ...)
*/
public MyWidget(String width, String height){
// Parse out strings and set dimensions / units
}
}
I could easily do some regex on this but I thought I'd see if there was some sort of built in mechanism for this, I'd hate to re-invent...
Also, I of course thought about just accepting double width, Style.Unit widthUnit in the constructor, but UiObject's setWidth takes a CSS string, so I still have to do some String munging, albeit the other way around. Ideally I'd have 2 constructors to achieve both possibilities with a simple mechanism to parse the Strings / dimensions and Units properly.
EDIT:
Forgot to mention the REASON that i'd like to parse out these values:
I'm trying to write a simple scroll panel (think iphone nav) so when a user clicks a button, a new 'item' scrolls in from the right.
On the backend this would be:
1) Fetch new scroll item
2) Extend scroll wrapper to accompany new item (this is where i need actual widths)
2) Append to item scroll wrapper
3) Animate scroll wrapper (by sliding left the width of 1 item) to expose newly added item to visible section of panel wrapper
The reason I need original widths is because I'd like to extend my scroller panel by the width of the item added to it. If I'm just getting strings, I can't exactly say setWidth( currentWidth + itemWidth)
Basically I'm trying to mimic JQuery Tools Scroller

GWT currently uses Flute to parse CSS, however there is a discussion to migrate to CSS Parser (http://cssparser.sourceforge.net/). You could directly use one of those parsers.
BUT, for the use case you mention - I don't think you need anything that heavy. GWT actually doesn't parse the width and height strings, it just passes it to browsers DOM and then the browser evaluates it appropriately. You should do the same.
Meaning, your API just takes a string. The caller can pass ems or pxs or percentages. Your API isn't concerned, because it will just push it to the browser to understand.

Related

In gwt read value from dynamic created text area

In gwt, I am creating a dynamic text area and now I want to read the value of the text area.
Can some help in me reading the value of dynamic created text area.
It all depends on which classes you use. The convenient way to read from com.google.gwt.user.client.ui.Label is to call getText(). But of cause the most generic way to get the interior of your "text area" is to call getElement().getInnerHTML() of your com.google.gwt.user.client.ui.UIObject object. For example:
FlowPanel myTextArea = new FlowPanel(); // FlowPanel extends Widget extends UIObject
myTextArea.add(someWidget);
GWT.log("Here is what I have inside myTextArea: " +
myTextArea.getElement().getInnerHTML());
A note of criticism. Normally, when you ask a question related to some custom UI, it should come along with at least few lines of code.

View size not match with layoutPanel container in GWT MVP and SmartGWT

I'm new in GWT, and have problem with view implementation... I use MVP, and SmartGWT. I'll expose this by defining how I settle my MVP and what its weird.
In my onModule, I define class builded with UIbinder. I've declared a LayoutPanel and set it like this in the constructor of the class.
layoutPanel = binder.createAndBindUi(this);
I have container in this class:
public void setBodyLayout() {
panel.setWidgetLeftWidth(menuPanel, xx, PCT, xxx, PCT);
panel.setWidgetRightWidth(bodyPanel, xx, PCT, xx, PCT);
}
menuPanel and bodyPanel are both simplePanel declared in the class above(UIfield use with UIbinder). There are in LayoutPanel. For the method display of my ActivityMapper I've got this method (In reality I have two ActivityMappers, two method that like below and two containers, for menu and body)
public AcceptsOneWidget getBodyContainer() {
return new AcceptsOneWidget() {
#Override
public void setWidget(IsWidget w) {
Widget widget = Widget.asWidgetOrNull(w);
bodyPanel.setWidget(widget);
}
};}
return in my onModule, I declared my ActivityMapper like this
BodyActivityMapper bodyContainerActivityMapper = new BodyActivityMapper(clientFactory);
ActivityManager bodyContainerActivityManager = new ActivityManager(bodyContainerActivityMapper, eventBus);
bodyContainerActivityManager.setDisplay(my_class_described_above.getBodyContainer());
the same work was done with MenuActivityMapper...
Finally
RootLayoutPanel.get().add(my_class_described_above.getLayoutPanel());
when getLayoutPanel() return my layoutPanel declared in the class that I have declared above.
So, each region have its own ActivityMapper.ActivityMapper for the menu have only one activity, and "ActivityMapperBody" have sevral activities triggered by menu.
Utility of container are to settle my layout for different "action". I defined zone with it, in order to receive view started with activity.
But this configuration work only with view builded with UIbinder... In each view, I declare a Layout and return it like this
public Widget asWidget() {
return my_layout_declared;
}
When I return my layout, nothing works. I really don't understand why, and I figure that its worse with smartgwt. All I want its just retrieve my layout and put it in my container... Work with smartgwt can save a lot of time...
I've more detailed my issue to make sure that anyone understand. And ask to you Chris Lercher if your post can help me.
Thank for reading
The Smart GWT FAQ mentions a solution:
If you absolutely must place a Smart GWT interface inside a GWT container and you want it to
fill the container, the best approach is to listen for a window-level resize event and run
your own layout calculations that ultimately call resizeTo() on your topmost Smart GWT
widget.
However, it is wrong by saying that
...GWT containers [do not] fire events when they are resized
Layout panels (the "new" panels since GWT 2.0, which was released on Dec 08, 2009) actually do (see the ProvidesResize and RequiresResize interfaces). So if you have such a panel as your MVP body container (and if its parents are also LayoutPanels up to a top RootLayoutPanel), then you can also override the body container's onResize() method instead of listening to the Window resize event.
So how can you solve your concrete problem?
You need to call resizeTo(width, height) on your topmost Smart GWT layout
When you put in a (new) Smart GWT layout, e.g. maybe you put in a new one when the Place changes.
When the window resizes, or when other things happen that change the size of the container (alternatively, if you're using Layout Panels, you can use its onResize())
For the resizeTo(width, height) call, you'll have to determine the width and height by asking the surrounding container, e.g. by using
container.getElement().getClientWidth()

GWT drag and drop animation

I have a flow panel with many photo-widgets inside (gallery with random number of rows and columns, depends on screen size) for which I want to implement drag and drop behavior to change their order. I am using gwt-dnd library. Its FlowPanelDropController allows you to define your own positioner (delimiter) which shows the candidate location for dropping the dragged widget.
I want this positioner to be the empty space with defined width, and the challenging thing is to implement sliding animation effect for the when positioner is added and removed.
If you are a desktop Picasa app user you know what I mean: the target row slides both sides (little to the left, little to the right) extending the space between the items where you are going to drop a photo.
The whole thing is complex enough, but any help related to how to apply the animation for positioner attach/detach is appreciated. Maybe I need to use a different approach (e.g., use GWT native dnd instead of gwt-dnd lib and no "positioners" at all) if you have any ideas how this could be helpful.
Thanks.
Well, I ended up overriding AbstractPositioningDropController (parent of FlowPanelDropController) and adding some extra features.
1) newPositioner() method now builds the Label, which is vertical space with some small width, height and decoration. This widget's element has constant id (say, "POSITIONER"), which helps to distinguish between multiple positioners if you plan to have several of them while navigating with a drag object over multiple drop targets. Also some transition CSS effects were applied to the Label, which will be responsible for handling animated extension of Label's width.
2) in onEnter() I do the following
...
removePositioner(getPositionerElement());
Widget positioner = newPositioner();
dropTarget.insert(positioner, targetIndex);
animatePositionerExtension();
where getPositionerElement() returns DOM.getElementById(POSITIONER)
At the same time removePositioner(..) resets the id of this element to something abstract and ideally should provide some animation before calling .removeFromParent(). But I didn't have enough time to properly debug this so ended up just removing the old positioner with no animation.
Method animatePositionerExtension() contains the code that changes the width of the positioner widget, so that CSS transition will catch that and provides animation.
All access to positioner widget in the class should be provided through updated methods.
3) onLeave() contains line removePositioner(getPositionerElement());
4) In the end of onMove() I added a couple of lines:
galleryWidget.extendHoveredRow(targetIndex - 1);
animatePositionerExtension();
where extendHoveredRow(hoveredWidgetOrdinal) implemented the logic to "limit" the sliding effect in the single line:
int rowHovered = -1;
public void extendHoveredRow(int hoveredWidgetOrdinal) {
int newRowHovered = getRowByOrdinalHovered(hoveredWidgetOrdinal);
if (rowHovered != newRowHovered) {
// adjust position of items in the previously hovered row
int firstInPreviouslyHoveredRow = (rowHovered - 1) * itemsInARow;
shiftFirstItemLeft(firstInPreviouslyHoveredRow, false);
rowHovered = newRowHovered;
// extend this row
int firstInThisRow = getOrdinalFirstInThisRowByOrdinal(hoveredWidgetOrdinal);
shiftFirstItemLeft(firstInThisRow, true);
}
}
This is in short how I did the thing. And still there's some room for improvements, like adding animated removal.
Again, it's all about overriding DropController and manipulations with elements inside the "gallery" widget. The benefit of this approach is that I remain in the gwt-dnd operations framework, and also reused a bunch of existent code.
Some notes:
CSS transition is not supported in IE pre-9, but this is unrelated to
this topic.
Put a transparent "glass" div on top of the Image widget if you use it
as a face of dragProxy. This will save you tons of time trying to
understand why either setting element's draggable to false, or
calling event.preventDefault() somewhere else, or other workarounds don't work in one or several browsers and the image itself is being dragged instead of the whole dragProxy widget.

GWT Widget not properly set in the DOM

I would like to print a GWT widget which extends Composite. This widget is composed of a grid whose cells are built with a ListDataProvider. When the user clic on a button print, the widget to print is built. Once this is done, I launch the print:
Element element = widgetToPrint.getElement();
String content = element.getInnerHTML();
print(content);
public static native boolean print(String content)
/*-{
var mywindow = window.open('', 'Printing', '');
mywindow.document.write('<html><head><title>Test</title>');
mywindow.document.write('<link rel="stylesheet" href="/public/stylesheets/ToPrintWidget.css" type="text/css" media="all"/></head><body>');
mywindow.document.write(content);
mywindow.document.write('</body></html>');
mywindow.print();
return true;
}-*/;
So, here is my problem:
The window which is opened by this method contains the core of the widget (built by the UI Binder), but some children are missing...
If I look inside the ListDataProvider and its related FlowPanel, the data are consistent, i.e. I've got several item in my list and in the flowPanel.
Consequently, it should be visible on the printing window...
I thought that maybe the problem was related to the method used to print the widget, so I also tried to add this widget into a dialogbox just before launching the print, to see if the widget was properly built... and it was.
So my widget displays well on a dialogbox, but if I try to give its innerHTML to the print method, by using getElement(), some widgets are missing... I've the feeling that the widgets which should have been built when the ListDataProvider changes are not properly set in the DOM... Somehow it works when I add the widget to a regular component, but it doesn't work when I have to give directly its innerHTML...
Do you have any idea ?
Thanks in advance.
Widgets are not just the sum of their elements, and DOM elements are not just the string that they are serialized to. Widgets are the element, and all events sunk to the dom to listen for any changes or interactions by the user. Elements then have callback functions or handlers they invoke when the user interacts with them.
By serializing the element (i.e. invoking getInnerHTML()), you are only reading out the structure of the dom, not the callbacks, and additionally not the styles set by CSS. This probably shouldn't be expected to work correctly, and as your experience is demonstrating, it doesn't.
As this is just a print window you are trying to create, event handling is probably not a concern. You just want the ability to see, but not interact with, the content that would be in that set of widgets. Styles are probably the main problem here then (though your question doesn't specify 'some children are missing' doesn't tell us what is missing, or give us any more clues as to why...) - you are adding one stylesheet in your JSNI code, but CellTable (which I assume you are using since you reference ListDataProvider) needs additional CssResource instances to appear correctly. I'm not sure how you can hijack those to draw in a new window.
Are you only using this to print content, not to let the user directly interact with the data? If so, consider another approach - use a SafeHtmlBuilder to create a giant, properly escaped string of content to draw in the new window.
String content = element.toString();
This will include all hierarchy elements in the node.
Just a reminder, all the GWT handlers will not work, and you have to sink all the events using DOM.
You might want to grab the outer HTML rather than the inner one.
GWT unfortunately has no getOuterHTML, but it's relatively easy to emulate.
If your widget is the only child within an element, then simply get the inner HTML of the parent element (w.getElement().getParentElement().getInnerHTML())
Otherwise, clone your widget's node add it to a newly created parent element, from which you'll be able to get the inner HTML:
DivElement temp = Document.get().createDivElement();
temp.appendChild(w.getElement().cloneNode(true));
return temp.getInnerHTML();
First thank you for your answers, it helped me to work out this problem.
I've almost solve the problem:
First, I do not use ListDataProvider anymore, because it wasn't clear for me when and how the view was refreshed. Instead I add my widgets by hand, which makes sense since, they are not going to move anyway.
Then, I define the style of my widgets using a common CSS stylesheet. However, in order to do it, I can't rely on CssResource, which was the way I was used to do it with GWT. I think that this comes from the JS method which gets lost by this kind of styles... Instead, I have to specify everything in a static CSS stylesheet, and to give it to the JS.
It works perfectly well, ie, I have my widgets, with thei styles, and I can print it.
But...
The color of some widgets depends on the color of the object that they represent. Consequently, I cannot write a generic CSS stylesheet... And as I said, I can't add a style using CssResource... Do you have any ideas on the way to handle that ?
To make sure I'm clear on the way I'm adding styles, here is an example:
Label l = new Label("Here is a cell in my grid to be printed");
l.addStyleName("PrintLineCell-kind_1");
With, in a public CSS stylesheet:
.PrintLineCell-kind_1{
background-color: red;
}
I hope there is a better way than to write 300 styles to cover 300 different colors...

How can I set a custom size for the RichTextArea.Formatter.setFontSize() in GWT?

Using the RichTextArea in GWT, It looks like I can only change the font size to one of the values: LARGE, MEDIUM, SMALL, etc (RichTextArea.FontSize), but I want to be able to setFontSize of the RichTextArea.Formatter to a specific size in pt or in px.
How can I achieve that?
I've been digging a bit on this, and it would seem that it is unfortunately not possible, because browsers are limited in their handling of font sizes in the rich text editors. In particular, Firefox generates the (deprecated) <font size="x"></font> element when the font size is changed, and the value of x can be only in the 1-7 range.
If you have a look at the setFontSize method in RichTextAreaImplStandard (GWT source code), you'll see that it ends up calling the execCommand javascript function, which in the case of FontSize only accepts values in 1-7:
http://msdn.microsoft.com/en-us/library/ms536991%28VS.85%29.aspx
You can actually achieve that using string manipulation of the HTML code.
So if you are not using the background color property of the RichTextArea then what you have to do is to replace the "background-color=RED" to "font-size=12px". And then set it back to the RichTextArea object as setHTML().
This works fine as I've implemented this functionality in one of our production application..
Thanks,
Pratik.