Mobile Store - Architecture (part 2)

by Chris 29. January 2010 05:48

A solid design always starts with a solid architecture. The architecture used for this app (series) is the KISS Architecture, and it builds on the collective knowledge in the developer community. It's a classical three tiered architecture on both the server and on the device:

image

Hopefully, this picture is not revolutionary to anyone, and it makes the best use of the latest technologies on the Microsoft platform:

  • .NET Framework - the treasure chest
  • C# - my language of choice
  • Visual Studio - the worlds greatest development tool
  • SQL Server - my database of choice (on both server and device)
  • ADO.NET Entity Framework and LINQ to Entities - the way forward on ORMs (for the ADO.NET team)
  • ADO.NET Data Services - how to make (REST) data access loosely coupled
  • WCF - on discussion, this is the RPC of our time
  • .NET Compact Framework – the mobile treasure chest
  • Windows Phone – the premier platform for .NET

With this architecture in place, our app is ready for multiple deployment scenarios, and it's especially suited to be deployed in "the cloud".

In the next part, let's get started in implementing this architecture.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Architecture | Chris | Compact Framework | Windows Mobile

Mobile Store - Introduction (part 1)

by Chris 22. January 2010 05:25

I think that one of the hot app trends of 2010 will be companies extending their product and/or services to "anyplace". When I read about the success story of PizzaHut's iPhone app sales, it makes me think of all the companies that haven't yet made their presence in this most lucrative channel.

The first generation mobile apps was about proving it could be done, and we proved it a number of times. Now, it's time for the next generation apps where the main achievement is making it right. I mean, how should we build mobile apps in the right way, with the right architecture, and making sure that they reach the customers not only on a practical, but also on an emotional level. How do we create apps that are both beautiful inside as well as outside?

My take on that is building on a solid architecture, the KISS Architecture, adding an appealing user interface, the TouchUI framework, and putting together something that can be reused. I finally settled for an app where you could buy used cars that looks like this:

image image image

In this series I will walk you through building this app from the ground up. I will start with the server side with the core data, and the build my way through data service, business logic, a service, and all the way to the mobile app with a nice user experience.

Come along, and I hope you will enjoyed this as much as I did putting it all together.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Chris | Compact Framework | User Interface | Windows Mobile

TouchUI - Summary (part 14)

by chris 8. January 2010 05:21

image This is the final post in this series, and for a complete reference, here are the previous parts:

  • Part 1 gave some background
  • Part 2 looked at some of the alternatives
  • Part 3 was a general introduction
  • Part 4 gave an introduction to GDI
  • Part 5 promoted one form and many dialogs
  • Part 6 showed how the painting is done
  • Part 7 discussed how to build an active UI
  • Part 8 started the walkthrough of the controls
  • Part 9 covered the ScrollControl base class
  • Part 10 talked about the ScrollList control
  • Part 11 was about the ScrollPanel control
  • Part 12 demonstrated animated navigation
  • Part 13 showed how to be resolution/orientation aware

The TouchUI framework is published on CodePlex in a project called TouchUI, and this means that you can access the full source code as well as discuss it, come with suggested improvements, etc.

On the upper right you see the UX of the sample included in the code, and it's a beginning of a simple shopping app that allows for scrolling through articles (in this case only strawberries) and then touching them to see more details.

Even if this series is complete, I will probably continue to build further on the framework, and any suggestions on things to add are most welcome. Any other feedback, for that matter, is also welcome!

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Chris | Compact Framework | User Interface | Windows Mobile

TouchUI - Resolution/Orientation Aware (part 13)

by Chris 1. January 2010 10:06

As I have shown in several places in the previous parts of this series, the painting of things is always related to the bound of the current item (dialog, control, etc). This approach is essential to handle the quite extensive number of resolutions on WinPhone. That's especially true if you want to support all phones since WinMo 5, and even the non-touch devices. Another important reason is the fact that many devices with non-square screens allow the screen to be rotated between portrait and landscape mode.

The magical event that tells our app about the resolution and any change in orientation is the Resize event, and in the TouchUI sample, the code looks like this:

private void MainForm_Resize(object sender, EventArgs e)
{
   
Common.Instance.ClientRectangle = Screen.PrimaryScreen.WorkingArea;
   
if(loaded)
       
foreach(Dialog dialog in dialogStack)
            dialog.Resize(
Common.Instance.ClientRectangle);
   
this.Refresh();
}

The working area of the screen (excluding the title and menu bars) can be retrieved from a static method (PrimaryScreen) on the Screen class (in the System.Windows.Forms namespace). We save that in our app singleton (Common.Instance) and use it to inform all dialogs about the new dimensions.

Each dialog can adapt to the new resolution or orientation, and this is the code in the main dialog:

public override void Resize(Rectangle r)
{
   
this.Rectangle = r;
    scrollList.Rectangle =
new Rectangle(0, headerHeight,
        r.Width, r.Height - headerHeight);
}

It simply update the bounds of its ScrollList control, that in turn will adapt by using the new dimensions in its Paint method. With these simple measures, the app can run on any device with the same code and even the same executable. Here are some different resolutions and orientation examples...

image image

image

...and they all have their original resolution in the following order (width x height): 176 x 220 (non-touch), 400 x 240, and 480 x 800 (both touch). The beautiful strawberry graphics is from a photo by Tina Phillips / FreeDigitalPhotos.net.

Currently rated 5.0 by 4 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Chris | Compact Framework | User Interface | Windows Mobile

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen