GWT html object show text as url or img - html

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?

Related

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

Show local image in WebView

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");

Razor syntax: code block inside for each not working

I'm struggling making the following razor snippet working
<ul>
#foreach (var lang in umbraco.cms.businesslogic.language.Language.GetAllAsList())
{
var url = Model.Content.Url + "?lang=" + #lang.CultureAlias;
if (currentCulture.TwoLetterISOLanguageName.Equals(lang.CultureAlias))
{
<li class="active">#lang.FriendlyName</li>
}
else
{
<li>#lang.FriendlyName</li>
}
}
If I remove the variable assignment between the foreach and the if it works fine, but otherwise I get a compilation error (like the razor parser understands a } as markup and tries to render it).
Any way to solve this?
Think the issue is in this line
var url = Model.Content.Url + "?lang=" + #lang.CultureAlias;
You don't need the additional # since you are already in 'code' mode
So try changing #lang.CultureAlias to lang.CultureAlias
You've got too many #s here:
var url = Model.Content.Url + "?lang=" + #lang.CultureAlias;
should become:
var url = Model.Content.Url + "?lang=" + lang.CultureAlias;

Highlight a part of string which has html entities as text : angularJs

I have :
$scope.text = "<b>TESTNAME</b>"; (This can be any string. This is to specify that there can be html tags written as text in the string.)
The bold tags are part of text and need to be displayed as text only and not HTML.
Now suppose someone enters a search string(for eg.. anyone can enter any string) :
$scope.searchTerm = "NAME";
Then i want that $scope.text gets modified such that i see <b>TESTNAME</b> but with the substring of "NAME" highlighted.
My highlight function does :
$scope.text = $scope.text.replace(new RegExp("(" + $scope.searchTerm + ")","gi"), "<span class='highlighted'>\$1</span>");
and in the HTML I had to write :
<span ng-bing-html="text"></span>
However, the issue now arises is that, the <b> and </b> also get rendered in the HTML form and bold the string in between.
How can this be handled?
EDIT
In order to avoid the b tags from rendering as HTML, I modified the angular brackets to their HTML counterparts using this :
$scope.text = $scope.text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
after using the first replace function mentioned above. Now when the $scope.text is rendered using ng-bing-html, the b tags are only rendered as text.
However, now the span tags added are also rendered as text as angular brackets have been replaced globally.
EDIT
Another way to deal with the problem was that i replaced the angular tags before adding the span tags to highlight the text. So my highlight function was :
$scope.text = $scope.text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
$scope.searchTerm = $scope.searchTerm.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
$scope.text = $scope.text.replace(new RegExp("(" + $scope.searchTerm + ")","gi"), "<span class='highlighted'>\$1</span>");
However, the issue with this is that if the user searches for the string lt or gt,then due to the replacements done for < and >, the highlight spans are added to these too and the net result is not as expected.
Please check working example: DEMO
Controller:
var app = angular.module('plunker', ["ngSanitize"]);
app.controller('MainCtrl', function($scope) {
$scope.searchTerm = "NAME";
$scope.content = "TESTNAME";
$scope.matchClass = 'bold';
var re = new RegExp($scope.searchTerm, 'g');
$scope.content = $scope.content.replace(re, '<span class="' + $scope.matchClass + '">' + $scope.searchTerm + '</span>');
});
HTML
<body ng-controller="MainCtrl">
<p ng-bind-html="content"></p>
</body>
CSS
.bold {
font-weight: bold;
}
Edit: new solution:
$scope.text = $scope.text.replace(new RegExp("(" + $scope.searchTerm + ")","gi"), "long-random-string-one$1long-random-string-two");
// Any encoding goes here
$scope.text = $scope.text.replace("long-random-string-one", "<span class='highlighted'>").replace("long-random-string-two", "</span>")
The idea is to insert two strings that won't be changed by the encoding, and are unique enough that they are extremely unlikely to be present in the text you are searching. Replace them with GUIDs if you want.

Show link in html table cell

I'm tring to add a link in my code like below,I have written a javascript function,thing is in UI it has to show data as link.
string str="" + dataTable.Rows[i][j] + ""
Is there a way to show my datatable data as a link in UI?
Reply
assuming that your dataTable[i][j] is the link .. we can simply do this in javascript to create a link
link = '<a href="' + dataTable[i][j] + '" >Link</a>';
then use this string wherever you want.
or as i just saw the updated question
'<td>' + dataTable[i][j] + '</td>'
Where is the start of the anchor (<a ...>) tag? There is only an end one. Try...
<td>{link}</td>