I have the layout like this:
## layouts/v2.html.ep
<html lang="en">
<head>
%= content_for 'stylesheets'
</head>
<body>
%= include 'layouts/v2/header'
<main class="main">
%= include 'layouts/v2/menu'
<div class="content">
%= content
</div>
</main>
</body>
</html>
## layouts/v2/menu
% content_for stylesheets => begin
%= stylesheet 'v2/css/menu.css'
% end
<aside class="menu">
...
</aside>
## layouts/v2/header
% content_for stylesheets => begin
%= stylesheet 'v2/css/header.css'
% end
<header class="header">
...
</header>
Here when templates are included I include their style sheets.
Notice this in template:
% content_for stylesheets => begin
%= stylesheet 'v2/css/menu.css'
% end
But this is too late to do that, because the <head> is already rendered.
As workaround this problem I can move %= content_for 'stylesheets' from <head> to the bottom of page. But I want style sheets are loaded first.
Is there any way to postpone rendering for the content of 'stylesheets' block until whole page is rendered?
UPD
Thank to #amon about that Mojolicous layouts are rendered inside out. I understand the problem and there for templates included from first layout I include stylesheets manually:
## layouts/v2.html.ep
<html lang="en">
<head>
%= stylesheet 'v2/css/header.css'
%= stylesheet 'v2/css/menu.css'
%= content_for 'stylesheets'
</head>
<body>
%= include 'layouts/v2/header'
<main class="main">
%= include 'layouts/v2/menu'
<div class="content">
%= content
</div>
</main>
</body>
</html>
So in any rendered/included template (except layout) next works fine:
## some/template
% content_for stylesheets => begin
%= stylesheet 'some/template.css'
% end
template content
Mojolicous layouts are rendered inside-out, and you can nest arbitrarily many layouts.
Create a template that includes just the outermost document content and other HTML boilerplate, with a placeholder for the content of <body>
<html lang="en">
<head>
%= content_for 'stylesheets'
</head>
<body>
%= content
</body>
</html>
Then you can use that template as the layout for the body of your HTML page. I.e., use the layout helper like this:
% layout 'outermost_layout';
%= include 'layouts/v2/header'
<main class="main">
%= include 'layouts/v2/menu'
<div class="content">
%= content
</div>
</main>
After rendering the template, Mojolicious will check whether you specified a layout and then render it, using the output from this template as the outer layout's content. So because the innermost layout is rendered first, data can flow from your templates through the stash to wrapping layouts.
Related
I'm using flyingsaucer 9.1.1 with itext 2.17 to generate pdf files.
How can I show a footer (could be a div, a table or an img element) only on the last page but not on the other ones?
Unfortunately, CSS defines the page:first pseudo element, but doesn't define page:last.
You still have the possibility to take advantage of a bug of flying-saucer, that makes the footer only appear after it is declared. So if you put the footer div at the end of the HTML, it will only appear on the last page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.newpage{page-break-before:always}
#page{#bottom-center {content: element(footer)}}
#footer {position: running(footer);}
}
</style>
</head>
<body>
<div>Page 1 content</div>
<div class="newpage">Page 2 content</div>
<div class="newpage">Page 3 content</div>
<div id="footer">Footer on last page</div>
</body>
</html>
It also works if you want a footer on each page, with a different content for the last page. You just have to define the footer div twice in the HTML.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.newpage{page-break-before:always}
#page{
#bottom-center {content: element(footer)}}
#footer {position: running(footer);}
}
</style>
</head>
<body>
<div id="footer">Footer for all pages except last</div>
<div>Page 1 content</div>
<div class="newpage">Page 2 content</div>
<div class="newpage">Page 3 content</div>
<div id="footer">Footer on last page</div>
</body>
</html>
I use example from : blogs.adobe.com
but my output html file doesn't include links to my css files.
boilerplateSightlyPage.html:
<html>
<sly data-sly-include="head.html" data-sly-unwrap />
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap />
<body>
<div data-sly-test="${wcmmode.edit}">
<!--/* Show only in edit (author) mode */-->
<h1>Simple Page Component Using Sightly</h1>
</div>
<div class="flex-row">
<div class="col-half">First column</div>
<div class="col-half">Second column</div>
</div>
<div data-sly-resource="${#path='par',resourceType='wcm/foundation/components/parsys'}"></div>
</body>
</html>
head.html:
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8” />
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.css # categories='alexpi, flex'}"/>
<title>${currentPage.title}</title>
</head>
clientLib :
/etc/designs/alexpi-training/clientLib
properties:
jcr:primaryType (Name)cq:ClientLibraryFolder
categories (String[]) alexpi, flex
css.txt:
#base=css
flex.css
first.css
CSS files location:
/etc/designs/alexpi-training/clientLib/css/first.css
/etc/designs/alexpi-training/clientLib/css/flex.css
I see 'head.html' was included:
<head>
<meta http-equiv="”content-type”" content="”text/html;" charset="UTF-8”">
<title>AP empty sightly page with clienlib</title>
<link rel="stylesheet"href="/libs/cq/gui/components/authoring/clientlibs/page.css" type="text/css">
<script type="text/javascript" src="/libs/granite/author/deviceemulator/clientlibs.js"></script>
<script type="text/javascript" src="/libs/cq/gui/components/authoring/clientlibs/page.js"></script>
</head>
to pass an array via an option you need to use ${myVar # optName=[myVar, 'string']} syntax, read here
in your head.html:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.css # categories=['alexpi', 'flex']}"/>
note: categories=['alexpi', 'flex']
I am trying to create a simple typo3 template. The template looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>T3 TEST BLAH</title>
<link rel="stylesheet" href="">
</head>
<body>
<!-- ###DOCUMENT_BODY### -->
<h1>Webpage</h1>
<div id="right">
<h2>RIGHT:</h2>
<!-- ###CONTENT_SIDEBAR### -->
<!-- ###CONTENT_SIDEBAR### -->
</div>
<div id="content">
<!-- ###CONTENT### -->
<!-- ###CONTENT### -->
</div>
<!-- ###DOCUMENT_BODY### -->
</body>
</html>
and my typoscript like this:
page = PAGE
page.10 = TEMPLATE
page.10{
template = FILE
template.file = fileadmin/template.html
workOnSubpart = DOCUMENT_BODY
subparts{
CONTENT_SIDEBAR < styles.content.getRight
CONTENT < styles.content.get
}
}
all I get is the content from styles.content.get but not styles.content.getRight (or getLeft). What am I doing wrong?
there are a few things you could try:
First of all, make sure there is content in the "right" column.
Then you could try whether it works if you use
CONTENT_SIDEBAR < styles.content.get
to see if the subpart gets recognized.
Another problem I have seen is that you need some content between the subpart markers (don't know if that was fixed yet) - so try writing
<!-- ###CONTENT_SIDEBAR### -->
test
<!-- ###CONTENT_SIDEBAR### -->
HTH,
Susanne
styles.content.getRight has been removed with fluid_styled_content:
https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/7.6/Installation/Upgrading/
Because you don't have subpart "CONTENT_SIDEBAR", try use "RIGHT" like your subpart id.
Your template is valid and subparts are valid as well it's CONTENT_SIDEBAR NOT RIGHT.
Make sure you included correct CSS Styled Content (css_styled_content) in your TypoScript template and you cleared the cache.
Make sure you have some dummy code (whatever) between the subpart's comments like:
<!-- ###CONTENT_SIDEBAR### start--> Foo <!-- ###CONTENT_SIDEBAR### end-->
If you haven't and don't want to insert anything there, better use marker instead of subpart, like:
<body>
<!-- ###DOCUMENT_BODY### -->
<h1>Webpage</h1>
<div id="right">
<h2>RIGHT:</h2>
###CONTENT_SIDEBAR###
</div>
<div id="content">
###CONTENT###
</div>
<!-- ###DOCUMENT_BODY### -->
</body>
and TS:
page >
page = PAGE
page {
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/template.html
workOnSubpart = DOCUMENT_BODY
marks {
CONTENT < styles.content.get
CONTENT_SIDEBAR < styles.content.getRight
}
}
}
Finally use TypoScript analyzer to check if some extension or additional TS doesn't override CONTENT_SIDEBAR and/or styles.content.getRight.
Last advice maybe weird, but make sure that you put the content element in valid column and it isn't hidden or disabled.
I am new to SAPUI5. I'm able to create controls in my SAPUI5 mobile application.But I'm not able to set them in a layout. I'm writing my view as HTML page and adding my controls to that. I have tried placing them in a division but I don't know what is the attribute to specify layout.Please guide about the layouts.
Thanks
<template data-controller-name="sample.controllers.index">
<div data-sap-ui-type="sap.m.Page" data-title="Title">
<div data-sap-ui-aggregation="content">
<div data-sap-ui-type="sap.m.Layout" data-type="vertical">
<div data-sap-ui-type="sap.m.Input" data-width="20%"
id="Textfield" data-placeholder="User" data-max-length="10"></div><br>
<div data-sap-ui-type="sap.m.Input" data-width="20%" id="Textfield2" data-placeholder="Password" data-type="Password"></div><br>
<div data-sap-ui-type="sap.m.TextArea" data-width="30%" id="textarea" data-placeholder="Text for information..."></div>
</div>
<div data-sap-ui-type="sap.m.Button" id="btn1" data-text="My Button1" data-press="doIt"></div>
<div data-sap-ui-type="sap.m.Button" id="btn2" data-text="My Button2" data-press="doIt"></div>
<div data-sap-ui-type="sap.m.Label" data-text="I'm Label" data-width="100px" data-height="100px" data-background-colour="orange"></div>
</div>
</div>
This is my sample code and when i run this on browser it shows me a error message that
Uncaught Error: failed to load 'sap/m/Layout.js' from resources/sap/m/Layout.js: 404 - Not Found
here is my 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'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("sample");
var app = new sap.m.App({initialPage:"idindex1"});
var page = sap.ui.view({id:"idindex1", viewName:"sample.views.index", type:sap.ui.core.mvc.ViewType.HTML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>`
<div data-sap-ui-type="sap.m.Layout" data-type="vertical">
There is no such a control like sap.m.Layout. For layout, you can choose any from the sap.ui.layout controls, for example, sap.ui.layout.Grid
I would like to append some code to a page using jQuery/jQuery mobile,
but I am tripping up on some of the page() and pageshow and refresh methods.
Here is my code. you can cut, paste and run as is.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('div').live('pageshow', function () {
function fnCreateGroups(){
var section = "<p>and add a whole bunch of html code...</p>";
myClone = $(section);
alert((myClone).html()); // this works
myClone.appendTo("#placeholder").page(); // but not appending
}
fnCreateGroups();
});
</script>
</head>
<body>
<div data-role="page">
<div id="placeholder">
<div data-role="content">
<div id="placeholder">this is a small amount of html code.</div>
</div>
</div>
</div>
</body>
</html>
Beta2 release notes:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
instead of:
myClone.appendTo("#placeholder").page();
try
myClone.appendTo("#placeholder").trigger('create');
From your comment:
You are running the live() on all div's
$('div').live('pageshow', function ()
try using the page id instead
$('#change_this_page_only').live('pageshow', function ()
and this:
<div data-role="page">
to something like this:
<div data-role="page" id="change_this_page_only">