<div dir="ltr"><br><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Apr 20, 2016 at 1:52 PM, Vojtech Szocs <span dir="ltr"><<a href="mailto:vszocs@redhat.com" target="_blank">vszocs@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><span class=""><br>
<br>
----- Original Message -----<br>
> From: "Greg Sheremeta" <<a href="mailto:gshereme@redhat.com">gshereme@redhat.com</a>><br>
> To: "Vojtech Szocs" <<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>><br>
</span><span class="">> Cc: "Martin Sivak" <<a href="mailto:msivak@redhat.com">msivak@redhat.com</a>>, "Alexander Wels" <<a href="mailto:awels@redhat.com">awels@redhat.com</a>>, "<a href="mailto:engine-devel@ovirt.org">engine-devel@ovirt.org</a>"<br>
> <<a href="mailto:devel@ovirt.org">devel@ovirt.org</a>><br>
</span><div><div class="h5">> Sent: Wednesday, April 20, 2016 7:06:13 PM<br>
> Subject: Re: [ovirt-devel] UI plugins - access to engine styles and libraries<br>
><br>
> On Wed, Apr 20, 2016 at 12:51 PM, Vojtech Szocs <<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>> wrote:<br>
><br>
> ><br>
> ><br>
> > ----- Original Message -----<br>
> > > From: "Martin Sivak" <<a href="mailto:msivak@redhat.com">msivak@redhat.com</a>><br>
> > > To: "Vojtech Szocs" <<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>><br>
> > > Cc: "Greg Sheremeta" <<a href="mailto:gshereme@redhat.com">gshereme@redhat.com</a>>, "Alexander Wels" <<br>
> > <a href="mailto:awels@redhat.com">awels@redhat.com</a>>, "<a href="mailto:engine-devel@ovirt.org">engine-devel@ovirt.org</a>"<br>
> > > <<a href="mailto:devel@ovirt.org">devel@ovirt.org</a>><br>
> > > Sent: Tuesday, April 19, 2016 5:07:52 PM<br>
> > > Subject: Re: [ovirt-devel] UI plugins - access to engine styles and<br>
> > libraries<br>
> > ><br>
> > > > With this (static linking) approach, you don't need those CSS<br>
> > > > or JS resources at runtime; your webapp is self-contained and<br>
> > > > optimized (containing only stuff it really uses).<br>
> > ><br>
> > > Right, but I won't get the same look and feel as the styles might be<br>
> > > different.<br>
> ><br>
> > If `ovirt.brand` is RPM-packaged, you could depend on it<br>
> > when building your webapp (UI plugin), but I don't think<br>
> > we have such RPM.<br>
> ><br>
> > > I was looking for a way to use the same colors and styles<br>
> > > to make the UI plugin look right in both RHEV and oVirt.<br>
> ><br>
> > Understood, just use the URL that exposes branding files,<br>
> > it's perfectly fine to load CSS and other stuff at runtime.<br>
> ><br>
><br>
> But much of the CSS is obfuscated by GWT. There's no way to hook into it.<br>
<br>
</div></div>That's correct.<br>
<br>
All I wanted to say is that we have some base CSS files<br>
(see "webadmin_css" in ovirt.brand/branding.properties)<br>
and some of them could be of use to Martin. For example,<br>
vanilla PatternFly CSS:<br>
<br>
- patternfly/css/styles.min.css<br>
- patternfly-ovirt.css<br>
<span class=""><br>
><br>
> My idea is completely different. I wanted to stop using GWT for all CSS,<br>
> and instead use LESS or SASS. Then any plugins could simply use the<br>
> LESS/SASS files as needed.<br>
<br>
</span>I like that idea.<br>
<br>
In general, we should extract *all* styling (including<br>
<ui:style> in ui.xml templates) into separate CSS files<br></blockquote><div><br></div><div>Yes.</div><div> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
and access that through appropriate Java interfaces in<br>
our GWT applications.<br></blockquote><div><br></div><div>What do you see as the benefit of continuing to wrap CSS classes in Java interfaces? We could just stop doing that, too. I don't think it buys us much. I see it as just more code to maintain for no good reason. When we access PatternFly classes, we just hardcode the strings. I think that's pretty typical with CSS, and ok.</div><div> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<br>
There should be no CSS styling outside of 'css' files.<br>
<br>
The GWT build would involve an extra step, if needed:<br>
take Less/Sass files and compile them into CSS files.<br>
<br>
GWT Java interfaces would link to these CSS files and<br>
GWT compiler could still do its obfuscate/minification<br>
thing. We *could* disable CSS selector obfuscation if<br>
we wanted to, using "@external" as we do for branding.<br>
<br>
However, the main point is because we'd already have<br>
CSS styling isolated into dedicated files, we could<br>
simply expose those CSS files via HTTP/servlet.<br>
<br>
So assuming we have everything in CSS files:<br>
<br>
interface MyCss extends CssResource {<br>
String className();<br>
}<br>
<br>
interface MyResources extends ClientBundle {<br>
@Source("my.css")<br>
MyCss css();<br>
}<br>
<br>
// inside ui.xml template<br>
<ui:style type="org.ovirt.engine.ui.example.MyCss"><br>
</style><br>
<br>
(Note that <ui:style> above is empty on purpose.)<br>
<div class="HOEnZb"><div class="h5"><br>
><br>
> There's no way that could make 4.0 now, though.<br>
><br>
><br>
> ><br>
> > ><br>
> > > Martin<br>
> > ><br>
> > > On Fri, Apr 15, 2016 at 5:37 PM, Vojtech Szocs <<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>><br>
> > wrote:<br>
> > > ><br>
> > > ><br>
> > > > ----- Original Message -----<br>
> > > >> From: "Vojtech Szocs" <<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>><br>
> > > >> To: "Martin Sivak" <<a href="mailto:msivak@redhat.com">msivak@redhat.com</a>>, "Greg Sheremeta"<br>
> > > >> <<a href="mailto:gshereme@redhat.com">gshereme@redhat.com</a>>, "Alexander Wels" <<a href="mailto:awels@redhat.com">awels@redhat.com</a>><br>
> > > >> Cc: "<a href="mailto:engine-devel@ovirt.org">engine-devel@ovirt.org</a>" <<a href="mailto:devel@ovirt.org">devel@ovirt.org</a>><br>
> > > >> Sent: Friday, April 15, 2016 5:23:08 PM<br>
> > > >> Subject: Re: [ovirt-devel] UI plugins - access to engine styles and<br>
> > > >> libraries<br>
> > > >><br>
> > > >> Hi Martin,<br>
> > > >><br>
> > > >> (adding Greg and Alex in case they have any thoughts)<br>
> > > >><br>
> > > >> if you build your UI plugin in a way that requires CSS styles,<br>
> > > >> JS libraries etc. at runtime (dynamic linking), you can utilize<br>
> > > >> oVirt branding servlet [a] to serve branding-related resources.<br>
> > > ><br>
> > > > Just a note - another way of building your UI plugin is to use<br>
> > > > tools that take your CSS styles and JS sources (including 3rd<br>
> > > > party ones) and produce a self-contained bundle for deployment.<br>
> > > ><br>
> > > > oVirt Dashboard, for example, follows this approach:<br>
> > > ><br>
> > > > <a href="https://github.com/vojtechszocs/ovirt-dashboard-ui-plugin" rel="noreferrer" target="_blank">https://github.com/vojtechszocs/ovirt-dashboard-ui-plugin</a><br>
> > > ><br>
> > > > (soon, we'll sync it with ovirt-engine-dashboard on our gerrit<br>
> > > > and continue developing the project there)<br>
> > > ><br>
> > > > With this (static linking) approach, you don't need those CSS<br>
> > > > or JS resources at runtime; your webapp is self-contained and<br>
> > > > optimized (containing only stuff it really uses).<br>
> > > ><br>
> > > > We also have two RPM packages (initiated by Juan) for building<br>
> > > > (oVirt) webapps that require a JS build step, utilizing tools<br>
> > > > around the Node.js platform:<br>
> > > ><br>
> > > > ovirt-engine-nodejs [Node.js runtime]<br>
> > > > ovirt-engine-nodejs-modules [all frontend dependencies]<br>
> > > ><br>
> > > > Regards,<br>
> > > > Vojtech<br>
> > > ><br>
> > > >><br>
> > > >> [a] org.ovirt.engine.core.branding.BrandingServlet<br>
> > > >><br>
> > > >> By default, oVirt Engine ships with single branding package:<br>
> > > >><br>
> > > >> $ ls /etc/ovirt-engine/branding/<br>
> > > >> 00-ovirt.brand<br>
> > > >><br>
> > > >> That `00-ovirt.brand` directory symlinks to:<br>
> > > >><br>
> > > >> /usr/share/ovirt-engine/branding/ovirt.brand<br>
> > > >><br>
> > > >> containing all branding-related resources.<br>
> > > >><br>
> > > >> To fetch them, use the following URL:<br>
> > > >><br>
> > > >> <a href="http://example.com/ovirt-engine/webadmin/theme/" rel="noreferrer" target="_blank">http://example.com/ovirt-engine/webadmin/theme/</a><path_to_file><br>
> > > >><br>
> > > >> where <path_to_file> is relative to `ovirt.brand` directory.<br>
> > > >><br>
> > > >> In your UI plugin, you can use the newly introduced API to<br>
> > > >> construct this URL more easily [b]:<br>
> > > >><br>
> > > >> var url = api.engineBaseUrl() + 'webadmin/theme/' + pathToFile<br>
> > > >><br>
> > > >> [b] <a href="https://gerrit.ovirt.org/#/c/55694/" rel="noreferrer" target="_blank">https://gerrit.ovirt.org/#/c/55694/</a><br>
> > > >><br>
> > > >> WebAdmin UI itself loads following CSS styles (in this order):<br>
> > > >><br>
> > > >> - web_admin.css<br>
> > > >> - common.css<br>
> > > >> - gwt_common.css<br>
> > > >> - patternfly/css/styles.min.css<br>
> > > >> - patternfly-ovirt.css<br>
> > > >> - ovirt-patternfly-compat.css<br>
> > > >> - ovirt.css<br>
> > > >><br>
> > > >> For starters, you can load PatternFly-specific CSS only.<br>
> > > >><br>
> > > >> As for JS libraries, these are typically provided through<br>
> > > >> PatternFly RPM, to which `patternfly` directory symlinks.<br>
> > > >><br>
> > > >> For starters, you can use stuff under `patternfly/js` and<br>
> > > >> `patternfly/components` (these are PF's own dependencies).<br>
> > > >><br>
> > > >> oVirt ships its own version of jQuery (v1.11) + Bootstrap<br>
> > > >> (v3.3.6) -- please don't use them!! If you're wondering<br>
> > > >> why we use custom jQuery and Bootstrap, see here:<br>
> > > >><br>
> > > >> <a href="https://gerrit.ovirt.org/#/c/41228/" rel="noreferrer" target="_blank">https://gerrit.ovirt.org/#/c/41228/</a><br>
> > > >> <a href="https://gerrit.ovirt.org/#/c/55546/" rel="noreferrer" target="_blank">https://gerrit.ovirt.org/#/c/55546/</a><br>
> > > >><br>
> > > >> (@Greg, any plans for upgrading to PF-provided jQuery?)<br>
> > > >><br>
> > > >> Regards,<br>
> > > >> Vojtech<br>
> > > >><br>
> > > >><br>
> > > >> ----- Original Message -----<br>
> > > >> > From: "Martin Sivak" <<a href="mailto:msivak@redhat.com">msivak@redhat.com</a>><br>
> > > >> > To: "<a href="mailto:engine-devel@ovirt.org">engine-devel@ovirt.org</a>" <<a href="mailto:devel@ovirt.org">devel@ovirt.org</a>><br>
> > > >> > Cc: "Moran Goldboim" <<a href="mailto:mgoldboi@redhat.com">mgoldboi@redhat.com</a>>, "Vojtech Szocs"<br>
> > > >> > <<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>>, "Oved Ourfali" <<a href="mailto:oourfali@redhat.com">oourfali@redhat.com</a>><br>
> > > >> > Sent: Wednesday, April 13, 2016 5:30:49 PM<br>
> > > >> > Subject: UI plugins - access to engine styles and libraries<br>
> > > >> ><br>
> > > >> > Hi everybody,<br>
> > > >> ><br>
> > > >> > there is one piece I always missed when developing my optimizer<br>
> > plugin<br>
> > > >> > and that is the access to the engine css styles.<br>
> > > >> ><br>
> > > >> > I feel it might be pretty easy and good for both bandwidth and<br>
> > > >> > branding to expose them using some "well known" url from the engine.<br>
> > > >> > All plugins would be then able to (re-)use the same styling<br>
> > > >> > information and basic javascript libraries (jQuery, angular,<br>
> > whatever<br>
> > > >> > you decide the core engine will use).<br>
> > > >> ><br>
> > > >> > So far, each UI plugin has to link to its own version of libraries<br>
> > and<br>
> > > >> > define (and maintain) custom color theme.<br>
> > > >> ><br>
> > > >> > Do you think this would be doable for 4.0?<br>
> > > >> ><br>
> > > >> > Best regards<br>
> > > >> ><br>
> > > >> > --<br>
> > > >> > Martin Sivak<br>
> > > >> > SLA / oVirt<br>
> > > >> ><br>
> > > >> _______________________________________________<br>
> > > >> Devel mailing list<br>
> > > >> <a href="mailto:Devel@ovirt.org">Devel@ovirt.org</a><br>
> > > >> <a href="http://lists.ovirt.org/mailman/listinfo/devel" rel="noreferrer" target="_blank">http://lists.ovirt.org/mailman/listinfo/devel</a><br>
> > > >><br>
> > ><br>
> ><br>
><br>
><br>
><br>
> --<br>
> Greg Sheremeta, MBA<br>
> Red Hat, Inc.<br>
> Sr. Software Engineer<br>
> <a href="mailto:gshereme@redhat.com">gshereme@redhat.com</a><br>
> <a href="tel:919-741-4016" value="+19197414016">919-741-4016</a><br>
><br>
</div></div></blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature">Greg Sheremeta, MBA<br>Red Hat, Inc.<br>Sr. Software Engineer<br><a href="mailto:gshereme@redhat.com" target="_blank">gshereme@redhat.com</a><br>919-741-4016<br></div>
</div></div>