I am new playwork. I have been going through the tutorials and samples provided the playframework.
I could successfully render helloworld application provided by playframework samples.
I have few doubts regarding the rendering part of main.scala.html.#
This is the default program which I got from samples/helloworld
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
</head>
<body>
<header>
#title
</header>
<section>
#content
</section>
</body>
</html>
Here when I commented out the #content under section tag , I am not able to see the the fields.
Now my question is, where is #content is mapped to the Form field?
I created another structure for my layout and added the #content to the content section. but it does not fit into that
so now my question is #content where is that defined that it is div container and has got some height and weight and all?
I could not understand. Please help me.
Pleae find my customized code below
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
#content</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</body>
</html>
Introduction
From Template parameters in the Play Template documentation, the meaning of the first line is described. Here, we see that two parameter groups are required.
The two parameter groups are:
a String parameter containing the title
a Html parameter containing some HTML content
Usage
To use this template, two parameter groups have to be supplied. In the context of the helloworld application, it is called from app/views/index.scala.html like this:
#main(title = "The 'helloworld' application") {
<h1>Configure your 'Hello world':</h1>
... more HTML elided
}
This pattern is described in http://www.playframework.com/documentation/2.2.x/ScalaTemplateUseCases, where HTML is injected into a template.
main.scala.html contains the template (content contains the HTML to be injected).
index.scala.html contains an example of injection into this template.
Note that calling #main(...) calls the template that is defined in main.scala.html.Similarly, calling #my_template(...) would call the template defined in my_template.scala.html.
In this case, the HTML for the form is defined inside index.scala.html.
Calling the Template
Finally, the root template is called from a controller. For the helloworld application, the template defined in index.scala.html is invoked by the code
def index = Action {
Ok(html.index(helloForm))
}
This is where the form object is injected into the template.
Related
i am following SAP UI5 course from OpenSAP, and in week 1 unit 2, when I do, what is given in exercise my code doesn't work.
Any help please?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<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.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{"opensap.MyApp": "./"}'
>
</script>
<script src="https://sap.github.io/openSAP-ui5-course/Validator.js">
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({viewName: "opensap.MyApp.view.App"}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
And this is my view which is present in view folder
<mvc:View
displayBlock="true"
xmlns:mvc="sap.ui.core.mvc">
xmlns="sap.m"
<Carousel>
<pages>
<Image src="https://upload.wikimedia.org/wikipedia/commons/9/9f/GEO_Globe.jpg"/>
<Image src="https://upload.wikimedia.org/wikipedia/commons/9/9f/GEO_Globe.jpg"/>
</pages>
</Carousel>
</mvc:View>
Just for the record why "../" worked out: It depends on how your project folder structure looks like. With '{ "opensap.myapp": "../" }', you're registering a module path to your app by saying "Whenever I'm using "opensap.myapp." as a prefix, start to search for the resource from the path ../ relative to where my current document is located (in our case, index.html)." thus resourceRoot.
Best practice of how to structure your project folder can be found here: https://openui5.hana.ondemand.com/#docs/guide/003f755d46d34dd1bbce9ffe08c8d46a.html
Here is another answer which explains the issue further: https://stackoverflow.com/a/35722435/5846045
PS: You might encounter some cosmetic bugs if you keep using the theme sap_bluecrystal due to its deprecation (since version 1.38). Better use sap_belize or sap_belize_plus, if your app is running on a newer version.
To anybody who is suffering similar to me.
Instead of using
data-sap-ui-resourceroots='{
"opensap.myapp": "./"
}'>
Use data-sap-ui-resourceroots='{
"opensap.myapp": "../"
}'>
After struggling a whole hour, I tried this and it worked. Whatever syntax given in docx file in the exercise is wrong. Or either that some feature is updated.
I'm following a beginner's tutorial at http://www.tutorialspoint.com/gwt/gwt_style_with_css.htm.
The code for the HelloWorld.html file is:
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id="mytext"><h1>Hello, World!</h1></div>
<div id="gwtGreenButton"></div>
<div id="gwtRedButton"></div>
</body>
</html>
In the HelloWorld.java (extending EntryPoint), I have:
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
The 2 lines: RootPanel.get() always result in null. I don't know what happen, what to check? (too bad the site doesn't have a comment/discussion section)
Thanks.
Docs says
RootPanel.get(java.lang.String id)
Gets the root panel associated with a given browser element.
DOM.getElementById(java.lang.String)
Gets the element associated with the given unique id within the entire document.
Try with
com.google.gwt.user.client.DOM.getElementById("gwtGreenButton");
com.google.gwt.user.client.DOM.getElementById("gwtRedButton");
Is it possible to dynamically switch the title of a page that is served by Lift without having to write an extra snippet for that particular case?
One option is of course <lift:mySnippet><title>Default Title</title></lift:mySnippet> but I thought there might be an option along the lines of <head_merge><title>New Title</title></head_merge> (which inserts a second title node).
I do not like the first approach since I do not want to stick all the title generation logic into a single snippet and ask what kind of page I am on etc.
Have you tried to use templates?
You can define template in templates-hidden/default.html like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
<head>
<title>
<lift:bind name="title" />
</title>
...
</head>
<body>
<lift:bind name="content" />
</body>
</html>
And use it in index.html for example:
<lift:surround with="default">
<lift:bind-at name="title">Home</lift:bind-at>
<lift:bind-at name="content">
my content
</lift:bind-at>
</lift:surround>
You can find more information about templates here:
http://www.assembla.com/spaces/liftweb/wiki?id=liftweb&wiki_id=Templates_and_Binding
One way is to use the Menu.title snippet.
In bootstrap/liftweb/Boot.scala you define the sitemap with page names:
class Boot {
def boot {
// ...
def sitemap = SiteMap(
Menu.i("Home") / "index",
Menu.i("About") / "about")
// ...
}
}
In templates-hidden/default.html you use the snippet:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
<head>
...
<title class="lift:Menu.title">AppName:</title>
...
Then page titles will be: "AppName: Home" and "AppName: About". This is nice if you use
<span class="lift:Menu.builder"></span>
to build the menu, because page titles will be the same used in the menu.
Another approach is to use head merge and define the title in the page's html. For this to work, you have to remove the <title> tag from templates-hidden/default.html and put an <head> or <head_merge> tag in your content block:
<!DOCTYPE html>
<html>
<body class="lift:content_id=main">
<div id="main" class="lift:surround?with=default;at=content">
<head_merge>
<title>TITLE OF THIS PAGE HERE</title>
</head_merge>
...
i am wondering using Zend Framework's view helpers, ... code below ...
$this->headLink()->prependStylesheet("css/style.css")
->prependStylesheet("css/prettify.css")
->prependStylesheet("css/960.css")
->prependStylesheet("css/text.css")
->prependStylesheet("css/reset.css");
$this->headScript()->prependFile("js/site.js")
->prependFile("http://www.google.com/jsapi");
echo $this->headLink();
echo $this->headScript();
this is output
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/text.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/960.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/prettify.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/site.js"></script>
how can i echo links and scripts the html5 way where i do not need type="text/javascript" and rel="stylesheet" all that
You could create your ouwn helper, and put it in your view/helpers/Headlink.php, exrtend the original Zend Framework ones .. and just override the part you wish to make different.
For sure a better option then editing Framework files ...
Just pass empty or null attribute values to the helper or create your own helper (with the same name, but in different namespace), overloading the default behavior of the standard helper.
Making changes in source files of the framework is not a good solution.
zf/library/Zend/View/Helper/HeadLink.php:
in function createDataStylesheet
try to change this:
$attributes = compact('rel', 'type', 'href', 'media', 'conditionalStylesheet', 'extras');
to this (or anything you want)
$attributes = compact('type', 'href', 'media', 'conditionalStylesheet', 'extras');
If it is working you can make your own helper that inherit Zend default and override this method.
And in case of js try to do:
...->prependFile('yourfile.js', '');
In the main kid template file, I want it to have only div tags, each of which do only call a rendered kid file and paste content inside it. (like "include" function in php) but I don't know how to do this. Does someone have any ideas about it?
If you swap to genshi instead of the default kid you can do this with an include tag:
<xi:include href="menu.html" />
Swapping to genshi is fairly easy, I think its a matter of confuration only. The templates tags works otherwise the same. You should rename the extensions from .kid to .html though.
You can first define a "base_layout.kid" template:
<html xmlns:py="http://purl.org/kid/ns#">
<head>
<title>App Name - ${page_title}</title>
<link href="layout.css" type="text/css" rel="stylesheet" />
${page_specific_css()}
</head>
<body>
<h1>Now viewing: ${page_title} of App Name</h1>
<content>Default content</content>
<div class="footer">Page Footer Text</div>
</body>
</html>
Then replace the "content" tag in "page.kid" with whatever data you want:
<html py:layout="'base_layout.kid'"
xmlns:py="http://purl.org/kid/ns#">
<link py:def="page_specific_css()"
href="layout.css" type="text/css" rel="stylesheet" />
<div py:match="item.tag == 'content'">
<ul>
<li>Content Item 1</li>
<li>Content Item 2</li>
<li>Content Item 3</li>
</ul>
</div>
</html>
You can check whether you get the correct html in python shell (after removing all the identifiers used):
>>> import kid
>>> t = kid.Template("page.kid")
>>> print t.serialize()