Hi Guys,
Guys, who work on Pentaho C-Tools should be up to date yourself on it's new releases. The latest stable version of C-Tools in this week is : 14.07.29. (blog written date : 4th Aug 2014)
I don't remember exactly, but Pedro somewhere on social networking has informed the community that the C-Tools are up-datable over the time for every 6 weeks.
This post will cover my sample work out on 14.06 & 14.07 releases especially about the column properties & built in bootstrap panel.
These new features will reduce writing Bootstrap html code in HTML section either for rows or columns & increase the development speed of project.
We get information like below for columns with bootstrap latest releases..
Bootstrap is of 12 columns based grid system ..and the above table implementation in CDE is similar to below
i.e.,
Large Devices =3
Medium Devices=6
Small Devices=9 or 12
Extra Small Devices=12
14.07 added bootstrap panel concept in it's Layout section & it can be implemented as shown in below image.
Notes:
# Find Bootstrap Panel icon on the Layout Structure tool bar.
# Click on it (for a column) and it'll be having 3 sections. They are Header, Body & Footer.
# Give all the properties(for instance, name, height, corners and etc).
# Similarly for the Body & Footer.
# You can remove any of the 3 sections for Bootstrap Panel.. highlight the section & click on X mark on the tool bar of Layout structure.
Sample Layout Design Download : Click Me
Deployment :
1) Your environment should be of 14.07.29 version of C-Tools or later before deploying this example.
2) Pentaho Server version : 5.x version.
3) Upload example using Uploader utility of server.
Sample output:
Extra Large Devices :
References :
1) http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
2) http://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system
Guys, who work on Pentaho C-Tools should be up to date yourself on it's new releases. The latest stable version of C-Tools in this week is : 14.07.29. (blog written date : 4th Aug 2014)
I don't remember exactly, but Pedro somewhere on social networking has informed the community that the C-Tools are up-datable over the time for every 6 weeks.
This post will cover my sample work out on 14.06 & 14.07 releases especially about the column properties & built in bootstrap panel.
These new features will reduce writing Bootstrap html code in HTML section either for rows or columns & increase the development speed of project.
We get information like below for columns with bootstrap latest releases..
| Features Bootstrap 3 Grid System |
Extra small devices Phones (<768px) |
Small devices Tablets (≥768px) |
Medium devices Desktops (≥992px) |
Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| Max container width | None (auto) | 750px |
970px |
1170px |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Max column width | Auto |
~62px |
~81px |
~97px |
| Gutter width | 15px on each side of a column (i.e. 30px) | |||
Bootstrap is of 12 columns based grid system ..and the above table implementation in CDE is similar to below
i.e.,
Large Devices =3
Medium Devices=6
Small Devices=9 or 12
Extra Small Devices=12
14.07 added bootstrap panel concept in it's Layout section & it can be implemented as shown in below image.
Notes:
# Find Bootstrap Panel icon on the Layout Structure tool bar.
# Click on it (for a column) and it'll be having 3 sections. They are Header, Body & Footer.
# Give all the properties(for instance, name, height, corners and etc).
# Similarly for the Body & Footer.
# You can remove any of the 3 sections for Bootstrap Panel.. highlight the section & click on X mark on the tool bar of Layout structure.
Sample Layout Design Download : Click Me
Deployment :
1) Your environment should be of 14.07.29 version of C-Tools or later before deploying this example.
2) Pentaho Server version : 5.x version.
3) Upload example using Uploader utility of server.
Sample output:
Extra Large Devices :
Large Devices :
Medium & Small Devices:References :
1) http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
2) http://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system
No comments:
Post a Comment