I've been using the Lift Web Framework as a REST only service for quite a while, but I need to use it as a stand alone tool now.
<lift:surround with="default" at="content">
<head>
<script data-lift="with-resource-id" src="/test.js" type="text/javascript"></script>
</head>
<h2>Welcome to your project!</h2>
<p><lift:helloWorld.howdy /></p>
</lift:surround>
I have the above very basic Lift template. The problem is when I view it in the browser something is adding an <?xml> DOCTYPE and the browser defaults to interpreting the resource as XML instead of plain HTML.
How do I tell Jetty/Lift that my static file is HTML?
Sounds like you may be using the XHTML doctype. In your Boot.scala file, you may want to try adding:
LiftRules.htmlProperties.default.set((r: Req) =>
new Html5Properties(r.userAgent))
That should set your application to use HTML5, and should turn off adding the <?xml... encoding header.
Also, as #VasyaNovikov mentioned, the lift: prefixed tags are an older construct (even though a lot of documentation still mentions them). They still work but will have some issues with HTML5. It is recommended to use either of the equivalent forms:
Original:
<lift:surround with="default" at="content">...</lift:surround>
HTML5:
<span data-lift="surround?with=default;at=content"></span>
<span class="lift:surround?with=default;at=content"></span>
If you want to use the lift: variety, the biggest issue you'll find is that in HTML5 the tags and attributes are converted to lowercase, so <lift:helloWorld.howdy /> will be interpreted as <lift:helloworld.howdy />, and Lift will not find the snippet. Using <span data-lift="helloWorld.howdy"></span> should allow you to work around that.
Maybe adding the header will help?
<html>
<head>...
Example:
https://github.com/lift/lift_25_sbt/blob/master/scala_29/lift_basic/src/main/webapp/index.html
In general, you use a very old approach to templates, with custom tags <lift:surround>, <lift:helloWorld> and such. Where did you get them? I suggest to use the new template style like in the link I posted.
Related
I'm trying to extract just the html, without the encapsulating <!doctype>, <html> and <body> tags.
I've seen this question asked before many times, and the answer is always to exclude the "fullpage" plugin.
However, that plugin is no longer used in tinymce 6.
It seems that the classic editor version of tinymce now always uses an <iframe>, and those unfortunate encapsulating tags are passed along as a consequence.
For the sake of robustness I don't want to have to strip them out in the back end if I can help it; is there a way to extract just the html content in tinymce 6?
You would need to provide more details on what you are doing when you extract the content from TinyMCE.
In my quick testing simply using getContent() to extract the data from TinyMCE does not include any of those tags:
https://fiddle.tiny.cloud/MChaab/3
We have been having discussions in our product dev team regarding html maintainability and reuse. To set the context, we started with HTML5/CSS3 front end with plain JS under Play MVC, which in turn uses RESTful backend. Then we thought of adding AngularJS to the spin and to adopting a hybrid approach only to realize that two strong MVC frameworks don't necessarily work together and you have to pick one. So for the performance and type-safety among other issues, we decided to go with using Play framework and Scala based templates.
Here's the challenge: We would like to create reusable web components just like Apache Tiles, so that common elements such as header, menus, footer, etc. can be reused. These components are ready to go in Play to which dynamic content could be added to serve the entire page.
Can this be done? If yes, how?
Secondly, play templates seem to take you back in the time since they don't allow the separation of concern in html. Therefore for re-designing or improving html content, the html developer will have to deal with the template or merging new html with existing templates. How to make this process easier?
I'm don't know exactly how Apache Tiles works, but if I properly understand, it offers a way to create pages using smaller components (like header, menu, footer, etc) and some sort of include mechanism to glue these components together and then compose the page.
That said, you can achieve the same thing using Twirl. You just need to declare reusable blocks that can be used inside the same page, or you can have something like Rails partials that can be reused across different pages.
Let's see an example. Consider that you have the following files:
File app/views/partials/header.scala.html:
<header>
<h1>My Header</h1>
</header>
File app/views/partials/navigation.scala.html:
<nav>
<ul>
<li>Home</li>
<li>Profile</li>
<li>FAQ</li>
</ul>
</nav>
File app/views/partials/footer.scala.html:
<footer>
Some copyright info
</footer>
File app/views/main.scala.html:
#(title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/main.css")">
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
</head>
<body>
#partials.header()
#partials.navigation()
#content
#partials.footer()
</body>
</html>
The files above defines not only some reusable partial templates (header, navigation and footer), but also a common layout (main) that all the pages of your application can reuse. Now, lets see a page that uses the structure above:
File app/views/users/profile.scala.html:
#(user: models.User)
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username</h2>
}
And there is more: since views are compiled to Scala code, you can import code written in Scala/Java and call it directly from your views, something like Rails view helpers:
File app/views/helpers/DateHelpers.scala:
package views.helpers
object DateHelpers {
def formatToISO8601(date: Date) = {
??? // format the date
}
}
Let's use this helper in our app/views/users/profile.scala.html page:
#(user: models.User)
#import controllers.DateHelpers._
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username.</h2>
<p>User since #formatToISO8601(user.createdAt)</p>
}
And there are other approaches to consider:
Ping-Play: Big Pipe Streaming for the Play Framework
You can create a Play module that integrate with Apache Tiles. I'm pretty sure this is possible.
A quick answer would be the following. If you are comfortable with Yeoman, you can keep most of the UI part in existing HTML, while rendering some pages with Scala templates. I would recommend Play-yeoman, which may help such that you can--with minimum effort--reuse UI components.
For instance, you may easily convert a NodeJS+Angular app into Play+Angular. The Play-yeoman plugin helps a lot. But it is not so flexible as it does not support any arbitrary Yeoman configuration, just Angular.
I'm using NetBeans as my IDE for a Ember.js project. When I create handlebars templates in my app like below the code highlighting doesn't work correctly.
<script type="text/x-handlebars">
<div>
</div>
</script>
Normally, when I'd select the first div, it and its matching end tag would highlight yellow, but this doesn't work. Since its inside the handlebars script tag both are highlighted red as errors and don't match together. This makes writing complex templates kinda annoying as it can be difficult to pinpoint syntax errors.
Is there anyway to get NetBeans to highlight inside the handlebars tag as if its regular html?
One option, until Netbeans implements this enhancement, is to add the following script tag in index.html immediately after your reference to jQuery:
<script src="js/libs/jquery.js"></script>
<!-- use following line to change script type to 'text/x-handlebars' -->
<script>jQuery('script[type="text/html"]').attr('type', 'text/x-handlebars');</script>
This is a variation of the answer provided by GCoda.
I had the same problem and tried various non satisfying fixes.
In the end I figured the best solution is simply to change the script's type attribute to text/html:
<script type="text/html">
<div>
</div>
</script>
I got same problem. And i just used a some kind of postprocessing, i am using node.js, so i did res.send(data.replace(/type="text\/html"/g,'type="text/x-handlebars"')); on my / page.
I think you can do something similar in you language, and ofcource this is not a fix, just an ugly trick to make developing more easy. Dont keep it in production.
I working on a web app. Is it good to use own html tags than divs? I mean using own tags instead of classes. This will make it easier to bind up dynamic content by splitting up common classes with id.
Example
<div id="message">
My Message
</div>
Replace with this
<message>
My message
</message>
I don't understand why you want this, because now HTML5 supports a lot of semantic tags like <audio>, <address>, etc. Usually, you can achive block-effect (i.e. combining or grouping related content in a block) by <div class="myblock"></div> for special purposes. Anyway, as you've asked, then for your information—you can use custom tags in HTML. Also you can style those using CSS and can use selectors to perform operation on those using JavaScript.
Note: Prior IE9 versions don't support custom tags. Hence you should create your tags like this using JavaScript:
<script type="text/javascript">
document.createElement('mytag');
</script>
The main practical reason for not doing this is that IE 8 and older do not let you style your custom tags. As Vishal mentions, there’s a workaround to this, but it does not work when JavaScript is disabled. And as he points out, you can use the class attribute—you should use id only for uniquely identifying a single element.
You can also use class attributes for elements other than div. You can first select an element so that its default (non-CSS) rendering is the best possible (among available alternatives), then add a class attribute.
In CSS, you would then normally use a class selector without tag name, e.g. .message (if you use class=message).
The Facebook comments count can be done in three different ways: (without directly using JS)
<fb:comments-count href="http://example.com" />
<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com" />
<div class="fb-comments-count" data-href="http://example.com">0</div>
The issue, however, is that doing something like this messes things up:
<p><div class="fb-comments-count" data-href="http://example.com">0</div> comments</p>
...because a <div> is firstly, not valid inside a <p> tag and secondly, looks wrong (though this could be fixed with CSS).
Basically, my question is: is there a way to do the above without using a <div> (a <span> for example), bearing in mind that I want to use the HTML5 method and (if possible!) want to avoid using javascript?
Clarification: I would like to avoid writing extra JS in the page simply because the MVC view currently looks nice and clean and I would prefer to keep it that way. Obviously, I'm still including the Facebook Connect library.
So, one solution would be to use a DIV instead of a P as the outer element.