Is there a way to include a plain html page inside a Play Framework's view template? I have a scenario wherein there is a common view template and in the body of the template, I would like to include certain static html pages. I know that I can include other templates inside a certain template, but I'm not sure if I could include a plain html page?
One option is to just make your static HTML a template, eg, create myStaticPage.scala.html:
<h1>Static page</h1>
<p>This page is static, though it is still a template.</p>
Then your view template, myView.scala.html:
#(staticPage: Html)
<html>
<head>...</head>
<body>#staticPage</body>
</html>
And then in your action that renders the template:
def renderMyStaticPage = Action {
Ok(views.html.myView(views.html.myStaticPage())
}
You just need to make sure that your HTML page escapes any # symbols with ##.
On the other hand, if which HTML page that's being included is more dynamic, then simply load the HTML from the file/database/classloader/whereever it's coming from, eg:
def renderMyStaticPage = Action {
val staticPage: String = // code to load static page here
Ok(views.html.myView(Html(staticPage))
}
You could.
Just put something like that in your routes file:
GET /file controllers.Assets.at(path="/public", file="html/file.html")
Here is a duplicated post: Route to static file in Play! 2.0
Related
I want to use phantomjs to render html pages into pdf.
Here is my sample code.
var page = require('webpage').create();
page.open('http://google.com', function() {
page.render('google.pdf');
phantom.exit();
});
Is there a way I can take multiple webpages and render it into the same pdf using phantomjs?
Thanks!
you can do this from inside phantom if you want, but it's a bit complex.
here is the psudocode you need to follow
for each webpage you want to render
load the page
add the value of page.content to a pageHtmls list
create a new WebPage object, and set page.content=pageHtmls.join() (you might have to scrub out the <html> and <body> tags though)
render the page as a PDF
So I have a website set up and I wish to dynamically load other .html files into a div. Each .html file contains some content but 1 .html file contains its own angularjs directives.
I was using ng-bind-html along with $scope.content = $sce.trustAsHtml(data); but I have discovered that this prints out the html raw (does not process any angular directives).
I've tried to use the various solutions on stack overflow but none have worked for me.
Website: http://algorithmictrading.azurewebsites.net/
App.js: http://algorithmictrading.azurewebsites.net/js/app.js
Example of .html pages being loaded:
http://algorithmictrading.azurewebsites.net/includes/home.html
http://algorithmictrading.azurewebsites.net/includes/about_us.html
.html page that contains angular directives:
http://algorithmictrading.azurewebsites.net/includes/download.html
As you can see, if you navigate to the website and click on the 'download' tab, the content is loaded but the angular in the drop down menu is not handled. The test button I added should also produce an alert box.
Right now, the code is based off this thread:
call function inside $sce.trustAsHtml() string in Angular js
Thanks!
I found that angular was stripping out the directives from html strings if I didn't pass them through the $sce.trustAsHtml method before passing them into the template:
$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');
This combined with a watch/compile on the element's content you're inserting html into seems to do the trick:
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope);
});
Take a look at this example: http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview.
Had the same problem this week and the best way I found to make it works was creating a custom directive called "BindComponent".
Change the ng-bind-html directive to a custom directive, and inside the link method you put this:
element.html(markupModel);
$compile(element.contents())(scope);
The markupModel can be a string with html code or you can use $templateCache($templateCache docs) to get the code from a .html file.
I've switched from using the Resources plugin to the new Asset Pipeline plugin. However, I've come across an issue that I'm not sure how to fix.
I use several templates (ie: _template.gsp) that are included via the g:render tag from other GSP files.
_template.gsp:
<%# page contentType="text/html;charset=UTF-8" %>
<asset:stylesheet src="_template.css"/>
<asset:javascript src="_template.js"/>
<div>
...
</div>
other GSP files:
...
<g:render template="/template"/>
...
In my _template.gsp file I include several assets that are required for the code in the template to work and/or look right. When I used the resources plugin to accomplish this, things worked as expected. Any files included in templates were moved to the HEAD section of the resulting GSP file. However, with the Asset Pipeline plugin, they stay in the same location where the template was included in the calling GSP file. And to make things worse, they aren't processed correctly, so they aren't loaded correctly in the resulting HTML file.
For example, in debug the resulting HTML file looks like this
...
<link rel="stylesheet" href="/assets/_template.css?compile=false"/>
<script src="/assets/_template.js?compile=false" type="text/javascript"></script>
<div>
...
</div>
...
and everything works (although the file ideally should be loaded in the HEAD section like it used to when using the Resources plugin).
In production the resulting HTML file looks like:
...
<link rel="stylesheet" href="/assets/_template.css"/>
<script src="/assets/_template.js" type="text/javascript"></script>
<div>
...
</div>
...
however, in production all other included assets (files included in the actual GSP file) have longer filenames that look like styles-6a85c6fa983d13b6f58e12b475e9d35c.css. The _template.css and _template.js files from the template isn't being converted to one of these long filenames and if I try to access the /assets/styles.css path I simply get a blank page.
I was able to solve the first part of my problem (the assets not being in the HEAD) by creating the following tag library:
class TemplateAssetsTagLib
{
// Define the namespace and encoding
static namespace = 'tasset'
static defaultEncodeAs = 'raw'
// Tag called to move the content of this tag to where the assets tag is located (usually the HTML HEAD section)
def head = { attrs, body ->
// Get any existing asset blocks
def assetBlocks = request.getAttribute('templateAssetBlocks')
if(!assetBlocks)
assetBlocks = []
// Add the body of this tag to the asset blocks list
assetBlocks << body()
request.setAttribute('templateAssetBlocks', assetBlocks)
}
// Tag called to load any content that was saved using the head tag
def assets = { attrs ->
// Get all existing asset blocks
def assetBlocks = request.getAttribute('templateAssetBlocks')
if(!assetBlocks)
return
// Output the asset blocks
assetBlocks.each { assetBlock ->
out << assetBlock
}
}
}
It's mirrored after the Asset Pipeline deferred script functionality, but more generic.
And I've been able to solve the second problem by simply renaming the assets and removing the leading underscore. For some reason assets with a leading underscore don't get compiled during WAR creation and therefore aren't accessible in production mode.
I'm not sure if I'm going about this the right way, however this is what I need to do. I have common .tpl.html files that I want to use both for an angular template and a template to generate a static .html file. What I want is a system (grunt-related) that will take the junk in .tpl.html and insert it in a outer .html file and create a static .html file.
For example, say I have:
stuff.tpl.html
<div> I want this stuff in my overall template </div>
stuff2.tpl.html
<div> I want this stuff in my overall template to create another html</div>
outer.html
<head>
stuff
</head>
<body>
{{insert}}
</body>
where I can make stuff.html (or stuff2.html) by inserting stuff.tpl.html (or stuff2.tpl.html) into outer.html.
I know how to do the angular side, just not the static side.
If I'm not mistaken you need to concatenate multiple static files in to a one single file.
You can use grunt-contrib-concat to do the job. See the below link grunt-contrib-concat
If you need to implement the template with angularJs, you can use grunt-html2js which will convert your static html to angular template. Then you can use grunt-contrib-concat to concat all the angular template and create one js which you can add to your index.html subequently.
Hope this might help you.
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!