Thursday, June 6, 2013

Day 25: Menu Display Page ListBox

Got the listbox display the correct menu description and price as we click through the arrow buttons.


This functionality was implemented with a hint from this article.
I had to override the ToString() method in the Menu class as follows to bind it to the control that displays it.

  public class Menu  
   {  
     private int _imageIndex;  
     public int ImageIndex  
     {  
       get { return _imageIndex; }  
       set { _imageIndex = value; }  
     }  
     private float _price;  
     public float Price  
     {  
       get { return _price; }  
       set { _price = value; }  
     }  
     private string _menuName;  
     public string MenuName  
     {  
       get { return _menuName; }  
       set { _menuName = value; }  
     }  
     private int _quantity;  
     private string _code;  
     public string Code  
     {  
       get { return _code; }  
       set { _code = value; }  
     }  
     public int Quantity  
     {  
       get { return _quantity; }  
       set { _quantity = value; }  
     }  
     public override string ToString()  
     {  
       return " "+MenuName + "\n Rs." + Math.Round(Convert.ToDouble(Price),2).ToString()+"/=";  
     }  
   }  

And in the MenuDisplayLogic class this is how I retrieve the details of all menus for initializing:

  public static List<Models.Menu> GetMenuDetails()  
     {  
       List<Models.Menu> menuDetails = new List<Models.Menu>();  
       using (EasyFoodMobDBContext dbcontext = new EasyFoodMobDBContext(EasyFoodMobDBContext.ConnectionString))  
       {  
         bool res = dbcontext.CreateIfNotExists();  
       }  
       using (EasyFoodMobDBContext dbcontext = new EasyFoodMobDBContext(EasyFoodMobDBContext.ConnectionString))  
       {  
         var query = from c in dbcontext.Menu  
               select new { c.FoodCode,c.FoodDescription,c.FoodPrice };  
         foreach(var menu in query)  
         {  
           Models.Menu newmenu = new Models.Menu();  
           newmenu.Code = menu.FoodCode;  
           newmenu.MenuName = menu.FoodDescription;  
           newmenu.Price = (float)menu.FoodPrice;  
           menuDetails.Add(newmenu);  
         }  
        }  
       return menuDetails;  
}

Then I had to do small modifications to the Carousel control class for being able to initialize the details and display them appropriately as the user browses through the menu. First I set the correct image index to the Menu objects in the initialization. Only through this index I would be able to display the correct details.

  private void AddImagesToCarousel()  
     {  
       menuList = MenuDisplayLogic.GetMenuDetails();  
       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();  
           //Adding it to Menu  
            menuList[i].ImageIndex = i;  
           // 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);  
         }  
       }  
     }  

Then on the initial state and on other states I would need to get the correct menu, and bind it directly to the control. Thanks to LINQ, it took only a single line of code.

  private void SetIndex(int value)  
     {  
       _target = value;  
       _target = Math.Max(0, _target);  
       _target = Math.Min(_images.Count - 1, _target);  
       listBox1.ItemsSource = menuList.Where(a => a.ImageIndex == _target);  
     }  
     private void MoveIndex(int value)  
     {  
       _target += value;  
       _target = Math.Max(0, _target);  
       _target = Math.Min(_images.Count - 1, _target);  
       listBox1.ItemsSource = menuList.Where(a => a.ImageIndex == _target);  
     }  

With this 90% of work for this page is complete. I am only left with enabling the user to enter the quantity of the menu and the saving of the order to the isolated storage.

No comments:

Post a Comment