Book Image

Instant Wijmo Widgets How-to

By : Tochi Eke-Okoro
Book Image

Instant Wijmo Widgets How-to

By: Tochi Eke-Okoro

Overview of this book

With Wijmo you will always be one step ahead of regular UI developers. Wijmo doesn't require a re-invention of the wheel; it is written with JQuery, so it supports regular JQuery and even native Javascript. You can initialize any widget you want to use for your project and customize its functionality and styling. With Wijmo, the possibilities are limitless!!"Instant Wijmo Widgets How-to" is perfect for aspiring and experienced UI developers. It describes basic techniques of initializing and deploying various UI widgets that serve a specific purpose. It is an ideal book for aspiring and experienced UI developers. It describes basic techniques for initializing and deploying various UI widgets that serve a specific purpose."Instant Wijmo Widgets How-to" is structured to take you from easy to seemingly difficult topics. This implies that some widgets are easier to initialize than others. However the overall deployment of a widget is basic and straightforward, without the complexities encountered in various JQuery plugins. Every topic discussed in this book is interesting, engaging, and exciting. There is no strict direction from one chapter to the next.. Most chapters are independent of each other. This creates the flexibility to delve into just what you need to resolve a particular task. "Instant Wijmo Widgets How-to" serves as an important inventory for a UI developer, equipping the reader with skills to solve most UI related issues.
Table of Contents (7 chapters)

Using Wijmo with KnockoutJS (Advanced)


KnockoutJS is defined on their website http://knockoutjs.com/documentation/introduction.html, as follows:

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.

Any time you have sections of UI that update dynamically. Knockout can help you implement it more simply and is maintainable.

Getting ready

Here is what Wijmo says about KnockoutJS:

Wijmo now supports Knockout (KO), a JavaScript library that uses the Model View View Model (MVVM) pattern, allowing you to easily create and maintain a dynamically changing UI. You can use KO in addition to jQuery to enhance your pages with an underlying data model. For a full KO introduction, tutorials, documentation, explanation of MVVM, and more, visit http://knockoutjs.com/.

Before we get started, note that this recipe is for anyone who has a prior familiarity with KnockoutJS, occasionally referred hereafter as KO. Please visit the KO website for an introduction if you are not familiar with it.

How to do it…

You can easily use Knockout with Wijmo by following a few simple steps:

  1. Add references to the latest jQuery dependencies, Wijmo widgets, Knockout.js file, and KO extension library for Wijmo.

  2. Create the ViewModel and View objects: add JavaScript to define the data and behavior of the UI, and add markup to create View—the visual, interactive UI.

  3. Bind the Wijmo widget(s) to ViewModel and activate KO.

Having known what both sides, Wijmo and Knockout, have to say about the awesome Knockout library, we can proceed by creating our first Knockout-integrated widget. First of all, to integrate the KnockoutJS library into our widgets, we would have to reference the Knockout files hosted in the Wijmo CDN as follows:

 <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script>
  <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>

Assume we want to create an app or widget that can accept a measure of temperature in Celsius and return its Fahrenheit equivalent. For creating the input, we will have an input field that has a preset Celsius value and a linear gauge widget, also known as wijlineargauge, that will animate to the Fahrenheit-equivalent value. Enter the following code in your editor and run:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Wijmo MVVM Support</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style type="text/css">
        body
        {
            font-size: 13px;
        }
    </style>
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <!-- Wijmo CSS and script -->
    <link type="text/css" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" />
    <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css" rel="stylesheet" />
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js"></script>
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js"></script>
    <!-- KnockoutJS for MVVM-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script>
    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
    <script type="text/javascript">
 
    <!-- when document loads, create ViewModel, and apply bindings-->
    <!-- Create ViewModel-->
    
        var viewModel = function () {
            var self = this;
            self.celsius = ko.observable(20);
             self.kelvin = ko.computed(function(){
                //console.log('self.celsius = ' + self.celsius);
                return self.celsius() * 273;
            }, this);
            self.fahrenheit = ko.computed(function(){
                //console.log('self.celsius = ' + self.celsius);
                return self.celsius() * 1.8 + 32;
            }, this);
            self.min = ko.observable(0);
            self.max = ko.observable(200);
        };
 
    <!-- Bind ViewModel-->
        $(document).ready(function () {
            var vm = new viewModel();
            ko.applyBindings(vm);
        });
    </script>
</head>
<body>
    <div class="container">
        <h2>
            Celsius Textbox - Edit Here!</h2>
        <input data-bind="value: celsius" style="width: 200px;" /> 
        <div>
            <h2>
                Fahrenheit Slider - Don't Edit!</h2>
            <div data-bind="wijlineargauge: {value: fahrenheit, min: min, max: max}" style="width: 800px;">
            </div>
        </div>
    </div>
</body>
</html>

How it works...

If the code runs successfully, you should see the following image in your browser:

The Wijmo and Knockout libraries are referenced and included in our app. The ViewModel object is created, which has all the properties necessary for our app to function properly. The self.celsius property is an observable property, which is used to calculate self.fahrenheit. Also, self.min and self.max are used to set the minimum and maximum values of the gauge respectively. Then, we apply bindings of the ViewModel object to the view elements as shown in the following code:

                   ko.applyBindings(vm);   

There's more...

To finalize this recipe, we will create one more widget that will exhibit the beauty and overall importance of KO real-time data binding. This time we want to be able to update a simple pie chart right after a value entry for male and/or female.

Enter the following code in an editor and open it in a browser:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Wijmo MVVM Support</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style type="text/css">
        body
        {
            font-size: 13px;
        }
    </style>
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <!-- Wijmo CSS and script -->
    <link type="text/css" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" />
    <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css" rel="stylesheet" />
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js"></script>
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js"></script>
    <!-- KnockoutJS for MVVM-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script>
    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
    <script type="text/javascript">
 
    <!-- when document loads, create ViewModel, and apply bindings-->
    <!-- Create ViewModel-->
    
       var viewModel = function () {
            var self = this;
            self.boys = ko.numericObservable(50);
            self.girls = ko.numericObservable(30);
        };
 
    <!-- Bind ViewModel-->
        $(document).ready(function () {
            var vm = new viewModel();
            ko.applyBindings(vm);
        });
    </script>
</head>
<body>
       <!--Create View-->
    <div>
        males: <input type="text" data-bind="value: boys" />
        females: <input type="text" data-bind="value: girls" />
    </div>    
<div class="piechart" data-bind="wijpiechart: { width: 600, height: 400, seriesList: 
                                                     [{ label: 'Boys', data: boys }, 
                                                      { label: 'Girls', data: girls }
                                                      ] }">
</div>
</body>
</html>

The preceding code sets up our ViewModel object with the boys and girls numeric observable properties. Our data is then bound to the views, and finally, we bind the piechart div to the wijpiechart object, passing the necessary values for the chart.

So far so good! This was easy, clean, and straightforward. One easily notices that the views and the view model are separate with only data bindings. In real-life software development, KO eliminates embedding server-side variables and dependencies within the views. The views should be purely HTML!

If successfully run, you will see a widget in your browser similar to the following screenshot: