Fluid Powered TYPO3 FLUX Fluidcontent - No Output in Frontend? - output

I've made a TYPO3-Installation 6.2.9 with Fluid powered TYPO3 - the first steps with the Pre-configured Distribution "Site" were fine. My Site/Page-Template is installed and I added all the TypoScript stuff.
Now I want to use FLUIDCONTENT (FCE) with FLUX. I've added a new Template-File TeaserOne.html and I try to use the Layout from the Distribution Content.html.
Now I can see and write into my input-fields in Backend, but I've no Output in Frontend?! What else do I need?
I only see the Content-Element Headline. Not the FLEXform.
I'm using the latest Versions of flux (7.1.2), fluidpages (3.1.2), fluidcontent (4.1.1), fluid_core (1.0.2) and vhs (2.1.4).
The static template "fluidcontent_core" was included via pre-configured Distribution.
myext/Resources/Private/Templates/TeaserOne.html
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
f:schemaLocation="https://fluidtypo3.org/schemas/fluid-master.xsd"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
flux:schemaLocation="https://fluidtypo3.org/schemas/flux-master.xsd">
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form id="fluidcontenttest" options="{icon: 'Icons/Content/Hello.gif', group: 'New Elements'}">
<flux:field.text name="teasertext" label="hier lorem eintragen" rows="5" cols="30" required="FALSE" />
</flux:form>
</f:section>
<f:section name="Preview">
<table width="100%">
<tr>
<td width="30%">Ausgabe:</td>
<td width="70%">
<f:format.crop maxCharacters="100">{teasertext}</f:format.crop>
</td>
</tr>
</table>
</f:section>
<f:section name="Main">
<h3>TEST: I am a content element! But no Output?</h3>
<p> {teasertext} </p>
</f:section>
</div>
myext/Resources/Private/Layouts/Content.html
<f:layout name="Content" />
<f:render section="Main" />

It seems that the frontend rendering configuration for the CType fluidcontent_content is missing. Did you add the following to your typo3conf/AdditionalConfiguration.php:
<?php
$GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'] = array('fluidcontentcore/Configuration/TypoScript/');

Related

Server Error - 405 - HTTP verb used to access this page is not allowed

I've just inherited a site and have moved a copy to a Windows Server 2008 test server. When I test the login process I'm getting a server error:
405 - HTTP verb used to access this page is not allowed.
The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.
I've had a look at the login code and it is using a popover window to show the login form then when it is closed it appears to run jQuery script. This is all happening in the login.html page - here's how it currently looks:
$(document).ready(function() {
$("#myform").validate({
//this is the submit = Log in
submitHandler: function(form) {
$.post('../login.php', $("#myform").serialize(), function(data) {
var theString = (data);
var subString = theString.substr(0, 5);
if (subString == "Error")
//if the string starts with error then, guess what, it's an error!
{
$('#results').html(theString);
} else //open the string as a link, it should be the database entry address returned
{
window.location = theString;
}
});
} //close function(data)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- START ADD THIS FOR LOG IN WINDOW -->
<!-- START Log in window -->
<div id="backgroundPopup"></div>
<div id="popupContact">
<h1> Log In.</h1>
<table width="300" align="center">
<form id="myform" method="POST">
<tr>
<td height="20">
<div align="right"> User Name <input class="" name="username" type="text" size="30" /></div>
</td>
</tr>
<tr>
<td height="20">
<div align="right">Password <input name="password" type="password" size="30" /></div>
</td>
</tr>
<tr>
<td height="5">
</tr>
<tr>
<td align="right" height="20">
<input type="submit" name="action" value="LogIn" class="login_button" />
<!-- class="login_button" style="font-size:11px"
// class="my_password" style="font-size:11px" -->
<!--<a id="popupContactClose">x</a> -->
</form>
</td>
</tr>
<br />
</table>
<div class="error" id="results"> </div>
</div>
<div id="backgroundPopup"></div>
<!-- END Log in window -->
<!-- END ADD THIS FOR LOG IN WINDOW -->
From researching similar issues it appears to be a problem with submitting to a .html page that isn't accepting a POST request, but I can't find the settings to allow this (if this is indeed the actual issue). I can't find any settings so far in the current server that is hosting this successfully without this error message (also running Windows Server 2008).
I'm not looking to make any changes to the code at the moment (e.g. convert to PHP etc) just need to get it running on our test server by allowing a POST request to the login.html page.

Thymeleaf: literals and variables in a HTML id

I have this piece of code in Thymeleaf:
<tr th:each="image: ${images}" >
<img id="|'idAwesomeIcon${image.id}'|" .. />
</tr>
also I tried
<tr th:each="image: ${images}" >
<img id=“idAwesomeIcon|${image.id}|" .. />
</tr>
also I tried
<tr th:each="image: ${images}" >
<img id="\'idAwesomeIcon' + ${image.id} +'\'" .. />
</tr>
expecting the id to be replace with something like idAwesomeIcon666 but when I see the source code of the HTML page there is no such a substitution and I can still see ${image.id}
You have to use th:id attribute if you want to dynamically populate values
<img th:id=“'idAwesomeIcon'+${image.id}" .. />

Adding parameters from input controls to url in submit action

I am trying to pass parameters from my input text control to the called xquery by adding them as parameters in url. I tried doing in may ways - always without success. Could you have a look and tell me what I am doing wrong?
xquery version "3.0";
declare option exist:serialize "method=xhtml media-type=application/xhtml+xml indent=yes";
import module namespace xmldb="http://exist-db.org/xquery/xmldb";
declare variable $collection as xs:string := '/db/junitReports';
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:bf="http://betterform.sourceforge.net/xforms" xmlns:xf="http://www.w3.org/2002/xforms" bf:toaster-position="tl-down">
<head>
<title>IB interfaces regression testing report</title>
<meta name="author" content="test"/>
<meta name="author" content="test"/>
<meta name="description" content="IB interfaces regression testing report"/>
<link rel="stylesheet" type="text/css" href="styles/demo.css"/>
<!-- INPUT CONTROLS -->
<xf:model>
<xf:instance id="default">
<data xmlns="">
<InterfaceName constraint="true" readonly="false" required="false" relevant="true">
</InterfaceName>
<trigger1 constraint="true" readonly="false" required="false" relevant="true">
</trigger1>
</data>
</xf:instance>
<xf:instance id="table" xmlns="">
<data>
</data>
</xf:instance>
<xf:bind nodeset="InterfaceName" type="string">
</xf:bind>
<xf:submission id="showTable"
method="post"
action="{concat('/exist/rest/db/xquery/returnTable.xq?interface=',InterfaceName)}"
replace="instance"
ref="instance('table')"
instance="table">
</xf:submission>
</xf:model>
</head>
<body class="soria" style="margin:30px;">
<div class="Headline">IB test report</div>
<div class="description">
<p>You can restrict report output:</p>
</div>
<p>2. By typing in particular interface name</p>
<div class="Interface">
<xf:input id="InterfaceName" ref="InterfaceName" incremental="false">
<xf:label></xf:label>
<xf:hint>(S|R)xxxxxYYYZZZ</xf:hint>
<xf:help>Enter interface name</xf:help>
<xf:alert>Enter interface name</xf:alert>
</xf:input>
</div>
<br/>
<div>
<xf:trigger id="trigger1" ref="trigger1" incremental="true">
<xf:label>Filter output</xf:label>
<xf:hint>a Hint for this control</xf:hint>
<xf:help>help for trigger1</xf:help>
<xf:action ev:event="DOMActivate">
<xf:send submission="showTable"/>
</xf:action>
</xf:trigger>
</div>
<div>
<table border="1">
<thead>
<tr>
<th>Inteface Name</th>
<th>Test Date</th>
<th>Test Result</th>
<th>Report Link</th>
</tr>
</thead>
<tbody xf:repeat-nodeset="instance('table')//result">
<tr>
<td>
<xf:output ref="interfaceName"></xf:output>
</td>
<td>
<xf:output ref="reportDate"></xf:output>
</td>
<td>
<xf:output ref="testResult"></xf:output>
</td>
<td>
<li>
<xf:output ref="fileLink"></xf:output>
</li>
</td>
</tr>
</tbody>
</table>
</div>
<label>{InterfaceName}</label>
</body>
</html>
My uri remains without parameters:
"resource-uri":"http://localhost:8080/exist/rest/db/xquery/returnTable.xq?interface="
The right way to do it was to replace action attribute with this element in submission:
<xf:resource value="concat('/exist/rest/db/xquery/returnTable.xq?interface=',instance('defaultInstance')//InterfaceName,'&','date=',instance('defaultInstance')//CalendarDate)"/>

How to build a FTL template for a dynamic layout?

I'm building a freemarker template to generate a jsp view. Using a layout in 2 columns where each field in a form is floating and occupies the entire width of the column.
Each field type is in a independent FTL to easily add and remove fields.
FTL template has the following code:
<#if (data)?has_content>
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<#include "estructura/Cabecera.ftl">
<s:include value="${tipoFormulario}_${data.Artefacto.nombreSubModulo?lower_case}_scripts.jsp"></s:include>
</head>
<body>
<div class="" id="dim-listas">
<s:fielderror />
</div>
<s:form theme="simple" action="Mostrar${data.Artefacto.nombreSubModulo?cap_first}.action">
<#-- Estructura en columnas, parseo usando CSS -->
<#list data.Artefacto.formulario.grupoCampos as grupoCampos>
<div class="grupoCampos" <#if grupoCampos[0].#id[0]?has_content >id="${grupoCampos[0].#id[0]!}"</#if> <#if grupoCampos[0].#estilo[0]?has_content >style="${grupoCampos[0].#estilo[0]!}"</#if>>
<#list grupoCampos?children as nodos>
<#if nodos?node_type = 'element' && chequearPermisos(nodos[0].#permiso[0]!"all")>
<#if ((nodos[0].#mostrar[0]!"todos") == 'todos' || (nodos[0].#mostrar[0]!"todos") == tipoFormulario)>
<div style="${nodos[0].#estilo[0]!}" <#if nodos[0].#id[0]?has_content>id="${nodos[0].#id[0]!}"</#if> class="${nodos?node_name} ${nodos[0].#tipo[0]!}">
<#list nodos?children as campo>
<#if campo?node_type = 'element' && chequearPermisos(campo[0].#permiso[0]!"all")>
<#if ((campo[0].#mostrar[0]!"todos") == 'todos' || (campo[0].#mostrar[0]!"todos") == tipoFormulario)>
<#switch campo?node_name>
<#case "subtitulo">
<div class="subtitulo " style="${campo[0].#estilo[0]!}">${campo[0]}</div>
<#break>
<#case "texto">
<#-- campo de texto -->
<#include "campos/Campos Texto.ftl">
</#switch>
</#if>
</#if>
</#list>
</div>
</#if>
</#if>
</#list>
</div>
</#list>
</s:form>
<#include "estructura/Pie.ftl">
</body>
</html>
<#else>
<#pp.dropOutputFile />
</#if>
this FTL run with FMPP, using a XML to fill the data.
The problem I am having is when I have to adjust the layout of the view, this layout is designed for a form 2 columns and I need to:
add a header or more columns to the layout
change the background color or image, font size and color
add images to header
i don't know how to do it without complicating the FTL with #IF, marks each part of the CSS and then having a big xml.
there are any layouts in freemarket for example i can see or use?
The idea is to keep using single set of FTLs a web system and a simple web page, in java.
You can create a freemarker template for use as your layout. In the template you will want to embed your complex logic as well as your styling.
Here is an example of a layout template that I have been using on a current project.
<#include "../common/commonStyles.ftl">
<#if document.visuallyImpaired>
<link rel="stylesheet" type="text/css" href="css/visuallyImpaired/devLetterLayout.css" media="all" />
<#else>
<link rel="stylesheet" type="text/css" href="css/devLetterLayout.css" media="all" />
</#if>
<table class="headerTable">
<tbody>
<#if document.visuallyImpaired>
<tr>
<td class="visImpairedTitle">
<#include "title.ftl">
</td>
</tr>
</#if>
<tr>
<td class="headerSideColumn">
<#include "bannerImage.ftl">
</td>
<td class="headerCenterColumn">
<#if !document.visuallyImpaired>
<#include "title.ftl">
</#if>
</td>
<td class="headerSideColumn">
</td>
</tr>
<tr>
<td class="letterDate">
<#include "letterDate.ftl">
</td>
</tr>
</tbody>
</table>
In your main template you will use the <#assign> tags for your variables and the <#include> tags to pull in the .ftl templates you created.
You can also break out some of your logic into separate templates to keep your source page clean. Just put an <#assign> and <#include> in your <#list>.
For the number of columns I haven't found anything elegant yet, but you can do something like <#assign columnCount=x> and then <#include "tableColumn" + columnCount + ".css"> to limit the amount of changes you need to add.
You could even assign a local variable using <#local> and implement a counter to determine the number of columns you have if the table is created dynamically each time.

Use RazorEngine inside tinymce

I'm writing an application that uses a given email template to generate multiple messages.
The e-mail parser works fine. I'm using RazorEngine to create the e-mail template.
The problem is that I need to generate a table using the following construct (a simple foreach):
<table>
<tbody>
<tr><th>Pedido</th><th>NF</th><th>Boleto</th><th>Vencimento</th><th>Valor</th></tr>
#foreach (dynamic item in Model.PagamentosEmAtraso) {
<tr>
<td valign="top" width="76">
<p align="center"><span style="font-size: small;">#item.NumeroPedido</span></p>
</td>
<td valign="top" width="60">
<p align="center"><span style="font-size: small;">#item.NumeroNotaFiscal</span></p>
</td>
<td valign="top" width="88">
<p align="center"><span style="font-size: small;">#item.NumeroBoleto</span></p>
</td>
<td valign="top" width="128">
<p align="center"><span style="font-size: small;">#item.DataVencimento.ToString("dd/MM/yyyy")</span></p>
</td>
<td valign="top" width="119">
<p align="center"><span style="font-size: small;">#item.ValorLiquido.ToString("C2") </span></p>
</td>
</tr>
}
</tbody>
</table>
When I exit the html editor, tinymce messes up my code, "fixing" my code using like this:
#foreach (dynamic item in Model.PagamentosEmAtraso) {}
<table>
This is issue is happening on newer versions of tinymce - it used to accept this kind of markup.
Is there any viable solution to let tinymce accept a possibly broken html without trying to fix it?
My tinymce configuration is:
function initializeTinyMce() {
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url: '/Scripts/tinymce/tiny_mce.js',
// General options
theme: "advanced",
plugins: " pa geb reak,legacyoutput,style,layer,table,save,advimage,advlink,emotions,iespell,inlinepopups,preview,media,searchreplace,print,c o nt extmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
width: "960",
height: "500",
entity_encoding: "raw",
// Theme options
theme_advanced_buttons1: " bo ld, italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontse l ec t,fontsizeselect",
theme_advanced_buttons2: " cu t,c opy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,cleanup,help,code,|,insert d at e,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,||,fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example content CSS (should be your site CSS)
//content_css: "/Content/site.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
}
Since 3.4 it is not possible anymore to turn off the tinymce validator using a config setting.
The html needs to be valid, but you may define what gets accepted as valid by the tinymce validator and what not. Have a closer look at the tinymce config params valid_elments and valid_children.