I'm using visural-wicket's fancy box (http://wicket.visural.net/examples/app/fancybox) to display some YouTube videos on my site.
Basicly the HTML looks like this:
...(some other divs)
<img class="imgClass" src="img.png" />
As you can see only difference is that one is a hyperlink (in my case with fixed width/height and background img) and second one is hyperlink with img.
The first one works good and gives really nice looing fancy box like in an example. The second one instead of making a fancy box, redirects to youtube video on full screen. What might be the problem? Java code looks like this:
public class MyWebPage extends WebPage {
private static final String YOUTUBE_LINK = "someYoutubeVideoLinkHere";
public MyWebPage() {
add( new Fancybox( "iframe", YOUTUBE_LINK ).setWidth( 560 ).setHeight( 315 ) );
add( new Fancybox( "iframe2", YOUTUBE_LINK ).setWidth( 560 ).setHeight( 315 ) );
}
Related
I'am populating a ListView with images.
In pseudocode:
populateItem(model){
load base64 from database
image.setDefaultModel(base64)
The image is just a webcomponent and in html it is just <img src="">
How can i show a indicator while the image is loaded?.
I first thought of adding IAjaxIndicatorAware but this triggers the indicator when the image is doing an AjaxRequest.
Since you seem to load and display the image as a Base64 src it will directly get send in the html response and not loaded later (in contrast to images with a src that links to another URI).
You could wrap the image in an AjaxLazyLoadPanel.
This will first display an AjaxIndicator while the content is generated and get later replaced by the actual loaded content once it is done loading/generating:
edit
I got an Exception : Component must be applied to a tag of type [img].
i didn't consider that problem. AjaxLazyLoadPanel allways uses a <div> as a html tag to display the component it loads. To display a base 64 image you would need to wrap it in another Panel:
public class Base64ImagePanel extends Panel {
public Base64ImagePanel(String wicketId, String base64Data, String contentType) {
super(wicketId);
WebMarkupContainer image = new WebMarkupContainer("image") {
protected void onComponentTag(ComponentTag tag) {
super.onComponentTag(tag);
checkComponentTag(tag, "img");
tag.put("src", "data:" + contentType + ";base64," + base64Data);
}
}
add(image);
}
}
Base64ImagePanel.html:
<wicket:panel>
<img wicket:id="image"></img>
</wicket:panel>
And then use that wrapper Panel in the AjaxLazyLoadPanel:
add(new AjaxLazyLoadPanel("imageLazyLoad") {
#Override
public Component getLazyLoadComponent(String id) {
//load your actual base64 from database, i use some example Strings for demonstration in the following line
Base64ImagePanel imagePanel = new Base64ImagePanel(id, "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==", "image/png");
return imagePanel;
}
});
In my wicket application there are pages for users depending upon their role and on different criteria. In my database I am storing the path of image to be used as a background for that user. Every user has a unique page. I know I can add read image if I do something like this :
<img wicket:id="img">
and corresponding to this I am writing the code which will get image for me .
But how can I set the image as body background dynamically .I am pretty much new to wicket .Can anybody have a clue how to do that ?
In your page you can do it with some header contribution:
#Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
response.render(CssHeaderItem.forCSS("body{ background-image: url('" + getBackgroundBodyImagePath() + "');};", "uniqueBodyBackground"));
}
Or you could assign a wicket id to your <body> element and add an AttributeModifier like this:
#Override
protected void onInitialize() {
super.onInitialize();
bodyElement.add(AttributeModifier.replace("style", "background-image: url(" + getBackgroundBodyImagePath() + \"');"));
}
I want to fetch an image from a remote server (not my app's server, but I don't think that matters) and display it in an existing Image widget. The existing widget displays its original content, from a ClientBundle ImageResource , OK.
In UiBinder template:
<g:Image ui:field='myImage' resource='{res.anImage}'/>
In code:
#UiField Image myImage;
...
int width = Window.getClientWidth();
int height = Window.getClientHeight();
String url = ...;
myImage.addErrorHandler(new ErrorHandler() {
public void onError(ErrorEvent event) {
Window.alert("Error getting image data: " + event);
}
});
myImage.addLoadHandler(new LoadHandler() {
public void onLoad(LoadEvent event) {
Window.alert("LoadEvent: " + event);
}
});
myImage.setUrlAndVisibleRect(url, 0, 0, width, height);
As far as I can tell setUrlAndVisibleRect is a no-op. FireBug reports no network activity -- no request to the server specified by the URL. What am I overlooking? In my extended thrashing about trying to get this working I have inferred that it may have something to do with myImage not being "logically attached", but I'm not entirely sure what that means and I've no idea how to correct it if that is the problem.
EDIT with SUMMARY of SOLUTION:
My initial hunch was right. Because I had chosen to implement the image code within a second pseudo-widget (...extends Composite) that shared my UiBinder template with the main pseudo-widget that implements most of my app's UI, I got into trouble. I neglected to add this second pseudo-widget to the RootPanel as is normally done in the class that implements EntryPoint. This left my Image widget unattached to the widget chain, because its parent, the second pseudo-widget, was unattached. And an Image widget must be attached to work. What I ended up doing is moving the Image code back into my main app/GUI class, i.e., into the first and now only pseudo-widget and abandoning the special class for the Image code. I did that because it's simpler and the Image code turns out not to be as long as I had originally thought.
Adding image to the DOM is little tricky,the below code which supports all the browsers(setVisibility trick added to support IE also,as It has a different way to image rendering).
I did'nt use setUrlAndVisibleRect before and AFAIK,Image must render to the DOM inorder to resize it.Just try the below codes.
image.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
//Do your operations on image .//resize ..etc
image.getElement().getStyle().setVisibility
(Style.Visibility.Visible);
}
});
image.getElement().getStyle().setVisibility(Style.Visibility.HIDDEN);
RootPanel.get().add(image);
image.setUrl(url);
You are using ClientBundle ImageResource which is compile time. You cannot change it unless you replace the new image with exact name in the exact position of prev one. One of the possible hack which is possible is, place the image in a div with its ID set ( getElement().setId("your ID") ). Once you get you new image you use RootPanel.get("Your Id") and do your job.
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 want to create a simple SVG graphics in GWT using only DOM manipulation (via DOM class). Eventually (after compilation with GWT compiler), I want to have a <path> element inside <svg> element.
The final effect should look, more or less, as follows:
<html>
<body>
<svg>
<path stroke="black" d="M200 200 L300 150"></path>
</svg>
</body>
</html>
Here is the java GWT code which should create such effect:
Element svg = DOM.createElement("svg");
Document.get().getBody().appendChild(svg);
Element path = DOM.createElement("path");
path.setAttribute("stroke", "black");
path.setAttribute("d", "M200 200 L300 150");
svg.appendChild(path);
The problem is that the path doesn't show up in the browser (I can see only white background). What's very interesting, if I see the source of the page via the browser, copy the whole source (from <html> to </html>), paste it to a new blank document in a text editor, save it to the hard drive as HTML file and open it in the browser, the path is displayed (it means the source is updated correctly).
Why the path doesn't show up in the screen for the first time (and does show up for the second time)?
Thank you for your help!
Edit:
As it turns out, using ComplexPanel and XML namespace works if I want to draw a <path> element. But now I want to draw a text along path.
The final effect should look like this:
<svg>
<defs>
<path id="myPath" stroke="black" d="M75,20 a1,1 0 0,0 100,0"></path>
</defs>
<text x="10" y="100">
<textPath xlink:href="#myPath">Text along a curved path...</textPath>
</text>
</svg>
The java code which should generate it:
class SVGPanel extends ComplexPanel {
private static final String SVG_NAMESPACE = "http://www.w3.org/2000/svg";
public SVGPanel() {
setElement(createElementNS(SVG_NAMESPACE, "svg"));
showcaseSVG();
}
private void showcaseSVG() {
Element defs = createElementNS(SVG_NAMESPACE, "defs");
getElement().appendChild(defs);
Element path = createElementNS(SVG_NAMESPACE, "path");
path.setAttribute("id", "myPath");
path.setAttribute("stroke", "black");
path.setAttribute("d", "M75,20 a1,1 0 0,0 100,0");
defs.appendChild(path);
Element text = createElementNS(SVG_NAMESPACE, "text");
text.setAttribute("x", "10");
text.setAttribute("y", "100");
getElement().appendChild(text);
Element textPath = createElementNS(SVG_NAMESPACE, "textPath");
textPath.setAttribute("xlink:href", "#myPath");
textPath.setInnerText("Text along a curved path...");
text.appendChild(textPath);
}
private native Element createElementNS(final String ns,
final String name)/*-{
return document.createElementNS(ns, name);
}-*/;
}
The text along path doesn't show up. Of course, as previously, if I copy the generated source to a new HTML file and open it in the browser, it does.
I think you need to use setAttributeNS, passing in the xlink namespace.
So in the given code above, replace:
textPath.setAttribute("xlink:href", "#myPath");
With:
textPath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#myPath");
Well the problem seems to be that there is no namespace defined for the svg. Also svgs seem to only be drawn in GWT if they are set in a ComplexPanel....
Anyway here is a example how to draw a SVG element with GWT.
package XXXXXXX;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.ComplexPanel;
public class SVGPanel extends ComplexPanel {
private static final String SVG_NAMESPACE = "http://www.w3.org/2000/svg";
public SVGPanel() {
setElement(createElementNS(SVG_NAMESPACE, "svg"));
showcaseSVG(); // Demonstrate that SVG works! Inexplicably!
}
private void showcaseSVG() {
Element svgElement = createElementNS(SVG_NAMESPACE, "circle");
svgElement.setAttribute("cx", "50");
svgElement.setAttribute("cy", "50");
svgElement.setAttribute("r", "30");
getElement().appendChild(svgElement);
}
private static native Element createElementNS(final String ns,
final String name)/*-{
return document.createElementNS(ns, name);
}-*/;
}
Adding this to your rootpanel draws the specified path.
Sources: http://de.w3support.net/index.php?db=so&id=691809
Regards,
Stefan