Day 20 & 21: Fixed SQL Server CE Image loading issue

It was a tough couple of days trying to get data out of the SQL Server CE DB. After referring to many articles, found a way to convert the System.Data.Linq.Binary type to a byte array, and in turn convert it to the intended System.Windows.Controls.Media.Image data type by using an intermediary BitMapImage data type.

But I couldn't test this since I was faced with another issue of setting up a connection string to the DataContext class that was generated by the SQL Server CE Toolbox component. What I have learnt is, when a password is used upon the DB, it uses some encryption,and the contents of it cannot be viewed through Visual Studio 2010 or any other Desktop DB extraction tool. This was annoying. Removing the password did give relief to some extent, yet database was not found kind of an exception occurred. After several twists here and there, I was able to see my food menu images on the simulator around 3.00am. Yippee...!

Yet I thought of writing up an article later about the different kinds of issues and achievements made in making a connection to the DB and retrieving images and etc, since there aren't many content on the web that address these issues in detail.

Looking forward to finish the Menu Selection page tonight.

Day 19: Retrieving Image from SQL Server CE problem

Last night was able to manage a couple of things:

• Windows Phone Silverlight Toolkit resolved by worry of an alternative to Combo box. This toolkit provides a control called the ListPicker, which more or less acts the same way as a conventional drop down menu.
• Managed to get the 3D Image Carousel control rendering on my Mobile Application project.
• Got the DataContext classes for the tables of the SQL Server CE DB auto generated from the SQL Server CE Server Explorer.

The existing 3D Image Carousel control code expects a URL of Images from the local storage and renders the images on the screen. But my need was to load the images from the DB. So I had to do some changes to the existing code:

This is the existing code:

 // dependency property  
     public static DependencyProperty ListImagesCarouselProperty =  
     DependencyProperty.Register("ListImagesCarousel", typeof(List<string>), typeof(Carousel3D), new PropertyMetadata(null));  
     public List<string> ListImagesCarousel  
     {  
       get  
       {  
         return (List<string>)GetValue(ListImagesCarouselProperty);  
       }  
       set  
       {  
         SetValue(ListImagesCarouselProperty, value);  
         // set visibility to Visible -> this shows up all controls on UI  
         gridMainCarousel.Visibility = System.Windows.Visibility.Visible;  
         AddImagesToCarousel();  
         // set position to center of images  
         SetIndex(_images.Count / 2);  
         Start();  
       }  
     }  
  // Add images to Canvas  
     private void AddImagesToCarousel()  
     {  
       if (ListImagesCarousel != null && ListImagesCarousel.Count > 0)  
       {  
         for (int i = 0; i < ListImagesCarousel.Count; i++)  
         {  
           // get the image url  
           string url = ListImagesCarousel[i];  
           Image image = new Image();  
           image.Source = new BitmapImage(new Uri(url, UriKind.RelativeOrAbsolute));  
           // TAG is used as an identifier for images  
           image.Tag = i.ToString();  
           // event Tapped to find selected image  
           image.Tap += image_Tap;  
           // add and set image position  
           LayoutRoot.Children.Add(image);  
           SetPosImage(image, i);  
           _images.Add(image);  
         }  
       }  
     }  

MSDN describes the Dependency Property as:

Dependency properties and the WPF property system extend property functionality by providing a type that backs a property, as an alternative implementation to the standard pattern of backing the property with a private field.

The first line would change as:

 public static DependencyProperty ListImagesCarouselProperty =    
   DependencyProperty.Register("ListImagesCarousel", typeof(List<Image>), typeof(Carousel3D), new PropertyMetadata(null));    

The remaining code in the Carousel control class was changed as highlighted in color.

   public List<Image> ListImagesCarousel   
    {   
     get   
     {   
      return (List<Image>)GetValue(ListImagesCarouselProperty);   
     }   
     set   
     {   
      SetValue(ListImagesCarouselProperty, value);   
      // set visibility to Visible -> this shows up all controls on UI   
      gridMainCarousel.Visibility = System.Windows.Visibility.Visible;   
      AddImagesToCarousel();   
      // set position to center of images   
      SetIndex(_images.Count / 2);   
      Start();   
     }   
    }   
  // Add images to Canvas   
    private void AddImagesToCarousel()   
    {   
     if (ListImagesCarousel != null && ListImagesCarousel.Count > 0)   
     {   
      for (int i = 0; i < ListImagesCarousel.Count; i++)   
      {   
       // get the image url   
       //string url = ListImagesCarousel[i];   
       Image image = new Image();   
       //image.Source = new BitmapImage(new Uri(url, UriKind.RelativeOrAbsolute));  
       image = ListImagesCarousel[i];  
       // TAG is used as an identifier for images   
       image.Tag = i.ToString();   
       // event Tapped to find selected image   
       image.Tap += image_Tap;   
       // add and set image position   
       LayoutRoot.Children.Add(image);   
       SetPosImage(image, i);   
       _images.Add(image);   
      }   
     }   
    }  

All this was fine, and I used a separate business logic class to retrieve the menu images using LINQ. The images are returned as a System.Data.Linq.Binary type from the auto generated data-context class. But there was a problem mapping it to a System.Windows.Controls.Image data type, as the Image type used in the above code is actually the fore mentioned type. Hope to find a solution for it tonight.

Day 18: Added data to the SQL Server CE

It wasn't a productive weekend. Inserting an image into a SQL CE table is different from the bigger versions of SQL Server. After some search on the internet, with the help of the already installed SQL CE Toolbox controls, I was able to add Menu images to the DB. The method of how I inserted images is given below:

By right clicking on the table I selected --> Edit Top 200 Rows and then the below row list appears. I right click on the cell where the image is to be inserted and select "Import Image" where I choose the image.

Day 17: Testing Image carousel

Yesterday, spent time exploring a solution for the image carousel which was previously appearing vertically. A very nice alternative solution was found here, which the solution would only open up on Visual Studio 2012 and on Windows 8, since Visual Studio 2012 IDE for Windows Phone Development is supported only on Windows 8. So I manually added the code and relevant structure to a self made Visual Studio 2010 Windows Phone Application project, and with fixing a few compilation errors, managed to get the image carousel sliding, as shown in the original article. Was also referring to articles and videos on implementing Pivot controls for displaying information. Pivot controls provide a smooth user experience to drill down and visualize information in a nice manner. Unfortunately time wouldn't permit to implement it.

Found a solution for the missing combo box via the "ListPicker" provided by the Windows Phone Toolkit.

All these days I believe I have done sufficient reading for the implementation. Also sample tests for each new area has been experimented. Tonight hope to revise the implementation strategy, identifying key areas to be developed, based on the various technologies and approaches learnt so far.

Day 16: Reading materials on WCF further

While reading more on WCF and Duplex Contract, I came across this article, which explains the usage of WCF Duplex Contract with MSMQ (Microsoft Message Queuing). MSMQ is a free service available on Windows Operating systems which handles incoming message requests from clients connecting to it. In the case of a network dis-connectivity, a previous request would remain in the queue and continue operation once the connection is back. At the same time whenever the server is in a high workload the MSMQ coordinates all requests in an effective manner. This would be handy for my project if MSMQ would support the coordination of XML files. Have read elsewhere about a possibility.

If there are multiple orders made at the same time MSMQ could avoid connectivity failures by functioning as a middle layer. The layout would be something similar to this:

The above image was found on the internet and has been described how the MSMQ service would work for a single client. For the moment I have no idea to implement this and would go ahead without the Queue in the middle. Depending on the time available, I would consider implementing this.

Day 15: WCF Duplex Connectivity & Contracts

Yesterday, i was left with a question on how to trigger notifications to a desktop application from a WCF service. Since the requirement was, if a user notifies the common server that he has arrived at some branch, the notification should be delegated to the correct branch. This could be achieved via WCF Duplex. Utilizing the free time at office tried the example application described at:
http://www.codeproject.com/Articles/491844/A-Beginners-Guide-to-Duplex-WCF

This was a complete new thing to me. While the WCF service defines the client method definitions, the client methods are implemented in the client application and through a special service contract the WCF service is able to call/trigger the client application methods.

Now this example was nicely illustrated between a WCF service and a single desktop application. Have to decide how this could suit my needs where a WCF application, a mobile application and a desktop application are involved.

While trying out the example faced a couple of issues:

• The Visual Studio WCF Test Client was throwing errors every time I tried to run the web service. Later found from MSDN that Duplex Contracts were not supported in the WCF Test Client. Disabled this through the project properties and continued working.
• When trying to run the client application "port 80 being used by another application" error was thrown. As I have experienced the similar error before when dealing with HTTP connectivity, my experience played in to rectify it. The default Skype settings is configured to use port 80. Unless we disable this, no other application would be able to use it.

Have to look forward the service contract implementations in the project.

Day 14: Preparation of other project types and Web Service contracts

Created the WCF service, and Branch Application UI screens. The identified service contracts methods for the common web service are as below:


    [ServiceContract]
    public interface IService1
    {
        // TODO: Add your service operations here

        [OperationContract]
        Int64 SaveOrder(Models.Order order);

        [OperationContract]
        void NotifyArrivalForOtherBranch(Int64 orderID,int currentBranchID,int tableNo);

        [OperationContract]
        void NotifyArrival(Int64 orderID, int tableID);

        [OperationContract]
        void NotifyArrival(Int64 orderID);

        [OperationContract]
        DataSet GetOrderDetails(Int64 orderID);

        [OperationContract]
        int GetTimeForConfiguration(string configuration);

        [OperationContract]
        string GetBranchName(int branchID);

        [OperationContract]
        double GetTotal(int orderID);
       
    }

The methods are yet to be implemented. Planning to create another class to handle the business logic between operations. Have to investigate on how to trigger notifications from the web service to the branch application whenever a user has made a notification of arrival.

Read an article on IsolatedStorage on Windows Phone 7 from the following link:http://www.jeffblankenburg.com/2010/10/15/31-days-of-windows-phone-day-15-isolated-storage/

The article nicely details the Isolated storage options on a Windows Phone. There are basically two ways:

1. Using name-value pairs and storing them as IsolatedSettings, where we can save as Custom objects, given the fact that we retrieve them using an explicit cast.
2. Storing it in the file system of the phone.

Isolated storage means the data resides within the phone, and the storage doesn't allow you to share information externally. I felt that option 1 would suit well to store the Order as an object instead of an XML file. 

Yet needed a way to retrieve initial data for the application such as menu details, location details from the SQL Server CE. Windows Phone 7.1.1 update seems to have LINQ to SQL functionality. Need to get this update.

Day 13: Notify Screen

Designed the notify screen:

This screen will appear when the user has previously placed an order. Still investigating an alternative control/approach for a dropdownlist, as Windows Phone 7 doesn't have such a control. As mentioned earlier the arrival location will be currently set based on the time of the order, but will be replaced to show based on GPS location.

Read part of an article on implementing MVVM for Windows Phone development at http://msdn.microsoft.com/en-us/library/windowsphone/develop/gg521153(v=vs.105).aspx.

The INotifyPropertyChanged interface used upon the Model classes is the key to notify property changes to the views. The PropertyChanged event can be raised on properties that are subtle to change during the application. 

Day 12: Added Confirmation Screen & Preparation of DataContainers

Managed to get the Confirmation screen designed as below:

This will show a summary of the user selection. Once the user clicks on "Place Order" the order will be sent to the Common Server, and the generated Order ID will be displayed as below:

Then the user will be prompted to "Save" the order and the confirmation will be displayed as below:

At this point the buttons need to disappear, which I will fix it in future, or I have to add a "Done" button.

Investigated on ORM (Object Relational Mapping) tools for Sql Server Compact edition. Found this tool,and need to read about it.

With this screen the UI designs for placing an order is done. Have to focus on notice of arrival UIs.

Day 11: Designed Menu Selection and Table Selection screens

Windows Mobile Phone designing is not easy as it could be as with Win Forms development. Managed to get the Menu Selection & Table selection screens designed. The image carousel still needs to be investigated further to set it to horizontal view. The images are currently loaded from a folder. Will have to retrieve them from the DB later.

Referred to various a Image Carousel implementations, and came across a nice opensource framework called FluidKit from Codeplex. It is implemented for WPF. Have to see whether the image slider idea in it could be used for the project.

Menu Selection

The menu selection screen would work like this: User will be abale to browse through each item. As an item is focused, the name and price of it will be displayed. User can select the quantity of it and move to the next item or once all items confirmed, can click on "Confirm" to move to the "Table Selection" screen.

Table Selection

This screen items are optional so user could choose to skip to go to the confirmation screen, or could make a choice of the preferred table. Need to add branch selection option at the top, so the type of seats and table numbers (with pictures) can be displayed dynamically for each branch.

Day 10: Created tables in the DBs

Luckily I already had SQL Server 2008 R2, SQL Server 2008 and SQL Server Compact editions installed in my computer. Created the planned schema as follows:

• SQL Server 2008 R2 - for the Common DB
• SQL Server 2008 - Branch DB (Will clone the same to another SQL Server 2008 Express database, to simulate the DB for another branch).
• SQL Server Compact - for Mobile.

The diagrams for each database are given below:

Tables for the Common DB

In addition to the planned schema for the Common DB, I have added a stand alone table called TimeConfiguration to maintain various time related information to the system, such as order expiry time & table reservation expiry time.

Tables for the Branch DB

Tables for the Mobile DB