SVG DOM can be controlled with JavaScript, so it can be AJAX-enabled... I wonder if there are some SVG components for Wicket yet. And if Wicket can have pure xml/svg as the output format.
Quick googling shows only a question at Code Ranch.
I don't know if you need a wicket-svg library anymore. But I have started a project at github to provide wicket components to work with svg.
Follow this link: wicket-svg
I don't know of components built, but Wicket definitely can have xml/svg as output format, and it's quite simple to make a Page that renders svg.
Dumb simple example code:
public class Rectangle extends Page {
#Override
public String getMarkupType() {
return "xml/svg";
}
#Override
protected void onRender(MarkupStream markupStream) {
PrintWriter writer = new PrintWriter(getResponse().getOutputStream());
writer.write(makeRectangleSVG());
writer.flush();
writer.close();
}
private String makeRectangleSVG() {
return "<?xml version=\"1.0\" standalone=\"no\"?>\n" +
"<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n" +
"\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n" +
"\n" +
"<svg width=\"100%\" height=\"100%\" version=\"1.1\"\n" +
"xmlns=\"http://www.w3.org/2000/svg\">\n" +
"\n" +
"<rect width=\"300\" height=\"100\"\n" +
"style=\"fill:rgb(0,0,255);stroke-width:1;\n" +
"stroke:rgb(0,0,0)\"/>\n" +
"\n" +
"</svg> ";
}
}
If you map this as a bookmarkable page and call it up, it does display a lovely blue rectangle, as per the hard-coded svg (stolen from a w3schools example). And of course you could easily parametrize the page and generate the svg instead of just sending a constant string...
I suspect it also wouldn't be hard to build a component based on the object tag so that svg could be shown as part of an html page rather than being the whole page like this, but I haven't yet tried to do so.
Related
Ok so i am not looking for an example more of help with an approach i am primarily a java developer so please excuse (and correct) the terminology if it need be. This is also why i need help as i am still early on into my journey into angular.
So i am using angular 5, along with ui-router. I am trying to design a three tabbed page [view, html, css] where the html and css will be text areas where a user will enter said thing, then , the view will be the rendering of that. There will be data (can be fetched prior to or at the time of rendering the view) that will bind to that html. The user will basically be putting in angular templates.
I have been reading this example but not sure if that is the proper approach.
this article had the solution
https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
basically it looks like this
#ViewChild("ancc", { read: ViewContainerRef }) container;
#Input() property:Property = new Property();
constructor(private resolver: ComponentFactoryResolver,private _compiler: Compiler){
console.log("hit layout constructor");
}
view(){
// create the template
const template = '<span>generated on the fly: {{property.label}}</span>';
//clear out the old instance
this.container.clear();
const tmpCmp = Component({template: template})(class {
});
const tmpModule = NgModule({declarations: [tmpCmp]})(class {
});
this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
//attach the component to the view
const cmpRef = this.container.createComponent(f);
//bind the data
cmpRef.instance.property = this.property;
})
}
hope this helps someone!
I want to load an exteranal svg file in SAPUI5. I was thinking of using D3 JS library to do this
Is it possible and advisable ?
If yes ,then are there any other framework based on D3 library which can be utilized to do the integration as SAP UI5 is a object oriented framework and writing D3 code inside the view is not working?
It's possible to load an external SVG with D3, but it's not built-in. Here's an example (the footballs are external SVG icons):
http://bl.ocks.org/emeeks/a347eed5c50a7f1cf08a
However, this is not what D3 is built for. Rather, D3 is built for creating complex SVG graphics based on data. You're better off either using native Javascript (which is mostly what is done in that example, anyway, loading the element on a documentFragment and then cloning the node) or another library. You might want to look at snap.svg, since it's more focused on traditional SVG manipulation.
find my solution below. The idea with the onAfterRendering is taken from SCN.
Alternatively you may consider to use a sap.m.Image. According to CSS Tricks, an <img> tag should be sufficient to display SVG from an external source. However, in my case it didn't work; I suspect the reason was that my service URL doesn't return an adequate MIME type (is: application/xml, should: image/svg+xml???)
return Control.extend("com.example.SvgDisplay", {
metadata : {
properties: {
svgID: "string",
mySvg: "object"
}
},
setSvgID: function(sSvgID) {
var that = this,
sParams;
this.setProperty("svgID", sSvgID, true);
if (sSvgID) {
sParams = $.sap.encodeURLParameters({ id: sSvgID });
d3.xml("/my/svg/service?" + sParams, function (oError, oDocument) {
var oSvgNode;
if (oError) {
// Do error handling - for example evaluate oError.responseText
} else if (oDocument) {
oSvgNode = oDocument.lastChild;
}
that.setMySvg(oSvgNode); // may still be undefined; force re-rendering
});
}
},
// "static" function, renders the basic <div> tag. The rest will be done by method onAfterRendering
renderer : function(oRm, oControl) {
var sId = oControl.getId(),
oMySvg = oControl.getMySvg();
oRm.write("<div"); // Control - DIV
oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important!
oRm.writeClasses();
oRm.write('><div id="' + sId + '-svgContainer"></div>');
oRm.write("</div>"); // end Control - DIV
},
onAfterRendering: function(){
var oMySvg = this.getMySvg(), sDomID, oVis;
if (oMySvg) {
sDomID = this.getId();
oVis = d3.select("#" + sDomID + "-svgContainer").node();
oVis.appendChild(oMySvg);
}
}
});
I'm looking for a way to use JavaFX HTMLEditor's setHtmlText to add a local image. I can add a remote image no problem:
HTMLEditor editor = new HTMLEditor();
editor.setHtmlText("<img src=\"http://someaddress.com\" width=\"32\" height=\"32\" >");
but can't do this for a local image
HTMLEditor editor = new HTMLEditor();
editor.setHtmlText("<img src=\"categoryButton.fw.png\" width=\"32\" height=\"32\" >");
This button is on the same level as the java source. So why won't this work?
Use getResource to get the location of the local image resource.
editor.setHtmlText(
"<img src=\"" +
getClass().getResource("categoryButton.fw.png") +
"\" width=\"32\" height=\"32\" >"
);
It works the same way as loading content into WebView as in:
How to reach css and image files from the html page loaded by javafx.scene.web.WebEngine#loadContent?
Here is an screenshot:
And an executable sample:
import javafx.application.*;
import javafx.scene.Scene;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
public class HTMLEditorWithImage extends Application {
#Override public void start(Stage stage) {
HTMLEditor editor = new HTMLEditor();
editor.setHtmlText(
"<img src=\"" +
getClass().getResource("Blue-Fish-icon.png") +
"\" width=\"32\" height=\"32\" >"
);
stage.setScene(new Scene(editor));
stage.show();
}
public static void main(String[] args) { launch(args); }
}
I was just curious if this was the only way of getting an image into a some sort of text area?
With JavaFX 2, you can embed images mixed with text into a FlowPane as described in Javafx Text multi-word colorization.
Java 8 adds a TextFlow component which allows you to embed an image into a text region.
Both of the above techniques are for data display only. Neither allow for editing of the multi-styled text with images and other nodes inserted in it. For now, the only controls provided by the JavaFX platform for this functionality are the HTMLEditor or a WebView with contenteditable true or an embedded 3rd party editor written in JavaScript.
There have been some 3rd party efforts to create styled text editors using native JavaFX constructs that don't rely on WebView or HTMLEditor, but as of today I don't think any are ready for widespread use.
Sample Code: Append file:\\ in the image tag to refer a local file.
ScreenCapture x = new ScreenCapture();
String imagePath = x.captureScreen(scCaptureCount+++"", "C:\\work\\temp");
String text = editor.getHtmlText();
editor.setHtmlText(text+"<img src='file:\\\\"+imagePath+"' >" );
This code insert image before the last end paragraph tag or end body tag.
String imgUrl = "http://..../image.png";
StringBuilder sb = new StringBuilder(htmlEditor.getHtmlText());
int pos = sb.lastIndexOf("</p>") > -1 ? sb.lastIndexOf("</p>") : sb.lastIndexOf("</body>");
sb.insert(pos, "<span><img src='" + imgUrl + "'></span>");
htmlEditor.setHtmlText(sb.toString());
I'm using GWT 2.5 and I want to make some images in one Panel Draggable and Dropable in another Panel. This is working fine on Firefox, but on IE9 it just don't want to work.
I searched really almost all the day, and didn't find any solution for that. The best threads I found were these here:
Drag and Drop in GWT 2.4
GWT native drag & drop - DragStartEvent not firing on IE9
The difference is that I'm dragging Images, an not Labels. So this could be the problem.
So the code looks something like this:
// Draggable Image
final Image img = new Image(imageName);
img.addDragStartHandler(new DragStartHandler() {
#Override
public void onDragStart(final DragStartEvent event) {
event.setData("text", img.getUrl());
}
});
img.getElement().setDraggable(Element.DRAGGABLE_TRUE);
Then I put it in my "source" panel:
// Image in the source container
wunschContainer = new AbsolutePanel();
img.setPixelSize(size, size);
wunschContainer.add(img, left, top);
The Images are displayed correctly (Firefox and IE9)
The Target Panel looks like this (it's a subclass of AbsolutePanel and implements HasDragOverHandlers and HasDropHandlers)
// Event-handlers for the target container.
this.addDragOverHandler(new DragOverHandler() {
#Override
public void onDragOver(final DragOverEvent event) {
}
});
this.addDropHandler(new DropHandler() {
#Override
public void onDrop(final DropEvent event) {
event.preventDefault();
final String data = event.getData("text");
/* ... some more handling ..., creates an image to be displayed here */
add(image, left, top);
}
});
In Firefox, when I drag the image, the dragging image is displayed under the mouse pointer. On IE9 I can't see an image at all, just a symbol (circle with a slash on it, this "not allowed" symbol). And when I release the mouse button, then nothing happen. I checked also with "F12" that I was using the IE9-mode, and no compatibility mode.
I really don't know what the problem is. The code seems ok (works on FF). Is there a problem making DnD with GWT-Images? The interesting part is, that the "onDragStart()" methode is being fired. But the "drag" is not being done.
Oh, I'm using GWT devmode to test this. Can this be a problem?
I'd like to solve this using only GWT. Or should I go and use another library, like gwt-dnd? Does anybody got plain GWT DnD working on IE9? I can't believe I'm the first one trying that :-(.
So, I tried really a lot of things, and I came across with a solution.
The problem seems to be in the "onDragOver()" method. As I posted in my original question, I have an empty implementation of the method:
this.addDragOverHandler(new DragOverHandler() {
#Override
public void onDragOver(final DragOverEvent event) {
}
});
As this is how I found in many pages. The method must be present, or else the Drag n Drop wont work. But it seems that for IE I need even to prevent the default behaviour (or do something else. Just logging the method was not "something"). So I added a "event.preventDefault();" to the method, and now it works.
this.addDragOverHandler(new DragOverHandler() {
#Override
public void onDragOver(final DragOverEvent event) {
event.preventDefault();
}
});
Just strange, that I couldn't find this information anywhere. This is hopefully useful for somebody else 8-).
I have been having the same issue with IE9 using GWT 2.6 and I have found that setting the data in the onDragStart puts IE9 off. All other browsers work fine. So I ended up doing the following:
this.addDragStartHandler(new DragStartHandler(){
#Override
public void onDragStart(DragStartEvent event) {
if(!isIE9()){
event.setData(RangeSliderControl.KEY, key); // This causes IE9 to not work
}
}}
);
and off course I have added the isIE9() method to my code as follows:
/**
* Gets the name of the used browser.
*/
public static boolean isIE9() {
return (getBrowserName().indexOf("msie 9.0") != -1);
};
/**
* Gets the name of the used browser.
*/
public static native String getBrowserName() /*-{
return navigator.userAgent.toLowerCase();
}-*/;
I am using webbrowser control to show local html content, cause the the background-color of the html page is black.
When I using NavigateToString method to navigate to the webbrowser, the webbrowser's background become white immediately, after a white coming the html page, then the background become black.
It's a little disturbing. Consider providing the best UX, I want to implement that the default background of the webbrowser is black.
Thx in advance.
Unfortunately this is a quirk of the WebBrowser control. I discovered the exact same issue when writing PhoneGap applications with WP7. The solution I came up with was to create a UI element that covers the WebBrowser control, wait for the content to be rendered, then fade out and hide the covering element, as described in this blog post.
Apply below code for your browser control.
public static readonly String StyleForBlackbody =
"<style type='text/css'>\n" +
" body {\n" +
" background-color : ??;\n" +
" font-size:$$px; \n" +
" font-family: ##;\n" +
" color: %%; \n" +
" };\n" +
"</style>\n";
public static String GetHtmlHead()
{
String html = StartHead;
html += StyleForBlackbody;
html = html.Replace("??", "auto");
html = html.Replace("%%", "black");
}
call above method.