Skip to main content Skip to footer

HTML5 Everywhere : Part 1 Wijmo from scratch

HTML5 is really everywhere, isn’t it? Welcome to my new multipart blog on HTML5 development. Did you ever wonder why every session at a code camp on HTML5/JavaScript/jQuery is packed ? I did, until I sat in on Josh Broton’s session at the Iowa Code Camp last year. He made it clear thru surveys and poll data, you will loose business if your site does not have a responsive web design. You could stand to loose a staggering 60% of your sales if your site is not responsive to mobile devices, tables, laptops, desktops and everything in between. Think about it…. I am sitting on my couch and need to look something up on the internet. My laptop in ten feet away, but instead of getting up and going to my laptop, I pull my Phone 8 out of my pocket and look it up on that device. The site better run good on my phone or I am off to another site, perhaps a competitor. Is your head nodding? Many nod in my seminars, I can tell you that much. So, the reason why these rooms are packed at conferences for HTML5 and JavaScript sessions, is that it solves a real business need. HTML5 is global and we need to look at this in more detail as a primary client side technology. In this blog series, “HTML5 everywhere”, we will look at development for HTML5 clients using ASP.NET, LightSwitch CTP, Knockout, Angular JS, Windows 8 HTML5/JavaScript store apps and more. You can not escape it, just about every type of development now offers an HTML5 solution. What tools shall we use? hmmmm…. Let’s start by looking at a natural extension to jQuery with building a simple app using Wijmo widgets from scratch. A friend of mine just started using Wijmo after seeing a Wijmo session I did at the Orlando code camp, and he was amazed how easy it was. In fact, he had a production app up in a matter of hours using the Wijmo editor, carousel and grid controls. He was truly amazed.With one tool set technology, you can develop for many HTML5 platforms. In this blog series, see Wijmo technologies in action. Also, see how these controls give you powerful and unique functionality to help you build better and more compelling websites and apps. Wijmo widgets make your applications suitable for today’s web and are built with HTML5, jQuery, CSS3, and SVG. Wijmo now has a Knockout Integration Library that provides seamless support for MVVM in each Wijmo widget. You can interactively select, edit, delete, sort, group data and show data across multiple pages making it easy for end-users to page through data. Check out the six professionally designed themes or one of the 24 jQuery UI themes. JQuery and jQuery UI are the defacto JavaScript libraries and have the strongest community of web developers in the world. See why in this blog series.Script 1: Using Wijmo From Scratch Getting started :1) Browse to the site www.Wijmo.com and try out all of the many controls offered. Everything from Charts, grids, splitters, event calendars, carousel for images, input, tooltips, video and more![image](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2013/03/image52.png "image") 2) Open Visual Studio and select File | New Project | Visual C# Web | ASP.NET Empty Web ApplicationSNAGHTML10d22b0d3) Add an Html page by right clicking on the project and selecting Add | HTML Page image 4) Add links to the dependencies to your project within the tags. To do this, you just link to the content delivery network (CDN) file for each project: Note: Please reference the latest dependencies from the CDN at http://wijmo.com/downloads/#wijmo-cdn.

<!-- Line 5 jQuery References-->

5) You’ll also want to add your CSS style sheets, which you can do by adding the following CDN links to your project within the tags:

<!-- Line 13 Theme-->

6) To create the wijcalendar HTML element, place the following markup within the of the .html document:

7) Now you need to initialize the wijcalendar widget, which you can do by adding the following script within the tags of the .html document:

8) View in Browser. The wijcalendar has a predefined configuration of option settings, so it’s ready to use as soon as you initialize it. If you opened your project in a Web browser right now, you’d find a completely functional calendar widget, which will look like this: image 9) But what if the project plans specify that the days of the previous and subsequent months shouldn’t be shown on the calendar? Removing them couldn’t be simpler: all you have to do is set the showOtherMonthDays option to false by passing it into the calendar widget as an argument:

$("#calendar1").wijcalendar({ showOtherMonthDays: false });

Open your project in a Web browser and observe that the other month days no longer appear on the calendar. It will looks like this: image 10) You can pass multiple options to a widget. If you need to pass another option to the calendar, just place a comma after the showOtherMonthDays: false argument and place the new argument after it. The example below shows how to pass the displayDate option in addition to the showOtherMonthDays option:

$("#calendar1").wijcalendar({ showOtherMonthDays: false, displayDate: new Date('2010/08/25') });

image Adding and customizing a Wijmo widget is that simple. However, this example just scrapes the surface of what you can do with Wijmo widgets. For more detailed information regarding the Wijmo widgets, visit the Wijmo documentation, where you will find an overview and API reference for the individual widgets. If you'd like help getting started with Wijmo Open, see the Wijmo Complete Quick Start. For more advanced examples of scripting, you can also explore our demos page. You can see this example on or site with more info about the jQuery Syntax. 11) Complete code should look like this:

<!DOCTYPE html>

<!-- Line 5 jQuery References--> <!-- Line 13 Theme-->

MESCIUS inc.

comments powered by Disqus