Solutions Delivered

So we have been playing about with the new jQuery library gridster.js , this library allows for some really cool drag and drop  of multi column data. We thought we would try and create a bit of a windows 8 desktop look and feel, just for fun and came up with this.

Oracle APEX windows 8

The page uses the gridster.js jquery library and also some cool icons from icons8

How did we do it.

Firstly download the gridster.js to your webserver

We then download the icons to our webserver as well.

We created a simple APEX application

On the page we want to use we added the source for the gridster jquery file and the css that comes with it. (jquery.gridster.min.js and jquery.gridster.min.css)

Using the following CSS on the page for the colours of the boxes

<style>
.Color-Purple {background: #8C0095 }
.Color-Purple:hover {background: #A700AE }

.Color-DarkPurple {background: #5133AB }
.Color-DarkPurple:hover {background: #643EBF }

.Color-Teal {background: #008299 }
.Color-Teal:hover {background: #00A0B1 }
.Color-Orange {background: #D24726 }
.Color-Orange:hover {background: #DC572E }

.Color-Blue {background: #2672EC }
.Color-Blue:hover {background: #2E8DEF }

.Color-SkyBlue {background: #094AB2 }
.Color-SkyBlue:hover {background: #0A5BC4 }

.Color-Red {background: #AC193D }
.Color-Red:hover {background: #BF1E4B }

.Color-Green {background: #008A00 }
.Color-Green:hover {background: #00A600 }

.Color-Yellow {background: #e8be1b }
.Color-Yellow:hover {background: #f7d240 }

.Color-White {background: #FFF }
.Color-White:hover {background: #FFF }
</style>

We are not trying anything fancy with this first one so we just created a simple html region.

Taking the first column of the page as an example the region source for the html region is ( See the gridster.net website for all the things you can do with the library)

<div class=”gridster” style=”background:#DA8B1B; ” ><ul style=”list-style-type: none;”><li data-row=”1″ data-col=”1″ data-sizex=”1″ data-sizey=”1″ class=”Color-White” > <div style=”margin:35px 35px” > <a href=”http://www.beezapps.com”><img src=”#WORKSPACE_IMAGES#Beezapps_beeicon_orange.jpg” height=”55px” ></a></div></li>

<li data-row=”2″ data-col=”1″ data-sizex=”1″ data-sizey=”1″ class=”Color-DarkPurple” ><div style=”margin:35px 35px”> <img src=”#IMAGE_PREFIX#custom/icons/Users/user/user-64.png” ></div></li>
<li data-row=”3″ data-col=”1″ data-sizex=”1″ data-sizey=”1″
class=”Color-Orange” ><div style=”margin:35px 35px”> <a href=”http://www.bbc.co.uk/weather”>
<img src=”#IMAGE_PREFIX#custom/icons/Weather/partly_cloudy_day/partly_cloudy_day-64.png”></a></div>
</li>

</ul>

</div>

Using div’s to position the images and the links. We are just using other websites at the moment but nothing would stop linking to APEX pages.

In the region footer put the following script call to load the gridster

<script>
$(function(){ //DOM Ready

$(“.gridster ul”).gridster({
widget_margins: [10, 10],
widget_base_dimensions: [130, 130],
min_cols: 6,
resize: {
enabled: true
}

});

});

</script>

That should get you started with some cool APEX UI’s.

If you would like further information or would like help with implementing this then get in contact with one the Beezapps boys.