.KEYWORD mobile
.FLYINGHEAD INTERNET STEP-BY-STEP
.TITLE Create your own Windows CE Mobile Channel
.OTHER
.SPOTLIGHT FIGALT mobile-cover.gif
.SUMMARY If you have a Windows CE device, you can literally have the world in your pocket. There’s a feature of Windows CE called Mobile Channels. Mobile Channels are custom forms of your Web pages that get downloaded automatically into your Windows CE device. In this important article, contributing editor Craig Peacock takes you through the process of converting your Web site into a Mobile Channel. Normally, this would be a pretty complex task, but Craig makes it easy. Even if you don’t have a Web page, read this article. You’ll get a much better idea of how Mobile Channels work, and that’ll help you get the most out of them.
.AUTHOR Craig Peacock
Windows CE Mobile Channels are among the best kept secrets going. In this article, I’ll show you how you can create your own channel with just some basic HTML (i.e., HyperText Markup Language) Web page writing skills. As many of you know, I have a Web site about Windows CE called "Craig Peacock’s – Windows CE Palm-Size PC Pages". I’ve turned these pages into my own Mobile Channel. As part of this article, I’ll also give you source code for my channel to use as a guide. Figure A shows you what my Mobile Channel looks like.
.FIGPAIR A Check out my Mobile Channel.
.H1 What’s a Mobile Channel?
The Microsoft Windows CE Palm-sized PC user manual describes a channel as follows:
.QUOTE A channel is a Web site or other Web-formatted content that is available for offline viewing on your Palm-sized PC. Channels allow Internet, Intranet, or other Web-formatted content to be automatically downloaded to your Palm-sized PC from your desktop computer via synchronization.
The Windows CE Palm-sized PCs have the Mobile Channels Browser on them as a standard feature. It’s an optional download for Handheld PC users. In this article I’ll explain how to write a Mobile Channel by dissecting the code of my Mobile Channel piece by piece.
Even if you don’t have a Web page, this article will be interesting for just about any Windows CE user. You’ll get a much better idea of how Mobile Channels work, and that’ll help you get the most out of them.
.H1 Enabling synchronization
When you visit a Web page using Microsoft Internet Explorer on your PC, if that Web site owner has written a Mobile Channel, you’ll see a special subscribe icon. Clicking on that icon will subscribe you to that channel. The next time you synchronize with your Palm-sized PC, the synchronization process will copy the contents of the channel to your device for later, offline browsing.
On some machines, you’ll have to enable synchronization of channels. You do this using the ActiveSync Options dialog of the Mobile Devices application. Make sure to check the Channel Item check box, as shown in Figure B.
.FIGPAIR B Enable channel synchronization using the ActiveSync Options dialog.
.H1 Deciding on content
Before you embark on your journey to create a Mobile Channel, consider the content and the type of information you want to contain on the channel. Robert Hess wrote a fabulous article on the subject of mobile content back in June 1998. The link is at the end of this article in the "Product availability and resources" section.
If you’re a content author, you should think carefully about the type and size (in terms of bytes to download) of information you’re going to give to your Mobile Channel visitors. The words "keep it simple" should be words to live by when doing your design. Even with a simple design, you can still achieve a great deal with a Mobile Channel.
Here’s one design hint: one of the things I’ve discovered from the feedback of my Mobile Channel users is that they don’t want to scroll up and down much to find a particular piece of information. Since your users will typically have a small, pocket-sized device with them, it would be better if you separate your information into smaller pages.
The reason I chose to write my channel the way I did was because my pages don’t have a lot of repetitive data in them and those pages are split into clear topics.
Before we go on, you should know that Mobile Channels are capable of a great deal more than I discuss here. If you are looking to build a channel that contains a lot of repetitive data or has data that you want to change without effecting your page layouts, then you’ll need to check out the Microsoft MSDN documentation for "Scripted Mobile Channels".
.H1 Basic elements of a Mobile Channel
A channel, in its simplest form, is made up of two components, a Channel Definition File (CDF) and a content file (HTML). Both will need to reside on your server. Most channels, however, are made up of a CDF file, graphic files (i.e., a logo and a channel graphic file) and one or more HTML files.
Before we go on, here’s a useful enterprise-related tip: Mobile Channels aren’t just for Internet sites, some of the best channels I’ve seen have been on corporate intranet’s. With no extra software required on the Web server, anyone whose desktop browser is Microsoft Internet Explorer 4.x or above can make use of a Mobile Channel.
The main goals I had in mind when I wrote my channel were that I wanted it to be useful and I wanted it to contain information that visitors to my site would like to read when offline.
I decided I was going to have pages in my channel that covered Software, Hardware, Tips, News and an About Me page. Each of these pages correspond to a file. Once you know what files you are going to have in the channel, it’s quite straightforward to progress into coding the channel.
.H1 Writing your CDF file (Channel Definition File)
The CDF file is the core of your whole channel. The CDF file contains information such as the location of the channel (its URL on the Internet or intranet), its title, a quick abstract text description, and details of all the contents.
The CDF file also lets the synchronization process know to download graphics for your pages. Even if you have a graphic on a page deep into your channel, you must describe it in the CDF file otherwise your visitors will get page errors. The graphics files that you use in your channel have to be of a certain size. These are listed and explained in the image section of the code. As I go through the code you’ll see some statements on multiple lines.
One final note before we look at the actual CDF structure: like with regular HTML, all channel tags start with "<" and end with ">".
.H2 The version line
All channels start off with:
.BEGIN_CODE
.END_CODE
This specifies that XML (eXtensible Markup Language) is the language of the channel.
.H2 The CHANNEL CDF tag
Next, you’ll need to describe the channel itself. Following the paragraph is the channel tag code for my page. After you see it, I’ll explain what it all means.
.BEGIN_CODE
.END_CODE
The line containing "HREF=" defines the location of my channel on the Internet with it’s full path. If you look carefully, you’ll see a strange URL descriptor (not the usual "http" we’ve all come to love). The "mctp:" URL descriptor is used to tell the browser it’s using the mobile channel protocol. The "www.palmpc.org.uk" location is my Web site and the string "/channels/cpchannel.cdf" means my CPCHANNEL.CDF file is in a folder (or directory) called "/channels".
The BASE command is used to tell the Mobile Channel where all the files are located. Once a BASE command is written, rather than using a full path, all you’ll need is to describe where a file is relative to the folder described in the BASE command. When I refer to a graphics file CPCHANHEAD.GIF a little bit further on in my channel definition file I don’t have to enter its full path as it will look for the files in the BASE folder. This has the advantage of making the CDF file smaller and a bit easier to code.
Each channel needs to have its own unique ID. I called mine "cpchannel" for "Craig Peacock’s Channel". The string "cpchannel" is the unique ID of my channel. It must be unique and everyone should ensure they name their channels something that is unique to them. It is not possible to have channels with the same ID on the same device.
It is very important that you give this a unique name. When creating your channel don’t just give it the name "cpchannel.cdf". If you are going to offer several channels make sure the filenames below are different as well.
.H2 The SELF CDF tag
The SELF CDF tag gives the actual name of the actual CDF file. Because it’s describing itself, it’s called SELF:
.BEGIN_CODE
.END_CODE
.BEGIN_KEEP
.H2 TITLE and ABSTRACT CDF tags
The TITLE and ABSTRACT tags are used to describe the name of your page and what it’s about. These are displayed on the handheld device. Don’t use a long abstract description since it’ll fill up the small screen on a Palm-sized PC. Take a look at Figure C to see what I mean.
.FIGPAIR C Here’s an example of a bad use of channel names.
The TITLE and ABSTRACT tags are quite simple. Begin with <TITLE> and <ABSTRACT>, follow with your title and abstract, respectively, and then end with </TITLE> and </ABSTRACT>. Here’s how mine looks:
.BEGIN_CODE
.END_CODE
.END_KEEP
.H2 USAGE VALUE and SCHEDULE CDF tags
The USAGE VALUE tag says your channel’s a "MobileChannel" (be sure to leave out the spaces. Note that this tag ends rather strangely, with just a "/>". Some CDF tags are just strange that way. In any case, here’s the USAGE VALUE line:
.BEGIN_CODE
.END_CODE
The SCHEDULE tag describes how often you want visitors to get updates from your channel. If your channel will be updated really frequently with, for example, internal news stories about the company or weather alert updates, then you’ll want to make this value something like:
.BEGIN_CODE
.END_CODE
With my channel, it’s good enough to do an update once a day. Here’s how my CDF file describes it:
.BEGIN_CODE
.END_CODE
.H2 Special graphics tags
The next three lines describe the special graphics that are shown in dedicated places on your Mobile Channel and in your viewer on your Windows CE mobile device. The LOGO STYLE tag has various options:
.BEGIN_LIST
.BULLET "The Image-Wide" option refers to the iconwhose dimensions are 194×32 pixels. This icon is displayed really nicely on your PC in the channel bar.
.END_LIST
.BEGIN_LIST
.BULLET The "Image" graphic is 80×24 pixels and is used on the main screen of the Palm-sized PC to describe the channel.
.END_LIST
.BEGIN_LIST
.BULLET The "Icon" image is 16×16 pixels and is displayed in the navigational bar at the top of the Mobile Channels viewer on the Palm-sized PC. This also has an ID tag, which means I can reference the graphic just by using its ID. We’ll come onto that a little later in the article.
.END_LIST
Here’s my code for all three LOGO STYLE tags:
.BEGIN_CODE
.END_CODE
.H2 Setting up graphics IDs using the ITEM tag
The ITEM tag below is saying a file by the name of CPLOGO.GIF has an ID of LOGO:
.BEGIN_CODE
.END_CODE
This allows me to display the CPLOGO.GIF file by just referencing the ID logo. This is very handy. If I later change my logo graphic, I don’t have to change every use of the logo; I only have to change it in the CDF file itself.
.H2 A few more specialty tags
CHANSCRIPT is a special command that identifies the ID of the script file that renders the channel and subchannels. In the Microsoft MSDN documentation this is referred to as a MCS (Mobile Channel Script) file. Here’s where I differ a bit from Microsoft’s recommendations. I’m just using an HTML file to be my main page. The file name is CPINDEX.HTML. I use a CP-INDEX ID to connect the file name with the CHANSCRIPT value.
Once again, the TITLE tag is the name of the title as shown on the device. The Craig’s displays a proper apostrophe in my article’s title.
Here’s how those elements go into my CDF code:
.BEGIN_CODE
.END_CODE
.H2 The rest of the CDF story
In a Mobile Channel, you don’t directly reference the file name of the document. Instead, you call it by its ID tag. To avoid confusion for me, I’ve made my ID tags very similar to the actual HTML file names. The line above that starts <ITEM HREF="cpindex.html" ID="CP-INDEX"> means that whenever I refer to the ID named CP-INDEX it will display the item or page from the file CPINDEX.HTML, specified on the same line.
The following lines describe the remaining pages in my channel. They also need to be in my Channel Definition File. They all have the file name (the HTML files), and individual ID names. They also have a USAGE VALUE ="MobileData" which informs the device that these items should be made available on your mobile device.
.BEGIN_CODE
.END_CODE
.H1 Inside a channel’s HTML file
That about wraps up our channel definition file. Now, lets take a look at one of the HTML files mentioned above. The first one we’ll look at is the Hardware page, contained in the CPHWARE.HTML file. Fortunately, we’re no longer doing the arcane CDF coding. Most of the rest is typical HTML, just tuned for a mobile channel’s use.
The first few lines say the file is an HTML file and defines its title:
.BEGIN_CODE
.END_CODE
Next, I’ll set the background color to white. This is another cool Mobile Channels tip. If you set the background color to white, you can pretty well guarantee your page will be viewable on all devices. Here’s that code (note that #FFFFFF) is the HTML descriptor for white:
.BEGIN_CODE
.END_CODE
Next, there’s a table with a logo in it. Note the reference to the logo’s ID name and not the file name:
.BEGIN_CODE
.END_CODE
I’m not going to go into detail on the HTML table syntax (the TR, TD, and TABLE tags). You can find more information on these in just about any modern HTML reference.
I’ve centered the title of the page, and I prefer to put all the core elements of the page in a table. This helps guarantee the page looks good on both a Mobile Channel viewer on a Palm-sized PC and also on a Handheld PC. I’ve set the width to 99% with no table border to maximize the amount of space on the screen that’s available for my content:
.BEGIN_CODE
Palm-sized PC Hardware |
.END_CODE
Note that I’ve put the heading in a table to keep it centered properly on the page.
The use of MCTP (Mobile Channel Transport Protocol) ensures that you can browse the contents of the channel when not physically connected to the Internet. Every MCTP call is passed to a script interpreter that finds the relevant information, such as the name of the page. That is then processed into HTML and displayed by the channel browser. This information is held in a cache so it’s a very quick process.
.H2 Coding the navigator
This next section of code is my navigator. This standard set of code provides a way for users of my channel to jump around to any page in the channel. I’ve chosen to highlight the current page in the bold tag to avoid visitors getting confused as to what page they’re on.
Next, I’m going to put a horizontal line across the page and include the links to the other pages.
With screen size so restricted, I’m using the break tag and you’ll notice some differences with how links work. I’ve included the links themselves in brackets to differentiate them from regular text.
Here’s how a link will work. The following sequence will display on the screen as the phrase "Mobile Channels". But when it’s tapped, it will look in the CDF file using the specifier "mctp:\//cpchannel" (the name of my channel) for the ID called CP-CHANNELS and display that page. Let’s take a look at that line:
.BEGIN_CODE
Mobile Channels
.END_CODE
Now let’s look at the HTML for all the navigator links:
.BEGIN_CODE
[ Mobile Channels ]
[ Software Review ]
[ Index ]
[ Hardware Pages ]
[ News Page ]
[ About Craig ]
[ Best of ]
.END_CODE
.H2 The body of the hardware page
The remainder of the page is the part I change when authoring new content. The copyright message remains at the bottom of the page. As you can see HTML commands like as bold and list work just fine in Mobile Channels.
Now it’s back to the use of tables again for the text to keep it nicely aligned on the screen:
.BEGIN_SIDEBAR
.BEGIN_CODE
|
Lots of the Palm-sized PC Vendors have started showing details of their color palm-sized PCs in public now, HP has started shipping and Compaq devices are due out any time now. Casio has announced 2 new machines one monochrome and one color, The color E100 color palm-sized PC is going to be the machine to have this year, it looks great and it is loaded with multimedia features and it’s really quick. Compaq machine looks good but with Everex and Philips due to get their devices to the shops soon it’s going to be an interesting summer. I hope to have all the specifications of these new machines on my site soon Visit these Web pages for more details. |
Please Visit www.palmpc.org.uk The Web Site dedicated
to the Palm-sized PC Devices and Also www.craigtech.co.uk for all Windows CE links.
.END_CODE
.END_SIDEBAR
.H1 Beyond Mobile Channels
Up until very recently Mobile Channels were the only source of accessing HTML content on your Windows CE Palm-sized PC. Now that’s all started to change. A company called Conduits has just released a Web browser, shown in Figure D for Palm-sized PCs that’s an both an online and offline browser.
.FIGPAIR D You can browse the Web using the Conduits browser.
AvantGo is making available versions of their popular applications for Windows CE devices as well. Jason Perlow’s written a detailed article on AvantGo elsewhere in this issue. Corporate customers who already have the infrastructure in place will soon be able to have the benefit of offering their users access to AvantGo channels on Windows CE devices.
There’s also a benefit to Web developers who use AvantGo. AvantGo is supported for both Palm Computing Platform devices as well as Windows CE devices. As a result, Web sites designed to be AvantGo compatible can be mobile on both platforms.
.H1 Some closing tips
I hope you noticed that I use an absolute minimum of graphics and try to keep the text reasonably small. My whole channel and all the pages and graphics come in at under 30KB in size.
Your audience will typically dictate the type of content you’re going to show in a Mobile Channel. For example, some people publish internal telephone lists and have a different page for each letter of the alphabet. Others prefer to organize their pages differently.
You can do a lot more with Mobile Channels than the example I’ve shown. There’s detailed information about Mobile Channel development in the Windows CE Software Development Kit documentation. That said, I hope that I’ve shown you that a simple design approach can and does work when it comes to writing your own Mobile Channel.
For the source code to my channel so you can see all the pages and the graphics, use the download link below. If you write your own Mobile Channel drop me an email at craig@palmpc.org.uk and I’ll add it to my list of channels! If you want to see the sorts of channels others have written then be sure to check out my channels page.
.BEGIN_SIDEBAR
.H1 Product availability and resources
The Robert Hess Article is available at http://msdn.microsoft.com/workshop/delivery/mobile/hess061798.asp.
Visit Craig’s Mobile Channel page at http://www.palmpc.org.uk/channels.
Craig’s Source code for his channel is available for download at http://www.palmpc.org.uk/channels/cpchannel-source.zip.
Conduits Palm-sized PC Web browser is available at http://www.conduits.com/ce/.
Visit Avantgo at http://www.avantgo.com.
Mobile Channel Viewer for Windows CE based Handheld PCs is available at http://www.microsoft.com/windowsce/products/download/mcviewer.asp.
Visit Microsoft’s Mobile Channel Page at http://www.microsoft.com/windowsce/products/download/channels.asp.
.END_SIDEBAR
.BIO
