New UI theming in RC7

[barrymavin]

The windows/beta of RC7 now has support for App theming by clicking on the "Themes" button in the FormBar.

Currently I have put together some basic themes for Default, Android, iOS and Modern.

You can find these in the \lianja\themes directory. Each theme has a .lianjatheme extension. You can customize your own themes by copying one of these files and giving it a meaningful name. When the App Builder starts it will add your own custom themes to the "Themes" menu. This is where you specify the css file also.

This is still a work in progress but most near all of the UI can be themed across a complete App now.

I will be adding some additional functionality into this over the next few days. My objective is to allow you to have a different theme based on the client type, so for example, when your App runs on an android tablet or an iPad the theme will be chosen based on the client.

[hmischel@diligentsystems.com]

Hi Barry,

Are the themes available in the current download?

Also - How do I specify the outer part of a textbox in CSS?

[lianja_ui_class="textbox"] {
color: orange;
border-radius: 5px;
background-color: black;
};

Color and background-color look to be for just the inner part when you click on a textbox. I would like to change the color of the entire textbox.



Thanks.

Herb

[barrymavin]

Hi Herb,

They are in the download available in the windows/beta directory now.

Try specifying the border: 1px solid green; or whatever color you want.

[hmischel@diligentsystems.com]

That too worked on the inner part of the textbox.

[barrymavin]

Ok. Can you explain what it is you want to see.

[hmischel@diligentsystems.com]

Here's what I am trying to achieve.
This is a screen shot of my current app. I want to keep the color scheme the same for the users, even though the layout will be changed to fit the new Lianja method of layout.

So essentially, I am looking for the UI controls to be darker than the current lightgrey.

Herb

[barrymavin]

That just requires you theme the captions and data.



A "Field" is comprised of a "Label" and "Data". It is known as a "Formitem". There are CSS selectors for the formitem container and its children which are the label and data:

lianja_ui_section_formitem="1"
lianja_ui_section_formitem_label="1"
lianja_ui_section_formitem_data="1"

The section that they are inside can be skinned using these selectors:

lianja_ui_section_menu="1"
lianja_ui_section_panel="1"
lianja_ui_section_footer="1"

The page containing sections has these selectors:

lianja_ui_page="1"
lianja_ui_page_header="1"
lianja_ui_page_panel="1"
lianja_ui_page_footer="1"

There are others but that should get you started.

[hmischel@diligentsystems.com]

Hi Barry - I am not following.

If I want the background of all my textboxes in a page to be a pretty shade of pink


[<what goes here>] {
color: white;
border-radius: 5px;
background-color: pink;
};

Herb

[barrymavin]

Hi Herb,

Using [lianja_ui_class="textbox"] as a selector is the original older style way of doing it. It is still supported but I have simplified it all so that it is more consistent in the next build.

in place of [lianja_ui_class="textbox"] you can just specify:

lianja_ui_textbox {
color: white;
border-radius: 5px;
border: 1px solid light green;
background-color: darkgray;
}

So for each class in the UI framework you just prefix it with lianja_ui_ e.g. lianja_ui_spinner, lianja_ui_combobox etc. A page is lianja_ui_page and a section is lianja_ui_section. There is a well defined hierarchy of UI elements and they can all be skinned.

lianja_ui_page
lianja_ui_page_header
lianja_ui_page_panel
lianja_ui_page_footer

Now remember that these are cascading stylesheets. So if you have a css stylesheet for a page everything in it will affect all children of the page too. You then can specify a different styleheet for a section. Everything declared in that file takes precedence over the page, and if need be a separate definition for individual formitems.

I have now simplified the skinning of formitems which as i explained in an earlier post consist of a base container (lianja_ui_section_formitem), a label (lianja_ui_section_formitem_label), and a the data container (lianja_ui_section_formitem_data). So in the next build you just do this as it is more consistent. The hierarchy is:

lianja_ui_section_formitem
lianja_ui_section_label
lianja_ui_section_data

e.g.

lianja_ui_section_formitem {
color: white;
background-color: pink;
}

lianja_ui_section_formitem_label {
color: white;
background-color: pink;
}

lianja_ui_section_formitem_data {
color: white;
background-color: black;
}

To achieve the gradient effect in your existing App you would use the following syntax. (CSS attributes not handled by a particular browser are ignored so you will have to put fallback attributes in that each browser recognizes when running using the Lianja Web Client from the Lianja Cloud).

lianja_ui_section_formitem_label {
color: white;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565);
}

You can experiment with the gradients until they look right.

As a side note, a form item can also be a divider or a separator. These have selectors on them. lianja_ui_section_formitem_divider, lianja_ui_section_formitem_separator, lianja_ui_section_formitem_subtitle, lianja_ui_section_formitem_spacer, lianja_ui_section_formitem_gadget. e.g. to set all subtitles to a specific color you would do this.

*[lianja_ui_section_formitem_subtitle="1"] {
color: white;
background-color: #cacaca;
}

[HankFay]

Hi Barry - I am not following.

If I want the background of all my textboxes in a page to be a pretty shade of pink

[<what goes here>] { 
color: white;
 border-radius: 5px;
background-color: pink;
 };

Herb

Cribbing from Barry's past posts:

*[lianja_ui_section_formitem="1"] { 
color: white;
border-radius: 5px;
background-color: pink;
};

You can define different values than "1" in the selector (I think), and indicate some to be pink, some to be baby blue, by ... well, not sure about that part. I know it would, or at least could, involve an inline delegate the responds to, e.g., the value displayed in the control (again, cribbing from Barry's posts, roadmaps, etc.), set up, e.g., in the uistates table.

Hank

PS: usually when I step in, Barry rushes to the rescue of the person to whom I gave partial or mis-information <s>, so we should hear more very soon.