I am a newbie to pyramid and using pyramid with Chameleon. Can someone help me how to have a common template for header and footer and a layout which includes them.Couldn’t able to figure out exactly how to use wrapper. The Re-usable Template Macros also didn’t help much. Finally got this add on pyramid-layouts which seems to be promising but lacks in documentation.
Update
For Including header and footer as sepearte template file Mako and jinja2 have built-in ways but like me if you like chameleon style we have to use macros
Chameleon: Macros - Visit //chameleon.readthedocs.org/en/latest/reference.html#macros-metal
Jinja2: Templates - Visit //jinja.pocoo.org/docs/templates/#import
Mako: Inheritance - Visit //docs.makotemplates.org/en/latest/inheritance.html
Since Chameleon 2.7.0 there is support for load: TALES expression, so it is possible to load the macros template directly from another template. For details see #sverbois answer or this related question: How to use template inheritance with chameleon?
Another, older approach described in Re-usable Template Macros tutorial, involves creating a class which contains the templates which need to bre references and passing an instance of the class into the view:
class Layouts(object):
#reify
def global_macros(self):
renderer = get_renderer("templates/macros.pt")
return renderer.implementation().macros
Then you need to pass that Layouts thingie into your views. In the tutorial they did that by subsclassing the view class from Layouts:
from layouts import Layouts
class ProjectorViews(Layouts):
...
but you could as well just instantiate it and pass it directly:
def blah(context, request):
layouts = Layouts()
return {
(whatever data you want to pass to your template)
layouts=layouts,
}
In your macros template you use metal:define-macro to, well, define a macro:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:tal="http://xml.zope.org/namespaces/tal">
<metal:company_menu define-macro="company_menu">
<h1>Hi there!</h1>
</metal:company_menu>
</html>
To insert the macro into your other template, just use
<div metal:use-macro="view.global_macros['company_menu']"></div>
(if you use a view class subclassed from Layouts as they proposed), or
<div metal:use-macro="layout.global_macros['company_menu']"></div>
(if you instantiated the Layout object in a function-based view as I've shown in step 2 above)
Once that's working have a look at metal:define-slot and metal:fill-slot which will allow you to fill... err... slots in a macro with content supplied from the parent template
You can simply have a "main.pt" like this
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class="header">
My global header
</div>
<metal:block define-slot="content" />
<div class="footer">
My global footer
</div>
</body>
</html>
and use it in your view template "my_view_template.pt" like this
<html metal:use-macro="load: main.pt">
<div metal:fill-slot="content">
<p>Hello !!!</p>
</div>
</html>
Related
I encounter in some web app that some partial view that is used has head element (it loads some Jquery things).
The thing is that with that and the _layout.xml I get this wierd HTML page structure
<head>
...
</head>
<body>
...
</body>
<head>
...
</head>
<body>
....
</body>
doesn't feel right..
What's the best practice to load some .css.js to particular page? is it all done by _layout.xml and bundles?
and in general - only _layout.xml should contain head element? no other view in my solution?
You want only one head. Use layout with sections and add MVC sections in normal pages to add CSS or JScript. See here on basic section usage http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx. If you want to use partial create a helper to render section from partial see this answer Using sections in Editor/Display templates
I am new to angularjs, and was trying to create a sample angularjs in a Facelets file. But I am getting an error in the line <html ng-app> in Eclipse IDE. The error specifies that the ng-app attribute should be followed by an = character. Is it not possible to include angularjs code in a Facelets XHTML file?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:ng="http://angularjs.org" ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Take a look at following:
Try angular faces: https://github.com/stephanrauh/AngularFaces
And there is also a project: https://github.com/pankajtandon/PointyPatient
Prime faces refer to: http://angularprime.appspot.com/#/main
The best way is to go with HTML & JS as Client, and JAX-RS on Server Side.
I had similar problems, with Primefaces and Bootstrap, and became convinced, that JS & HTML at the moment is better for client side development.
Give the attribute the ng-app.
The value of the attribute would be the same as the name of variable that contains the return value of angular.module().
for ex:
ng-app="SampleApp"
in the html page
var SampleApp = angular.module("SampleApp", ["ngResource"]).
config(
//your code
);
in the app.js file
I think this should work for you.
The logic is that, when you define the ng-app it gives the reference to the particular module of app.js that would call the relevant controllers.
There is an app.js file in angularjs. This contains all the controllers define. These controllers act as connecters and data pipeliners between the html(our view) and the .cs(mvc controller) files.
These controllers are defined in a module (as i have defined one in the above answer).
There can be numerous modules in app.js. and hence they wil have numerous controllers.
ng-app is a directive that contains the name of the module you want to use as attribute.
ng-app defined will be active till the closing tag of the tag defined. That means if you have defined ng-app in html tag, it will work till the html tag closes, if in a div, it will work for that division.
If you dont get anything, google it, or refer the angularjs documentation, or shoot me a question.!!
I hope you got something out of it.:-)
Stumbled on this while searching myself.
XHTML does not allow an attribute without a value. While you can ignore this in Eclipse, the latest JSF libraries blow up and you'll get an exception.
Specify a value, which corresponds to your module name. For example, if you initialize your angular module with:
var myAppModule = angular.module('myApp', []);
Then you need to specify:
<html ng-app="myApp">
And all should be good minus some warnings in eclipse for not recognizing "ng-app". Works for me. Also, you probably want the HTML 5 doc type instead of the strict you have. Try:
<!DOCTYPE html>
<html ng-app="myApp">
I've had a quick skim of the Jade documentation and I can't seem to figure out how to apply a wrapper to all templates that I output.
How is this usually done?
It sounds like you want template inheritance:
// layout.jade
!!!5
html
body
block content
The content block is what you define in all templates that are going to inherit the layout template:
// index.jade
extends layout
block content
h1 Hello World!
When you render index.jade, this is the result:
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>
So in layout.jade, you set up all common elements like JS/CSS, headers/footers, etc.
I'm new to Haxe, and I'm trying to experiment with Ufront.
I got a problem using Erazor templates: I don't understand how to escape HTML when outputting variables.
With this simple template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Users list</title>
</head>
<body>
<ul>
#for(user in users)
{
<li>#user.name</li>
}
</ul>
</body>
</html>
If any of the users has name '<script>', then the template will simply output <script> for its name.
How can I properly HTML escape in Erazor?
How to HTML escape view arguments
In order to HTML escape an argument in your Erazor views,
you could simply use the HTML helper method encode().
Supposing your argument is called pageContent and its value is:
<script>
alert("BAD things could happens if you don't properly escape!!");
</script>
You can escape it using following code:
#Html.encode(pageContent)
Your template will be safely rendered as
<script>
alert("BAD things could happens if you don't properly escape!!");
</script>
Html.encode() internally uses StringTools.htmlEscape() in order to escape its argument.
Thanks to the kindly help of Franco, I've written a page on the Ufront site to explain how to HTML escape in Ufront.
Ufron automatically includes the helper class that contains the desired method:
<li>#Html.encode(user.name)</li>
I am trying to make an editable box (kind of a richTextBox) using html5 (contenteditable="true") and jquery. I need to find out position of each element inside the editable div so that I can insert a page break like microsoft word does.
Here is the page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Context Menu Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#divEdit").keyup(function(){
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
});
});
});
</script>
</head>
<body>
<h1>jQuery Context Menu Plugin and KendoUI Demo</h1>
<div style="width:740px;height:440px" contenteditable="true" id = "divEdit">
<p>
<img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
</p>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards and provides API for content manipulation.
</p>
<p id="para">Features include:</p>
<ul>
<li>Text formatting & alignment</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlink and image dialogs</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
</ul>
<p>
Read more details or send us your
feedback!
</p>
</div>
</body>
The problem is that alert(item.position()) is not fetching anything. The error that comes in firefox developer toolbar is 'item.position is not a function'.
My guess is that it has to do something with the type of each element in $("#divEdit").find("*") as all the elements are different.
Any help would be appreciated.
Thanks
You need to get the jQuery object out of item, as position() is a jQuery method, hence the complain about position() is not a function
$(item).position() // instead of item.position()
Or even more concise:
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
}
change to
$('#divEdit').find('*').each(function() {
alert($(this).position());
})
Change this line
alert(item.position());
to
alert($(item).position());