html format with Showcase2

[Jean-Claude]

Hello,

I am trying to add a html page to my application.
When I use gwt without ext the html is well rendered: bullets and list
are shown as bullets and list.
When I use gwt with ext the html is shown but without formating.

My test code is the following for both cases:

public void onModuleLoad() {
HTML html = new HTML("<span style=\"font-weight: bold;\">added</
span><P>A list:</P><UL><LI>item1</LI><LI>item2</LI><LI>item3</LI></
UL>");
RootPanel.get().add(html);
}

In the case with GWT-EXT, I am using the Showcase2 project and just
replaced the existing onModuleLoad() method with the above one.

Can it be that some css used by the Showcase2 or EXT prevent the
correct display for HTML?

Thanks in advance!

[Jean-Claude Antonio]

Thanks Leo for your help,

The problem I have with these solutions (as I forgot to mention :-) ),
is that I creating a wiki application.
And the wiki can be edited with any html tag.

Thanks to your tip I identified where the css was with firebug:
In the ext-all.css (see below). If I remove the concerned lines, it will
break the Ext nice formatting.

The HTMLEditor for editing shows correctly though, so I will search how
HTMLEditor override this ext-all.css file.

Thanks again!

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
img,body,html{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

leo_BsAs a écrit :
> Hi Jean-Claude,
> as far as I understand, I think that the html code is afected by the
> css loaded by the browser. But, you can add your custom css to the
> main resouces in the module declaration, and then apply the style that
> you want...
>
> Another option could be the use of iframe (http://gwt-ext.com/demo-ux/
> #managedIFramePanel).
>
> Anyway, I'll research the css stuff in html panels...
>
> I hope it helps you...
>
> Leo

[Jean-Claude]

One step further.

I found in the ext-all.js file the following:
Ext.form.HtmlEditor=...
....
this.execCmd("styleWithCSS",false)
this.execCmd("useCSS",false)

Is that why HtmlEditor is showing correctly and HTML is not?
If this is the reason, how can I do the same for HTML or HTMLPanel?

Or maybe this is way to remove any existing style.
I tried
html.removeStyleName("ul");
html.removeStyleName("ol");
html.removeStyleName("li");

without success.

I am not sure now where to look.

Any help will be welcome.

With firebug the ext-all.css is creating this issue (see below)
ol, ul {ext-all.css (line 12)
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, th, td {ext-all.css (line 9)
margin:0pt;
padding:0pt;

[leo_BsAs]

Jean-Claude...
here is an intuitive way to solve your problem. I have to warn you
that I don't know if it works...
If you look here (http://www.koders.com/java/
fidB1DD444CA549F35B0C04D3502E755747BD4E45BE.aspx), you can see how is
implemented the execCmd in gwt-ext for HtmlEditor... So if you create
a class that extends from HtmlPanel and then implement the follows
native method into it... you could play with the
this.execCmd("styleWithCSS",false) / this.execCmd("useCSS",false)
stuff. Since the native method is working on the BaseExtWidget class
level... it could work. I repeat... I'm not sure about that... But if
it works... please let me know...

The piece of code...

/**
* Executes a Midas editor command directly on the editor
document. For visual commands, you should use relayCmd instead. This
should only be called after the editor is initialized.
*
* @param cmd the Midas command
* @param value the value to pass to the command
*/
public native void execCmd(String cmd, String value) /*-{
var he = this.@com.gwtext.client.widgets.BaseExtWidget::jsObj;
he.execCmd(cmd, value);
}-*/;



Regards...

Leo

[Jean-Claude]

Thank you Leo for your time.

I tried it and got the error: "this object does not handle this
method" (see below).

I will go with your other solution: apply a style that override the
css

htmlPanel.addStyleName("override-style");

I will go through the all the html tags one by one...

.override-style h1{
...
}

.override-style ul{
...
}
...


-------------------------------------------------
public native void execCmd() /*-{
var he =
this.@com.gwtext.client.widgets.Component::getOrCreateJsObj()();
he.execCmd("useCSS",false);
}-*/;

[ERROR] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: JavaScript TypeError
exception: Cet objet ne gère pas cette propriété ou cette méthode
at
com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:
481)
at
com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:
270)
at
com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:
137)
at
com.alineo.imprint.client.widget.ExtendedHTMLPanel.execCmd(ExtendedHTMLPanel.java:
8)
at
com.alineo.imprint.client.ui.util.UiWidgetFactory.addTab(UiWidgetFactory.java:
1979)
at com.alineo.imprint.client.ui.MainContentPanelWiki
$12.onSuccess(MainContentPanelWiki.java:269)
at com.alineo.imprint.client.service.ItemService_Proxy
$35.onCompletionImpl(transient source for
com.alineo.imprint.client.service.ItemService_Proxy:2342)
at com.alineo.imprint.client.service.ItemService_Proxy
$35.onCompletionAndCatch(transient source for
com.alineo.imprint.client.service.ItemService_Proxy:2318)
at com.alineo.imprint.client.service.ItemService_Proxy
$35.onCompletion(transient source for
com.alineo.imprint.client.service.ItemService_Proxy:2312)
at
sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:
39)

public native void execCmd(String cmd, String value) /*-{
var he = this.@com.gwtext.client.widgets.BaseExtWidget::jsObj;

he.execCmd("useCSS", false);
}-*/;



java.lang.IllegalArgumentException
at
sun.reflect.UnsafeFieldAccessorImpl.ensureObj(UnsafeFieldAccessorImpl.java:
37)
at
sun.reflect.UnsafeObjectFieldAccessorImpl.get(UnsafeObjectFieldAccessorImpl.java:
18)

On 22 avr, 20:02, leo_BsAs <aito...@yahoo.es> wrote:
> Jean-Claude...
> here is an intuitive way to solve your problem. I have to warn you
> that I don't know if it works...
> If you look here (http://www.koders.com/java/
> fidB1DD444CA549F35B0C04D3502E755747BD4E45BE.aspx), you can see how is
> implemented the execCmd in gwt-ext for HtmlEditor... So if you create
> a class that extends from HtmlPanel and then implement the follows
> native method into it... you could play with the
> this.execCmd("styleWithCSS",false) / this.execCmd("useCSS",false)
> stuff. Since the native method is working on the BaseExtWidget class
> level... it could work. I repeat... I'm not sure about that... But if
> it works... please let me know...
>
> The piece of code...
>
> /**
> * Executes a Midas editor command directly on the editor
> document. For visual commands, you should use relayCmd instead. This
> should only be called after the editor is initialized.
> *
> * @param cmd the Midas command
> * @param value the value to pass to the command
> */
> public native void execCmd(String cmd, String value) /*-{

> var he = th...@com.gwtext.client.widgets.BaseExtWidget::jsObj;

[Jean-Claude]

Hello,

This works with IE but not with firefox which does not display the
formatting information.
Any idea?


Cheers,

On 22 avr, 22:16, Jean-Claude <jcdeanto...@gmail.com> wrote:
> Thank you Leo for your time.
>
> I tried it and got the error: "this object does not handle this
> method" (see below).
>
> I will go with your other solution: apply a style that override the
> css
>
> htmlPanel.addStyleName("override-style");
>
> I will go through the all the html tags one by one...
>
> .override-style h1{
> ...
>
> }
>
> .override-style ul{
> ...}
>
> ...
>
> -------------------------------------------------
> public native void execCmd() /*-{
> var he =

> th...@com.gwtext.client.widgets.Component::getOrCreateJsObj()();

> var he = th...@com.gwtext.client.widgets.BaseExtWidget::jsObj;