Getting Started with Wijmo 3

Learn everything you need to know to install and start using Wijmo 3 and its 40+ visual widgets to design desktop and mobile-ready web apps that render progressively and adaptively on all modern browsers.
Course info
Level
Beginner
Updated
Feb 8, 2016
Duration
2h 45m
Table of contents
Description
Course info
Level
Beginner
Updated
Feb 8, 2016
Duration
2h 45m
Description

This course introduces web developers to Wijmo, a suite of JavaScript controls for web and mobile applications published by ComponentOne. This course focuses on Wijmo’s client-side only implementation and targets web browsers across all modern devices. It explores the editions of Wijmo (along with its licensing options), how to reference the Wijmo library; how to place, theme, and use Wijmo controls, and how to follow Wijmo best practices, including two-way binding a view model to view using KnockoutJS, and optimizing performance and managing dependencies asynchronously using RequireJS.

About the author
About the author

Jonathan Waldman is a Microsoft Certified Professional who specializes in Microsoft technologies. Jonathan has worked as a technical lead, team lead, developer, UX designer, instructor, and writer during the past few decades and has published articles covering a variety of technical subjects for Visual Basic Programmer's Journal, PC Magazine, and MSDN Magazine.

Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, I'm Jonathan Waldman with Pluralsight and this course is called Getting Started with Wijmo 3. I'm a Microsoft certified professional who's been developing User Interface Components and Complex User Interfaces for commercial and enterprise applications for decades. I designed this course to give you a comprehensive overview of Wijmo 3 so that you can begin writing Wijmo 3 powered apps on your own. Wijmo 3 is a member of the Wijmo product family offered by ComponentOne and it has the distinction of being one of the most comprehensive Web User Interface collections available with widgets that render properly on older and newer browsers and devices. In this course, I'll explain what Wijmo is and why you would want to use it. In the second module, I'll teach you how to obtain and setup Wijmo 3 and how to explore the included documentation and samples. In the third module, I'll discuss Wijmo 3's ties to jQuery UI and jQuery uMobile, and I'll survey each of the included widgets while showing brief demos of each in action. In modules four and five, I'll take you step by step through the process of building a custom modern MVVM web app from scratch that uses several Wijmo 3 widgets and that showcases a number of best practice programming concepts. I'll conclude the course with module six during which I'll show you how to make programming refinements to make Text Analyzer more responsive, to simplify its data binding code and to reduce its page footprint. If you have ever wanted to know what Wijmo 3 is all about, and you're eager to start coding, please join me as I teach you all you need to know in order to get started writing broadly compatible, cross browser adaptive touch aware web apps using Wijmo 3.

Introduction
Hello, I am Jonathan Waldman with Pluralsight, and this course is called Getting Started with Wijmo 3. I designed this course to provide you with a solid foundation for learning Wijmo 3, which is a broad product that leverages multiple technologies for building modern web applications. In this module, I'll provide an overview of what Wijmo is and why it's useful. I'll then introduce a web app called TextAnalyzer, which I designed specifically for this course. In fact, during this course I'll show you how to build TextAnalyzer from scratch, and I'll even discuss ways to refine and optimize the app in this course's final two modules. But before doing that, I'll demo the TextAnalyzer app, I'll discuss the Wijmo widgets that app uses, and I'll touch upon some of Wijmo's architectural features. While this is a beginner level course, I'll make some recommendations of technology prerequisites you should have in order to make it easier to start using Wijmo 3 productively. After that I'll compare Wijmo 3 to Wijmo 5, and I'll explain why both products exist, and why you would choose Wijmo 3 over Wijmo 5. Finally, I'll present some helpful resources you can explore on your own to supplement the material I discuss in this module. There's a lot to cover, so let's get started.

Setting up Wijmo
Hi. I'm Jonathan Waldman with Pluralsight and in this module, I'm going to cover all of the steps you need to follow in order to properly install Wijmo 3 onto your development environment. I'll also explore the various folders and files contained in the Wijmo 3 deliverable so that you're familiar with them. In addition, I'll show you how to set up WebMatrix 3 in case you need a great IDE that also offers a local web server so that you can not only browse the sample website included with Wijmo 3, but also test your Wijmo 3 powered pages without having to upload them to a hosted service. I'll also show you how to access the ComponentOne provided Wijmo Widget Explorer, as well as the Wijmo product documentation and licensing terms. Finally, I'll supplement this module by providing links to several helpful resources.

Getting to Know Wijmo
Hi, this is Jonathan Waldman with Pluralsight and in this module I'm going to go into a little more detail regarding Wijmo 3's ties to jQuery culminating in a look at the jQuery Widget Factory. Then I'll present an alphabetical overview of all of the Wijmo 3 widgets before briefly demoing each one of them. Afterwards I'll categorize the widgets to facilitate the decision of selecting the right ones for your particular UI needs. I'll finish this module with a list of helpful resources.

Using the Wijmo Widgets
Hello, I'm Jonathan Waldman with Pluralsight. This course is called Getting Started with Wijmo 3, and this module is about using Wijmo widgets. In this module, I'm going to begin building this course's TextAnalyzer web app from scratch. I'll show you how to reference Wijmo's external dependencies, how to place a widget on the page and how to properly initialize it, then I'll discuss how to set and get widget options, invoke widget methods, and wire up widget events. After that, I'll add all of the HTML elements and Wijmo widgets that comprise the TextAnalyzer app and review some details about how I've customized those widgets. I'll then lay out the controls using Bootstrap's layout grid and show how that grid helps TextAnalyzer be a responsive app that adapts to different viewport sizes. Along the way, I'll show you how to customize most aspects of Wijmo widgets to achieve the look and behavior you desire. Finally, I'll summarize this module, and we'll conclude with a list of helpful resources. There's a lot to cover, so let's get started.

Binding Data and Decreasing UI Lags
Hello, this is Jonathan Waldman with Pluralsight and this course is called Getting Started with Wijmo 3 and this module is called Binding Data and Decreasing UI Lags. In this module, I'm going to finish coding the TextAnalyzer app by activating all of its remaining features. I'll create a view model object and then I'll implement the MVVM architectural pattern to dynamically bind data to TextAnalyzer's Wijmo 3 widgets resulting in a fully operational web app. I'll activate the auto-generate feature which displays random quotes. I'll use a timer to manage UI lags, effectively increasing the quality of the user experience by optimizing TextAnalyzer's responsiveness to text that's entered into its text editor. And finally, I'll provide a module summary.

Simplifying the Code and Reducing the Footprint
Hi, I'm Jonathan Waldman with Pluralsight. And in this module I'll make three improvements to the TextAnalyzer web app. First I'll show you how widgets can respond to a browser resize event in order to enhance the responsiveness. Second, I'll smiplify the JavaScript code that powers TextAnalyzer by incorporating KnockoutJS which facilitates the binding of data between the view model and the view in an MVVM web app. I'll show you how to declaratively specify subscribers in your HTML markup and how to bind those subscribers to observables exposed by the view model. I'll also show you how to use Knockout to bind asynchronously. And third, I'll use RequireJS to reduce the page footprint and decrease its load time by asynchronously loading only those JavaScript modules TextanAlyzer needs. The TextAnalyzer version at the end of this module represents an app that runs efficiently and embraces Wijmo 3 best practices. Finally, I'll provide a module summary and some helpful resources. You definitely don't wanna miss this module if you're interested in getting the most out of Wijmo 3. So let's get started.