you can design you own “themes” and apply them to your Apps. The c:\lianja\themes directory contains some sample themes.
Q:
In a custom VFP Section.
I have some buttons which I style in my stylesheet usingCode:
lianja_ui_commandbutton{}
I have class named clsBtnBlue.
Whats the correct way to reference that in css file?
A:
In the case of custom controls in custom sections you should use “Property selectors“. See below.
btn = createObject("CommandButton")
// you can add custom properties to any object like this
btn.btnstyle = "1"
// now in your CSS you can apply CSS depending on the value of custom properties
btn.css = 'lianja_ui_commandbutton["btnstyle"="1"] { color: red; } lianja_ui_commandbutton["btnstyle"="2"] { color: blue; }'
Note that the property selectors should be lower case.
You can use global CSS styles by specifying the CSS file in the App, Page, Section attributes.
If you are changing the properties and you want the CSS to be reapplied issue a redraw() on the object.
For those who, like myself, need a visual designer to create html pages, and want those pages to responsive (as when they are used in webviews in Lianja), here’s a very useful review of visual designers that work with bootstrap (which as Barry has pointed out is used by Lianja itself): http://tutsme-webdesign.info/best-bo…visual-editor/
Short take on the article: Pinegrow Editor, which is available for Win/Mac/Linux, looks like a winner on several counts. It’s not free,but is cheap. http://pinegrow.com/
producing webviews that will play nice at different sizes. In my case, I need to present original documents that can be pair up with a .css template that incorporates bootstrap so the documents resize.
I’ve worked with Dreamweaver and while in theory it can do the same things, the control just isn’t there. (Besides: Pinegrow costs less than one month of Creative Cloud.) I was able to produce what I needed (a custom report), but it was way too much work.Having an easy-to-use IDE for css with everything in live design at multiple device views let’s me get it right in much less time than I spent with Dreamweaver having to click here and there, and then redo, etc. My conclusion from that experiment was that designing was better off done directly with the CSS — which I ended up doing in DW, although that also was a pain because of the lack of an overall view of CSS — something Pinegrow does very well.
Now, unless you have a need for fancy menus or documents in webviews or fancy dashboards, and they have to adjust to device size, there’s probably no need to bother with CSS at all. But if you want to make fancy things like Herb does, and you (like I) don’t have his visual imagination abilities, a visual design editor incorporating bootstrap or angular or whatever will get you (and me) at least part way there.
What’s really great is how we can, with little effort (in Pinegrow it’s a matter of specifying the data target for an element) integrate this with the Lianja data framework. And have the webview itself handled by the Lianja framework. It’s the best of both worlds.
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.
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:
Is it possible that I change a command button’s CSS under certain condition such as the following. Eg: Upon clicking “Btn1”, it called “proc proc1”. Can I change “Btn1” background color to blue in proc1?
page1_container_bottom2.addobject("page1_container _btn1", "commandbutton")
page1_container_btn1.fixedheight = 50
page1_container_btn1.text = "Btn1"
page1_container_btn1.fontsize = 18
page1_container_btn1.click = proc1
page1_container_btn1.css = "background:red;"
proc proc1
//page1_container_btn1.css = "background:blue;"
endproc
A:
Create your own button class with a click event that changes the background.
Put this code after the enddefine in the custom section.
define class mybutton as commandbutton
proc click()
if this.css = "background:blue;"
this.css = "background:red;"
else
this.css = "background:blue;"
endif
endproc
enddefine
Then when you addobject, use your class and not the default one.
so it will look like this.
page1_section2.addobject("page1_container_btn1", "mybutton")
page1_container_btn1.css="background:red"
page1_container_btn1.fixedheight = 50
page1_container_btn1.text = "Btn1"
page1_container_btn1.fontsize = 18page1_container_btn1.css = "background:red;"
Here’s a quick way to create buttons and add the built-in Icons.
You can also customize the CSS style interactively.
http://www.tutorialrepublic.com/twit…-generator.php
The Free tutorials are here. http://www.tutorialrepublic.com/twit…trap-tutorial/
For those that are looking to save time, have a look at the https://wrapbootstrap.com/
There are a lot of fantastic pre-built themes that you can use to style your app. I personally am using it for Ideas
They are not free, but cost between 10 and 20 USD.
Of course, there are a zillion free plugins too of course.
Here’s one site that I really like for freebies.
http://www.jqueryscript.net/
Q:
How would I specify the different parts of the grid in a style sheet?
I can deduce that lianja_ui_grid is the main component
A:
Have a look at lianja_ui_grid::item
lianja_ui_grid::item {
border: 2px solid red;
}
lianja_ui_grid::item:selected {
border: 2px solid blue;
}
lianja_ui_grid::item:!hover {
background:ink;
}
lianja_ui_grid::item:hover {
background:yellow;
}
Lianja developer 