Show local image in WebView - html

I'm successfully using the WebView control to render a HTML string that I'm parsing to it... It's rendering my CSS, H1, and paragraph content perfectly.
Then, I tried to add an image tag and load in an image that is already stored locally on the phone. But it can't see to find or render the image in the WebView. How do I display locally stored images in the WebView?
Here's what I have tried:
string documentsPath = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal);
string localFilename = "project-" + ProjectId + ".png";
string localPath = "file://" + Path.Combine(documentsPath, localFilename);
string FinalHtml =
"<html><head><style>a, h1 {color:#6fb731;} h1{font-size: 1.4em;} p, body{color:#333333;}</style></head><body>" +
"<img src=\"" + localPath + "\" />" +
"<h1>" + ProjectName + "</h1>" + ProjectHtml +
"</body></html>";
ProjectsWebView.LoadData(FinalHtml, "text/html", "UTF-8");

Related

& is always being decoded (which I don't want) using HtmlOutput or HtmlTemplate

I've created a script one or two years ago, which exports all strings for Android and iOS.
It shows a dialog with textareas for each language with the full strings file in the textarea.
It always worked fine until UiApp was removed.
So right now I've tried using HtmlService and HtmlTemplate. Both result in & being converted to &.
HtmlOutput I'm using this code:
var htmlOutput = HtmlService.createHtmlOutput().setWidth(800).setHeight(600);
htmlOutput.append('<textarea style="width: 100%; height: 100px;" id="' + id + '">' + content + '</textarea>');
This produces a textarea with for example this:
<string name="terms">Terms & Privacy</string>
For HtmlTemplate I've tried:
var templateString = '<textarea style="width: 100%; height: 100px;" id="' + ("export_" + i) + '">' + '<?!=' + texts[i] + '?>' + '</textarea>';
// Or this one without Force-printing scriptlets
// var templateString = '<textarea style="width: 100%; height: 100px;" id="' + ("export_" + i) + '">' + texts[i] + '</textarea>';
HtmlService.createTemplate(templateString).evaluate().setWidth(800).setHeight(600);
I tried to use Force-printing scriptlets which gives an even weirder output:
Terms & Privacy
It doesn't even give the <string> tags around it. When I leave the Force-printing scriptlets away it gives the same result as HtmlOutput.
Some extra info
Before I'm exporting it using these methods I'm making sure every string is being converted so it will be the correct output for Android and iOS. For example I'm using this piece of code to convert a string:
var text = o.texts[textIndex];
text = text.replace(/&/g, "&");
'<string name="' + identifier + '">' + text + '</string>' + "\n";
This is of course not all, but just to give an idea how the script works.
Solution
You can utilize the appendUntrusted() method to return HTML without being parsed. Everything you append to output via this method will not be treated as markup (think of it as setting textContent property).
Sample
var htmlOutput = HtmlService.createHtmlOutput().setWidth(800).setHeight(600);
htmlOutput.append('<textarea style="width: 100%; height: 100px;" id="' + id + '">');
htmlOutput.appendUntrusted(content);
htmlOutput.append('</textarea>');
Output
And this is a sample output (I used '& & and two' as content)
Useful links
appendUntrusted() method reference;
You can try replacing & with literal &:
text = text.replace(/&/g, "&amp;");
<textarea><string>Terms &amp;Privacy</string></textarea>
<textarea></textarea>
<script>
document.querySelectorAll('textarea')[1].innerText = "Terms & Conditions"
</script>

multi-line in aurelia component html attribute property

This is a weird question about possibly embedding a string in an aurelia html file within the attribute tag but I would like to keep my tab and line formatting.
So, in my TS file I have the following:
this.queryDateStart += "type=EntityOne&dateQueryString=";
this.queryDateStart += "" +
"eOr( " +
"eAnd( " +
"eAnd( facetName:isExcluded AND facetValue:No );" +
"dAnd( facetName:deadlineDate AND "+ dateRangePredicate + ");" +
"); " +
"dOr( " +
"(facetName:excludedUntilDate AND "+ dateRangePredicate + ")" +
");" +
");"
And instead of having the following:
<section as-element="ab-deadlines" data-query="${queryDateStart}"></section>
I would like to actually pass the literal string from above.
But with the line spaces.
Would that break anything?
So for example ( going to try this today) - in my html file I would put:
<section as-element="ab-deadlines"
data-query="
eOr(
eAnd(
eAnd( facetName:isExcluded AND facetValue:No );
dAnd( facetName:deadlineDate AND ${dateRangePredicate} );
);
dOr(
(facetName:excludedUntilDate AND + ${dateRangePredicate} )
);
);"></section>
About breaking: it shouldn't break anything. In the end, it's just normal HTML attribute, and as long as the spec allows it, it works in Aurelia, as Aurelia works directly, and plainly with HTML elements.
You can see it yourself at this sandbox https://codesandbox.io/s/z20qx0q263

Linking a css file breaks html table format

I am working on some Java Servlets, and basically i am outputting the results of an sql query to a table. I have some basic formatting for the table in the html code, but i also want to link a css file.
Whenever i link a stylesheet (even a blank one, or one with the same attributes as the html tags in the table), it just destroys any formatting in the table, and outputs the results as one continuous list.
Any suggestions at all would be a great help.
Here's my servlet code:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String category = request.getParameter("categoryname");
AlbumDAO albumData = new AlbumDAO();
ArrayList<AlbumBean> albums = albumData.findFromCategory(category);
PrintWriter out = response.getWriter();
response.setContentType("text/html");
String title = category + " albums";
String stylesheet = "<link rel=\"stylesheet\" type=\"text/css\" href=\"/CSS/stylesheet.css>";
out.println("<!DOCTYPE html><html>");
out.println("<head>");
out.println("<title>" + title + "</title>");
out.println(stylesheet);
out.println("</head>");
out.println("<body>");
out.println("<Center><H1>" + category + " albums</Center>");
out.println("<table border=\"1\" cellspacing=\"5\" cellpadding=\"5\">"
+ "<tr><th>ID</th><th>Artist</th><th>Title</th><th>Image Name</th><th>Tracks</th><th>Price</th><th>In Stock</th></tr>");
for (AlbumBean a : albums){
out.println("<tr><td> "+ a.getRecording_id() + "</td>");
out.println("<td>" + a.getArtist_name() + "</td>");
out.println("<td> " + a.getTitle() + "</td>");
out.println("<td> " + a.getCategory() + "</td>");
out.println("<td> " + a.getImage_name() + "</td>");
out.println("<td> " + a.getPrice() + "</td>");
out.println("<td> " + a.getStock_count() + "</td>");
out.println("</tr>");
}
out.println("</table>");
out.println("</body>");
out.println("<footer> let's go home</footer>");
out.println("</html>");
}
Looks like you are not closing the quotation marks in your link statement
String stylesheet = "<link rel=\"stylesheet\" type=\"text/css\" href=\"/CSS/stylesheet.css\">";
I eventually solved it, the only thing was that i was thinking the folder CSS needed to be referenced as "/CSS/stylesheet.css"
whereas it was actually just "CSS/stylesheet.css" .
Thanks guys.

GWT html object show text as url or img

I get a URL as text from database and put it into an HTML object and add this object to layout.
I want this text to work as URL or IMG.
you can see in the code what I have tried. didn't find a method that does that...
my code :
int listSize = result.size();
int i;
assetPanel.clear();
for(i=0;i<listSize;i++)
{
HorizontalPanel vPanelPic = new HorizontalPanel();
HTML picSpace = new HTML();
picSpace.setHTML("<img src = " + result.get(i).getUrl() + "style=width:304px;height:228px>");
//Window.alert("<a href " + result.get(i).getUrl()+ "</a>");
vPanelPic.add(picSpace);
assetPanel.add(vPanelPic);
}
Your HTML is invalid. Try this:
// img:
picSpace.setHTML("<img src='" + result.get(i).getUrl() + "' style='width:304px;height:228px'>");
// link:
Window.alert("<a href='" + result.get(i).getUrl() + "'>URL</a>");
I think that post solves the problem without any security issues :
For SafeHtml, Do we need to sanitize the "link" in <img src=link> tag, GWT?

Displaying div tag in a textbox

I am saving the below div tag into SQL DB:
String StrDiv = "<div STYLE=" + "''"+"font-family: " + lblPreviewPane.Font.Name + "; font-size: " + lblPreviewPane.Font.Size + "; color: " + ColorPicker1.Color + ""+"''" + ">" + lblPreviewPane.Text + "</div>";
The below query is used to update the message:
String sqlUpdate = "update iweb_messages set message='" + StrDiv +
"'where site_id ='" + mSiteID + "' and page_id ='" + ddlSitePage.SelectedValue + "'";
I retrieve the div from DB and display it in a textbox and a label.
In the label, the div tag is displayed as: messagetoday21
But in the textbox, the div tag is displayed as:
<div STYLE='font-family: Times New Roman; font-size: 18pt; color: #CC3399'>today21</div>
I need to display the text alone in the textbox also(same as displayed in the Label).
Kindly help me with some suggestions.
I use the below code to display the text from the DB in the textbx and label:
String sqlMsg = "select message from iweb_messages where site_id='" + mSiteID + "' and page_id='" + ddlSitePage.SelectedValue + "'";
DataView dvMsg = dbLib.GetDateView(sqlMsg);
if (dvMsg.Table.Rows.Count > 0)
{
txtOutputMessage.Text = dvMsg.Table.Rows[0]["message"].ToString();
lblPreviewPane.Text = dvMsg.Table.Rows[0]["message"].ToString();
}
I assume your "textbox" is a textarea? If so, the behavior you're seeing is expected, because you're generating HTML that looks like this:
<textarea><div STYLE='font-family.....></div></textarea>
The content of a TEXTAREA is displayed without HTML rendering. Whereas the label (assuming it's a span or another div) will render the HTML.
So, as a quick fix, you need to save lblPreviewPane.Text to your database in addition to the full <div>; then display the value of lblPreviewPane.Text in your text box instead of the <div>.
But I would also question the wisdom of storing the full <div> in the database. If the font attributes need to be determined ahead of time, then I think you would be better off storing those attribute values in the table, then building the formatted <div> when it is being displayed.