Ben Tedder | ben tedder

Screencast: Create a Basic jQuery Mobile application

23 Feb
2012

This is an update to my post on creating a jQuery Mobile App, as I’ve now recorded a screencast! So check it out here, watch it on youtube, or see the code below the video:

Update: check out my latest screencast on list views in jQuery mobile…click here

<!DOCTYPE html>
<html>
<head>
	<title>my first jQuery Mobile App</title>
	<link href="jquerymobile.css" rel="stylesheet" />
	<script src="jquery.js"></script>
	<script src="jquerymobile.js"></script>
</head>
<body>
	<section data-role="page" id="page1">
		<header data-role="header">
			<h1>page 1</h1>
		</header>
		<div data-role="content">
			this is my content<br/>
			link to page 2, <a href="#page2">click here</a>
		</div>
		<footer data-role="footer">
			<h1>this is a footer</h1>
		</footer>
	</section>
	<section data-role="page" id="page2">
		<header data-role="header">
			<h1>page 2</h1>
		</header>
		<div data-role="content">
			and this is more content
		</div>
	</section>
</body>
</html>

1 Comment

Sharepoint 2010 + SPServices + jQuery Mobile

21 Feb
2012

Here we will setup a SharePoint 2010 page that utilizes both jQuery Mobile as well as the jQuery SPServices library. Note: This post was updated Feb 21 to reflect an issue I’ve documented here with IE8.

Create a new page
Setup your html
Create jQuery Mobile layout
Create functions
Call functions on page change
Full Code

Create a new page

Create a new blank .aspx page in the “Site Pages” library (using SharePoint Designer 2010). I like to use a new .aspx page like this because I can create a document from scratch, I don’t have to deal with page layouts, master pages, etc. The same principals can be applied elsewhere, but this gives me a clean page to start from (which is way easier to debug).

Setup your html

Note: I’ve created my document using html5 standards (as does jQuery Mobile).

<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
	<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.png"/>
	<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
	<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>
<script type="text/javascript">
 //we'll put the SPServices functions here
 //note the placement of this script tag BEFORE the jQuery Mobile javascript link
</script>
	<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>

<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->

</head>
<body>
<!--- we'll put the jQuery Mobile and HTML here --->
</body>
</html>

Create jQuery Mobile layout

Now let’s setup our html within the body tag. We’ll use the standard setup you can find in the jQuery Mobile documentation.

<section id="page1" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>First Page</h1>
 </header>
  <div data-role="content">
   Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
   <a href="#page2">Click here</a> to see your last name
  </div>
</section>

Here’s our first pagelet. It has an ID of “page1″, and a title of “First page”. If you have everything setup right so far, you should see an image like this:

Now let’s setup page 2. You’ll notice above that we’ve used a link tag with a href=”#page2″. jQuery Mobile takes this and navigates us to “page” 2, even though it is simply another section on the same aspx page. Here’s what you’ll have, and the image follows:

<section id="page2" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>Second Page</h1>
 </header>
  <div data-role="content">
   Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
   <a href="#page1">Go back</a> to see your first name
  </div>
</section>

Create functions

Now that we’ve created our pages, it’s time to create the functions. We’re going to create two functions. One will call the first name of the user, and one will call the last name. Once it gets the first/last name, it appends the value of that variable to the empty ‘span’ tags we created in the step above. This is a basic example, but you’ll get the point at least.

So the first thing we need to do is create the functions on document ready. But note that we won’t CALL the functions just yet.

First function (to get first name of the logged in user):

function getFirstName() {
  firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
  $(".first-name").append(firstname);
}

Second function (to get last name of the logged in user):

function getLastName() {
  lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
  $(".last-name").append(lastname);
}

Call functions on page change

Right now these two functions are just sitting in the script tag, but we want to call them. You can do one of two things:

call the functions right away
call whenever the new pagelet loads

Because of the functions I am calling in one of my other projects, I’ve decided to call the function each time each pagelet loads. That means that even though jQuery Mobile loads the new pagelet without reloading the url, my data will still load in asynchronously. So when we click on “click here to see your last name”, it will then call the function when that pagelet comes into view.

The other way is fine as well, it just means that while you are using your new web app, the data only loads when the document is ready. This means if data changes while you are navigating, you won’t see the change until you refresh the page.

Note: If you call the functions each time the page is loaded, your script must remain above the jquery mobile js reference (see step 2). This because you need to tweak the DOM before jQuery Mobile applies its classes and functionality to the page.

So onto the code! We’re going to use the jQuery function “on” and pass the event “pagecreate”. Like I mentioned above, this means the function will only run when the page is created (every time).

$("section#page1").live("pagecreate", function(event){
  getFirstName();
});
$("section#page2").live("pagecreate", function(event){
  getLastName();
});

Now you should see the following when you load each page:

Full Code

And for your copying and pasting pleasure, here’s the full code!

<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
	<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.jpg"/>
	<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
	<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>

<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->

	<script type="text/javascript">
		$(document).ready(function(){
			
function getFirstName() {
	firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
	$(".first-name").append(firstname);
}		
function getLastName() {
	lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
	$(".last-name").append(lastname);
}
			
$("section#page1").live("pagecreate", function(event){
  getFirstName();
});
$("section#page2").live("pagecreate", function(event){
  getLastName();
});		})
	</script>
	<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>

<section id="page1" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>First Page</h1>
 </header>
  <div data-role="content">
   Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
   <a href="#page2">Click here</a> to see your last name
  </div>
</section>

<section id="page2" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>Second Page</h1>
 </header>
  <div data-role="content">
   Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
   <a href="#page1">Go back</a> to see your first name
  </div>
</section>

</body>

</html>

Enjoy!

Ben

1 Comment

SharePoint and jQuery Mobile: Making links work

21 Feb
2012

If you’re using jQuery Mobile with SharePoint 2010, you might notice when you click on an external link that the little “loading” icon appears to spin forever. The reason (in my case at least) is that the link is trying to load using AJAX. So all you need to do is add the “data-ajax” attribute to a link and set it to false.

<a href="" data-ajax="false">link text</a>

Yep, it’s that simple!

3 Comments

The HTML5 Video Codec Debate

17 Feb
2012

Recently I wrote a brief article on HTML5 video formats that claimed WebM as the way to go for all your HTML5 needs. In hindsight, the subject needed more attention than a 3 paragraph explanation.

Straight from the W3C

The HTML5 spec, as early as 2008, warns us of the codec issue surrounding the video element. The quote below appeared in the January 2008 version of the spec, as well as the February 2009 version. But after 2009 they just kind of stopped mentioning it. (A losing battle?!)

“It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.” – HTML5 Spec (Ian Hickson)

Spec from January 2008: http://www.w3.org/TR/2008/WD-html5-20080122/#video0
Spec from February 2009: http://www.w3.org/TR/2009/WD-html5-20090212/video.html#video-and-audio-codecs-for-video-elements

Current video formats

Right now there are three main players on the scene: WebM, H.264 (mp4), and Theora (Ogg). Of course the quality, download size, playback overhead, and stream-ability are all at varying levels with each format. But as I see it, these are not the main issues. Personally I think the H.264 is better quality video, but the size is too big. But the thing that really matters here is the not the features (those will always improve), but the approach.

Open source development of the WebM and Ogg codecs is far more attractive to me, and seems to line up with the direction of the web. But of course when you have a proprietary codec like H.264 you get all the backing and support of a company whose existence is dependent on the success and acceptance of its product. As you may have read, the WebM project has been largely supported by Google, so that codec kind of rides the fence here. It does make me a bit nervous that Google is so invested in this format. But then again…if I was nervous about Google taking over I would be delusional, as a large chunk of my life revolves around Google products (search + gmail).

Each codec has its advantages, disadvantages, bla bla bla. But it doesn’t really matter how good the codec is unless all of the popular browsers support it.

Market share of browsers

Of course there is no way to tell the actual market share of browsers, but there are a few sites which collect worldwide data to determine the split of browsers based on site visits. StatCounter GlobalStats (link) is one of those sites. The images below show the split of browsers from 2008 through today. As IE is rapidly on the decline, Chrome has enjoyed an intense surge in users. Opera and Firefox are remaining steady at their respective levels. Safari is relatively steady, but climbing ever so slightly. Keep in mind that these statistics are global, so per-country variations are quite different. And depending on your audience is, this may be completely irrelevant.

The table below was taken from a Wikipedia article (you can see their sources for the numbers here). I’ve taken the liberty of averaging out each browser in the last row.

	IE	Firefox	Chrome	Safari	Opera	Other
StatCounter	38.7	25.3	27.3	6.1	2	0.6
Net Applications	51.9	21.8	19.1	5	1.7	0.5
W3Counter	31.2	25.5	23.8	6.3	2.6	10.6
Wikimedia	29.15	23.5	22.2	6.13	4.05	0
Clicky	40	24.5	25	9.2	1.3	0
Average	38.19%	24.12%	23.48%	6.546%	2.33%	2.34%

The numbers above can be analyzed a billion different ways, but I’ll give you my take. I group Safari and IE together (44.7%) and Firefox, Chrome, and Opera together (49.93%). Grouping this way is based purely on acceptance of the WebM and Ogg Theora video codecs for use with the HTML5 video element. IE and Safari don’t natively support either, but you can install plugins to fix that. The other three browsers, on the other hand, natively handle WebM format. On the flip side, only IE and Safari natively support the H.264 (mp4) codecs. The image below is from Mozilla, and outlines the support for each browser by codec.

The point of it all

HTML5, and more specifically the video element of HTML5, has huge potential for breaking down a lot of walls for users of different browsers. With more and more native support, it will mean less plugin downloads, less fixes, and hopefully less “fallbacking” for designers and developers. A comment from Kenneth in my last article made me think:

“H.264…[is] already baked in from devices ranging from Tivo’s to BluRay Players to camcorders to… you name it.”

Maybe in this big debate on codecs we need to keep in mind the rest of the technology world. Maybe integration with ALL our devices (not just computers and phones) is something to be valued. Maybe the codec debate needs to be bigger than HTML5 and browsers.

Regardless, if we as the designer/developer community can create and agree on a standard video codec (AND native support for browsers), the web will be a better place. The internet is becoming an amazing place of collaboration; and we can see the speed with which that collaboration can move us. Let’s stop choosing sides and come up with something that works for everyone. Then we can get on with our day and fight about something else.

HTML5 Sample Video: Valentine’s Day

15 Feb
2012

Check out this link for some HTML5 valentine goodness
.

HTML5 video tag formats

14 Feb
2012

If you’ve played with the new video element in HTML5, you’re probably noticing the power it has to release you of the flash-based bonds you’ve been held captive by. But if you’re running an older browser (anything prior to IE 9 according to this site), you’ll see a supreme lack of video playing in your browser. You’ll need to provide a flash fallback using something like MediaElement.js or Video for Everybody.

Assuming you have fixed your video tag for older browsers, here’s a breakdown of the 3 different video formats you can use with the HTML5 video element.

WebM/VP8

Quoting the WebM Project site, “The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone.” Nothing more really needs to be said about which direction we should heading for video on the web. And again from their site, “WebM is supported by Mozilla, Opera, Adobe, Google and more than seventy other publishers and software and hardware vendors.” I wonder which video format will rise to the top?!

Ogg/Theora

This format is also an open source codec designed to compete with MPEG-4 and other proprietary codecs (Windows Media, Realmedia, etc.). I don’t have tons of experience with it, but it only seems to have a couple of percentage points up on the WebM format in terms of current usage support. Right now it supports all the same browsers. So I put it in just for the heck of it, but you might be able to get by without it.

MPEG-4/H.264

The licensing on MPEG-4 is not royalty-free, so many browsers won’t support this format. Keep in mind that if you’re using all 3 formats (suggested), you need to list this one first because of a bug with the iPad. Also, Firefox and Opera have both stated they won’t support this format. Chrome currently does, but it seems it won’t in upcoming versions. This format is a ticking clock because of its closed door policy. Yes, it’s nice. But its days are numbered.

If you need software to be able to convert quickly and easily to all of these formats, check out Miro Video Converter. It’s an awesome (lightweight) tool.

ps. Have you tried the YouTube HTML5 version? They’ll let you sign up for a trial to see how it’s working for you.

4 Comments

jQuery SPServices v0.7.1 Released