Re: [e4-dev] CSS image loading

[Kevin McGuire <Kevin_McGuire@xxxxxxxxxx>]

Thanks for the ideas Tom.  Some
thoughts below.  So that we have some bundle based resource lookup
for 0.9, I think I'm going to submit the code I have now.  If we get
ambitious we can add/change for 0.9, although I suspect we'll want to put
more thought into it than we have runway left for so it's post 0.9.

> file:/
> http:/
> platform:/
> theme:/

Actually we support http:/ today,
and the set of protocols is extensible in the CSS framework.
 
> Out of the box but allow customers to register their own protocol
and
> lookup at least that's what I have done in UFaceKit.
> 
> Automatically prepending stuff is not really a good thing IMHO one
has
> to specify the complete path in the CSS but maybe we could give them
> users the possibility to use variables they can register in the system.

> The your CSS looks like this:
> 
> Tree {
>   font: _Verdana_ 8px;
>   color: #666666;
>   background: _url_(${productbundle}/images/bluefade-full.gif);
> 
>  }
> 
> Where appbundle is the bundle of the currently running
> Application-Product but I could as well register my own variable.
> 
> Tree {
>   font: _Verdana_ 8px;
>   color: #666666;
>   background: _url_(${mybundle}/images/bluefade-full.gif);
>  }
> 

Yes I think you caught the jist of my
concern, which is that as you add in plugins, they will bring with them
their own images which must be referenced in some qualified way since two
plugins may have different images named the same. I wanted to avoid something
approaching:

  Tree {
    background-image: url(platform:/plugin/org.eclipse.e4.demo.e4photo/images/prettypicture.gif)
  }

(i.e. you just provide the path string
you'd pass to the core resolver).

But them, I would also like the simple
things to be simple.  If you pick up a CSS book, you'll see the examples
just look like:

  body {
    background-image: url(prettypicture.gif);
  }

which is nice and easy to read.  So
maybe there's the notion of a default area (an implicit productbundle),
which is what I think you'd want for many RCP apps.  This is what
the applicationCSSResources var could be.

I kind of like the idea of variables,
but also would like to see how simple we can keep things.  One thing
I'm not clear on with having variables is that I assume they go into a
global pool so must be unique.  Therefore in practice I'd need to
write:

  Tree {
    background-image: _url_(${org.eclipse.e4.demo.e4photo}/images/prettypicture.gif)
  }

which is only slightly shorter than:
    background-image: url(platform:/plugin/org.eclipse.e4.demo.e4photo/images/prettypicture.gif)

we could just as easily write:
    background-image: url(bundle:/org.eclipse.e4.demo.e4photo/images/prettypicture.gif)


Another approach to simplification is
that the variable work as a simple preprocessing string substitution step
within the style sheet. So something like:

        $myImages
= bundle:/org.eclipse.e4.demo.e4photo/images;
        ...
        ...
        Tree
{
         
      background-image: url($myImages/prettypicture.gif)
        }


> I might also explain what theme:/ is. I think this would a special
> lookup where people register their images in a central place and the
> handler looks them up from there (something like the ISharedImages
of
> today) allowing us to make better resource handling by sharing image
> instances.
>
> Tree {
>   font: _Verdana_ 8px;
>   color: #666666;
>   background: url(theme:/${current}/fadingtree.id);
>  }

As above, why not just:

   background: url(bluefade-full.gif);

for that?  Different themes would
switch both the CSS and the default resource location.

Kevin