I haven't found any notion of partial views in Play Framework similar to Ruby on Rails's partial views. For example, if there is layouts/main.scala.html layout:
#(title: String)(content: => Html)(implicit flash: Flash)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
</head>
<body>
<section class="content">#content</section>
</body>
</html>
And there is also layouts/_footer.scala.html "partial", how do I include _footer into main?
Is there anything similar in Play?
I think RoR's partial views are overly complex. The thing to remember about Play templates, as that they are essentially just functions that can be called directly from Scala code. And also, Play templates are essentially Scala code. That means, Play templates can be called from other Play templates. So, just create another template called footer.scala.html, eg:
<footer>
Powered by Play Framework
</footer>
And then call it from your main template, as you would invoke any other Scala function:
#(title: String)(content: => Html)(implicit flash: Flash)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
</head>
<body>
<section class="content">#content</section>
#footer()
</body>
</html>
Couldn't be easier.
Not sure if you're using Play 1.x or 2, but in Play 1, there are template tags - See http://www.playframework.com/documentation/1.2.7/templates#inheritance
I think what #Vidya wants to say is that you can do something like this:
In main.scala.html we add a variable named footer of type Html with a default value of empty:
#(title: String, footer: Html = Html(""))(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
</head>
<body>
#content
#footer
</body>
</html>
And then in a page like index.scala.html we can do something like:
#(message: String)
#footer = {
<footer>the footer!</footer>
}
#main("Welcome", footer) {
the content!
}
Related
When one adds an event handler to a tinymce-editor web component, the target of the received event appears to not be the tinymce-editor element, but another component
below the shadow-root of the tinymce-editor element.
Is there any simple way around this because its quite difficult to determine which tinymce-editor element the event was from if you have more than one for example?
(Is this a common approach for, or limitation of, web components or something - seems a bit odd??)
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
function changeHandler(evt) {
console.log(evt.target.id); //gives something like mce_<n>
}
</script>
<tinymce-editor id='e1' api-key="<api-key>" on-Change="changeHandler"></tinymce-editor>
<tinymce-editor id='e2' api-key="<api-key>" on-Change="changeHandler"></tinymce-editor>
<script src="https://cdn.jsdelivr.net/npm/#tinymce/tinymce-webcomponent#2/dist/tinymce-webcomponent.min.js"/>
</body>
</html>
I like to indent <html>, <head>, <body> and the child elements (not all descendants) of <body> at the same level, at the very start of each line. Like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
I also don't want any empty lines between <html>, <head>, and <body> tags, which is what happens by default when I run the selection formatting operation. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
How can I configure Visual Studio Code to do this automatically?
Currently I have to manually undo the extra indentations for every new HTML file. After removing them and adding one child element to <body>, it does behave like I want. But it's still quite irritating to have to do it every time.
I have a Play application consisting of the following to modules:
angular: encapsulates all AngularJS stuff
frontend: customer faced stuff
The angular module has a webjar dependency defined in the build.sbt file. In addition, I have there the following HTML file inside the views directory:
#(webJarAssets: WebJarAssets)
<script src="#angular.controllers.routes.WebJarAssets.at(webJarAssets.locate("jquery.js"))"></script>
<script src="#angular.controllers.routes.WebJarAssets.at(webJarAssets.locate("angularjs.js"))"></script>
My controller looks like this:
package angular.controllers
import javax.inject._
import play.api.mvc._
#Singleton
class TestController #Inject() (webJarAssets: WebJarAssets) extends Controller {
def index = Action {
Ok(angular.views.html.test(webJarAssets))
}
}
So far so good, when accessing the corresponding route, everything renders fine. However, that's not how I want to use this module.
In my frontend module I have a template named main.scala.html which looks like this:
#(title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
#* Here's where we render the page title `String`. *#
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.versioned("images/favicon.png")">
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
</head>
<body>
#content
</body>
</html>
Now I want to include the angular module template, which encapsulates the script tags, after #content. In addition, I want to make this optional so that I can pass a specific argument in order to activate the script inclusion. How can I make this work?
I want to render some javascript snippet with sapui5. I am trying to use Text control but when I use that I cannt format javascript text to show up properly.Is there a way to do that?
You can use the HTML core control to embed html/javascript: https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.core.HTML.html
Or create a custom control
All other SAPUI5 controls are protected against XSS and forgery attacks so they won't accept any javascript code.
I also suggest that you use sap.ui.core.HTML to embed HTML in your sapui5 view. However to get your code formatted correctly (for example it shall be indented correctly) you can use the markdown-js library. See this example:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Render javascript source code in sapui5</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"></script>
<script src="markdown.js"></script>
<script>
$.get("markdown.md", function(data) {
var mdView = new sap.ui.core.HTML({
content: markdown.toHTML(data)
});
mdView.placeAt("uiArea");
}, "html");
</script>
</head>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html>
markdown.md:
# Markdown
To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.
for (i=0; i < 10; i++) {
if (true) {
console.log("Hello World!");
}
}
If you want to test this example in you Chrome browser, do the following:
Download markdown-browser-*.tgz from markdown-js and place the contained markdown.js together with the above index.html and markdown.md in some folder.
Start Chrome with parameter --allow-file-access-from-files and drop the index.html on the Chrome browser window.
I'm learning to use html. I want the words 'hello welcome to my blog' to appear in courier font. But I want to set it up as a 'class'.
I'm on blogger and I can't seem to get the code working to make this text appear. I'm sure I typed out everything right but for some reason blogspot won't apply the courier font.
However it can read things like h1/h2/Bold/Italic but only when this is directly written before class not in brackets on its own.
<head>
<style>
.font (font-family:courier;)
</ style>
</head>
<body>
<div class="font">
Hello welcome to my blog </div>
</ body>
In CSS syntax you need to wrap properties and values within braces {} not in parenthesis ()
Also you need to close the tags carefully like this </body> Don't use space inside like this </ body>
So you code should look like this-
<head>
<style>
.font {
font-family:courier;
}
</style>
</head>
<body>
<div class="font">
Hello welcome to my blog
</div>
</body>
replace () with {} on the style
<html>
<head>
<STYLE type=" text/css ">
.font{font-family :"Courier New", Courier, monospace}
</style>
</head>
<body>
<div class="font">
`Hello welcome to my blog</div> </body>
</html>
demo for this