I am hoping for quite sometime now that Open Learning Exchange Nepal (OLE Nepal) can start developing its contents using JavaScript instead of using Adobe Flash and HTML5. It really comes to the point of easier and faster performance in sticking lessons together using modifiable building blocks. These basic flexible building blocks are in fact user interface widgets which can be designed only with the different combinations of CSS, JavaScript and HTML5.
There is variety of different frameworks already designed. The question is which one you should choose. You may be familiar with the existence of Dojox, Cappuccino, UI, Extjs and other already created frameworks. My recommendation is to choose flexible toolkit which doesn’t require greater knowledge in web development with low learning curve. Right at the start we can eliminate Sproutcore and Cappuccino because they differ from other frameworks and are working on different paradigms which requires extra knowledge.
I personally chose JQuery UI for many reasons. Among these reasons is the fact it works with togother with the html and CSS. It provides users with simple interface which suits beginners perfectly because it is really easy to create your own plugin. In graphic design many core developers use JQuery UI in the background.
When it comes to the creating scoreboard widget with JQuery UI we will work on changing border color and thickness, font size, shadow orientation and thickness and the appearance of buttons while being active and many other things. Before getting to work you should download a theme. This downloaded theme you will add to your application following these instructions.
| 1
2 |
<link rel=”stylesheet” type=”text/css” href=”../../css/ui.core.css” />
<link type=”text/css” rel=”stylesheet” href=”../../css/karma.css” /> |
As you can see I renamed the main file into karma.css. We are creating scoreboard widget which is going to display score in a game and game control buttons. We wanted to desing scoreboard with both horizontally and vertically position if needed and easy controls of resetting and decrementing of user’s game score.
You have to include number of files in order to add scoreboard. You will achieve that by following these steps.
| 1
2 3 4 |
<link type=”text/css” rel=”stylesheet” href=”../../css/ui.scoreboard.css” />
<script type=”text/javascript” src=”../../js/jquery-1.3.2.js”></script> <script type=”text/javascript” src=”../../js/ui.core.js”></script> <script type=”text/javascript” src=”../../js/ui.scoreboard.js”></script> |
Notice you need to have an <div> which is empty.
| 1 | <div id=’scoreArea’><div> |
This far you included library files in your application and it takes only one line of code scripted in JavaScript in order to make this scoreboard appear within your page.
| 1 | $(‘#scoreArea’).scoreboard(); |
Besides doing just this you can add new values to the scoreboard construction as well as changing default parametres. One of the greatest advatages of usingJQuery is using it for issuing custom events. After creating scoreboard widget you can see it can be placed both horizontally and vertically. It only requires one line of codes.
$('#scoreArea').scoreboard({layout:'vertical});
In order to override the defaults by adding new scoreboard values you have to follow
these line of codes
| 1
2 3 4 5 |
$(‘#scoreArea’).scoreboard({
layout: ‘vertical’, winningScore: 6, score: 0 }); |
After you generated your own plugin you can easily change any options and value within
scoreboard construction using this method.