About custom style (CSS3)

[wahono sri]

I don't found any property to set background in UI designer. I want to set background with gradient for some widget (not by theme), my code is :

....

....

            append(
                (new linb.UI.Pane)
                .setHost(host,"ctl_pane53")
                .setDock("width")
                .setHeight(100)
                .setPosition("relative")
                .setCustomClass({".linb-panel-panel":".css-gradient-a"})
            );
            
....

....

        events : {"onReady":"_com_onready"},
        _com_onready : function (com,threadid){
            linb.CSS.addStyleSheet(".css-gradient-a{background: -webkit-gradient(radial, 430 50, 0, 430 50, 506, from(red), to(#000));background-image: -moz-radial-gradient(430px 50px 45deg, circle cover, red 0%, black 100%);}", '__class_added');
        }

....

But I don't get gradient in panel, what's wrong in my code?

Thanks

[wahono sri]

Did you plan to add CSS3 visual editor in UI Builder?

[Jack Lee]

Look at the attached picture please. And the code will like:

           
            append(
                (new linb.UI.Pane)
                .setHost(host,"ctl_pane6")
                .setLeft(260)
                .setTop(100)
                .setWidth(100)
                .setHeight(100)
                .setCustomClass({"KEY":"css-gradient-a"})
            );

[Jack Lee]

And you should go to http://www.linb.net/Examples/, try those examples in "Appearances" block, and look at their source code.

On Wednesday, March 27, 2013 5:16:24 AM UTC+8, wahono sri wrote:

[wahono sri]

I have try some examples, but I don't get sample how to create gradient. Please you show me!

I try create gradient from this site http://www.colorzilla.com/gradient-editor/

Thanks

[Jack Lee]

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};

            
            append(
                (new linb.UI.Pane)
                .setHost(host,"ctl_pane6")

                .setLeft(250)
                .setTop(100)
                .setWidth(100)
                .setHeight(120)
                .setHtml("Pane2</br>b</br>c</br>d</br>e</br>f</br>g</br>h")

                .setCustomClass({"KEY":"css-gradient-a"})
            );
            

            append(
                (new linb.UI.Pane)
                .setHost(host,"ctl_pane10")
                .setLeft(230)
                .setTop(70)
                .setWidth(100)
                .setHeight(120)
                .setHtml("Pane1</br>b</br>c</br>d</br>e</br>f</br>g</br>h")

                .setCustomClass({"KEY":"css-gradient-a"})
            );
            

            return children;
            // ]]code created by jsLinb UI Builder
        },

        events : {"onReady":"_com_onready"},
        _com_onready : function (com,threadid){

// CSS code from http://www.colorzilla.com/gradient-editor/
            linb.CSS.addStyleSheet(
                ".css-gradient-a{" +
"background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ " +
"background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */" +
"background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */" +
"background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */" +
"background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */" +
"background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */" +
"filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */" +
                "}","customcss1");
        }
    }
});

[wahono sri]

Wow, it's work as I hope. I don't doubt about jsLINB again, because apparently it support CSS3 and HTML5 technology.

BTW, in the future release, if you add new widget or just new property for all widget to set backgroung visually, it's very powerfull to develope GUI app beatifully.

Background can be selected color, gradient, etc. :)

Thanks