I'm trying to set style names on different faces of ToggleButton (i.e. upFace, downFace, ...). It looks like setting styleName on a face doesn't work. For example the following won't work:
<g:ToggleButton>
<g:upFace styleName='{style.myToggleButton-up}' />
</g:ToggleButton>
But I noticed when setting the style name on ToggleButton itself...
<g:ToggleButton styleName='{style.myToggleButton}' />
... the generated HTML will look something like this:
<div class="GPAKHSCBGG GPAKHSCBGG-up" role="button" aria-pressed="false">...</div>
However, even if I have {style.myToggleButton-up} defined, it is not populated to GPAKHSCBGG-up. So I'm wondering how can I do this without having to mock the global .gwt-ToggleButton-up stylesheet. Please help.
http://examples.roughian.com/index.htm#Widgets~ToggleButton
All GWT components have predefined CSS Class definitions, what you tried didn't override the definitions.
Solution:
Add #external myToggleButton, myToggleButton-up; to ui:binder file.
Related
I want to add inline-svgs to my h1 to h6 Tags depending on the class set in the RTE.
Example:
RTE:
<h1 class="icon--clock">Header</h1>
Output:
<h1 class="icon--clock"><svg>...</svg>Header</h1>
I've done something similar with links before, using the parseFunc Config. A method like this: https://wiki.typo3.org/External_links
Is there any way to access and split the tag and class like the link parameters through TypoScript?
I also tried using a userFunc
lib.parseFunc.userFunc = ...\MyClass->MyUserFunc
but in Params I only get the tag content, not the tag or the classes that have been set themselves.
I'm using Typo8 with the ckeditor, but I don't think that makes a difference.
Can I even do this?
How do I do this?
I know that I can alternatively add different header layouts and use the tt_content header field, because it's easier to manipulate the template there. But I'd love to know if there is a way to this in the RTE.
I think you could do it in typoscript, but that would be very complicated as you need to analyze the attributes of the Hn-tags.
A simpler method which came to mind would be: use CSS and ::before. So you can use a selector to the class to insert the matching SVG.
This also can be done with javascript but as CSS can do it it would be more efficient to use CSS.
I'm fairly new to typo3 and I have an issue that i don't find an explanation on how to change it. I'm sure there are already some helpful tutorials but i have issues finding them.
I am making a website and I have already made a template for fontend and backend.
It is a very simple test template that consists only of one slider and one text element.
The slider is handmade and should have the following layout:
<section class="custom-slider">
<img src="img1.jpg">
<img src="img2.jpg">
...
</section>
Thought easy, i have my slider place in my template, just need to add plain images.
but typo3 gives me:
<section class="custom-slider">
<div id="c3" class="frame frame-default frame-type-image frame-layout-0"><header><h2 class=""></h2></header><div class="ce-image ce-center ce-above"><div class="ce-gallery" data-ce-columns="1" data-ce-images="1"><div class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-column"><figure class="image"><img class="image-embed-item" src="fileadmin/_processed_/1/2/csm_slider1_c3fdcdcaf5.jpg" width="600" height="187" alt="" /></figure></div></div></div></div></div></div></div>
</section>
Now i search how i can make my own custom elements or render existing elements different. I have found a lot of tutorials but they all are based on 'Extension Builder' or 'Builder' and require a custom extention. These don't seem to work on Typo3 8.7.x. Is there a different solution or can someone give me a good tutorial link?
Thank you in advanst:)
Ps: since i will have the same problem with styled text elements i would like to ask if there is a way to declare in the themplate how different predeterment elements are rendered?
In TYPO3 8.7 (I assume) your rendering is done with FSC (fluid_styled_content), so you have to understand the mechanism of FSC to render a CE (ContentElement).
As the name suggests Fluid is used. Fluid uses different templates organized in three categories (each with it's own folder):
Layouts
Templates
Partials
The call goes to a template (in the folder 'templates') where a tag can be inserted to use a specific layout (from floder 'Layouts'). if this tag is given the rendering starts with the given layout. In the layout different sections and partials can be called. Sections belong to the template, partials need to have an own partial file (in folder 'Partials').
You can override single files from the given declaration to individulize the behaviour.
In your example you may evaluate the field layout in layout, template and partial to avoid the default wrapping of any content (your images) in different div tags.
Ok, to set a Css for a widget in Gwt or Gwtp, we can do following:
-1. directly from gwt code. Ex: label1.getElement().getStyle().setBackground("blue");
-2. include "ui:style" in UiBinder xml file, but this css only visible to that UiBinder
-3. include "ui:width" in UiBinder xml file, it will visible to all UiBinder
- and there r many way to set the Css directly to the widget in UiBinder.
The one that made me confused is that if i used , ex
<ui:with field='res' type="com.myproj.client.MyResource" />
& if myResource.css has .gwt-TabLayoutPanel then i don't need to use "addStyleNames", ex <g:TabLayputPanel />, it can recognized CSS perfectly.
However, if i add .gwt-ScrollPanel into myResource.css & use <g: ScrollPanel /> then nothing happened.
So I have to create public interface MyCssResource extends CssResource, then add String gwt-ScrollPanel(); to MyCssResource. But Java eclipse do not allow hyphen - in the method name, so I have to change to String gwtScrollPanel();.
Finally, i have to add addStyleNames into <g: ScrollPanel />, ex <g: ScrollPanel addStyleNames="{res.css.gwtScrollPanel}" /> then it will work.
That also means if i want to use .gwt-TabLayoutPanel in MyCssResource, then i need to remove the hyphen - & this will cause inconsistency in my code.
So, can someone explain to me what is going on here? I am confused?
The only think you should be aware about, is that GWT obfuscates class names when you use then in ui-binders. For instance:
<ui:style>
.gwtTabLayoutPanel {}
</ui:style>
<g:TabLayoutPanel addStyleNames="{style.gwtTabLayoutPanel}" />
.gwtTabLayoutPanel will be renamed to something like .AB in the final injected style-sheet.
But most GWT widgets, are styled with un-obfuscated class names, so for using them in ui-binders files, you have to define as external in order to prevent GWT compier to obfuscate the class name:
<ui:style>
#external .gwt-TabLayoutPanel;
.gwt-TabLayoutPanel {}
</ui:style>
<g:TabLayoutPanel />
That's because when you create a TabLayoutPanel, it has a default class called .gwt-TabLayoutPanel. So you don't need to add that class manually in to your TabLayoutPanel.Just create a TabLayoutPanel and you will see the class ".gwt-TabLayoutPanel" is already there.
But ScrollPanel doesn't comes with a default class called .gwt-ScrollPanel. It is just a div. Try creating a ScrollPanel and see. It doesn't have any classes added initially.see the screenshot
If you want to add a class called .gwt-ScrollPanel you will have to do it manually.
I'm trying to use constants or defines in GWT's UiBinder XML. All the questions and answers I find are related to CSS constants, using #def annotations in a elements, but that's not what I need. Take this example:
<g:Button width="60" height="24">Hello</g:Button>
If I have 50 buttons on my page, all with the same dimensions, I don't want to have to set each button's dimension as indicated above. If I want to change the width, I have to do this for all buttons on the page. So, what I'm looking for is something like this:
<g:Button width="{myWidth}" height="{myHeight}">Hello</g:Button>
The constants "myWidth" and "myHeight" being specified somewhere at the beginning of the UiBinder XML file. I tried doing this with and but I cannot get it to work.
Any ideas?
A. This is how you do it:
<ui:with field="styleConstants" type="...constants.StyleConstants" />
<g:Button width="{styleConstants.myWidth}" height="{styleConstants.myHeight}">Hello</g:Button>
Obviously, StyleConstants should have myWidth() and myHeight() methods.
B. Setting the same size to 50 buttons is wrong. This is what CSS classes are for. Define a CSS class and assign it to each button:
<g:Button styleName="button">Hello</g:Button>
You can use an external CSS file or a CSS Resource for this purpose.
I am unable to use the usual i18N localization of GWT to localize a tabs name ('header') in a TabLayoutPanel.
This works:
<g:TabLayoutPanel addStyleNames='LocationsModule' barUnit="PX" barHeight="30" >
<g:tab>
<g:header>Locations</g:header>
But I can't get any other version to work:
<g:header text='{messages.layersTabTitle}' />
or
<g:customHeader>
<g:Label text='{messages.locationsTabTitle}' />
<g:Label>'{messages.locationsTabTitle}'</g:Label>
</g:customHeader>
anyone been able to do this, without resorting to code?
I think you need to use a slightly different syntax here:
check this example:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/test/com/google/gwt/uibinder/test/client/I18nMessageTest.ui.xml?r=7940
so it should be something like:
<g:customHeader>
<g:Label><ui:text from="{messages.locationsTabTitle}" /></g:Label>
</g:customHeader>
You can also use the ui:text element directly within the g:header element, avoiding the need for g:customHeader or g:Label, e.g:
<g:header><ui:text from="{messages.locationsTabTitle}" /></g:header>
(This is similar - although not quite the same - to how the file linked to by Arne uses ui:text within an h2 element: http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/test/com/google/gwt/uibinder/test/client/I18nMessageTest.ui.xml?r=7940)
Tested in GWT 2.4.0.