Script 5 - Using Wijmo with Windows Phone 8 Apps

 

It’s funny, when GrapeCity acquired ComponentOne last year, my very first demo of the ComponentOne Controls was Studio for Windows Phone. Now, this is the final technical blog of this fiscal year ending March 31 for me, meeting all of my metrics for the year, and it is about the Windows Phone! I have over 70 apps on the Marketplace, so this topic is a true passion of mine. I guess we came full circle, huh?

I sat down one day with PM for Wijmo, Chris Bannon, and we took a look at one of the new templates for Windows Phone 8 development in VS 2012. Yes, you guessed it, yet another HTML Client!

Guess what? Wijmo works there too! Also, as a side note, C1 provides a Studio for Windows Phone 8 as mentioned above with native XAML controls as well, but we thought we would test this out with Wijmo. Again, HTML Clients are popping up everywhere, aren’t they?

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

2) Open Visual Studio and select  File | New Project | Visual C# | Windows Phone | Windows Phone HTML5 App

image

3) Open MainPage.XAML and one of the first things you will notice is that a WebBrowser Control is on the Page. Select it in the designer and Press F4 to bring up the properties. Set the IsScriptEnabled property to true by checking it off.

image

4) Navigate to the HTML folder and open up index.html

image

Add links to the dependencies for jQuery References, Theme, and Wijmo Widgets, to your index.html page within the <head> 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.
         <!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<
script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.9.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.9.min.js" type="text/javascript"></script>
<
script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.9.min.js" type="text/javascript"></script>

5) To create the wijcalendar HTML element, place the following markup within the <body> of the .html document:
    <div id="calendar1" style="position: relative; left: 5px; top: 5px;"></div>

6) Now you need to initialize the wijcalendar widget, which you can do by adding the following script within the <head> tags of the .html document:
        <script type="text/javascript">
$(function () {
$(
"#calendar1").wijcalendar();
});
</script>

7) Run the app in the emulator. 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

Yes! It is that Simple!

8) You can pass multiple options to a widget. If you need to pass another option to the calendar, just enter it as follows for showOtherMonthDays and displayDate options:
                $("#calendar1").wijcalendar({
showOtherMonthDays:
false,
displayDate:
new Date('2010/08/25')
});

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.

What’s really amazing here, is the code above is exactly what I did in the HTML5 Everywhere Part 1 Wijmo from scratch, in an empty APS.NET Project on an HTML page. Yes, now, the same code can be used for a web site and a Windows Phone 8 app. It’s an incredible story to tell!

9) Complete code in index.html should look like this:
<!DOCTYPE html>
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<
link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
<
title>Windows Phone</title>
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<
script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.9.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.9.min.js" type="text/javascript"></script>
<
script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.9.min.js" type="text/javascript"></script>
<
script type="text/javascript">
$(function () {
$(
"#calendar1").wijcalendar({
showOtherMonthDays:
false,
displayDate:
new Date('2010/08/25')
});
});
</script>
</
head>
<
body>
<
div>
<
p>MY APPLICATION</p>
</
div>
<
div id="page-title">
<
p>page title</p>
</
div>
<
div id="calendar1" style="position: relative; left: 5px; top: 5px;"></div>
</
body>
</
html>