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?
Related
Noob with React here. I am playing around with React. I have a simple component to render inside my component.js. It is included in my index.html file. I included the scripts for React, ReactDOM, and babel in the head. I just want to see that one div render properly. I am not using Node yet, just a exercise with React and Babel (using babel-standalone). I am running the file with a simple http-server. I am getting an error with the React Chrome extension: Waiting for roots to load...to reload inspector click here.
index.html
<!DOCTYPE html>
<html>
<head>
<!-- React -->
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<!-- React DOM -->
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<!-- babel core-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
</head>
<body>
<div id="machine-box"></div>
<script type="text/babel" src="components.js"></script>
</body>
</html>`
components.js
class MachineBox extends React.Component {
render(){
return ( <div>Hello From React </div> );
}
}
let target = document.getElementById('machine-box');
ReactDOM.render(
<MachineBox />, target
)
Your code is fine, you are using a really old version of babel-standalone though.
// this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
// should be this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
and
<script type="text/babel" src="components.js"></script>
// should be
<script type="text/babel" src="components.js" data-presets="es2015,react"></script>
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 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!
}
I'm hoping to be able to load an ExtJS chart inside Ext.Net(coolite) pages.
I've copied the pie chart from the ExtJS samples and have put it in an test aspx document to see it work:
heres is my pie.aspx
<html>
<head>
<title>Pie Chart</title>
<script type="text/javascript" src="ExtJs4/ext-all.js" />
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: { 'Ext': "/app/" }
});
</script>
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/CSS/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ExtJs4/examples/shared/example.css" />
<script type="text/javascript" src="ExtJs4/examples/example-data.js"></script>
<script type="text/javascript" src="app/pie.js"></script>
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
</head>
<body id="docbody">
</body>
when I try and load it from an Ext.Window I dont see anything just an empty popup. if I go to the url directly i dotn see anything either
Here's the code I'm using to attempt to load the chart (i put it inside my existing coolite code):
<ext:Window
Title='!'
runat="server"
AutoDataBind="true"
Modal="true"
ID="ChartWindow"
Width="900"
Height="670"
Hidden="false">
<AutoLoad Url="pie.aspx" Mode="IFrame" />
</ext:Window>
Am I going about this the wrong way in trying to using the Ext.Net dll with the new ExtJS libraries? Is there another way I could go about accomplishing the same thing (ie: have a server-side window to load the ExtJS 4 charts)?
Thanks for any input.
solved!!
not sure what was the problem,my code is correct,maybe only the cache
Doubt this is possible as I don't have a 1 page app, but pretty much every view I make contains 80% of the same css/javascript, so is there any way I could tell knockoutJS a master view which everything else would just populate?
I doubt it as this is pretty much what a 1 page app is for... best I can hope for is to use something like Combres to combine all my non-changing stuff together into one resource file per type...
== EDIT ==
Adding example of what I mean, I am pretty sure I wouldn't be able to inject into multiple areas like shown below, but here is an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Master Page</title>
<link type="text/css" rel="stylesheet" href="../Assets/Styles/main.css">
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Themes/simple.css">
<link type="text/css" rel="stylesheet" href="../Assets/Styles/jquery.qtip.min.css">
{Per Page Css Here}
</head>
<body>
{Per Page Content Here}
<script type="text/javascript" src="../Scripts/Libs/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.validate.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.tmpl.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.qtip.pack.js"></script>
<script type="text/javascript" src="../Scripts/Libs/knockout-1.2.1.js"></script>
<script type="text/javascript" src="../Scripts/Libs/knockout-external-templates.js"></script>
<script type="text/javascript" src="../Scripts/Libs/cufon-yui.js"></script>
{Per Page Scripts Here}
</body>
</html>
<!-- View 1 -->
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Views/view1.css">
<h1>Some Content</h1>
<script type="text/javascript" src="../Scripts/view1.js"></script>
<!-- View 2 -->
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Views/view2.css">
<h1>Some Other Content</h1>
<script type="text/javascript" src="../Scripts/view2.js"></script>
Again, if I cannot do this its not a game breaker, just dont want to have to update every view if I update the jquery version etc...
You could declare your Javascript code relevant to each view in your views and the common code in your master page. Then call that bit of code from your master page and bind them using ko.applybindings.