Using Bootstrap Carousel Slider in Servoy 7.4

Dhanabati

5.00/5 (2 votes)

Aug 27, 2014

CPOL

11242

Using Bootstrap Carousel Slider in Servoy 7.4

Introduction

Servoy does not yet have plugins for using the bootstrap classes and plugins.But we can use Boostrap plugins and classes in Servoy 7.4 for designing impressive UI . Here is the tips.

Using the code

Use a HTMLArea in a form and assigned a global variable as a DataProvider

( var loadHTML="").

For now am using the CDN links for Bootstrap classes and plugins . You can also download the Bootstrap classes ,plugins and import in your solution.

Javascrip code :

 /**
 * 
 * @properties={typeid:24,uuid:"CB9A3BA5-1808-473A-B70A-5AD793307F8D"}
 */
function loadHTML(){
    globals.imageSlider = (
        <html>
        <head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap        .min.css"></link>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap        -theme.min.css"></link>
        <link rel="stylesheet" href="media:///imageSlider.css"></link>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></scrip>
        <script type="text/javascript">
        <![CDATA[
        $(function(){
            $("#myCarousel").carousel({
                interval:2000,
                pause :true,
            });
        });
        
         ]]>
        </script>
        </head>
        <body>
        <div class="bs-example">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>   
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="active item">
                
                    <h5>Slide 1</h5>
                     <div class="carousel-caption">
                     <a href = "">
                        <img src = "media:///New_York_City_-_Central_Park_-_Conservatory_Garden_-                        _Summer-2.jpg" height="150" width="800"/>
                     </a>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </div>
                <div class="item">
                    <h5>Slide 2</h5>
                    <div class="carousel-caption">
                    <img src = "media:///sinery.jpg" height="150" width="800"/>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </div>
                <div class="item">
                    <h5>Slide 3</h5>
                    <div class="carousel-caption">
                    <img src = "media:///waterfall.jpg" height="150" width="800"/>
                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </div>
                </div>
            </div>50
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
        </body>
        </html>
        ).toXMLString().replace(']]>', '').replace('<![CDATA[','');
    
}

Now run the solution in WebClient.

Points of interest

We can use Bootstrap style classes and plugins in Servoy.

History

Fisrt Tips :August 27 , 2014