I want to use GWT bootstrap for my application, so I added the jar to the classpath and inherited it in app.gwt.xml and it is working so far (I am new to Bootstrap).
So far I haven't used UIBinders for the layout and if in any way possible would like to leave it that way as I have a very dynamic UI which is generated programmatically and I have little experience with UIBinders. However for the elements that I want to use from gwtbootstrap I have created UIBinders (such as headings and buttons).
The problem is that not only the elements I create with UIBinders using the gwtbootstrap elements look like gwtbootstrap elements, but all elements on the page.
A simple example: it makes no difference whatsoever if I create a Heading like this using a bootstrap element
<b:Heading size="2">Hello GWT Bootstrap</b:Heading>
or like this using standard HTML
<h1>Hello GWT Bootstrap</h1>
both look like a GWT Bootstrap heading. The same applies for all other elements, so any element on the page is styled by gwtbootstrap, even if I don't want it to and I can't find a way to control this.
That's because gwt-bootstrap injects the bootstrap.css into your GWT app and bootstrap.css defines default styles for standard HTML elements like <h1>, etc.
If you don't want bootstrap to override the default styles there are several solutions:
Modify the bootstrap.css in the gwt-bootstrap library file and remove the styles that you don't want
Create a separate css file that sets the styles for the specific HTML elements back (using !important)
Extends gwt-bootstraps CssResources and pass a custom css file.
Solution 3 is probably the cleanest one.
Related
I have just started my Typo3 journey. I want to put 2 content elements side-by-side (in one row). Can anyone tell how is it possible. Because whenever I place any content element, it is displayed as a block and fill the entire row.
Thank you for your time and consideration :)
You have to use container elements which come with the extension 'container'. Please have a look at https://extensions.typo3.org/extension/container
There is no build in solution for your problem.
But in TYPO3 you are free to build any kind of html structure for your output. This is necessary as you also can do any rendering of content. either with your own CSS and HTML-markup or if you use frameworks like Bootstrap.
You can build a new page layout, or any special content element which contains other content elements.
Changing layouts can (and should) be reflected in backend-layouts. (https://docs.typo3.org/m/typo3/reference-coreapi/11.5/en-us/ApiOverview/Backend/BackendLayout.html) (there are a lot of other tutorials)
But you also can build/ use individual defined containing content elements. Her you can get support by different extensions (eg. mask, DCE, gridelements) or define it completely on your own (https://docs.typo3.org/m/typo3/reference-coreapi/11.5/en-us/ApiOverview/ContentElements/Index.html)
I've created a custom form type in symfony2. This formtype has it's own template and this is working fine.
The form type also needs some javascript on the clientside to work nicely.
I would like to add this javascript to the page using the same template I use to render the widget. It's a bit more of a hassle to do this manually.
I could add the javascript manually on each page, but it would be nice if that just happened automatically.
I can't add the javascript just before or after the element itself, as it has a dependency to jquery which is only loaded at the bottom of the body.
I tried using a block which is defined in the "main template" (it is named block_javascript) to add the custom javascripts to the footer of the page, but it seems the rendering of forms works a little different and the block is not available.
I'm using assetic to prepare and return assets.
Is there a way I can use blocks from the main template being rendered when rendering a form widget?
I don't think yet about all the consequences or if it's doable, but here an idea that can solve your problem: use the event dispatcher.
an event for assets addition
a service that hold a list of assets to use and subscribe to above event
a Twig extension that use above service to make assets accessible in the template
trigger the event in the buildView() function of your form type with right parameters
use the Twig extension in your layout template
It theorically should work.
im working with Claus' Fluid Powered TYPO3 and I'm quiet happy with it. At the moment I have to implement a template wich should contain another extension (e.g. news) in the sidebar.
What is the preferred way to implement this.
My idea was to add the f:cObject ViewHelper and insert the extension in that way.
Is this the correct approach?
Thx
Markus
This depends on the type of template you are building:
Page templates should have proper content areas into which you can insert content. If the content needs to be shared, you have a few options: a) create the element in a sys folder and reference it from your Flux form settings then use v:content.render to render it by UID. b) Place any number of shared elements in a sys folder and render all by PID. c) Use content sliding in a column in your template which is there in all templates and is designed to contain elements which "slide" to every subpage (and can also be edited on subpages if editor has access).
Content templates can use flux:grid with flux:form.column, or flux:form.content as a shortcut to quickly make a single column, to add a content area, then flux:content.render to render those elements. This allows you to control that gets rendered around the plugin.
Plugin templates can associate a Flux form and use the steps described in point 2.
I think you're looking for 1a) or 1c) in this case.
My question is this: how do you allow a different GWT visual theme depending on the user that logs in?
I would like to decide which theme to use when the customer logs in (that is before the GWT app gets loaded, so I am pretty sure it should be possible).
I have attempted to use class replacement based on a custom-property, but that failed because only the last inherited module's set of images become visible, even though I can select the right css file... I have searched everywhere and can't find the answer!
Thank you for your suggestion Thomas, but the problem with this solution is that you're assuming the CSS stylesheet is available for me to add to a ClientBundle (I tried that but unless you copy the css file and accompanying pics to your project, you can't do that). The themes come from external GWT modules. And I would like to keep it this way for modularity (it would be painful to import a whole bunch of resources into my project every time we needed a new theme).
The work-around I came up with was to write the injection code myself (just inject a link tag in the HTML head) at run-time.
For completeness, here's the code to do it:
protected void doInjection(String cssFilePath) {
// <link type="text/css" rel="stylesheet" href="sol.css">
Element headEl = Document.get().getElementsByTagName("head").getItem(0);
HeadElement head = HeadElement.as(headEl);
LinkElement link = Document.get().createLinkElement();
link.setType("text/css");
link.setRel("stylesheet");
link.setHref(GWT.getModuleBaseURL() + cssFilePath);
head.appendChild(link);
}
And you call this method with something like this:
doInjection("gwt/standard/standard.css");
Then, inherit all Resources modules from your project's GWT module file. For example:
<inherits name='com.google.gwt.user.theme.standard.StandardResources'/>
<inherits name='com.google.gwt.user.theme.dark.DarkResources'/>
Inheriting the *Resources version of the Module avoids automatically injecting the style-sheet.
To decide which theme to use, I created a custom GWT property in the module file, based on the value of this property, I replace a default Java class (which would just insert the default theme) with a different Java class (which subclasses the default class) if a different theme should be used. This has the added bonus that I can include my own ResourceBundle resources within each theme, because the replacement Java class used with a theme, besides injecting the right css file, can also provide alternative Resources to my GWT code.
EDIT
I would like to add one important note:
The solution described above works quite well. But if your app uses different Locales or other GWT properties, this approach may cause the number of compilation permutations to explode! With only 6 different themes and 3 different Locales, on top of the standard 6 different browser versions you normally have, the GWT compiler will create 6 x 3 x 6 = 108 different compilations!! This is pretty crazy!!
A better solution, which I decided to follow after all, is to set an attribute into the HttpSession once the user logs in, and then based on the value of this attribute, load the appropriate css file (first thing in the onModuleLoad() of my entry-point class). The only difference from the solution described above is on how you select the theme.
I use a different approach, which mostly relies on the power of CSS with a single line of GWT code to switch themes.
First, define the themes that you want to apply. I use an enum.
public enum Theme {
DARK,
BRIGHT;
}
public static String getDefault() {
return BRIGHT.name();
}
Now, when you launch an app, apply a default theme (Theme.getDefault()). When a user selects a different theme, apply it:
public static void setTheme(String theme) {
/*
* Setting style on Body element allows us to "theme" the RootPanel as well.
*/
Document.get().getBody().setClassName(theme);
}
When you apply a new theme, the look of your app will instantly change without reloading the page.
Finally, define all theme elements that you need in your CSS file:
.DARK {background: #000; color: #CCC}
.BRIGHT {background: #ebebeb; color: #000}
.gwt-DialogBox {border-radius: 6px}
.DARK .gwt-DialogBox {border: 3px solid #555}
.BRIGHT .gwt-DialogBox {border: 3px solid #CCC}
Notice that you only add a theme selector in front of rules that are different for different themes.
I would try the following general approach:
Define one CSS file for each of the visual themes.
Put them all in a ClientBundle as described here.
Hold off injecting the themed CSS until you've authenticated the user. You can inject the general CSS you need for displaying the login screen.
Then inject the themed CSS depending on the user using the CssResource's ensureInjected() method.
I've found the GWT tab panels clunky for the styling I need to do, so I'm trying to make my own, simple tab panel. Basically an HTML5 <nav> element for tabs and a DeckPanel to display the content. Let the use figure out the rest with CSS3.
The GWT TabLayoutPanel has these "special" tags it uses to define the contents of a tab:
<g:TabLayoutPanel>
<g:tab>
<g:header>Tab Title</g:header>
<g:OtherWidget>Tab contents</g:OtherWidget>
</g:tab>
</g:TabLayoutPanel>
I'm referring to <g:tab> and <g:header>. I see these type of tags used in various places but I have no idea how to create them. Looking at the TabLayoutPanel source, I see that it has an add method that expects two widgets, and from that it puts one widget (the contents) into a panel for display and another (the header) into an instance of TabLayoutPanel.Tab. But I have no idea how to duplicate this kind of functionality.
In GWT 2.1 there's the UiChild attribute. It's quite cool.
#UiChild public void addTabDef(Widget page, String title) {...}
The title parameter will be filled with an attribute of the same name in the tabdef tag, like so:
<v:tabdef title="Tab one"><g:Label>Page one.</g:Label></v:tabdef>
Edit: to be clear, tabdef isn't defined anywhere as a class; the desired behaviour during parsing is defined by UiChild attribute.
To use custome tags for you widget like <g:tab> and <g:header> you need to create a custom ElementParse and register it with the UiBinderWriter. Unfortanatly there is no simple way of doing this yet without editing the sourcecode for gwt.
Usefull links:
A link to the issue of not being able to create custom ElementParser
TabLayoutPanelParser