Subscribe RSS Join our Facebook Group Follow us on Twitter!
Welcome to Students' Portal Indonesia Sign in | Join | Help | Sign In Live ID
in Search

All about GIS

Bing Maps and OData (part 4)

We meet again fellas. Postingan kali ini merupakan bagian keempat dari postingan saya tentang Bing Maps dan OData. Sebelumnya saya sudah menjelaskan tentang apa itu OData pada postingan pertama, lalu saya menjelaskan tentang pengambilan data dari OData pada postingan yang kedua, dan yang terakhir saya telah menjelaskan tentang MVVM dan MEF yang saya gunakan dalam aplikasi ini pada postingan yang ketiga. Nah, pada postingan yang keempat ini, kita akan mulai membuat behavior dan UI dari aplikasi. Ok, let’s get started…

1. Creating ChildWindow Behavior

Apa itu ChildWindow? ChildWindow merupakan sejenis pop-up window yang dapat kita munculkan untuk memberikan notifikasi kepada pengguna tentang sesuatu. Nah, ChildWindow ini akan saya gunakan untuk menampilkan detail dari Dinner yang kita pilih. Tambahkanlah sebuah class ke dalam project Anda dan beri nama sesuka Anda (dalam kasus saya, class ini saya beri nama ShowChildWindowAction.cs). Lalu, copy paste kode berikut ini ke dalam class tersebut.

   1: using System;
   2: using System.Windows;
   3: using System.Windows.Controls;
   4: using System.Windows.Interactivity;
   5:  
   6: namespace BingMapsOData
   7: {
   8:     [DefaultTrigger(typeof(UIElement), typeof(System.Windows.Interactivity.EventTrigger), new object[] { "MouseLeftButtonDown" })]
   9:     public class ShowChildWindowAction : TriggerAction<FrameworkElement>
  10:     {
  11:         public string ChildWindowType { get; set; }
  12:  
  13:         protected override void Invoke(object parameter)
  14:         {
  15:             ChildWindow window = Activator.CreateInstance(Type.GetType(ChildWindowType, false, true)) as ChildWindow;
  16:             if (window == null)
  17:             {
  18:                 return;
  19:             }
  20:             if (AssociatedObject != null)
  21:             {
  22:                 window.DataContext = AssociatedObject.DataContext;
  23:             }
  24:             window.Show();
  25:         }
  26:     }
  27: }

Kode tersebut digunakan untuk memunculkan Child Window apabila terjadi sebuah event yang men-trigger-nya yang dalam hal ini adalah event MouseLeftButtonDown yang nantinya behavior tersebut akan kita taruh didalam pushpin.

2. Creating Child Window

Selanjutnya, kita akan membuat Child Window. Child Window ini akan muncul apabila pengguna mengklik salah satu pushpin yang ada pada Bing Map. Child Window ini berisi detail dari Dinner pada sebuah lokasi tertentu, sesuai dengan lokasi pushpin yang diklik oleh pengguna. Tambahkan Child Window pada project Anda dengan cara mengklik kanan pada project dan pilih Add > New Item.. atau tekan Ctrl+Shift+A lalu pilih Silverlight Child Window. Pada kasus saya, Child Window ini saya beri nama DetailsChildWindow.xaml.

ChildWindow

Kemudian, copy paste kode berikut..

DetailsChildWindow.xaml

   1: <controls:ChildWindow x:Class="BingMapsOData.DetailsChildWindow"
   2:            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   4:            xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
   5:            Title="{Binding Title, Mode=OneWay}">
   6:     
   7:     <controls:ChildWindow.Resources>
   8:         <Style x:Key="ChildWindowStyle" TargetType="controls:ChildWindow">
   9:             <Setter Property="IsTabStop" Value="false"/>
  10:             <Setter Property="TabNavigation" Value="Cycle"/>
  11:             <Setter Property="HorizontalAlignment" Value="Center"/>
  12:             <Setter Property="VerticalAlignment" Value="Center"/>
  13:             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
  14:             <Setter Property="VerticalContentAlignment" Value="Stretch"/>
  15:             <Setter Property="BorderThickness" Value="1"/>
  16:             <Setter Property="BorderBrush">
  17:                 <Setter.Value>
  18:                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  19:                         <GradientStop Color="#FFA3AEB9" Offset="0"/>
  20:                         <GradientStop Color="#FF8399A9" Offset="0.375"/>
  21:                         <GradientStop Color="#FF718597" Offset="0.375"/>
  22:                         <GradientStop Color="#FF617584" Offset="1"/>
  23:                     </LinearGradientBrush>
  24:                 </Setter.Value>
  25:             </Setter>
  26:             <Setter Property="OverlayBrush" Value="#7F000000"/>
  27:             <Setter Property="OverlayOpacity" Value="1"/>
  28:             <Setter Property="Template">
  29:                 <Setter.Value>
  30:                     <ControlTemplate TargetType="controls:ChildWindow">
  31:                         <Grid x:Name="Root">
  32:                             <VisualStateManager.VisualStateGroups>
  33:                                 <VisualStateGroup x:Name="WindowStates">
  34:                                     <VisualState x:Name="Open">
  35:                                         <Storyboard>
  36:                                             <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity">
  37:                                                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
  38:                                                 <EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="1"/>
  39:                                             </DoubleAnimationUsingKeyFrames>
  40:                                             <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
  41:                                                 <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
  42:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
  43:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
  44:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="1.05" KeySpline="0,0,0.5,1"/>
  45:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
  46:                                             </DoubleAnimationUsingKeyFrames>
  47:                                             <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
  48:                                                 <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
  49:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
  50:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
  51:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="1.05" KeySpline="0,0,0.5,1"/>
  52:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
  53:                                             </DoubleAnimationUsingKeyFrames>
  54:                                         </Storyboard>
  55:                                     </VisualState>
  56:                                     <VisualState x:Name="Closed">
  57:                                         <Storyboard>
  58:                                             <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity">
  59:                                                 <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
  60:                                                 <EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="0"/>
  61:                                             </DoubleAnimationUsingKeyFrames>
  62:                                             <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
  63:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
  64:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
  65:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
  66:                                             </DoubleAnimationUsingKeyFrames>
  67:                                             <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
  68:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
  69:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
  70:                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
  71:                                             </DoubleAnimationUsingKeyFrames>
  72:                                         </Storyboard>
  73:                                     </VisualState>
  74:                                 </VisualStateGroup>
  75:                             </VisualStateManager.VisualStateGroups>
  76:                             <Grid x:Name="Overlay" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Top" Opacity="{TemplateBinding OverlayOpacity}" Background="{TemplateBinding OverlayBrush}"/>
  77:                             <Grid x:Name="ContentRoot" Height="{TemplateBinding Height}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}" RenderTransformOrigin="0.5,0.5">
  78:                                 <Grid.RenderTransform>
  79:                                     <TransformGroup>
  80:                                         <ScaleTransform/>
  81:                                         <SkewTransform/>
  82:                                         <RotateTransform/>
  83:                                         <TranslateTransform/>
  84:                                     </TransformGroup>
  85:                                 </Grid.RenderTransform>
  86:                                 <Border HorizontalAlignment="Stretch" Margin="-1" VerticalAlignment="Stretch" Background="#14000000" BorderBrush="#14000000" BorderThickness="1" CornerRadius="2"/>
  87:                                 <Border HorizontalAlignment="Stretch" Margin="-2" VerticalAlignment="Stretch" Background="#0F000000" BorderBrush="#0F000000" BorderThickness="1" CornerRadius="2.25"/>
  88:                                 <Border HorizontalAlignment="Stretch" Margin="-3" VerticalAlignment="Stretch" Background="#0C000000" BorderBrush="#0C000000" BorderThickness="1" CornerRadius="2.5"/>
  89:                                 <Border HorizontalAlignment="Stretch" Margin="-4" VerticalAlignment="Stretch" Background="#0A000000" BorderBrush="#0A000000" BorderThickness="1" CornerRadius="2.75"/>
  90:                                 <Border Background="#FFFFFFFF" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
  91:                                     <Border Margin="1" CornerRadius="1.5">
  92:                                         <Border.Background>
  93:                                             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  94:                                                 <GradientStop Color="#FFE5E8EB" Offset="1"/>
  95:                                                 <GradientStop Color="#FFF6F8F9" Offset="0"/>
  96:                                             </LinearGradientBrush>
  97:                                         </Border.Background>
  98:                                         <Grid>
  99:                                             <Grid.RowDefinitions>
 100:                                                 <RowDefinition Height="Auto"/>
 101:                                                 <RowDefinition/>
 102:                                                 <RowDefinition Height="Auto"/>
 103:                                             </Grid.RowDefinitions>
 104:                                             <Border x:Name="Chrome" Width="Auto" BorderBrush="#FFFFFFFF" BorderThickness="0,0,0,1">
 105:                                                 <Border.Background>
 106:                                                     <LinearGradientBrush EndPoint="0.5,0.528" StartPoint="0.5,0">
 107:                                                         <GradientStop Color="#FFE5E8EB" Offset="1"/>
 108:                                                         <GradientStop Color="#FFFEFEFE" Offset="0"/>
 109:                                                     </LinearGradientBrush>
 110:                                                 </Border.Background>
 111:                                                 <Grid Height="Auto" Width="Auto">
 112:                                                     <Grid.ColumnDefinitions>
 113:                                                         <ColumnDefinition/>
 114:                                                         <ColumnDefinition Width="30"/>
 115:                                                     </Grid.ColumnDefinitions>
 116:                                                     <ContentControl HorizontalAlignment="Stretch" Margin="6" VerticalAlignment="Center" FontWeight="Bold" IsTabStop="False" Content="{TemplateBinding Title}"/>
 117:                                                 </Grid>
 118:                                             </Border>
 119:                                             <Border Margin="7" Grid.Row="1" Background="{TemplateBinding Background}">
 120:                                                 <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
 121:                                             </Border>
 122:                                             <Button x:Name="CloseButton" HorizontalAlignment="Right" VerticalAlignment="Center" IsTabStop="False" Grid.Column="1" Grid.Row="2" Content="Close" Padding="8,2" Margin="8"/>
 123:                                         </Grid>
 124:                                     </Border>
 125:                                 </Border>
 126:                             </Grid>
 127:                         </Grid>
 128:                     </ControlTemplate>
 129:                 </Setter.Value>
 130:             </Setter>
 131:         </Style>
 132:     </controls:ChildWindow.Resources>
 133:  
 134:     <controls:ChildWindow.Style>
 135:         <StaticResource ResourceKey="ChildWindowStyle"/>
 136:     </controls:ChildWindow.Style>
 137:     
 138:     <StackPanel x:Name="LayoutRoot" Background="WhiteSmoke" Width="210">
 139:         <TextBlock Text="RSVP " FontWeight="Bold"  Foreground="Gray" Padding="2" Margin="2" TextWrapping="Wrap"/>
 140:         <StackPanel Orientation="Horizontal">
 141:             <Button Margin="2" Padding="4" Name="btnTwitter" Click="btnTwitter_Click">
 142:                 <Image Source="Images/twitter.png" Width="16" Height="16"/>
 143:             </Button >
 144:             <Button Margin="2" Padding="4" Name="btnGoogle" Click="btnGoogle_Click">
 145:                 <Image Source="Images/google.png" Width="16" Height="16"/>
 146:             </Button>
 147:             <Button Margin="2" Padding="4" Name="btnYahoo" Click="btnYahoo_Click">
 148:                 <Image Source="Images/yahoo.png" Width="16" Height="16"/>
 149:             </Button>
 150:         </StackPanel>
 151:         <TextBlock Text="When? " FontWeight="Bold"  Foreground="Gray" Padding="2" Margin="2" TextWrapping="Wrap"/>
 152:         <TextBlock Text="{Binding Date}" Padding="2" Margin="2" TextWrapping="Wrap"/>
 153:         <TextBlock Text="Where? " FontWeight="Bold"  Foreground="Gray" Padding="2" Margin="2" TextWrapping="Wrap"/>
 154:         <TextBlock Text="{Binding Address}" Padding="2" Margin="2" TextWrapping="Wrap"/>
 155:         <TextBlock Text="Description " FontWeight="Bold"  Foreground="Gray" Padding="2" Margin="2" TextWrapping="Wrap"/>
 156:         <TextBlock Text="{Binding Description}" Padding="2" Margin="2" TextWrapping="Wrap"/>
 157:         <TextBlock Text="Hosted By: " FontWeight="Bold" Foreground="Gray" Padding="2" Margin="2" TextWrapping="Wrap"/>
 158:         <TextBlock Text="{Binding HostedBy}" Padding="2" Margin="2" TextWrapping="Wrap"/>
 159:         <TextBlock Text="Phone: " FontWeight="Bold"  Foreground="Gray" Padding="2" Margin="2" TextWrapping="Wrap"/>
 160:         <TextBlock Text="{Binding Phone}" Padding="2" Margin="2" TextWrapping="Wrap"/>
 161:         <TextBlock Text="Attendees: " FontWeight="Bold"  Foreground="Gray" Padding="2" Margin="2" TextWrapping="Wrap"/>
 162:         <TextBlock Text="{Binding Attendees}" Padding="2" Margin="2" TextWrapping="Wrap"/>
 163:     </StackPanel>
 164: </controls:ChildWindow>

DetailsChildWindow.xaml.cs

   1: using System;
   2: using System.Windows;
   3: using System.Windows.Browser;
   4: using System.Windows.Controls;
   5: using BingMapsOData.ViewModels;
   6:  
   7: namespace BingMapsOData
   8: {
   9:     public partial class DetailsChildWindow : ChildWindow
  10:     {
  11:         public DetailsChildWindow()
  12:         {
  13:             InitializeComponent();
  14:         }
  15:  
  16:         private void btnTwitter_Click(object sender, RoutedEventArgs e)
  17:         {
  18:             var d = this.DataContext as DinnerViewModel;
  19:             HtmlPage.Window.Navigate(new Uri("http://nerddinner.com/RSVP/RsvpTwitterBegin/" + d.DinnerId), "_blank");
  20:         }
  21:  
  22:         private void btnGoogle_Click(object sender, RoutedEventArgs e)
  23:         {
  24:             var d = this.DataContext as DinnerViewModel;
  25:             HtmlPage.Window.Navigate(new Uri("http://nerddinner.com/RSVP/RsvpBegin/" + d.DinnerId + "?identifier=https%3A%2F%2Fwww.google.com%2Faccounts%2Fo8%2Fid"), "_blank");
  26:         }
  27:  
  28:         private void btnYahoo_Click(object sender, RoutedEventArgs e)
  29:         {
  30:             var d = this.DataContext as DinnerViewModel;
  31:             HtmlPage.Window.Navigate(new Uri("http://nerddinner.com/RSVP/RsvpBegin/" + d.DinnerId + "?identifier=https%3A%2F%2Fme.yahoo.com%2F"), "_blank");
  32:         }
  33:     }
  34: }
  35: 

Oke, cukup sekian dulu nih. Masih ada pembahasan selanjutnya loh. Jadi, stay tuned ya..

276 Views, 1 Comment(s), Published on: 03-31-2011 11:19 by veri to All about GIS
| More
Filed under: , , , , ,

Comments

 

My life as a MSP said:

This is the last post from a series that talked about Bing Maps and OData . I’ve told you how to retrieve

April 25, 2011 8:51 AM

Syndication