I see nothing in the documentation except a reference to include some "CssResource" and get it with ClientBundle, but how do I exactly override the tbody and th of a CellTable?
Is this possible?
Create an interface:
interface TableResources extends CellTable.Resources {
#Source({CellTable.Style.DEFAULT_CSS, "<your css file>.css"})
TableStyle cellTableStyle();
}
interface TableStyle extends CellTable.Style {
}
and initialize the cell table:
CellTable.Resources resources = GWT.create(TableResources.class);
table = new CellTable<SomeProxy>(rowSize, resources);
In the cellview.client package you can find the default gwt css files. Yo use those as your starting point. In the "<your css file>.css" put you specific style changes.
You can also set colum style (on the col element):
table.addColumnStyleName(colNumer, "some_css_style_name");
or better use css resource name instead of string "some_css_style_name".
Just for the fun of it I might add something I just had a headache with... if you change cellTableStyle(); with something else it breaks... no warning or error, the CSS just does not appear as I thought it would. Dont know where this is documented, but I found it out after alot of fiddeling trying to find out why some CSS was correct and some not..
For some reason my cellTable.addColumnStyleName(colNumber, "cssStyle") just won't work. According to FireBug it doesn't add the style no matter what (if the style was incorrect, it at least could have added it to the classes attribute of the th-element...). Maybe it's because I am redrawing the columns, but it'S weird nevertheless.
I've used the solution above, however, if you have another table with default styling, it ends up making with your custom table. Are you required to override all your tables with custom styling, or is there some workaround?
Also, I find the CellTable constructors less than optimal... I have to specify pageSize to specify the style resource CellTable(pageSize, resources)... I've been putting Integer.MAX_VALUE for pageSize, not sure if that should be -1 or something else as there's no javadoc on that value.
Related
I have a ClientBundle in which I am referencing a bunch of icons as ImageResource's
public interface DefaultCMSResources extends ClientBundle {
String baseImgLoc = "com/jorsek/ui/client/style/images/base/";
String baseIconLoc = "com/jorsek/ui/client/style/images/icons/";
String fugeIconsLoc = baseIconLoc+"fugue/";
/* Icons */
#Source(fugeIconsLoc+"book-open.png")
ImageResource getBookIcon();
}
For a number of reasons I really don't like having to reference the static file location via the #Source annotation.
I really would like to create a custom annotation like #FugueIcon, which would generate the static path dynamically somewhere. IE:
public interface DefaultCMSResources extends ClientBundle {
/* Icons */
#FugueIcon("book-open")
ImageResource getBookIcon();
}
I was looking through the code for the #Source annotation and nothing popped out at me. I was hoping someone could provide the steps I might take to accomplish this.
Thanks!
The problem with this is that if the file is selected dynamically, the compiler won't know ahead of time what the image will be - it won't know the size, so it can't write proper css for it (if using #sprite in your CssResource) or provide results for the various ImageResource methods. The #Source annotation means that the compiler can know all it needs to about the image before the app has turned into JS, so it can write in that JS details about the image it will have.
Instead, you might want to look at a way to implement that ImageResource method directly - one option would be to instantiate a com.google.gwt.resources.client.impl.ImageResourcePrototype instance, which implements that interface, and lets you specify details about the image that are needed - a name (mostly optional) the url it can be found at, and the position in that url (if you are spriting) as well as the size to use.
I am using CKEditor as a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...
<div>some content</div>
I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.
Disabling content filtering
The easiest solution is going to the config.js and setting:
config.allowedContent = true;
(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filtering which is one of the most important CKEditor features.
Configuring content filtering
You can also configure CKEditor's content filter more precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.
For example, you can extend the default CKEditor's configuration to accept all div classes:
config.extraAllowedContent = 'div(*)';
Or some Bootstrap stuff:
config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';
Or you can allow description lists with optional dir attributes for dt and dd elements:
config.extraAllowedContent = 'dl; dt dd[dir]';
These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules.
Read more about:
Content filtering in CKEditor – why do you need content filter.
Advanced Content Filter – in deep description of the filtering mechanism.
Allowed content rules – how to write allowed content rules.
I found a solution.
This turns off the filtering, it's working, but not a good idea...
config.allowedContent = true;
To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.
So my bet is for allowing any class in the editor is:
config.extraAllowedContent = '*(*)';
This allows any class and any inline style.
config.extraAllowedContent = '*(*);*{*}';
To allow only class="asdf1" and class="asdf2" for any tag:
config.extraAllowedContent = '*(asdf1,asdf2)';
(so you have to specify the classnames)
To allow only class="asdf" only for p tag:
config.extraAllowedContent = 'p(asdf)';
To allow id attribute for any tag:
config.extraAllowedContent = '*[id]';
etc etc
To allow style tag (<style type="text/css">...</style>):
config.extraAllowedContent = 'style';
To be a bit more complex:
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
Hope it's a better solution...
Edit: this answer is for those who use ckeditor module in drupal.
I found a solution which doesn't require modifying ckeditor js file.
this answer is copied from here. all credits should goes to original author.
Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).
Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add config.allowedContent = true;.
Don't forget to flush the cache under "Performance tab."
Since CKEditor v4.1, you can do this in config.js of CKEditor:
CKEDITOR.editorConfig = function( config ) {
config.extraAllowedContent = '*[id](*)'; // remove '[id]', if you don't want IDs for HTML tags
}
You can refer to the official documentation for the detailed syntax of Allowed Content Rules
if you're using ckeditor 4.x you can try
config.allowedContent = true;
if you're using ckeditor 3.x you may be having this issue.
try putting the following line in config.js
config.ignoreEmptyParagraph = false;
This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.
config.allowedContent = true;
Please refer to the official Advanced Content Filter guide and plugin integration tutorial.
You'll find much more than this about this powerful feature. Also see config.extraAllowedContent that seems suitable for your needs.
Following is the complete example for CKEDITOR 4.x :
HTML
<textarea name="post_content" id="post_content" class="form-control"></textarea>
SCRIPT
CKEDITOR.replace('post_content', {
allowedContent:true,
});
The above code will allow all tags in the editor.
For more Detail : CK EDITOR Allowed Content Rules
If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.
Here it is:
I create a custom module and put the following code in the ".module" file:
<?php
/**
* Implements hook_wysiwyg_editor_settings_alter().
*/
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['allowedContent'] = TRUE;
}
}
?>
I hope this help other Drupal users.
I found that switching to use full html instead of filtered html (below the editor in the Text Format dropdown box) is what fixed this problem for me. Otherwise the style would disappear.
I would like to add this config.allowedContent = true; needs to be added to the ckeditor.config.js file not the config.js, config.js did nothing for me but adding it to the top area of ckeditor.config.js kept my div classes
Another option if using drupal is simply to add the css style that you want to use. that way it does not strip out the style or class name.
so in my case under the css tab in drupal 7 simply add something like
facebook=span.icon-facebook2
also check that font-styles button is enabled
I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.pasteFilter.disabled = true;
});
I am attempting to have multiple data grids in a single project. They have some different behavior and therefore different styling. The first grid is a fully custom grid, building the rows with an AbstractCellTableBuilder with a fully custom CSS file (using the DataGrid.Resources override).
The issue I am having is that my second grid's custom CSS is being applied to my first grid. I don't see any coding overlap. It just seems like the CSS classes are being anonymized the same, so they show up on the elements both grids.
Any thoughts?
Please let me know if there is anything I can provide to clarify the situation.
UPDATE:
ReportSelectorGrid.css has every class required by the DataGrid.Style defined. All of them are empty.
private SelectorDataGridResources gridResource = GWT.create(SelectorDataGridResources.class);
public interface SelectorDataGridResources extends DataGrid.Resources {
#Source({ "ReportSelectorGrid.css" })
DataGrid.Style dataGridStyle();
};
And then this is in my UiFactory method:
DataGrid<ReportSelectorItem> grid = new DataGrid<ReportSelectorItem>(-1, gridResource, KEY_PROVIDER);
You have to declare a DataGrid.Style sub-interface or they'll all share the same obfuscated class names. See also: https://code.google.com/p/google-web-toolkit/issues/detail?id=6144
I need a option to hide the header from a dojox.grid.DataGrid grid.
Didn't find anything.
I'm grateful for any info!
I use in dojo 1.6 (and probably works since dojo 1.3)
#myGrid .dojoxGridHeader { display:none; }
You can use CSS:
.dojoxGrid-header { display:none; }
This solution is taken from:
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html#hiding-the-headers-of-a-grid
u can connect at the postrender of the data grid. then find the headerGrid element created
then put style display to none.
//workaround the grid calls postrender after
//the component is at the dom.
//so then i can change the style to reset the header to invisible
dojo.connect(grid,"postrender",function(){
var headerGrid =this.domNode.firstElementChild;
headerGrid.style.display="none";
});
I would recommend switching to using the new and improved dgrid instead of datagrid, it is a lot better!
The setting for hiding headers is the attribute 'showHeader' which is a boolean value.
Check out this dgrid tutorial that talks you through defining grid structures including 'showHeader'.
I've read about wicket:message here, but can't seem to make it do everything I'd like.
Say I have a HTML page with <wicket:message key="text"/> and a properties file containing text=Blah blah: important point, foo bar. I'm wondering how to make part of the text bold (or apply arbitrary CSS to it), to achieve output like:
Blah blah: important point, foo bar
Note that none of this is actually dynamic, so I wouldn't want to do anything in Java, if that can be avoided.
I've tried nesting tags with something like the following, but no luck.
<wicket:message key="text">
<span class="bold"><wicket:message key="text2"/></span>
</wicket:message>
text=Blah blah: ${text2}, foo bar
text2=important point
Is this even possible in Wicket without 1) injecting the formatted part from Java side or 2) just splitting the text into (in this case) three different properties?
The easiest way is to put the tags inside your localization file:
text=Blah blah: <strong>text2</strong>, foo bar
You could also use a Label and a ResourceModel to replace it later:
text=Blah blah: [b]text2[/b], foo bar
And in your model getObject(), or in your Label:
string.replace("[b]", "<strong>");
string.replace("[/b]", "</strong>");
Or, even better, try to reuse a Markdown implementation in your Label.
I've managed to do this for my own application, albeit with a rather ugly hack. I did it by exposing a customized version of WicketMessageResolver.
Here's what to try:
Wholesale copy and paste org.apache.wicket.markup.resolver.WicketMessageResolver into your own class (say com.acme.CustomWicketMessageResolver) (the hack begins!)
Inside your CustomWicketMessageResolver change
WicketTagIdentifier.registerWellKnownTagName( "message" ); to something else like WicketTagIdentifier.registerWellKnownTagName( "msg" );.
Inside of
private void renderMessage(final MarkupStream markupStream, final ComponentTag openTag, final String key, final String value), you'll find the line getResponse().write( text );.
Immediately before that line you have the opportunity to screw around with the value of "text". There, I do something like text = MyLabelUtils.replaceWikiMarkup(text) which post-processes some wiki-like markup syntax used by the content authors for my application.
For example, I use this method to take a Label using a ResourceModel pointing to the key:
propertyKey=I found the answer on [acronym SO].
and a render it as
I found the answer on <acronym title="Stack Overflow">SO</acronym>.
and that method handles i18n and all that fun stuff.
You can, of course, extend that wiki syntax (or anything similar) to be as simple or complex as you'd need.
Note that you'll have to change <wicket:message key='foo'> to <wicket:msg key='foo> in all of your markup files (or at least in ones where you want this behaviour).
I'd obviously prefer a more standard way to customize the behaviour of the built-inwicket message resolver, but if you need this functionality in a pinch, like I did, this will work for now.
If you need something more standard, you could raise the issue on the Wicket mailing list. It's pretty good.
Starting from Wicket 1.4 you can nest components within a wicket:message element. For example:
<wicket:message key="myKey">
This text will be replaced with text from the properties file.
<span wicket:id="amount">[amount]</span>.
<a wicket:id="link">
<wicket:message key="linkText"/>
</a>
</wicket:message>
Then
myKey=Your balance is ${amount}. Click ${link} to view the details.
linkText=here
and
add(new Label("amount",new Model("$5.00")));
add(new BookmarkablePageLink("link",DetailsPage.class));
Results in:
Your balance is $5.00. Click here to view the details.
So maybe, nesting <wicket:message>s without a component could work as well. Not sure.
Source: https://cwiki.apache.org/confluence/display/WICKET/Wicket%27s+XHTML+tags#Wicket%27sXHTMLtags-Elementwicket%3Amessage