How do I convert text block to code block? - html

I have to create code snippets in UI (like in StackOverflow/bootstrap etc.) where the data is coming from the database.
Suppose my code is:
class test {
public static void main(String args[]) {
System.out.println("Hello");
}
}
I am sending this piece of code exactly like this (with proper tabs and enter) but when I render this in view it becomes a single line. I saw that the data gets stores as a single line in the database.
Is there any way to do this in Angular? I have tried using pre but it can't understand where to break line.

Related

JavaFX WebView: link to anchor in document doesn't work using loadContent()

Note: This is about JavaFX WebView, not Android WebView (i. e. I have seen "Android Webview Anchor Link (Jump link) not working").
I display a generated HTML page inside a javafx.scene.web.WebView that contains anchors and links to those anchors like this:
<p>Jump to Introduction</p>
some text ...
<h1 id="introduction">Introduction</h1>
more text ...
I use this code to load the HTML into the WebView:
public void go(String location) {
try {
// read the content into a String ...
String html = NetUtil.readContent(new URL(location), StandardCharsets.UTF_8);
// ... and use loadContent()
webview.getEngine().loadContent(html);
} catch (IOException e) {
LOG.error(e);
}
}
Everything is rendered correctly, but if I click on the link named "Introduction", nothing happens.
The HTML however is correct, which I checked by instead using this code:
public void go(String location) {
// use load() to directly load the URL
webview.getEngine().load(location);
}
Now, everything worls fine.
The problem seems to be somehow because the document URL of the WebView is null when using loadContent(), but since it's a readonly property, I have no idea how to make it work.
I need to use loadContent(), because the HTML is generated on the fly, and if possible in any way, I don't want to have to write it out to a file just to make anchor links working. Is there a way to fix this?
EDIT
I filed a bug for JavaFX.
It's probably another WebEngine bug. A lot of that code is just a native libraries wrapped in api, so we can't modify it in runtime to fix some disabilities.
If you are able to change the structure of generated file you can implement scrolling to element in js:
<script>
function scrollTo(elementId) {
document.getElementById(elementId).scrollIntoView();
}
</script>
<a href='#' onclick=scrollTo('CX')>Jump to Chapter X</a>
<h2 id="CX">Chapter X</h2>
If you can't change the structure, there is some steps that I've made to try to fix it and some suggestions - at first I've set value of location by reflections after loadContent for sure:
Field locationField = WebEngine.class.getDeclaredField("location");
locationField.setAccessible(true);
ReadOnlyStringWrapper location = (ReadOnlyStringWrapper) locationField.get(engine);
location.set("local");
But in fact, keeping state of actual location is just an information for you and manipulating this changes nothing. I've also found a way to set url from js (just a long shot, we don't have any specific details why it's not working):
window.history.pushState("generated", "generated", '/generated');
Of course we can't because of:
SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
I think you should forget about loadContent(). You said that you didn't want to write generated content to file. A little dirty hack but really helpful for you could be wrapped http server on random and unused port in your application. You don't even need external libraries because Java has simple utilities like that:
HttpServer server = HttpServer.create(new InetSocketAddress(25000), 0);
server.createContext("/generated", httpExchange -> {
String content = getContent();
httpExchange.sendResponseHeaders(200, content.length());
OutputStream os = httpExchange.getResponseBody();
os.write(content.getBytes());
os.close();
});
server.setExecutor(null);
server.start();
You can also use another browser to display your page, e.g. JCEF (Java Chromium Embedded Framework).

table division text dissapears after validation is run on submit

In my razor page I've got several check boxes arranged in a table. I've got some other #Html.EditorFor elements that are required inputs. When I submit, and the validations are run, the page refreshes with the eoor messages and the text next to my check boxes in the table disappears. What's up with that?
My checkboxes are made with #Html.CheckBoxFor
I'm not using any special stylings or class attributes or anything right now.
You are correct. When the form is posted, you will lose all of that data provided you do not resend it back into your view. In your controller, you need to return the model along with the view. Without seeing your code, I can't give a specific answer but it should look something like this:
public ActionResult DoSomethingWithFormPostData(Model yourModel)
{
//Do whatever you need to do.
return PartialView("_yourView", model);
}
Alternatively, I like to have a method in my controllers to I use for the sole purpose of populating a page. If you have something like that, you can refer back to that sending the model as a routevalue in this way:
public ActionResult DoSomethingWithFormPostData(Model yourModel)
{
//Do whatever you need to do.
return RedirectToAction("_yourView", "YourController", model);
}

How to show both pregenerated html and an image in JSP?

OK, here is the problem I have. I have a servlet that dynamically creates an image (not based on parameters) which I do NOT want to save on the HDD.
I also have a HTML template (JSP) where I want to show that picture.
I create my image as following:
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PieDataset dataset = createDataset();
JFreeChart chart = createChart(dataset, "OS Usage");
resp.setContentType("image/png");
ChartUtilities.writeChartAsPNG(resp.getOutputStream(), chart, 500, 400);
req.getRequestDispatcher("report.jsp").forward(req, resp);
}
My JSP looks like this:
<body>
<h1>OS usage</h1>
<p>Here are the results of OS usage in survey that we completed.<br>
<p><img alt="OS usage" src="/reportImage">
</body>
When that code is executed, I get what I expected, from the way I wrote my code, a image only, without any html.
My question is how to do it so the HTML renders as well.
Thx.
You should have two servlets:
One to generate the HTML page (by forwarding to a JSP). This generated page contains <img src="/reportImage" .../>. When the browser sees this tag, it sends a second request, to the URL /reportImage.
One to generate the image, mapped to the /reportImage URL. This servlet should only send the bytes of the image to the response output stream. It must not forward to a JSP.
declare count=0 in your servlet.. if u get image then increment the count value.. now tha value is 1.. in your jsp code put one condition if count==1 show that img else hide the tag

How to capture a click event on a link inside a HTML widget in GWT?

I´m evaluating GWT as one of the alternatives to develop AJAX applications for my future projects. Untill now it is as good as it gets, but now I´m stuck looking for a way to capture a click on a tag inside HTML widget. I want to write links inside the HTML but I want to process the clicks in my application, withou reloading the page. Imagine I have the following HTML:
<p>GWT is a great tool and I think it will be my preferred tool to develop web applications. To check out my samples <a id='mylink'>click here</a></p>
I want to capture the click over the "click here" part of the text. What I´ve done so far is to try to attach the id "mylink" to some sort of clickable widget and process the click with a ClickHandler for that widget, but nothing is working.
Is there a way to do that? By the way, I know very little about Javascript.
Thank you in advance.
You can also do it like this:
Anchor.wrap(DOM.getElementById("mylink")).addClickHandler(yourClickHandler);
DOM class is com.google.gwt.user.client.DOM.
Edit after comments.
OK, the method works for elements out of GWT widgets (element comes with HTML file). If you need to generate it in GWT code then you can add link element separately. But it won't work if your content goes for instance from DB.
HTMLPanel html = new HTMLPanel("GWT is a great tool and I think it will be my preferred tool to develop web applications. To check out my samples ");`
Anchor a = new Anchor("click here");
a.addClickHandler(yourClickHandler);
html.add(a);
If it is fully dynamic I don't have an idea at this point. I was trying with HTML() widget, where you can plug your click handler, but I couldn't find a right way to determine whether the click was in A element. Strange.
The final approach (I hope)
This one should work finally. And I think this is the way it should be done, especially that it allows any structure of the HTML. The are two ways:
1. Convert links within HTMLPanel
This one will find all A elements and convert them into Anchors. It ignores href attribute, but you can add it easily :)
HTMLPanel html = new HTMLPanel("<p>Multilink example 2: <a>link1</a> and <a>link2</a></p>");
NodeList<Element> anchors = html.getElement().getElementsByTagName("a");
for ( int i = 0 ; i < anchors.getLength() ; i++ ) {
Element a = anchors.getItem(i);
Anchor link = new Anchor(a.getInnerHTML());
link.addClickHandler(...);
html.addAndReplaceElement(link, a);
}
2. Insert links into prepared spots
Just insert placeholders, where the widgets should be inserted. You could also use the addAndReplaceElement() method but with string ID.
Anchor a1 = new Anchor("a1");
a1.addClickHandler(...);
Anchor a2 = new Anchor("a2");
a2.addClickHandler(...);
HTMLPanel html = new HTMLPanel("<p>Multilink example: <span id='a1'></span> and <span id='a2'></span></p>");
html.add(a1, "a1");
html.add(a2, "a2");
Try something like this.
For your web page, you can use UiBinder:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel ui:field="panel">
<p>
GWT is a great tool and I think it will be my preferred tool to
develop web applications. To check out my samples
<g:Anchor ui:field="myLink" text="click here" />
</p>
</g:HTMLPanel>
</ui:UiBinder>
Notice that I've replaced your tag with an Anchor widget. There is also a Hyperlink widget, which has hooks into the history system.
The Anchor has a id of "myLink", which is used in the GWT companion to the XML file:
public class So extends Composite {
private static SoUiBinder uiBinder = GWT.create(SoUiBinder.class);
interface SoUiBinder extends UiBinder<Widget, So> {
}
#UiField
Anchor myLink;
public So() {
initWidget(uiBinder.createAndBindUi(this));
myLink.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
GWT.log("caught the click");
}
});
}
}
I've added a ClickHandler that captures and acts on the click event.
The main program is simple:
public class SOverflow implements EntryPoint {
public void onModuleLoad() {
RootLayoutPanel.get().add(new So());
}
}
Run this after and a webpage appears with the text and hyperlink. Click on it and "caught the click" appears in the console window (I'm using Eclipse).
I hope this is what you're after. If not exactly, it might at least give you some ideas of how to attack your problem.

JfreeChart tooltips with HTML code inside

It is possible to use HTML in JFreeChart tooltips?
I extend StandardCategoryToolTipGenerator and override method generateToolTip
public String generateToolTip(Dataset dataset, int row,
int column, int row) {
return "<h1>ToolTips on line 1<\\h1> <br /> Second line tooltip"
}
But it is displaying whole string instead.
Does anyone know how to display html text in jfrechart tooltips?
Use a CategoryURLGenerator, illustrated here for the homologous PieURLGenerator.
Addendum: As the tool tips are not Swing components, HTML is not supported. You can retrieve the result from your chosen URL generator in a ChartMouseListener to achieve any desired result.