Categories
Programming

Project Regtransfers

In between my Networking Coursework and going to lectures I’ve been working on an application for my uncles company Regtransfers, on both the Windows 8 and Windows Phone platforms.

The application allows you to:

  • Search for Personalised Numberplates
  • Submit and enquirey about any plate
  • Purchase a plate
  • Read any edition of “The World of Personalised Number Plates” — The Regtransfers Magazine
  • View all the videos on the Regtransfers YouTube Page
  • Read all the status updates on the @Reg_Transfers Twitter Account

Windows 8 App

Regtransfer for Windows 8 Splashscreen
Regtransfer for Windows 8 Splashscreen

The Windows 8 version of the application runs on both Tablets and traditional PCs. It is an out-and-out “Modern Experience” application, including support for Live Tiles, the Search and Share charms and Snap View.

The Main Page

The main page of the application displays the cover of the latest magazine as well as buttons which navigate you to pages where you can subscribe to physical editions of the magazine, read all editions of the magazine in PDF version and read more information about the magazine. Clicking the cover of the latest magazine opens a page showing more information about it, from which you can choose to read a PDF version of it.

This slideshow requires JavaScript.

Searching

At the top of the main page is the Regtransfers Logo and a search box. You can search for anything, including your name or initials and the application will return to you a list of relevant number plates. It will also allow you to filter your search results from some price brackets, so you can find plates more suited to your means.

Regtransfers for Windows 8 Search Charm
Regtransfers for Windows 8 Search Charm

As you can see from the above screenshot, you can also invoke the search page using the search charm. The search charm is  a way of searching any application, file or setting from anywhere within the operating system. This means that even if you’re in another app or on the start screen you can still search for numberplates by calling in the charm bar and selecting the Regtransfers app from the list of apps underneath the search box.

Viewing a Plate

When you select a number plate from the search page, or select a recently viewed plate from the main page you are shown the View Plate page. From here you can customize the acrylic plate you can optionally choose to purchase with said numberplate.

Regtransfers for Windows 8 View Plate Page
Regtransfers for Windows 8 View Plate Page

The page allows you to view both sides of the plate — the front, white plate of course having no flag –, choose which flag to have on the plate, choose a border and decide if you want to buy a set of acrylic plates with the number plate or not. If not you’ll receive your plate on a retention certificate.

Sharing a plate to Mail
Sharing a plate to Mail

From here you can also Share your plate using the built in share charm, above you can see an example of me sharing to the mail app, but you can share the plate to any app that accepts share using HTML, RTF or Text data. This includes posting to facebook using the people app, or twitter using MetroTwit.

Buying a Plate

The process of buying the plate is dealt with by an embedded web form. All data is transferred over a secure HTTPS connection, and the Regtransfers website is PCI Compliant, so all credit card details are totally safe 🙂

Buy plate
Buy plate

Making an Enquiry

Making an enquiry is  a simple case of filling in a form and hitting submit

Enquire about a  plate
Enquire about a plate

Watching a YouTube Video

Using the fantastic “MyToolkit” library I work out the location of the YouTube .mp4 file and embed it directly within the application using a custom video player which I made to be themed the same as the rest of the application. As with the rest of the application this works in both snapped view and full screen mode.

This page also allows you to share a link to the YouTube video, and gives you the option to view the video in your default browser if you would prefer.

Subscribing to Regtransfers: The World of Personal Number Plates Magazine

One of the most important parts of the application is the magazine sign up. This is why its displayed front and center on the main page, when customers sign up for a magazine they also receive a personalized list of plates they might like to purchase by email. Signing up is dealt with by a simple form:

Subscription Page
Subscription Page

Reading PDF’s of the Magazine

As well as being able to subscribe to the magazine people might want to be able to read back-issues of the magazine. They can do this by tapping the “Read Other Issues” which brings them to the below page:

All Editions of RT Magazine Page
All Editions of RT Magazine Page

All 30 editions of the RT Magazine are available here. To read one or find out more information about one the user just has to tap the relevant magazine cover. Once they have done so they are shown a page like the one below, which displays information on the featured celebrity, main stories and provides a button which downloads the PDF of the magazine in the default browser. I would have liked to embed the PDF within the application but unfortunately this isn’t supported in the Windows RT API’s unless you purchase Foxit Embedded Reader.

Magazine Issue #13 - Vinnie Jones
Magazine Issue #13 – Vinnie Jones

Snapped View

One of my favorite features of Windows 8 is snapped view. Microsoft’s implementation of Multi-tasking in the Modern Experience Environment. Snapped view allows you to view two apps at once, pinning one to either the left or the right in a 320 pixel wide box and allowing the other to fill up the rest of the space as if it was in full-screen mode. Every page within the Regtransfers application supports snap-view, and every snap view has full feature parity with the full screen mode rather than just showing a logo – as some applications do.

Main Page Panormaic Snap View
Main Page Panormaic Snap View

Because I have an awful lot of content on the Main Page it was a bit of a challenge to fit it all onto a small 320 pixel wide window, but I achieved this with some inspiration from the pivot page used in many Windows Phone applications. Using a <FlipView> XAML element I have made it so that you can swipe between 5 different views. The Magazine View, Recent Plates View, Recent Search View, YouTube View and Twitter View.  The Regtransfers Logo and Search bar are always present.

On the other pages elements are simply resized and reordered to make more sense on a smaller screen. Some examples are shown below.

Some of the snap views in the Windows 8 App, from left to right: View all Magazine Issues Page, The View Plate Page, The Enquiry Page, The Search Page, The YouTube Page
Some of the snap views in the Windows 8 App, from left to right: View all Magazine Issues Page, The View Plate Page, The Enquiry Page, The Search Page, The YouTube Page

Windows Phone 8 App

Making the snap views for Windows 8 was a huge help in designing the pages for the Windows Phone 8 application, which sports all the features of the desktop app including search, twitter, youtube and magazine subscription and e-reading. I’ve only just started this so there isn’t too much to show. But below is a picture of the main page of the app and the search page with filters.

Regtransfers - Windows Phone 8 App
Regtransfers – Windows Phone 8 App

I will of course keep this blog updated with my progress.

Danny

Categories
Programming Tutorials

Sorting a List of Classes

Today whilst writing my Highscores library, which I’m currently using for Sweepy Cleaner but intend to also use for future XNA games such as those I’ll make at 3 Thing Game, I discovered an awesome feature of lists in C#.

This List.Sort() method, documented here, allows you to sort a list of classes and, because it uses the recursive QuickSort algorithm, its really quick! By default the Sort() method can sort any primitive types, such as strings, ints, float and doubles, without any parameters, which is pretty good but doesn’t allow you to fully utilize the method. This is where the IComparer interface comes in.

An interface, for those who don’t know, is like a rulebook. It says “if you claim to be a comparer, you must include methods with these names, that return these types, otherwise I wont let you claim to be a comparer by stopping you from compiling”.

An example person interface might be like the following


interface Person
{
string returnName();
int returnAge();
void Eat(string foodType);
}

This basically says “To be a person you must have a method which returns a string called returnString, a method which returns an int called returnAge and a void method called Eat which accepts a string parameter”. If you miss one of those methods off from your class, which then claims to be a person or you have a returnAge method but it returns a double rather than an int or an eat method which doesn’t accept a string parameter your code won’t compile, so you can see that Interfaces are pretty useful for making sure your classes adhere to a certain rule set. 🙂

The IComparer interface comes in useful, it dictates to you how to make a class which tells the Sort() method how to sort your list of classes.

A class which implements the IComparer interface must have a public int Compare method which accepts two objects in its signature. So if we’re sorting people by age we might have an IComparer like the following.


public class PeopleComparer : IComparer
{
public int Compare(People person1, People person2)
{
int returnValue = 1;
if (person1 != null && person2 != null)
{
returnValue = person2.Age.CompareTo(person1.Age);
}
return returnValue;
}
}

As you can see, our PeopleComparer claims to be an IComparer using the ":" syntax. We then have a method inside the class which returns an integer, with a signature which accepts two People objects. This returns a number based on the CompareTo method which can compare integers, such as our age variable. You could compare height by changing only two words. e.g: returnValue = person2.Height.CompareTo(person1.Height);

(By the way, don’t worry about return value initially being set to 1, this is just to stop the “use of undefined variable” compilation error.)

We can now sort our classes by doing something like

List peopleWhoReadDannyComputerScientist = new List { };
//Imagine this list is filled with 1000 people.
peopleWhoReadDannyComputerScientist.Sort(new PeopleComparer());

The peopleWhoReadDannyComputerScientist list would now be ordered by age, allowing you to do all sorts of cool things, like binary chop search. 🙂

Its as simple as that,
Danny.