Copying widget CSS style to embedded iframe DOM node

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Copying widget CSS style to embedded iframe DOM node

dmbaggett-2

I would like to copy the CSS style from a TextArea widget to a
qx.ui.embed.Iframe widget. My goal is to have the iframe look exactly like a
TextArea unless the HTML in the iframe specifies some other styles. I've
tried to copy the styles a bunch of ways, but can't seem to get anything to
work. For example, iframe.getContentElement.setStyles(...) doesn't seem to
have any effect. Any ideas?

Dave

--
View this message in context: http://www.nabble.com/Copying-widget-CSS-style-to-embedded-iframe-DOM-node-tp25862550p25862550.html
Sent from the qooxdoo-devel mailing list archive at Nabble.com.


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Copying widget CSS style to embedded iframe DOM node

Fabian Jakobs
Administrator
Hi Dave,
> I would like to copy the CSS style from a TextArea widget to a
> qx.ui.embed.Iframe widget. My goal is to have the iframe look exactly like a
> TextArea unless the HTML in the iframe specifies some other styles. I've
> tried to copy the styles a bunch of ways, but can't seem to get anything to
> work. For example, iframe.getContentElement.setStyles(...) doesn't seem to
> have any effect. Any ideas?
>  
To copy the look of a qooxdoo widget requires a little more than simply
copying the styles. This is due to the fact that we use decorators to
style widgets. In the TextArea widget most of the look is defined by its
decorator. The TextArea's input element itself is almost invisible. You
can configure the Iframe with the same decorator as the TextArea. This
works well as long as your IFrame has a transparent background so the
decorator shines through.

iframe.setDecorator("input");

Best Fabian



--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG - Web Technologies
Ernst-Frey-Straße 9 · DE-76135 Karlsruhe
Telefon: +49 721 91374-6784
[hidden email]

Amtsgericht Montabaur / HRB 6484
Vorstände: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Robert Hoffmann, Markus Huhn, Hans-Henning Kettler, Dr. Oliver Mauss, Jan Oetjen
Aufsichtsratsvorsitzender: Michael Scheeren


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Copying widget CSS style to embedded iframe DOM node

dmbaggett-2
In reply to this post by dmbaggett-2

Thanks, I will try that. I'm mainly interested in having the font match. I
view it as a Very Good Thing that the decorators drive the look and feel.
That means if I change the theme, everything just automatically adjust.
That's one reason I chose QooxDoo in the first place. :)

Dave


dmbaggett wrote:

>
> I would like to copy the CSS style from a TextArea widget to a
> qx.ui.embed.Iframe widget. My goal is to have the iframe look exactly like
> a TextArea unless the HTML in the iframe specifies some other styles. I've
> tried to copy the styles a bunch of ways, but can't seem to get anything
> to work. For example, iframe.getContentElement.setStyles(...) doesn't seem
> to have any effect. Any ideas?
>
> Dave
>
>

--
View this message in context: http://www.nabble.com/Copying-widget-CSS-style-to-embedded-iframe-DOM-node-tp25862550p25871746.html
Sent from the qooxdoo-devel mailing list archive at Nabble.com.


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Copying widget CSS style to embedded iframe DOM node

dmbaggett-2
In reply to this post by Fabian Jakobs

I can't seem to get this to have any effect; the fonts come out completely
different (size and weight) than what TextArea has. Here's my code:

var iframe_decorator = text.getDecorator();
iframe.addListenerOnce(
  "load",
  function(e) {
    var body = iframe.getBody();
    body.innerHTML = html_text;
    if (iframe_decorator) {
      // Cribbed from qx.ui.form.AbstractField:
      // Disable spellcheck in gecko
     var el = iframe.getContentElement();
     if (qx.core.Variant.isSet("qx.client", "gecko"))
       el.setAttribute("spellcheck", "false");
     el.setStyles({
       "border": "none",
       "padding": 0,
       "margin": 0,
       "display": "block",
       "background": "transparent",
       "outline": "none",
       "appearance": "none",
       "autoComplete": "off"
     });

     // Apply the decorator from the text area
     iframe.setDecorator(iframe_decorator);
}});


Fabian Jakobs wrote:
>
> [...]
>
> iframe.setDecorator("input");
>

--
View this message in context: http://www.nabble.com/Copying-widget-CSS-style-to-embedded-iframe-DOM-node-tp25862550p25874741.html
Sent from the qooxdoo-devel mailing list archive at Nabble.com.


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Copying widget CSS style to embedded iframe DOM node

Fabian Jakobs
Administrator
Hi Dave,

I've tweaked your code a little in the playground and I think I have
what you want:

<http://demo.qooxdoo.org/current/playground/#%7B%22code%22%3A%20%22var%2520src%2520%253D%2520qx.util.ResourceManager.getInstance%28%29.toUri%28%2522qx%252Fstatic%252Fblank.html%2522%29%253B%250Avar%2520iframe%2520%253D%2520new%2520qx.ui.embed.Iframe%28src%29%253B%2520%250Aiframe.setAppearance%28%2522widget%2522%29%253B%250A%250Aiframe.setDecorator%28%2522input%2522%29%253B%250Avar%2520font%2520%253D%2520qx.theme.manager.Font.getInstance%28%29.resolve%28%2522default%2522%29%253B%250A%250Aiframe.addListenerOnce%28%250A%2520%2520%2522load%2522%252C%250A%2520%2520function%28e%29%250A%2520%2520%257B%250A%2520%2520%2520%2520var%2520body%2520%253D%2520iframe.getBody%28%29%253B%250A%2520%2520%2520%2520body.innerHTML%2520%253D%2520%2522Juhu%2520Kinners%2522%253B%250A%2520%2520%2520%2520var%2520el%2520%253D%2520body%253B%250A%2520%2520%2520%2520qx.bom.element.Style.setStyles%28el%252C%2520font.getStyles%28%29%29%253B%250A%2520%2520%2520%2520console.log%28%2522set%2520styles%2522%252C%2520font.getStyles%28%29%29%253B%250A%2520%2520%257D%250A%29%253B%250A%250Athis.getRoot%28%29.add%28iframe%252C%2520%257Btop%253A%2520200%252C%2520left%253A%252020%257D%29%253B%250A%250A%22%7D>

var src =
qx.util.ResourceManager.getInstance().toUri("qx/static/blank.html");
var iframe = new qx.ui.embed.Iframe(src);
iframe.setAppearance("widget");

iframe.setDecorator("input");
var font = qx.theme.manager.Font.getInstance().resolve("default");

iframe.addListenerOnce(
  "load",
  function(e)
  {
    var body = iframe.getBody();
    body.innerHTML = "Juhu Kinners";
    var el = body;
    qx.bom.element.Style.setStyles(el, font.getStyles());
  }
);

this.getRoot().add(iframe, {top: 200, left: 20});

One tricky part was that the appearance of the Iframe defines a
background color. I have change the appearance id to "widget", which
defines no properties at all. Further I use the font manager to resolve
the default font. This is set in the last line of the load handler. Note
that I can set the decorator directly since it is outside of the iframe.

Hope this helps,

Best Fabian

> I can't seem to get this to have any effect; the fonts come out completely
> different (size and weight) than what TextArea has. Here's my code:
>
> var iframe_decorator = text.getDecorator();
> iframe.addListenerOnce(
>   "load",
>   function(e) {
>     var body = iframe.getBody();
>     body.innerHTML = html_text;
>     if (iframe_decorator) {
>       // Cribbed from qx.ui.form.AbstractField:
>       // Disable spellcheck in gecko
>      var el = iframe.getContentElement();
>      if (qx.core.Variant.isSet("qx.client", "gecko"))
>        el.setAttribute("spellcheck", "false");
>      el.setStyles({
>        "border": "none",
>        "padding": 0,
>        "margin": 0,
>        "display": "block",
>        "background": "transparent",
>        "outline": "none",
>        "appearance": "none",
>        "autoComplete": "off"
>      });
>
>      // Apply the decorator from the text area
>      iframe.setDecorator(iframe_decorator);
> }});
>
>
> Fabian Jakobs wrote:
>  
>> [...]
>>
>> iframe.setDecorator("input");
>>
>>    
>
>  


--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG - Web Technologies
Ernst-Frey-Straße 9 · DE-76135 Karlsruhe
Telefon: +49 721 91374-6784
[hidden email]

Amtsgericht Montabaur / HRB 6484
Vorstände: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Robert Hoffmann, Markus Huhn, Hans-Henning Kettler, Dr. Oliver Mauss, Jan Oetjen
Aufsichtsratsvorsitzender: Michael Scheeren



------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Copying widget CSS style to embedded iframe DOM node

dmbaggett-2

Thank you, Fabian -- that works perfectly! You just saved me at least an
entire day of work on this!

Dave


Hi Dave,

I've tweaked your code a little in the playground and I think I have
what you want:

[...]

Hope this helps,

Best Fabian

--
View this message in context: http://www.nabble.com/Copying-widget-CSS-style-to-embedded-iframe-DOM-node-tp25862550p25876324.html
Sent from the qooxdoo-devel mailing list archive at Nabble.com.


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel