you don’t need to specify -webkit or -moz anywhere in the CSS.
Add it as a page.cssstyle, e.g.
################################################## ##############
# Page attributes
page.id=
page.headerbottomborder=true
page.headerbottombordercolor=#33b5e5
page.backgroundimage=
page.backcolor=
page.forecolor=
page.css=
page.gradient=false
page.gradienttype=0
page.gradientfromcolor=
page.gradienttocolor=
page.margin=
page.cssstyle=lianja_ui_textbox[readOnly="true"]{background:lightgray;}
Q:
can we do the following settings all in one place in the app CSS?
a) Set the page and section headers colors in app CSS
b) Set the subtitle colors in app CSS
c) Set the page and section footer colors in app CSS
d) Set the grid headers colors in app CSS
e) Set the disabled fields colors in app CSS
A:
The whole of a Lianja App is arranged as a hierarchy of UI elements with CSS selectors that give you the ability to theme the App based on the App CSS file. In versions prior to v1.3 you need to create a .theme file which sets the app.css=lib:/myapp.css. In v1.3 the App CSS can be specified in the App Settings.
The UI hierarchy is arranged as follows along with the CSS selectors below.
App
— Page
—- Page header *[lianja_ui_page_header=”1″] { …css… }
—— Page panel *[lianja_ui_page_panel=”1″] { …css… }
——– Section
———- Section header *[lianja_ui_section_header=”1″] { …css… }
———- Section menu *[lianja_ui_section_menu=”1″] { …css… }
———- Section subtitle *[lianja_ui_section_subtitle=”1″] { …css… }
———- Section search panel *[lianja_ui_section_search=”1″] { …css… }
———- Section panel *[lianja_ui_section_panel=”1″] { …css… }
———— Form section Formitem *[lianja_ui_section_formitem=”1″] { …css… }
————– Label *[lianja_ui_section_formitem_label=”1″] { …css… }
————– Data *[lianja_ui_section_formitem_data=”1″] { …css… }
———- Section footer *[lianja_ui_section_footer=”1″] { …css… }
—- Page footer *[lianja_ui_page_footer=”1″] { …css… }
Each Lianja UI class has a unique selector which can be used in CSS. e.g.
lianja_ui_textbox
lianja_ui_checkbox
lianja_ui_grid
etc
e.g.
lianja_ui_textbox { …css… }
Disabled field colors can be set in the App Settings (there is an attribute for that).
As Lianja is built on top of Qt the Qt CSS is well documented at:
http://qt-project.org/doc/qt-4.8/stylesheet-syntax.html
http://qt-project.org/doc/qt-4.8/sty…reference.html
So in fact there is a lot that you can do to theme your App without having to hand code it.
Q:
In CSS, there is an ID function that allows certain objects to have different properties from the rest. How do you perform this in Lianja’s CSS?
A:
The CSS selector for a named object is #name
Each UI element is given a unique object name.
Page is the pageid.
Section is pageid + “_” + sectionid
Formitem is pageid + “_” + sectionid + “_” + formitemid;
e.g.
#page1_section1_field1
Custom elements use the “name” property that you assign to them.
A page is a hierarchy of UI elements each of which have the same object names so that a complete App can be themed.
#lianja_ui_page_header { … }
#lianja_ui_page_panel { … }
#lianja_ui_page_footer { … }
#lianja_ui_section { … }
#lianja_ui_section_panel { … }
Each UI control has a unique selector corresponding to the type of control e.g.
lianja_ui_commandbutton { … }
Here is an example that themes command buttons handling hover and click/touch visual appearance.
lianja_ui_commandbutton {text-decoration:none;border:2px solid #e2e2e2;color:#fff;background:#1d1d1d;cursor:pointer;text-align:center;}
lianja_ui_commandbutton:hover {background:#3a3a3a;}
lianja_ui_commandbutton:pressed {background:#219297;}
Q:
What I mean by ID is like you have several buttons, and while they all have the same format, I would like to single out a button, such as like the “OK” or “Cancel” button to have smaller font compared to the rest.
A.
If the command button is a custom button created in a custom section/gadget then assign a name to it as i already explained.
okButton.name = “okbutton”
then theme it using:
#okbutton { … }
Also remember that a custom UI control can have custom properties.
myButton.addProperty(“smallfont”, “1”)
Then you can theme using property selectors.
lianja_ui_commandbutton [smallfont=”1″] { … }
Q:
give these buttons a 3D effect
A:
I believe your code is skinning these with CSS already which overrides the native operating system look and feel.
Commenting out the CSS in your code will return to native windows command buttons.
You can also set the gradients in the CSS. I have already posted a link to the Qt stylesheet CSS reference in another post. You need to look for qlineargradient.
Here is an example setting the background color as a gradiented color. You can experiment to achieve the effect that you desire.
ui_commandbutton.css = “background: qlineargradient(spread: pad, x1:0 y1:0, x2:1 y2:1, stop:0 rgba(0, 0, 0, 255), stop:1 rgba(255, 255, 255, 255));”
Q:
I want my .jssp page to have the same look and feel as the JavaScript canvas in the browser.
I was thinking that it might be a good idea to have the default CSS page included when you create an jssp or rsp page.
Either way, I would like to include it in my pages.
Whats the recommended way.
A:
Just include the bootstrap css file from ../library/bootstrap/ in the html that you output in the .jssp page.
The LianjaWebFramework does quite a lot more than bootstrap itself as it merges jquery mobile and bootstrap and conditionally overrides some CSS and applies it to the HTML5 to produce a consistent and modern UX
Q:
I am looking to apply CSS into a page, so I would like a list of objects in which I am able to apply CSS to. Is there a way to bring up a list of available objects in a page to apply CSS to, in terms of legal variables? For example, I want to see what is the equivalent of first-child/nth child.
Also, is there a list of attributes that are legal for each type of object? Recently I noticed that font-(attribute) attributes don’t work.
A:
CSS cascades down through the UI hierachy.
You can apply CSS at the App, Page, Section or Formitem level. Only the UI items that match the CSS selectors will be affected.
You can also create themes and apply a theme to the complete UI hierachy by selecting the theme from the Form Tools Bar or assigning it to Lianja.theme.
So, the basis behind CSS is to match UI elements based in CSS selectors.
Lianja desktop apps are built on top of Qt widgets. You can study the various ways CSS can be described at:
http://qt-project.org/doc/qt-4.8/sty…-examples.html
All of the core Lianja UI elements subclass Qt widgets.
The Lianja UI framework uses CSS selectors to be able to theme your Apps.
So, you can apply CSS rules based on UI selectors.
e.g.
lianja_ui_page
lianja_ui_section
lianja_ui_formitem
lianja_ui_formitem_label
lianja_ui_formitem_data
lianja_ui_textbox
etc
if if you define a theme and select it from the Form Tools Bar then these are permanent changes. They are also effective when Web/Mobile Apps are generated.
The theme is a property on the Lianja system object,
Lianja.theme = “nameoftheme”
That’s what themes are for.
They are only relevant in desktop apps. Any Web/Mobile is statically generated HTML5/Javascript. In that case the UI presentation rules affect the UI layout.
There is an obvious architectural difference between a desktop app and a three tier Web/Mobile App that has a clear separation between the presention level UI, the business procedures and the database access.
Select a theme from the Form Tools bar and you will see the UI change dynamically.
Themes reside in \lianja\themes and unsurprisingly have a .theme file extension.
You can read the sample themes that are provided and see the format of these files which is quite straightforward laud out as key/value pairs.
Themes can be used to globally assign attributes throughout a complete application.
You can create a new theme and put it in the themes directory then open an app and assign the theme.
Also bear in mind that “themes” can be chosen from the “Form Tools Bar” at the bottom of the page builder. When you select a theme it is applied to all the UI elements based on the theme keys as described above.
This provides the ability to create App templates and apply all the attributes to a complete App at any time.
Q:
We are using a theme in our app – Theme2.
We want to change the colour of read-only fields [probably change the forecolor to grey RGB(192,192,192)] so the users know where data entry is required.
We can change the data colour attributes but they make no difference to the display either in dev or runtime, even when app is refreshed. The page is being put in to edit mode.
We can change the textbox label successfully.
A:
try setting this as the cssstyle on the section.
lianja_ui_textbox[readOnly="true"] { background-color: beige; }
This works. Just set it on your pages or in your theme:
app.css = lianja_ui_textbox[readOnly="true"]{background:lightgray;}
That will change all readonly text boxes to lightgray.
Q:
We applied “app.css = lianja_ui_textbox[readOnly=”true”]{background:lightgray;}” to the css style property of a page and it changed all the captions but made no difference to the text box itself, either in Dev or Runtime.
We then tried to change the theme (though we don’t know where to put it) by adding as follows :
################################################## ##############
# App attributes
#
app.pagesectionheadertype=flat
app.pagesectionheadericonset=white
app.pagesectionheaderbackcolor=#6B6B6B
app.pagesectionheaderforecolor=white
app.pagesectionheaderheight=34
app.pagesectionheaderfontsize=12
app.pagesectionheadercss=
app.css=theme:/Modern.css
app.css = lianja_ui_textbox[readOnly="true"]{background:lightgray;}
That made no difference at all. This certainly needs to be at the theme level so that Edit() doesn’t change everything.
A:
Try this in the theme file:
formitem.cssstyle=lianja_ui_textbox[readOnly="true"]{background:lightgray;}
The theme files can reference:
app.attribute=
page.attribute=
section.attribute=
formitem.attribute=
Also bear in mind that “themes” can be chosen from the “Form Tools Bar” at the bottom of the page builder. When you select a theme it is applied to all the UI elements based on the theme keys as described above.
This provides the ability to create App templates and apply all the attributes to a complete App at any time.
What is a QR code?
http://www.whatisaqrcode.co.uk/
How can I generate a QR code in Lianja?
http://larsjung.de/jquery-qrcode/
Then write a small .rsp page and generate it into a WebView section.
Where can I get the code from?
https://github.com/lrsjng/jquery-qrcode
Lianja developer 