I’ve been working extensively on enterprise mobility projects lately. These applications integrate into large SAP based systems and when testing the system it can get very tedious to set up some temporary data from the backend. I’m also working with some not-so-technical testers that get intimidated by the Visual Studio or the SQL Server Management Studio. This led me to writing an open source project called SQL Compact Query Analyzer
Here’s some details I pulled directly off the CodePlex site
Project Description
SQL Server Compact Edition Database Query Analyzer
Features:
- Create new database
- Automatically refresh database upon executing create/alter/drop table queries
- Displays database information (database version, filename, size, creation date)
- Displays schema summary (number of tables, columns, primary keys, identity fields, nullable fields)
- Displays the information schema views
- Displays column information (database type, clr type, max length, allows null, etc)
- Displays index information (column name, is unique, is clustered)
- Execute SQL Queries against a SQL Server Compact Edition database
- Execute multiple SQL queries (delimited by a semi colon ;)
- Easily edit the contents of the database
- Display query result as XML
- Shrink and Compact Databases
- SDF file association with SQL Compact Query Analyzer for launching directly by opening the SDF in Windows Explorer
- Displays thumbnails for IMAGE fields
- Generates Schema and Data Scripts
- Supports password protected databases
- Supports SQLCE 3.0, 3.1, 3.5 and 4.0
Coming Soon:
- Purge database content
- Create, edit, and drop tables UI
- Create, edit, and delete table references and indexes UI
- Support for SQL Server Compact Edition 2.0
Screenshots
- Displays database and schema information and executes multiple SQL queries directly
- Edit the table data directly
- Display the contents of IMAGE fields
- Performance numbers for queries
- Query errors
- Output result set as XML
- Create new database
- Shrink, compact, script database
Prerequisites:
- .NET Framework 4.0
Check it out! You might find it useful!
This blog is moved to a new home - https://christianhelle.com
Tuesday, June 7, 2011
Thursday, March 10, 2011
SQL Compact Code Generator
More than a year ago, I published a project on CodePlex called SQL Compact Code Generator. Unfortunately, I never managed to find the time to do some work on it and the project was set on a very long hold. A year after I suddenly really needed such a tool and decided that I should put in some hours on the project.
I'm currently working on a large enterprise project where changes to the database schema is done rather frequently, to avoid the pain of updating my data layer after every change I decided to use my code generator.
Here's some details I pulled directly off the CodePlex site.
Coming Soon:
Screenshots:
Custom Tool
Generating Entity Classes
Generating Data Access methods that implement the Repository Pattern
Generating Entity Unit Tests
Generating Data Access Unit Tests to validate the integrity between the data layer and the actual database
Check it out! You might find it useful too...
I'm currently working on a large enterprise project where changes to the database schema is done rather frequently, to avoid the pain of updating my data layer after every change I decided to use my code generator.
Here's some details I pulled directly off the CodePlex site.
Project Description
Contains a stand alone GUI application and a Visual Studio Custom Tool for automatically generating a .NET data access layer code for objects in a SQL Server Compact Edition database.
Features:
Contains a stand alone GUI application and a Visual Studio Custom Tool for automatically generating a .NET data access layer code for objects in a SQL Server Compact Edition database.
Features:
- Visual Studio 2008 and 2010 Custom Tool Support
- Creates entity classes for each table in the database
- Generates data access code that implements the Repository Pattern
- Generates methods for Create, Read, Update and Delete operations
- Generates SelectBy and DeleteBy methods for every column in every table
- Generates a Purge method for every table to delete all records
- Generates Count() method for retrieving the number of records in each table
- Generates CreateDatabase() method for re-creating the database
- Generates xml-doc code comments for entities and data access methods
- Generates Entity Unit Tests
- Generates Data Access Unit Tests
- Generates .NET Compact and Full Framework compatible code
- Support for SQL Compact Edition version 4.0
- Multiple test framework code generation (MSTest, NUnit, xUnit)
- Transaction support per DataRepository instance (Begin, Commit, Rollback)
- Code generation options to enable/disable unit test code generation
- Windows Phone 7 "Mango" support for generating a LINQ to SQL DataContext
Coming Soon:
- Generate database maintenance code (clear database, shrink/compress database)
- Support for multiple versions of SQL Server Compact Edition
- VB.NET Code Support
- Visual Studio Add-in
Screenshots:
NEW: Custom Tool for Windows Phone 7 "Mango"
Custom Tool
Generating Entity Classes
Generating Data Access methods that implement the Repository Pattern
Generating Entity Unit Tests
Generating Data Access Unit Tests to validate the integrity between the data layer and the actual database
Check it out! You might find it useful too...
Thursday, February 10, 2011
How to display a Notification Bubble in Windows Mobile using .NETCF
Yesterday, I found myself using an old piece of code that I wrote ages ago. It's something I've used every now and then for past few years. Since I myself find it useful, I might as well share it. All the code does is display a Notification Bubble in Windows Mobile. To do this you use the Notification class in the Microsoft.WindowsCE.Forms namespace. Even though the Notification class is very straight forward and easy to use, I created a helper class so that I only need to write one line of code for displaying a notification bubble: NotificationBubble.Show(2, "Caption", "Text");
Hope you found this helpful.
/// <summary>
/// Used for displaying a notification bubble
/// </summary>
public static class NotificationBubble
{
/// <summary>
/// Displays a notification bubble
/// </summary>
/// <param name="duration">Duration in which the notification bubble is shown (in seconds)</param>
/// <param name="caption">Caption</param>
/// <param name="text">Body</param>
public static void Show(int duration, string caption, string text)
{
var bubble = new Notification
{
InitialDuration = duration,
Caption = caption,
Text = text
};
bubble.BalloonChanged += OnBalloonChanged;
bubble.Visible = true;
}
private static void OnBalloonChanged(object sender, BalloonChangedEventArgs e)
{
if (!e.Visible)
((Notification)sender).Dispose();
}
}
Hope you found this helpful.
Saturday, February 5, 2011
Working around Pivot SelectedIndex limitations in Windows Phone 7
I've been working on an application with 2 pages, a main page and a content page. The content page contains a Pivot control with a few pivot items. The main page does nothing but navigate to the content page and suggest which pivot item to display. The only reason the main page exists is to display the information in the pivot item headers in a more graphical and elegant way.
For some reason I can't set the displayed pivot index to be the third item. I wanted to do this on the OnNavigatedTo event of the content page but whenever I attempt doing so an exception is thrown. Every other pivot item works fine, which I think is really weird.
To load the content page, I navigate to the page by passing some information of the pivot index I wish to be displayed. Something like this:
If the value of index in the code above is set to 2 then I get an exception, any other valid value works fine. A value out of range (less than 0 or greater than 5) throws an out of range exception which is the behavior anyone would expect.
Here's the XAML definition of the content page
To work around this limitation, you can handle the Loaded event of the page and update the pivot selected index from there. Here's an example how to do it:
I'm not sure if this limitation is by design or it's a bug in the control. Either way I managed to get it to work the way I wanted it to. Hopefully I'm not the only one who ran across this and that you found this information useful.
For some reason I can't set the displayed pivot index to be the third item. I wanted to do this on the OnNavigatedTo event of the content page but whenever I attempt doing so an exception is thrown. Every other pivot item works fine, which I think is really weird.
To load the content page, I navigate to the page by passing some information of the pivot index I wish to be displayed. Something like this:
NavigationService.Navigate(new Uri("/ContentPage.xaml?index=" + index, UriKind.Relative));
If the value of index in the code above is set to 2 then I get an exception, any other valid value works fine. A value out of range (less than 0 or greater than 5) throws an out of range exception which is the behavior anyone would expect.
Here's the XAML definition of the content page
<phone:PhoneApplicationPage
x:Class="WindowsPhonePivotApplication.ContentPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:Pivot Name="pivot" Title="CONTENT PAGE">
<controls:PivotItem Header="first" />
<controls:PivotItem Header="second" />
<controls:PivotItem Header="third" />
<controls:PivotItem Header="fourth" />
<controls:PivotItem Header="fifth" />
<controls:PivotItem Header="sixth" />
</controls:Pivot>
</Grid>
</phone:PhoneApplicationPage>
To work around this limitation, you can handle the Loaded event of the page and update the pivot selected index from there. Here's an example how to do it:
public partial class ContentPage : PhoneApplicationPage
{
private int pivotIndex;
public ContentPage()
{
InitializeComponent();
Loaded += delegate { pivot.SelectedIndex = pivotIndex; };
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
string value;
if (NavigationContext.QueryString.TryGetValue("index", out value))
{
pivotIndex = 0;
int.TryParse(value, out pivotIndex);
}
}
}
I'm not sure if this limitation is by design or it's a bug in the control. Either way I managed to get it to work the way I wanted it to. Hopefully I'm not the only one who ran across this and that you found this information useful.
Friday, February 4, 2011
How to Darken an Image in WPF
I'm really getting carried away with playing with image manipulation in WPF. Here's a short post on how to darken an image using the WriteableBitmap class.
The process is fairly simple, I manipulate each pixel by decrementing each RGB value with the provided level
Hope you found this useful.
The process is fairly simple, I manipulate each pixel by decrementing each RGB value with the provided level
unsafe static BitmapSource Darken(BitmapSource image, double level)
{
const int PIXEL_SIZE = 4;
int height = image.PixelHeight;
int width = image.PixelWidth;
var bitmap = new WriteableBitmap(image);
bitmap.Lock();
var backBuffer = (byte*)bitmap.BackBuffer.ToPointer();
for (int y = 0; y < height; y++)
{
var row = backBuffer + (y * bitmap.BackBufferStride);
for (int x = 0; x < width; x++)
for (int i = 0; i < PIXEL_SIZE; i++)
row[x * PIXEL_SIZE + i] = (byte)Math.Max(row[x * PIXEL_SIZE + i] - level, 0);
}
bitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));
bitmap.Unlock();
return bitmap;
}
Hope you found this useful.
Thursday, February 3, 2011
How to Brighten an Image in WPF
Now I'm just getting carried away with playing with image manipulation in WPF. Here's a short post on how to brighten an image using the WriteableBitmap class.
The process is fairly simple, I manipulate each pixel by incrementing each RGB value with the provided level
Hope you found this useful
The process is fairly simple, I manipulate each pixel by incrementing each RGB value with the provided level
unsafe static BitmapSource Brighten(BitmapSource image, double level)
{
const int PIXEL_SIZE = 4;
int height = image.PixelHeight;
int width = image.PixelWidth;
var bitmap = new WriteableBitmap(image);
bitmap.Lock();
var backBuffer = (byte*)bitmap.BackBuffer.ToPointer();
for (int y = 0; y < height; y++)
{
var row = backBuffer + (y * bitmap.BackBufferStride);
for (int x = 0; x < width; x++)
for (int i = 0; i < PIXEL_SIZE; i++)
row[x * PIXEL_SIZE + i] = (byte)Math.Min(row[x * PIXEL_SIZE + i] + level, 255);
}
bitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));
bitmap.Unlock();
return bitmap;
}
Hope you found this useful
Wednesday, February 2, 2011
How to Alpha Blend 2 Images in WPF
After having such fun trying to find optimal ways of manipulating images in WPF I decided to write another short post on image manipulation. This time I'd like to demonstrate how to alpha blend 2 images using the WriteableBitmap class.
I'm probably not the best one to explain how alpha blending is done but here's the idea in a nutshell. I get the RGB values of every pixel for the each image and write them to a new bitmap where I manipulate each color information by applying the following formula:
r = ((image1 pixel (red) * alpha level) + (image2 pixel (red) * inverse alpha level)) / 256
b = ((image1 pixel (blue) * alpha level) + (image2 pixel (blue) * inverse alpha level)) / 256
g = ((image1 pixel (green) * alpha level) + (image2 pixel (green) * inverse alpha level)) / 256
The method above will probably work best if the 2 images are of the same size. I hope you found this information useful.
I'm probably not the best one to explain how alpha blending is done but here's the idea in a nutshell. I get the RGB values of every pixel for the each image and write them to a new bitmap where I manipulate each color information by applying the following formula:
r = ((image1 pixel (red) * alpha level) + (image2 pixel (red) * inverse alpha level)) / 256
b = ((image1 pixel (blue) * alpha level) + (image2 pixel (blue) * inverse alpha level)) / 256
g = ((image1 pixel (green) * alpha level) + (image2 pixel (green) * inverse alpha level)) / 256
unsafe static WriteableBitmap AlphaBlend(BitmapSource image1, BitmapSource image2, int alphaLevel)
{
const int PIXEL_SIZE = 4;
int ialphaLevel = 256 - alphaLevel;
int height = Math.Min(image1.PixelHeight, image2.PixelHeight);
int width = Math.Min(image1.PixelWidth, image2.PixelWidth);
var bitmap = new WriteableBitmap(width, height, image1.DpiX, image1.DpiY, PixelFormats.Bgr32, null);
var bitmap1 = new WriteableBitmap(image1);
var bitmap2 = new WriteableBitmap(image2);
bitmap.Lock();
bitmap1.Lock();
bitmap2.Lock();
var backBuffer = (byte*)bitmap.BackBuffer.ToPointer();
var bitmap1Buffer = (byte*)bitmap1.BackBuffer.ToPointer();
var bitmap2Buffer = (byte*)bitmap2.BackBuffer.ToPointer();
for (int y = 0; y < height; y++)
{
var row = backBuffer + (y * bitmap.BackBufferStride);
var img1Row = bitmap1Buffer + (y * bitmap1.BackBufferStride);
var img2Row = bitmap2Buffer + (y * bitmap2.BackBufferStride);
for (int x = 0; x < width; x++)
for (int i = 0; i < PIXEL_SIZE; i++)
row[x * PIXEL_SIZE + i] = (byte)(((img1Row[x * PIXEL_SIZE + i] * alphaLevel) + (img2Row[x * PIXEL_SIZE + i] * ialphaLevel)) >> 8);
}
bitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));
bitmap2.Unlock();
bitmap1.Unlock();
bitmap.Unlock();
return bitmap;
}
The method above will probably work best if the 2 images are of the same size. I hope you found this information useful.
Tuesday, February 1, 2011
How to convert an image to gray scale in WPF
I've been playing with the Windows Presentation Foundation today and I had a task where I needed to convert an image to gray scale to do some image analysis on it. I've done this a bunch of times before using GDI methods or by accessing the BitmapData class in .NET. For this short post I'd like to demonstrate how to manipulate images using the WriteableBitmap class.
The easiest way to convert an image to gray scale is to set the RGB values of every pixel to the average of each pixels RBG values.
R = (R + B + G) / 3
G = (R + B + G) / 3
B = (R + B + G) / 3
Here's a code snippet for manipulating a BitmapSource object using the WriteableBitmap class into a gray scale image:
Another way to to convert an image to gray scale is to set the RGB values of every pixel to the sum of 30% of the red value, 59% of the green value, and 11% of the blue value. Hope you find this useful.
The easiest way to convert an image to gray scale is to set the RGB values of every pixel to the average of each pixels RBG values.
R = (R + B + G) / 3
G = (R + B + G) / 3
B = (R + B + G) / 3
Here's a code snippet for manipulating a BitmapSource object using the WriteableBitmap class into a gray scale image:
public unsafe static BitmapSource ToGrayScale(BitmapSource source)
{
const int PIXEL_SIZE = 4;
int width = source.PixelWidth;
int height = source.PixelHeight;
var bitmap = new WriteableBitmap(source);
bitmap.Lock();
var backBuffer = (byte*)bitmap.BackBuffer.ToPointer();
for (int y = 0; y < height; y++)
{
var row = backBuffer + (y * bitmap.BackBufferStride);
for (int x = 0; x < width; x++)
{
var grayScale = (byte)(((row[x * PIXEL_SIZE + 1]) + (row[x * PIXEL_SIZE + 2]) + (row[x * PIXEL_SIZE + 3])) / 3);
for (int i = 0; i < PIXEL_SIZE; i++)
row[x * PIXEL_SIZE + i] = grayScale;
}
}
bitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));
bitmap.Unlock();
return bitmap;
}
Another way to to convert an image to gray scale is to set the RGB values of every pixel to the sum of 30% of the red value, 59% of the green value, and 11% of the blue value. Hope you find this useful.
Thursday, January 20, 2011
Multi-platform Mobile Development - Sending SMS
This is a task that pretty much every mobile device can do, or at least any mobile phone can do. In this short post on multi-platform mobile development I would like to demonstrate how to send an SMS or launch the SMS compose window in a mobile application.
I'm going to demonstrate how to use the messaging API's of the following platforms:
Android
There are 2 ways of sending SMS from an Android application: Launching the Compose SMS window; Through the SmsManager API. I figured that since this article is supposed to demonstrate as many ways as possible for sending SMS that I create a helper class containing methods that I think would be useful or at least convenient to have.
Here's a SMS helper class for Android that I hope you would find useful.
Before your Android application can send SMS it needs the right permissions for it. Add the SEND_SMS permission your AndroidManifest.xml
Here are some examples on how to use the SMS helper class defined above from within an Activity class:
Windows Phone 7
This platform unfortunately doesn't provide as vast a API collection compared to Android and Windows Mobile. To send an SMS in Windows Phone 7, you will have to use the SMS Compose page in the built-in messaging application. To launch this we call the Show() method in SmsComposeTask.
Here's how to use SmsComposeTask
Windows Mobile 5.0 (and higher) using .NET Compact Framework
Sending an SMS in this platform is just as easy as doing so in Windows Phone 7. Windows Mobile provides native API's for the Short Messaging System, these methods are exposed as C type methods in a DLL called sms.dll. Aside from the SMS API, the platform also offers another API called the Messaging API (CE MAPI) for sending SMS, MMS, and Emails. Microsoft has provided managed wrappers for these and many other API's to make the life of the managed code developer a lot easier.
To send an SMS in Windows Mobile 5.0 (and higher) we use the SmsMessage object. There are 2 ways of accomplishing this: Using the Send() method of the SmsMessage class; Sending the SMS using the Compose SMS application
Here's a snippet on how to send SMS using the Send() method
Here's a snippet on how to send SMS using the Compose SMS application
The code above depends on 2 assemblies that must be referenced to the project:
It is also possible to P/Invoke the SMS API through sms.dll, but this requires a slightly more complicated solution. In the next section, I will demonstrate how use the SMS API in native code. This should give you an idea on how to use the SMS API if you would like to go try the P/Invoke approach.
Windows Mobile using the Platform SDK (Native code)
Probably not very relevant for most modern day managed code developers but just to demonstrate as many ways to send SMS in as many platforms as possible I'd like to show how to send SMS in native code using the Windows CE Short Message Service (SMS) API.
Here's a sample C++ helper class for sending SMS using the Platform SDK
The code above requires the that the project is linked with sms.lib, otherwise you won't be able to build.
Here's a snippet of how to use the SMS helper class defined above:
For those who don't know what +14250010001 is, this is the phone number of the Windows Mobile emulator. For testing SMS functionality on the emulator, you can use this phone number.
That's it for now. I hope you found this article interesting.
I'm going to demonstrate how to use the messaging API's of the following platforms:
- Android
- Windows Phone 7
- Windows Mobile 5.0 (and higher) using .NET Compact Framework
- Windows Mobile using the Platform SDK (Native code)
Android
There are 2 ways of sending SMS from an Android application: Launching the Compose SMS window; Through the SmsManager API. I figured that since this article is supposed to demonstrate as many ways as possible for sending SMS that I create a helper class containing methods that I think would be useful or at least convenient to have.
Here's a SMS helper class for Android that I hope you would find useful.
Before your Android application can send SMS it needs the right permissions for it. Add the SEND_SMS permission your AndroidManifest.xml
<uses-permission android:name="android.permission.SEND_SMS"></uses-permission>
Here are some examples on how to use the SMS helper class defined above from within an Activity class:
Windows Phone 7
This platform unfortunately doesn't provide as vast a API collection compared to Android and Windows Mobile. To send an SMS in Windows Phone 7, you will have to use the SMS Compose page in the built-in messaging application. To launch this we call the Show() method in SmsComposeTask.
Here's how to use SmsComposeTask
SmsComposeTask launcher = new SmsComposeTask();
launcher.To = "+45 12 34 56 78";
launcher.Body = "Multi-platform Mobile Development";
launcher.Show();
Windows Mobile 5.0 (and higher) using .NET Compact Framework
Sending an SMS in this platform is just as easy as doing so in Windows Phone 7. Windows Mobile provides native API's for the Short Messaging System, these methods are exposed as C type methods in a DLL called sms.dll. Aside from the SMS API, the platform also offers another API called the Messaging API (CE MAPI) for sending SMS, MMS, and Emails. Microsoft has provided managed wrappers for these and many other API's to make the life of the managed code developer a lot easier.
To send an SMS in Windows Mobile 5.0 (and higher) we use the SmsMessage object. There are 2 ways of accomplishing this: Using the Send() method of the SmsMessage class; Sending the SMS using the Compose SMS application
Here's a snippet on how to send SMS using the Send() method
SmsMessage sms = new SmsMessage("+45 12 34 56 78", "Multi-platform Mobile Development");
sms.Send();
Here's a snippet on how to send SMS using the Compose SMS application
SmsMessage sms = new SmsMessage("+45 12 34 56 78", "Multi-platform Mobile Development");
MessagingApplication.DisplayComposeForm(sms);
The code above depends on 2 assemblies that must be referenced to the project:
- Microsoft.WindowsMobile.dll
- Microsoft.WindowsMobile.PocketOutlook.dll
It is also possible to P/Invoke the SMS API through sms.dll, but this requires a slightly more complicated solution. In the next section, I will demonstrate how use the SMS API in native code. This should give you an idea on how to use the SMS API if you would like to go try the P/Invoke approach.
Windows Mobile using the Platform SDK (Native code)
Probably not very relevant for most modern day managed code developers but just to demonstrate as many ways to send SMS in as many platforms as possible I'd like to show how to send SMS in native code using the Windows CE Short Message Service (SMS) API.
Here's a sample C++ helper class for sending SMS using the Platform SDK
#include "stdafx.h"
#include "sms.h"
#include <string>
class SmsMessage
{
private:
std::wstring recipient;
std::wstring message;
public:
SmsMessage(const wchar_t* phoneNumber, const wchar_t* text)
{
recipient = phoneNumber;
message = text;
}
void Send()
{
SMS_HANDLE smshHandle;
HRESULT hr = SmsOpen(SMS_MSGTYPE_TEXT, SMS_MODE_SEND, &smshHandle, NULL);
if (hr != S_OK)
return;
SMS_ADDRESS smsaDestination;
memset (&smsaDestination, 0, sizeof (smsaDestination));
smsaDestination.smsatAddressType = SMSAT_INTERNATIONAL;
lstrcpy(smsaDestination.ptsAddress, recipient.c_str());
TEXT_PROVIDER_SPECIFIC_DATA tpsd;
tpsd.dwMessageOptions = PS_MESSAGE_OPTION_NONE;
tpsd.psMessageClass = PS_MESSAGE_CLASS1;
tpsd.psReplaceOption = PSRO_NONE;
SMS_MESSAGE_ID smsmidMessageID = 0;
hr = SmsSendMessage(smshHandle,
NULL,
&smsaDestination,
NULL,
(PBYTE) message.c_str(),
(message.length() + 1) * sizeof(wchar_t),
(PBYTE) &tpsd,
sizeof(TEXT_PROVIDER_SPECIFIC_DATA),
SMSDE_OPTIMAL,
SMS_OPTION_DELIVERY_NONE,
&smsmidMessageID);
SmsClose (smshHandle);
}
};
The code above requires the that the project is linked with sms.lib, otherwise you won't be able to build.
Here's a snippet of how to use the SMS helper class defined above:
SmsMessage *sms = new SmsMessage(L"+14250010001", L"Multi-platform Mobile Development");
sms->Send();
delete sms;
For those who don't know what +14250010001 is, this is the phone number of the Windows Mobile emulator. For testing SMS functionality on the emulator, you can use this phone number.
That's it for now. I hope you found this article interesting.
Wednesday, January 19, 2011
Multi-platform Mobile Development - Creating a List Based UI
Here's the first installment on my series on multi-platform mobile development articles. A common practice on displaying information to a mobile device user is a list. A list is one of the best ways to display a group of information allowing the user to easily select which specific details he/she wishes to display.
A good example of decent list implementations is the Inbox on pretty much all mobile devices. Most Inbox list implementations display sender, title, date, size, and a preview of the message body. A good list is not only bound to textual information but also visual. Most Inbox implementation displays the information using bold fonts if the message is unread
In this article I would like to demonstrate how to implement customized list based UI's on the following platforms:
Let's get started...
Windows Phone 7
This is definitely the easiest platform to target, in fact this is by far the easiest platform I've ever worked with. Development times on this platform are a lot shorter than any other platform I've worked with. I've been working with Windows CE based phones for the last 7 or so and I definitely think that this is the best Windows CE based OS ever. There unfortunately a few down sides like lack of a native code API and limited platform integration, but considering the performance and development ease, it is for most cases worth it. The best part with designing UI's for Windows Phone 7 is that I don't have to care about the design very much, I just ask my designer / graphic artist to shine up my XAML file and I can concentrate on the code.
A Visual Studio 2010 project template is actually provided by default for creating a list based UI makes things easier. This project template is called a Windows Phone Databound Applicaton, the description goes "A project for creating Windows Phone applications using List and Navigation controls". This project creates 2 pages, one for displaying the list, and the other for displaying details of this list.
The code examples for Windows Phone 7 uses the Model-View-ViewModel. This pattern is heavily used and I guess one can say an accepted standard in developing Windows Phone 7 applications. I'm not gonna go deep into the pattern in this article, so I assume that you do a bit of home work on MVVM.
To display a list Windows Phone 7 we use the ListBox control in XAML. This will represent the View.
Our ViewModel is implemented in code. A ViewModel class should implement the INotifyPropertyChanged interface for the View to be able to respond to changes in the ViewModel.
The ViewModel code above contains an instance of the Model. The Model in this naive example just returns a populated collection of ItemViewModel.
Here's how the application looks like:
Windows Mobile
This is actually a pretty decent platform and offers a huge selection of low level API's for platform integration. The OS also offers full multi tasking and the ability to create applications that run behind scenes. The down side of course to all that fun stuff is that you have to do a lot of things the hard way. Implementing a decent list based UI in this platforms can be done in 2 ways: Using the Windows CE custom drawing service; Creating an Owner Drawn List Control. Both require writing a few hundred lines of code.
For this example we create an Owner Drawn List. For those who are not familiar what that means, we draw the entire control from scratch, manually. We create a class that inherits from System.Windows.Forms.Control (the base class of all UI components) and override the drawing, resizing, and input methods. It's a bit tedious, but most of the code in owner drawn controls can be re-used as base classes for other owner drawn controls.
Let's start off with creating an owner drawn list base class.
The class above implements the basic functionality of an owner drawn list. It hands resizing the off screen bitmap that serves as a double buffer, handles the scroll bar visibility, and handles updating the selected index. One can implement responding to keyboard input or gestures from here as well.
Next we create a class where we define how the control is drawn. This class inherits from our owner drawn list base class.
Once that is in place you can just drag it in from the toolbox or dynamically add it to the Form in runtime.
Here's how the custom list view looks like in a Windows Mobile 6.5.3 emulator
You can grab the source for Windows Mobile application above here.
Android
Creating decent list based UI's is also pretty easy. The designer experience is unfortunately not as elegant as what Windows Phone 7 has to offer, but shares the same idea. The user interface layout of Android applications are described in XML files and are parsed during runtime. In some occasions it seems easier to create the UI layout in runtime through code instead of struggling with the UI designer. This is probably because of my lack of patience with the tool or because of my lack of experience using it. Either way, I think it could have been done in a much smarter way.
To create a list based UI in Android we can create a class that extends from the ListActivity class. The ListActivity base class contains a List control set to fill the parent, it comes in handy if you want a UI with nothing but a list control. In android development, you usually setup the UI and do other initialization methods in the onCreate() method, our example will do the same. We set the data source of our list control by calling setListAdapter().
To have a more flexible and customizable we use the ArrayAdapter for presenting our data source to the screen. To optimize performance, we use an object called convertView that ArrayAdapter exposes, we can store a single instance of a class containing UI text components and just update the text for that instance. This is done by overriding the ArrayAdapter getView method.
Here's the code for implementing the ListActivity and ArrayAdapter
Here's how the XML layout file is for the list item (list_item.xml)
Here's how the applications looks like on an Android 2.3 emulator
You can grab the source for Android application above here.
So this basically all I have for now. I plan to go into detail by breaking down each part of the code samples I provided for all 3 platforms, or perhaps add another platform as well. I hope you found this useful.
A good example of decent list implementations is the Inbox on pretty much all mobile devices. Most Inbox list implementations display sender, title, date, size, and a preview of the message body. A good list is not only bound to textual information but also visual. Most Inbox implementation displays the information using bold fonts if the message is unread
In this article I would like to demonstrate how to implement customized list based UI's on the following platforms:
- Windows Phone 7
- Windows Mobile using .NET Compact Framework
- Android
Let's get started...
Windows Phone 7
This is definitely the easiest platform to target, in fact this is by far the easiest platform I've ever worked with. Development times on this platform are a lot shorter than any other platform I've worked with. I've been working with Windows CE based phones for the last 7 or so and I definitely think that this is the best Windows CE based OS ever. There unfortunately a few down sides like lack of a native code API and limited platform integration, but considering the performance and development ease, it is for most cases worth it. The best part with designing UI's for Windows Phone 7 is that I don't have to care about the design very much, I just ask my designer / graphic artist to shine up my XAML file and I can concentrate on the code.
A Visual Studio 2010 project template is actually provided by default for creating a list based UI makes things easier. This project template is called a Windows Phone Databound Applicaton, the description goes "A project for creating Windows Phone applications using List and Navigation controls". This project creates 2 pages, one for displaying the list, and the other for displaying details of this list.
The code examples for Windows Phone 7 uses the Model-View-ViewModel. This pattern is heavily used and I guess one can say an accepted standard in developing Windows Phone 7 applications. I'm not gonna go deep into the pattern in this article, so I assume that you do a bit of home work on MVVM.
To display a list Windows Phone 7 we use the ListBox control in XAML. This will represent the View.
<ListBox ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Our ViewModel is implemented in code. A ViewModel class should implement the INotifyPropertyChanged interface for the View to be able to respond to changes in the ViewModel.
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class ItemViewModel : ViewModelBase
{
private string _lineOne;
public string LineOne
{
get { return _lineOne; }
set
{
if (value != _lineOne)
{
_lineOne = value;
NotifyPropertyChanged("LineOne");
}
}
}
private string _lineTwo;
public string LineTwo
{
get { return _lineTwo; }
set
{
if (value != _lineTwo)
{
_lineTwo = value;
NotifyPropertyChanged("LineTwo");
}
}
}
}
public class MainViewModel : ViewModelBase
{
private MainModel model;
public MainViewModel()
{
model = new MainModel();
Items = model.GetData();
}
public ObservableCollection<ItemViewModel> Items { get; private set; }
}
The ViewModel code above contains an instance of the Model. The Model in this naive example just returns a populated collection of ItemViewModel.
public class MainModel
{
public ObservableCollection<ItemViewModel> GetData()
{
return new ObservableCollection<ItemViewModel>
{
new ItemViewModel() { LineOne = "runtime one", LineTwo = "Maecenas praesent accumsan bibendum" },
new ItemViewModel() { LineOne = "runtime two", LineTwo = "Dictumst eleifend facilisi faucibus" },
new ItemViewModel() { LineOne = "runtime three", LineTwo = "Habitant inceptos interdum lobortis" },
new ItemViewModel() { LineOne = "runtime four", LineTwo = "Nascetur pharetra placerat pulvinar" }
};
}
}
Here's how the application looks like:
Windows Mobile
This is actually a pretty decent platform and offers a huge selection of low level API's for platform integration. The OS also offers full multi tasking and the ability to create applications that run behind scenes. The down side of course to all that fun stuff is that you have to do a lot of things the hard way. Implementing a decent list based UI in this platforms can be done in 2 ways: Using the Windows CE custom drawing service; Creating an Owner Drawn List Control. Both require writing a few hundred lines of code.
For this example we create an Owner Drawn List. For those who are not familiar what that means, we draw the entire control from scratch, manually. We create a class that inherits from System.Windows.Forms.Control (the base class of all UI components) and override the drawing, resizing, and input methods. It's a bit tedious, but most of the code in owner drawn controls can be re-used as base classes for other owner drawn controls.
Let's start off with creating an owner drawn list base class.
abstract class OwnerDrawnListBase<T> : Control
{
int selectedIndex;
int visibleItemsPortrait;
int visibleItemsLandscape;
VScrollBar scrollBar;
protected OwnerDrawnListBase()
: this(7, 4)
{
}
protected OwnerDrawnListBase(int visibleItemsPortrait, int visibleItemsLandscape)
{
this.visibleItemsPortrait = visibleItemsPortrait;
this.visibleItemsLandscape = visibleItemsLandscape;
Items = new List<T>();
scrollBar = new VScrollBar { Parent = this, Visible = false, SmallChange = 1 };
scrollBar.ValueChanged += (sender, e) => Invalidate();
}
public List<T> Items { get; private set; }
public int SelectedIndex
{
get { return selectedIndex; }
set
{
selectedIndex = value;
if (SelectedIndexChanged != null)
SelectedIndexChanged(this, EventArgs.Empty);
Invalidate();
}
}
public event EventHandler SelectedIndexChanged;
protected virtual void OnSelectedIndexChanged(EventArgs e)
{
if (SelectedIndexChanged != null)
SelectedIndexChanged(this, e);
}
public T SelectedItem
{
get
{
if (selectedIndex >= 0 && selectedIndex < Items.Count)
return Items[selectedIndex];
else
return null;
}
}
protected Bitmap OffScreen { get; private set; }
protected int VisibleItems
{
get
{
if (Screen.PrimaryScreen.Bounds.Height > Screen.PrimaryScreen.Bounds.Width)
return visibleItemsPortrait;
else
return visibleItemsLandscape;
}
}
protected int ItemHeight
{
get { return Height / VisibleItems; }
}
protected int ScrollPosition
{
get { return scrollBar.Value; }
}
protected bool ScrollBarVisible
{
get { return scrollBar.Visible; }
}
protected int ScrollBarWidth
{
get { return scrollBar.Width; }
}
protected int DrawCount
{
get
{
if (ScrollPosition + scrollBar.LargeChange > scrollBar.Maximum)
return scrollBar.Maximum - ScrollPosition + 1;
else
return scrollBar.LargeChange;
}
}
#region Overrides
protected override void OnResize(EventArgs e)
{
scrollBar.Bounds = new Rectangle(
ClientSize.Width - scrollBar.Width,
0,
scrollBar.Width,
ClientSize.Height);
Dispose(OffScreen);
if (Items.Count > VisibleItems)
{
scrollBar.Visible = true;
scrollBar.LargeChange = VisibleItems;
OffScreen = new Bitmap(ClientSize.Width - scrollBar.Width, ClientSize.Height);
}
else
{
scrollBar.Visible = false;
scrollBar.LargeChange = Items.Count;
OffScreen = new Bitmap(ClientSize.Width, ClientSize.Height);
}
DrawBorder();
scrollBar.Maximum = Items.Count - 1;
}
private void DrawBorder()
{
using (var gfx = Graphics.FromImage(OffScreen))
using (var pen = new Pen(SystemColors.ControlText))
gfx.DrawRectangle(pen, new Rectangle(0, 0, OffScreen.Width - 1, OffScreen.Height - 1));
}
protected override void OnMouseDown(MouseEventArgs e)
{
// Update the selected index based on where the user clicks
SelectedIndex = scrollBar.Value + (e.Y / ItemHeight);
if (SelectedIndex > Items.Count - 1)
SelectedIndex = -1;
if (!Focused)
Focus();
base.OnMouseUp(e);
}
protected override void OnPaintBackground(PaintEventArgs e)
{
// To avoid flickering, do all drawing in OnPaint
}
protected override void Dispose(bool disposing)
{
if (disposing)
Dispose(OffScreen);
base.Dispose(disposing);
}
#endregion
protected static void Dispose(IDisposable obj)
{
if (obj != null)
{
obj.Dispose();
obj = null;
}
}
}
The class above implements the basic functionality of an owner drawn list. It hands resizing the off screen bitmap that serves as a double buffer, handles the scroll bar visibility, and handles updating the selected index. One can implement responding to keyboard input or gestures from here as well.
Next we create a class where we define how the control is drawn. This class inherits from our owner drawn list base class.
class CustomListViewItem
{
public string LineOne { get; set; }
public string LineTwo { get; set; }
}
class CustomListView : OwnerDrawnListBase<CustomListViewItem>
{
const int topleft = 3;
StringFormat noWrap;
Pen pen;
SolidBrush backgroundBrush;
SolidBrush selectedBrush;
SolidBrush selectedTextBrush;
SolidBrush textBrush;
Font headerFont;
public override Font Font
{
get { return base.Font; }
set
{
base.Font = value;
Dispose(headerFont);
headerFont = new Font(value.Name, value.Size, FontStyle.Bold);
}
}
public CustomListView()
{
pen = new Pen(ForeColor);
textBrush = new SolidBrush(ForeColor);
backgroundBrush = new SolidBrush(BackColor);
selectedTextBrush = new SolidBrush(SystemColors.HighlightText);
selectedBrush = new SolidBrush(SystemColors.Highlight);
noWrap = new StringFormat(StringFormatFlags.NoWrap);
headerFont = new Font(base.Font.Name, base.Font.Size, FontStyle.Bold);
}
protected override void OnPaint(PaintEventArgs e)
{
using (var gfx = Graphics.FromImage(OffScreen))
{
gfx.FillRectangle(backgroundBrush, 1, 1, Width - 2, Height - 2);
int top = 1;
bool lastItem = false;
bool itemSelected = false; ;
for (var i = ScrollPosition; i < ScrollPosition + DrawCount; i++)
{
if (top > 1)
lastItem = Height - 1 < top;
// Fill the rectangle if the item is selected
itemSelected = i == SelectedIndex;
if (itemSelected)
{
if (!lastItem)
{
gfx.FillRectangle(
selectedBrush,
1,
(i == ScrollPosition) ? top : top + 1,
ClientSize.Width - (ScrollBarVisible ? ScrollBarWidth : 2),
(i == ScrollPosition) ? ItemHeight : ItemHeight - 1);
}
else
{
gfx.FillRectangle(
selectedBrush,
1,
top + 1,
ClientSize.Width - (ScrollBarVisible ? ScrollBarWidth : 1),
ItemHeight);
}
}
// Draw seperator lines after each item unless the item is the last item in the list
if (!lastItem)
{
gfx.DrawLine(
pen,
1,
top + ItemHeight,
ClientSize.Width - (ScrollBarVisible ? ScrollBarWidth : 2),
top + ItemHeight);
}
// Get the dimensions for creating the drawing areas
var item = Items[i];
var size = gfx.MeasureString(item.LineOne, Font);
var rectheight = ItemHeight - (int)size.Height - 6;
var rectwidth = ClientSize.Width - (ScrollBarVisible ? ScrollBarWidth : 5);
// Draw line one with an offset of 3 pixels from the top of the rectangle
// using a bold font (no text wrapping)
gfx.DrawString(
item.LineOne,
headerFont,
(i == SelectedIndex) ? selectedTextBrush : textBrush,
new RectangleF(topleft, top + 3, rectwidth, rectheight),
noWrap);
// Draw line two with an offset of 3 pixels from the bottom of line one
// (no text wrapping)
gfx.DrawString(
item.LineTwo,
Font,
(i == SelectedIndex) ? selectedTextBrush : textBrush,
new RectangleF(topleft, top + size.Height + 6, rectwidth, rectheight),
noWrap);
// Set the top for the next item
top += ItemHeight;
}
e.Graphics.DrawImage(OffScreen, 0, 0);
}
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
Dispose(headerFont);
Dispose(backgroundBrush);
Dispose(textBrush);
Dispose(selectedTextBrush);
Dispose(selectedBrush);
Dispose(pen);
}
base.Dispose(disposing);
}
}
Once that is in place you can just drag it in from the toolbox or dynamically add it to the Form in runtime.
var lv = new CustomListView();
lv.Dock = DockStyle.Fill;
Controls.Add(lv);
lv.Items.AddRange(new List<CustomListViewItem>
{
new CustomListViewItem { LineOne = "runtime one", LineTwo = "Maecenas praesent accumsan bibendum" },
new CustomListViewItem { LineOne = "runtime two", LineTwo = "Dictumst eleifend facilisi faucibus" },
new CustomListViewItem { LineOne = "runtime three", LineTwo="Habitant inceptos interdum lobortis" },
new CustomListViewItem { LineOne = "runtime four", LineTwo="Nascetur pharetra placerat pulvinar" },
new CustomListViewItem { LineOne = "runtime five", LineTwo = "Maecenas praesent accumsan bibendum" },
new CustomListViewItem { LineOne = "runtime six", LineTwo = "Dictumst eleifend facilisi faucibus" },
new CustomListViewItem { LineOne = "runtime seven", LineTwo="Habitant inceptos interdum lobortis" },
new CustomListViewItem { LineOne = "runtime eight", LineTwo="Nascetur pharetra placerat pulvinar" }
});
Here's how the custom list view looks like in a Windows Mobile 6.5.3 emulator
You can grab the source for Windows Mobile application above here.
Android
Creating decent list based UI's is also pretty easy. The designer experience is unfortunately not as elegant as what Windows Phone 7 has to offer, but shares the same idea. The user interface layout of Android applications are described in XML files and are parsed during runtime. In some occasions it seems easier to create the UI layout in runtime through code instead of struggling with the UI designer. This is probably because of my lack of patience with the tool or because of my lack of experience using it. Either way, I think it could have been done in a much smarter way.
To create a list based UI in Android we can create a class that extends from the ListActivity class. The ListActivity base class contains a List control set to fill the parent, it comes in handy if you want a UI with nothing but a list control. In android development, you usually setup the UI and do other initialization methods in the onCreate() method, our example will do the same. We set the data source of our list control by calling setListAdapter().
To have a more flexible and customizable we use the ArrayAdapter
Here's the code for implementing the ListActivity and ArrayAdapter
Here's how the XML layout file is for the list item (list_item.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="@+id/lineOne"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="12dp"
android:paddingLeft="12dp"
android:textSize="18sp"
android:textStyle="bold"
/>
<TextView
android:id="@+id/lineTwo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="12dp"
android:paddingBottom="12dp"
/>
</LinearLayout>
Here's how the applications looks like on an Android 2.3 emulator
You can grab the source for Android application above here.
So this basically all I have for now. I plan to go into detail by breaking down each part of the code samples I provided for all 3 platforms, or perhaps add another platform as well. I hope you found this useful.