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.
Related
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.
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']
'my-layout' code :
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<polymer-element name="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: 'm-layout',
togglePanel: function() {
this.$.paper_drawer_panel.togglePanel();
}
});
</script>
</polymer-element>
If I add paper-drawer=toogle attribute, paper-icon-button in main drawer is disappear...
'main.jsp' code:
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html" >
<style>
html, body {
height: 100%;
}
body {
margin: 0;
background-color:#E5E5E5;
}
</style>
</head>
<body>
<m-layout></m-layout>
</body>
</html>
If paper-drawer-toggle attribute remove and main.jsp run, I can see icon-button but toggle is not working..
I can't found reference about paper-drawer-panel toggle and behavior.....
What should I do to toggle paper-drawer-panel?
There are a few things I noticed in your code.
In your my-layout code you should also be importing polymer.html
Which version of Polymer are you using? Since you are using the webcomponents-lite.min.js and the title states Polymer 1.0, I am assuming you are using 1.0. In Polymer 1.0 elements are defined using <dom-module id="m-layout"> instead of <polymer-element name="m-layout">
the toggle function in your script is not necessary, the toggle works out of the box using the paper-drawer-toggle attribute on the paper-icon-button element.
I am not sure of your directory structure but the following code works for me. I am assuming you have bower_components (including all polymer, iron, and paper elements) inside of your root. Also in your root I am assuming you have an elements directory containing your m-layout.html file.
You should check your developer tools in your browser to check that all your resources are loading correctly and there are no errors. If so, then your import paths to the components are wrong.
In your elements/m-layout.html:
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</dom-module>
<script>
Polymer({
is: 'm-layout'
// this is not needed
//togglePanel: function() {
// this.$.paper_drawer_panel.togglePanel();
//}
});
</script>
and this in main.jsp:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<!-- Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html">
</head>
<body>
<m-layout></m-layout>
</body>
</html>
Also keep in mind, that the drawer (and therefore the toggle) is only activated when the screen is very small (mobile). To force the drawer behavior no matter what the screen size, you can force the narrow view by setting the force-narrow attribute: <paper-drawer-panel force-narrow="true">. Alternatively you can set the width at which the drawer should be activated, <paper-drawer-panel responsive-width="800px">.
http://jsbin.com/winedi/edit?html,output
<style>
</style>
<template>
<paper-drawer-panel id="drawer">
<div drawer>
drawer
</div>
<paper-header-panel main>
<paper-toolbar class="teal-500">
<paper-icon-button icon="menu" on-tap="menuToggle"></paper-icon-button>
<div class="title">{{toolBarTitle}}</div>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "layout-inbox",
menuToggle: function() {
if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
this.$.drawer.togglePanel();
} else {
this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
}
},
properties: {
toolBarTitle: {
type: String,
value: "lucok"
}
}
});
</script>
</dom-module>
I think your code is working. The paper-drawer-toggle attribute is used to tell the browser to show the menu icon when the screen with is narrow. When you size the screen to a small enough width, you should seen the menu icon appear.
Maybe did you just miss the correct DocType in the head of main.jsp
<!DOCTYPE html>
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 have (roughly) this LIFT-ified HTML in my default template:
<html>
<head>
<title>FooBar Application | <lift:bind name="page-title"/></title>
</head>
<body>
<h1><lift:bind name="page-title" /></h1>
<div id="page-content">
<lift:bind name="page-content" />
</div>
</body>
</html>
...and then this in my main template:
<lift:surround at="page-content">
<lift:bind-at name="page-title">Home</lift:bind-at>
</lift>
...which give me this in the generated HTML:
<html>
<head>
<title>FooBar Application | <lift:bind name="page-title"/></title>
</head>
<body>
<h1>Home</h1>
<div id="page-content">
</div>
</body>
</html>
Why is the <lift:bind> tag in the <title> getting escaped, and the one in the <body><h2> not? And how do I prevent that from happening?
Are the pages defined through SiteMap? As was mentioned before, <title> can be a special case, and it is interpreted in several places - some of which might be doing the escaping. If you can, I'd try setting the page title in one of two ways:
Through the Sitemap you can use the Title Loc Param as referenced here: Dynamic title with Lift
You can also have something like: <title data-lift="PageTitle"></title> to have it invoke a snippet called page-title. Where, the snippet would be something like:
class PageTitle {
def render = "*" #> "FooBar Application | Home"
}