Why use template engine in playframework 2 (scala) if we may stay with pure scala - scala

Why use scala template-engine in playframework 2 (scala) if we may stay with just scala.
Using template engine is:
additional processor time transforming template syntax into scala code
then compiling this code (which is not so concise as it if write it by hand - then it compiles even slower)
Also if template is not converted yet into scala you can see that code inconsistency (red highlighting in your IDE) from you main code -
so you should every time think about it..
Why not just use core xml/html support what scala provides like here: http://www.scala-lang.org/node/131
Is there any pure scala template (you can recommend) I can use in play-framework or alone ?

Actually you should ask this question to the dev team, however consider few points:
Actually you don't need to use the Play's templating engine at all, you can easily return any string with Ok() method, so according to your link you can just do something like Ok(theDate("John Doe").toString())
Play uses approach which is very typical for other MVC web-frameworks, where views are HTML based files, because... it's web dedicated framework. I can't see nothing wrong about this, sometimes I'm working with other languages/frameworks and can see that only difference in views between them is just a language-specific syntax, that's the goal!
Don't also forget, that Play is bilingual system, someone could ask 'why don't use some Java lib for processing the views?'
The built-in Scala XML literals are not well-suited for creating complex programs, you easily run into issues (that's also why there's a library called anti-xml); Martin Odersky himself regretted making this a language feature
Finally, there are IDEs with support for Play 2 views, I'm working on Idea 12 with Play2 support and although it's not perfect (it's quite new, so sometimes there are small problems) in most cases it works fine. It understands Play view's syntax, offers autocomplete, even you can use option+click on some object in the view to jump directly to the method/model's declaration, etc.
Answering to your last question, AFAIK officially there is Groovy engine available as a module, which offers template engine known from Play 1.x, however, keep in mind it's just a bridge for people migrating from Play 1.x to Play 2.x as it's just slower than native engine of Play 2.

For me this fits
as an answer, for last question at least.
This just scala. Just XML built-in magic.
http://www.alvarocarrasco.com/2011/03/play-framework-and-templating-with.html?m=1
Sample:
This is a template: Templates.scala file
package templates
import play.api.templates.Html
import scala.xml.Xhtml
import controllers.routes
object Main {
def page (title:String="Default title")(content: => scala.xml.Elem) = Html {
"<!DOCTYPE html>" +
Xhtml.toXhtml(
<html>
<head>
<title>{title}</title>
<link rel="stylesheet" media="screen" href={routes.Assets.at("stylesheets/main.css").toString()} />
<link rel="shortcut icon" type="image/png" href={routes.Assets.at("images/favicon.png").toString()} />
<script src={routes.Assets.at("javascripts/jquery-1.9.0.min.js").toString()} type="text/javascript" />
</head>
<body>
{content}
</body>
</html>
)
}
// a panel template, just as an example
def panel (label:String="Some label")(content: => scala.xml.Elem) = {
<div class="panel">
<div class="panel-label">{label}</div>
<div>{content}</div>
</div>
}
}
This is an index page index.scala file
package views
import templates.Main._
object IndexPage {
def apply() = {
page(title="Welcome to my Page!") {
<div>
<h1>Hello</h1>
<p>Some template markup</p>
{
panel(label="Dashboard panel")(
<div>
Panel content
</div>
)
}
</div>
}
}
}
This is a controller: Application.scala file
package controllers
import play.api.mvc._
object Application extends Controller {
def index = Action {
Ok(
views.IndexPage()
);
}
}

Related

how to convert the jsp script to slightly. Also where can i get the slightly full documentation for the available tags usage

How to convert the <% String rootpath =currentPage.getAbsoluteParent(3).getPath(); %> code into the SLIGHTLY tag for printing the rootpath value.
Example i can get the currentpage children by using <ul data-sly-list.first="${currentPage.listChildren}">
<li>${child.title}</li>
</ul>
Also where can i get the slightly full documentation for the available tags usage ?
In short, it is not possible.
Sightly is more of a templating language and all your business logic should be achieved either through a Java or Javascript Use API.
To achieve this, you can either use a JS Use API (a simplest example shown below,a file named helper.js residing in the same directory as my sightly HTML).
use(function () {
return {
rootPath: currentPage.getAbsoluteParent(2).getPath()
};
});
And then you can use this in your sightly file as shown below.
<div data-sly-use.helper="helper.js">
${helper.rootPath}
</div>
And additionally, your example list wouldn't run because you have created an object first whereas you are referring to child within the list. It should be
<ul data-sly-list.child="${currentPage.listChildren}">
<li>${child.title}</li>
</ul>
The full documentation of Sightly can be found here. You can get the introduction to Sightly through this experience delivers blogs. The entire Sightly specification can be found here.

How to remove custom element while avoiding detached DOM trees?

I'm using Polymer to create custom elements (web components) and have run into a problem when removing them from the DOM. Say I have an element like this:
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="demo-element">
<template>
<h1 on-tap="{{ titleTap }}">A custom demo element</h1>
</template>
<script>
Polymer('demo-element', {
titleTap: function() { // do something }
});
</script>
</polymer-element>
Then when removing the <demo-element></demo-element> from the DOM I will end up with a detached DOM tree with a reference to the H1 element (according to Chrome Devtools). It seems to me that it's the polymerWrapper that references it.
According to the documentation in Polymer API reference the framework should automatically handle the unbind. Is this not working or am I misunderstanding it?
Is this something that in the future will be handled by the browsers or will we need to depend on frameworks like Polymer to do keep our memory clean? (So what I'm asking is if there are any proposals or standards relating to this)

Declarative support questions

I am trying to add an htmlview (which is using declarative support according to SAP's docs) to an index page that is also using declarative support. Using data-sap-ui-type="ui.MyView" makes me to ask two questions:
Is there any equivalent to sap.ui.localResources in declarative support?
data-ui-type is not adding the view.html suffix to the view that should be laoded. Is there a special pattern for MVC in declarative support or is there currently no way to implement it?
Kind regards,
Nico
find some basic samples here:
https://openui5.hana.ondemand.com/#docs/guide/MVC.html
First of all I believe that you always have to set sap.ui.localResources in code.
As you can see instanciating a HTMLView from an HTMLView goes like this:
<div data-sap-ui-type="sap.ui.core.mvc.HTMLView" id="MyHTMLView" data-view-name="example.mvc.test2"></div>
This will load example.mvc.test2.view.html and place it into your parent view.
Generally speaking the JS API translates into HTMLViews like this:
new sap.ui.AnyControl("myId", {
aLittleProperty: "10",
property: false,
press: functionInMyController,
morePress: a.static.myFunction,
defaultAggregation: [
new sap.ui.OtherControl("otherId1"),
new sap.ui.OtherControl("otherId2")
],
anotherAggregation: new sap.ui.OtherControl("otherId3")
}).addStyleClass("myClass");
<div data-sap-ui-type="sap.ui.AnyControl"
id="myId"
class="myClass"
data-a-little-property="10",
data-property="false"
data-press="functionInMyController"
data-more-press="a.static.myFunction">
<div data-sap-ui-type="sap.ui.OtherControl" id="otherId1"></div>
<div data-sap-ui-type="sap.ui.OtherControl" id="otherId2"></div>
<div data-sap-ui-aggregation="anotherAggregation">
<div data-sap-ui-type="sap.ui.OtherControl" id="otherId3"></div>
</div>
</div>
Note that:
The id and CSS classes are set with the regular HTML attributes
Property names translate from camelCase to lower-case separated with "-" (due to the fact that HTML is not case-sensitive)
No matter what type the property is you of course have to put it in quotes in HTML
Whatever you put directly inside a HTML-defined control is considered to belong into it's default aggregation
BR
Chris

Play Framework Scala Template

I've worked around with Play Framework for a while but I'm almost new to Scala Templates
. For me as a C-familiar language developer sometimes it looks a bit strange
I was wondering if someone here could help me understand this code better I took it from
http://www.playframework.com/documentation/2.2.x/JavaGuide3
(Zentask Example)
#(projects: List[Project], todoTasks: List[Task])
#main("Welcome to Play") {
<header>
<hgroup>
<h1>Dashboard</h1>
<h2>Tasks over all projects</h2>
</hgroup>
</header>
<article class="tasks">
#todoTasks.groupBy(_.project).map {
case (project, tasks) => {
<div class="folder" data-folder-id="#project.id">
<header>
<h3>#project.name</h3>
</header>
<ul class="list">
#tasks.map { task =>
<li data-task-id="#task.id">
<h4>#task.title</h4>
#if(task.dueDate != null) {
<time datetime="#task.dueDate">
#task.dueDate.format("MMM dd yyyy")</time>
}
#if(task.assignedTo != null && task.assignedTo.email != null) {
<span class="assignedTo">#task.assignedTo.email</span>
}
</li>
}
</ul>
</div>
}
}
</article>
}
This 3 lines are really confusing for me :
#todoTasks.groupBy(_.project).map {
case (project, tasks) => {
#tasks.map { task =>
I do appreciate if anyone can explain me in more details what exactly these 3 lines are doing?
Thanks guys
Okay, so there are several transformations going on here.
#todoTasks.groupBy(_.project) says that a todoTask has a field called project, and we should transform that list of todoTasks into a Map where the project is the key and the values are all todoTasks that match the key.
.map { case (project, tasks) => { says that we now have a Map where the key is project and the value is a list of tasks. And if we have those two items (project, tasks), then we should do something with each task, the something is to what follows the =>
tip, you don't need to have a deep knowledge of scala to be productive as a java play developer, just do your transformations of the data in your java controller.
I don't think these are specific to Play templates at all, but rather examples of idiomatic functional Scala. The middle line uses pattern matching with an anonymous function, which is covered very nicely by this tutorial. The other two are calling functions on collections that take functions themselves as parameters. These are called "higher order functions" and are one of the key tools of functional programming. .map, in particular, is key to FP. Daniel Spiewak's Scala Collections For The Easily Bored series is a great place to get started on functions such as these.

dhtmlx combo, autocomplete mode, js

I am having problem with autocomplete mode with dhtmlx combo.
The includes files are as follows:
// Images
<script>
window.dhx_globalImgPath="combo/dhtmlxCombo/codebase/imgs/";
</script>
// CSS
<link rel="stylesheet" type="text/css" href="combo/dhtmlxCombo/codebase/dhtmlxcombo.css">
// Required JS files
<script src="combo/dhtmlxCombo/codebase/dhtmlxcommon.js"></script>
<script src="combo/dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
<script src="combo/dhtmlxCombo/codebase/ext/dhtmlxcombo_extra.js"></script>
I have no issues with the code above and works well.
The following code I have on the page I have the combo itself is as follows:
<!-- HTML Combo -->
<div id="pickup" style="width:260px;"></div>
<!-- Initialisation of combo -->
<script>
var x = new dhtmlXCombo("pickup",260,"image");
// this works
x.loadXML("list.xml");
x.enableFilteringMode(true);
</script>
My problem is i want to use autocomplete mode by using the following line of code:
x.enableFilteringMode(true, "list.xml", true, true)
When i try the above line, it doesnt give error but it doesnt filter either. However im told to use a php file but i don't know what I need to put in the list.php file itself. I can code just dont know what to put in. Can anyone shed some light, the docs arent that helpful.
enableFilteringMode enables server-side filtering. It means that when you type something in the combo header, this text is sent to the script that is defined the second parameter of the method. The script generates XML with options that correspond the mask.
Therefore, you can't use static XML in this case.
You can find a demo of the dynamic loading in the dhtmlxCombo package:
dhtmlxCombo/samples/04_filtering/01_combo_big_db.html
Also, you can use dhtmlxConnector that provides a ready solutions for the server side (PHP, ASP.NET, etc.). The dhtmlxConnector package includes a demo with dhtmlxCombo, e.g.:
dhtmlxConnector_php_v10_110725/php/samples/combo/02_sql.html