← Back to team overview

ubuntu-phone team mailing list archive

Re: [SDK][Theming] Styling a compound widget

 

Hi Robert,

With the previous theme engine it would have been possible to do such a


On Sun, Sep 8, 2013 at 7:39 PM, Robert Schroll <rschroll@xxxxxxxxx> wrote:

> Hi all,
>
> This email is going to run on a bit, so let me put my questions here at
> the top and motivate them afterwards:
>
> 1) Is it possible to adjust the style of a single compound widget?  (That
> is, a QML element with several sub-elements.  I don't know the terminology
> here.)
>

With the previous theme engine it would have been possible do alter
sub-widgets styles, i.e. alter the label's font family or other font
settings. The theming was context sensitive, so you were able to declare
different styles of a widget depending on who was its parent. We dropped
that engine due to performance and stability issues, and so far we haven't
planned to introduce such a feature in the current theming. However that
does not mean that we will never do so.


> 2) If not (and I haven't found one), should there be?
>

Perhaps. It all depends on the use cases and UX. But for sure there would
be use cases where having such a feature in theme engine would be
beneficial. Even now it is possible to select the style of a widget
depending on who is its parent. It is just the widgets must be made so to
be parent sensitive.


>
> I'm working on an epub reader for the app showdown [1].  One of the
> options I provide is the font in which the epub will be displayed.  I want
> to do this with an OptionSelector, and I'd like to display the name of each
> font in that font.  It looks like this is impossible with the SDK as it
> currently stands.  (Please correct me if I'm wrong.)
>
> With simple QML widgets, like a Rectangle, you can adjust the properties
> of the widget to change its styling.  But the widget I need to adjust, an
> OptionSelectorDelegate, is a compound widget -- the text is in a Label
> inside of the OptionSelectorDelegate, and there's no way for me to access
> this.  These Labels don't have ids, and even if they did those ids wouldn't
> be accessible outside of that .qml file, for some reason.
>
> I came up with a simple fix to this: Give the Labels ids, and then give
> the OptionSelectorDelegate properties referencing the label.  Then when I
> make an OptionSelectorDelegate, I can adjust the font of the label through
> the textLabel.fontFamily property.  I've written up a patch and submitted
> it to Launchpad [2].
>
> I asked about this on IRC, and mzanetti opined that this was not the right
> approach.  Internals shouldn't be exposed like this.  And while I disagree,
> this is not an unreasonable position.  Instead, mzanetti suggested that the
> OptionSelectorDelegate should become themable, and then I could provide my
> own theme to do the styling.
>

I must agree with Michael, that is not the way things should be done.
Instead OptionSelectorDelegate should be themed (which is indeed not the
case yet). If it would be themable, the component style would be able to
set different settings for the labels inside the component. So I would
approach the problem from this side, creating a style element for the
OptionSelectorDelegate, instead of publishing the label IDs.


>
> It may be that it should be themable, but this wouldn't solve my problem.
>  I don't want to redo the theming of the widget; I just want to tweak the
> font.  I could do this, theoretically, by creating a new widget based on
> the OptionSelectorDelegateStyle widget and tweaking the font there.  But
> this runs into three problems:
>
> 1) Not all the *Style widgets are exposed in the Theme directories.  (I
> recently ran into this problem when trying to theme a Slider; see [3].)
>

Yes, and that can be misleading. The components should all be exported, so
feel free to remove the internal keyword from the component you need.


> 2) I would have to inherit from a specific theme.  If that changes in the
> future, due to system changes or user choice, my styling would be
> completely wrong.
>

Themes provided by the SDK will always be in sync with the components. So
if you need to override some properties from the style, you will be most
likely on the safe side. But only after we declare the style API stable. So
far that hasn't been done yet, as our design changes pretty frequently.
Another approach would be to provide hinting possibilities for our
components. So in that case you could simply hint which style property you
want to change, give the desired value, and that's it. The hint will be
applied only if the property exist in the style, you won't see warnings but
you won't either know why the hint hasn't been applied.


>
> 3) I would still need access to the internal Label of the style widget,
> which is the very thing that got us going down this path!
>

As said, if the component is made to be styled (which is unfortunately not
the case for the OptionSelectorDelegate), then you would be able to
customize the labels through the style.


> Hence my questions: Is there a way to set the font in an
> OptionSelectorDelegate?  There doesn't seem to be.  Should there be?  I
> think so.  How should this work?  This I don't know enough about to comment.
>

A styled item (component derived from StyledItem) can access the style
instance properties through the __styleInstance private property. In this
way you can style internal elements of a component through style
properties. Example:

CustomStyle.qml

Item {
    property string firstLlabelFamily: "Ubuntu"

}


>
> Thanks,
> Robert
>
> [1] https://github.com/rschroll/**beru <https://github.com/rschroll/beru>
> [2] https://bugs.launchpad.net/**ubuntu-ui-toolkit/+bug/1220533<https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1220533>
> [3] https://github.com/rschroll/**beru/commit/**
> 927b2fd377d7cc86b0633a2707b03c**3a79a330db<https://github.com/rschroll/beru/commit/927b2fd377d7cc86b0633a2707b03c3a79a330db>
>
>
> --
> Mailing list: https://launchpad.net/~ubuntu-**phone<https://launchpad.net/~ubuntu-phone>
> Post to     : ubuntu-phone@lists.launchpad.**net<ubuntu-phone@xxxxxxxxxxxxxxxxxxx>
> Unsubscribe : https://launchpad.net/~ubuntu-**phone<https://launchpad.net/~ubuntu-phone>
> More help   : https://help.launchpad.net/**ListHelp<https://help.launchpad.net/ListHelp>
>

Follow ups

References