|
-
-
Pada postingan saya yang ini, saya sudah menjelaskan bagaimana cara menggunakan map control untuk Windows Phone 7. Pada postingan tersebut saya juga menyebutkan bahwa untuk menavigasikan map pada emulator Windows Phone 7, diperlukan control-control yang harus kita buat sendiri. Nah, pada postingan kali ini, saya akan menjelaskan tentang cara membuat custom control tersebut. Caranya sebagai berikut: 1. Buat sebuah project Windows Phone baru. 2. Tambahkan reference ke Microsoft.Phone.Controls.Maps pada project (bagi yang lupa caranya bisa melihatnya disini). 3. Tambahkan reference map control tersebut ke dalam file MainPage.xaml. 1: xmlns:m="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
4. Selanjutnya, tambahkan kode berikut ke dalam grid yang bernama ContentPanel.
1: <m:Map x:Name="MyMap" CredentialsProvider="YOUR BING MAPS KEY" Height="462" Width="444" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6,6,0,0"/>
2: <Button x:Name="btnRoad" Content="Road Mode" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6,474,0,0" Width="207" Click="btnRoad_Click"/>
3: <Button x:Name="btnAerial" Content="Aerial Mode" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="243,474,0,0" Width="207" Click="btnAerial_Click"/>
4: <Button x:Name="btnZoomIn" Content="Zoom In" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6,535,0,0" Width="207" Click="btnZoomIn_Click"/>
5: <Button x:Name="btnZoomOut" Content="Zoom Out" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="243,535,0,0" Width="207" Click="btnZoomOut_Click"/>
Ganti “YOUR BING MAPS KEY” dengan Bing Maps key yang kalian miliki.
5. Terakhir, tambahkan kode berikut ke dalam file MainPage.xaml.cs.
1: private void btnRoad_Click(object sender, RoutedEventArgs e)
2: {
3: MyMap.Mode = new RoadMode();
4: }
5:
6: private void btnAerial_Click(object sender, RoutedEventArgs e)
7: {
8: MyMap.Mode = new AerialMode();
9: }
10:
11: private void btnZoomIn_Click(object sender, RoutedEventArgs e)
12: {
13: double zoom;
14: zoom = MyMap.ZoomLevel;
15: MyMap.ZoomLevel = ++zoom;
16: }
17:
18: private void btnZoomOut_Click(object sender, RoutedEventArgs e)
19: {
20: double zoom;
21: zoom = MyMap.ZoomLevel;
22: MyMap.ZoomLevel = --zoom;
23: }
6. Tekan F5 dan navigasikan map dengan tombol-tombol yang ada.
Sekarang kalian bisa melakukan zoom in dan zoom out pada map dan mengganti-ganti map mode dari road mode menjadi aerial mode dan sebaliknya.
Source code program bisa di download disini. Ciao…
|
-
Bersamaan dengan rilisnya Windows Phone 7 Developer Tools versi final, Microsoft juga merilis sebuah control baru untuk Windows Phone 7, yaitu map control. Dengan menggunakan map control ini, kita sudah bisa menggunakan map yang memang native dengan device Windows Phone 7, bukan seperti yang pernah saya lakukan yaitu menggunakan Bing Maps Silverlight Control seperti pada postingan ini. Dalam map control untuk Windows Phone 7 ini, semua web service yang disediakan untuk Bing Maps application tetap bisa digunakan seperti Geocode Service, Routing Service, Imagery Service, dan Search Service. Pada postingan kali ini, saya akan memperkenalkan map control ini terlebih dahulu dengan memunculkan map ke emulator Windows Phone 7. Caranya adalah sebagai berikut: 1. Buat sebuah project Windows Phone Application baru. 2. Tambahkan reference ke Microsoft.Phone.Controls.Maps pada project. 
3. Tambahkan reference map control tersebut ke dalam file MainPage.xaml. 1: xmlns:m="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
4. Selanjutnya, tambahkan kode berikut ke dalam grid yang bernama ContentPanel.
1: <m:Map x:Name="MyMap" CredentialsProvider="YOUR BING MAPS KEY"/>
Ganti “YOUR BING MAPS KEY” dengan Bing Maps key yang kalian miliki.
5. Tekan F5 dan lihat hasilnya.
Now you have a simple map application on your Windows Phone 7 emulator.
Mungkin kalian menyadari sesuatu saat menavigasikan map ini yaitu kalian tidak bisa melakukan zoom in atau zoom out dengan menggunakan scroll mouse. Hal ini disebabkan karena kita menggunakan emulator Windows Phone 7. Namun, hal itu bisa diatasi dengan membuat tombol-tombol yang dapat membantu kita dalam menavigasikan map ini yang akan saya jelaskan pada kesempatan selanjutnya.
Untuk source code, bisa di download disini. Ciao…
|
-
Visualisasi Geospasial merupakan salah satu fitur baru dalam SQL Server 2008 R2 Reporting Services. SQL Server menyediakan penyimpanan data spasial dalam SQL Server 2008 yang dapat berbentuk geometry atau geography. Dengan menggunakan Reporting Services 2008 R2, sekarang kalian bisa membuat sebuah Map-Report dengan menggunakan Map Report item yang akan saya demokan pada postingan kali ini. Map Report Item dan Spatial Data Source Map Report Item membantu kita untuk mengkombinasikan data spasial dengan data yang akan dianalisis sehingga kita dapat menjadikan geospatial data sebagai background. Data spasial dalam Map Report Item dapat diambil dari tiga sumber: - Map Gallery Reports
- Map Gallery Reports adalah sekumpulan report yang diinstall oleh Reporting Services secara otomatis dan sudah berisi data spasial yang dapat di embed ke dalam report yang kita buat.
- ESRI Shapefiles
- ESRI,Environmental Systems Research Institute, Inc. shapefiles adalah file-file yang menyimpan data spasial dalam format .shp, .dbf, dan .shx.
- SQL Server spatial data
- Jika kalian memiliki kolom data spasial dalam bentuk geometry atau geography dalam SQL Server database, kalian bisa menggunakannya sebagai soirce dalam map.
Map Layers Map Reporting Service terdiri dari beberapa layer. Sebuah Map Report Item bisa memiliki satu atau lebih layer. Ada empat tipe layer: - Polygon – digunakan untuk menunjukkan area geographic seperti negara atau provinsi.
- Line – digunakan untuk menunjukkan rute.
- Point – digunakan untuk menunjukkan lokasi yang spesifik.
- Tile – digunakan untuk menampilkan Bing Maps dalam report.
Creating Your First Report Sebelum melanjutkan tutorial ini, Anda akan membutuhkan: 1. Jalankan Report Builder 3.0. 2. Pilih Map Wizard. 
3. Pada jendela selanjutnya, pilih ESRI shapefile dan browse ke file world.shp yang ada didalam world.zip yang telah Anda download. Klik Next. 
4. Pada Choose spatial data and map view options, berikan tanda checklist pada Add a Bing Maps layer. Klik Next. 
5. Pada Choose map visualization, pilih Color Analytical Map. Klik Next. 
6. Pada Choose the analytical dataset, pilih radio button yang kedua yaitu Add a dataset that includes fields that relate to the spatial data that you chose earlier lalu klik Next. 7. Pada Choose a connection to a data source, klik New untuk membuat data source. 8. Beri nama AdventureWorks2008R2 pada data source dan set koneksinya ke database AdventureWorks2008R2. Klik OK lalu Next. 
9. Pada jendela Design a query, klik Edit as Text dan tuliskan query berikut: 1: SELECT t.CountryRegionCode, sum(h.TotalDue) TotalDue
2: FROM Sales.SalesOrderHeader h
3: INNER JOIN Sales.SalesTerritory t
4: ON h.TerritoryID = t.TerritoryID
5: GROUP BY t.CountryRegionCode
Klik Run lalu Next.
10. Beri tanda checklist untuk Code pada Specify the match fields for spatial and analytical data dan ubah Analytical Dataset Fields-nya menjadi CountryRegionCode. Klik Next.
11. Pada jendela Choose color theme and data visualization, customize tampilan map sesuka Anda dan klik Finish.
12. Hilangkan Distance Scale dan Color Scale dengan mengklik kanan pada bagian map.
13. Ganti Map Title menjadi Sales by Country, dengan mendobel klik Map Title. Setelah itu, ganti Title pada legenda menjadi Country dengan mendobel klik juga. Mungkin Anda menyadari bahwa legenda pada map berada diluar map. Untuk memasukkannya ke dalam map area, klik kanan pada legenda lalu pilih Legend Properties. Uncheck Show Legend outside the viewpoint pada tab General.
14. Klik ( ) pada PolygonLayer1 yang terdapat di Map Layers pane lalu pilih Polygon Properties.
15. Ubah Label text dan Tooltip menjadi CountryRegionCode lalu klik OK.
16. Klik Run and you should see you maps.
Easy right? You can download this report in here. Enjoy…
|
-
Seperti yang kita ketahui, bila kita memakai Bing Maps, maka dibagian pojok kiri atas peta akan muncul control-control untuk membantu kita dalam menavigasikan peta seperti pada gambar dibawah… 
Control tersebut sudah default disediakan oleh Bing Maps. Dengan menggunakan control tersebut kita bisa memilih mode map yang kita inginkan seperti Road Mode, Aerial Mode, atau Hybrid Mode (Aerial with Labels). Selain itu, kita juga bisa menavigasikan peta ke kanan, kiri, atas, dan bawah. Kita juga bisa melakukan zoom in atau zoom out. Nah, pertanyaannya sekarang adalah: Apakah kita bisa membuat control kita sendiri untuk menavigasikan peta tanpa menggunakan control default yang sudah disediakan? Jawabannya adalah bisa. Bagaimana caranya? Berikut ini akan saya jelaskan cara pembuatannya… - Buat sebuah project Silverlight baru dalam Visual Studio.
- Tambahkan reference Bing Maps library ke dalam project (bagi yang lupa caranya, bisa dilihat disini).
- Masukkan kode berikut ke dalam MainPage.xaml
1: <UserControl x:Class="BingMapsCustomNavigation.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
7: mc:Ignorable="d"
8: d:DesignHeight="300" d:DesignWidth="400">
9:
10: <Grid x:Name="LayoutRoot" Background="White">
11: <Grid.RowDefinitions>
12: <RowDefinition Height="18"/>
13: <RowDefinition Height="60" />
14: <RowDefinition Height="*"/>
15: </Grid.RowDefinitions>
16: <Grid.ColumnDefinitions>
17: <ColumnDefinition />
18: <ColumnDefinition Width="Auto" />
19: </Grid.ColumnDefinitions>
20:
21: <m:Map x:Name="MyMap"
22: Grid.Row="0" Grid.RowSpan="5"
23: Grid.Column="0" Grid.ColumnSpan="2"
24: CacheMode="BitmapCache"
25: CredentialsProvider="{StaticResource MyCredentials}"
26: Mode="Road"
27: NavigationVisibility="Collapsed"/>
28:
29: <Canvas x:Name="cMiniMap"
30: Width="150"
31: Height="150"
32: HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Grid.Row="2" >
33: <m:Map x:Name="MiniMap"
34: CredentialsProvider="{StaticResource MyCredentials}"
35: CacheMode="BitmapCache"
36: Width="150"
37: Height="150"
38: Mode="Road"
39: NavigationVisibility="Collapsed"
40: ScaleVisibility="Collapsed"
41: LogoVisibility="Collapsed"
42: CopyrightVisibility="Collapsed" Foreground="{x:Null}">
43: <m:Map.Clip>
44: <EllipseGeometry RadiusX="69" RadiusY="69" Center="75,75" />
45: </m:Map.Clip>
46: </m:Map>
47: <Ellipse Width="150" Height="150" Stroke="#CC4C4C4C" StrokeThickness="6" Margin="0,0,0,0" CacheMode="BitmapCache" />
48: <Ellipse Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="70,70,0,0" x:Name="ellipse" Fill="#CC205A5B" />
49: </Canvas>
50:
51: <Canvas x:Name="cNavControl"
52: Width="100"
53: HorizontalAlignment="Left"
54: VerticalAlignment="Top" Grid.Row="2" Margin="60,155,0,0" Grid.RowSpan="3" >
55: <StackPanel Width="50">
56: <Ellipse x:Name="ePan" Fill="#CC4C4C4C" Height="50" Canvas.ZIndex="1" Width="50"/>
57: <Path x:Name="pathMiniMap" Stretch="Fill" Stroke="#CCFFFFFF" Height="195" Margin="-50,-195,-50,0" Canvas.ZIndex="1"/>
58: <Grid x:Name="gridPan" Height="50" Margin="0,-50,0,0" Width="50" Canvas.ZIndex="1">
59: <Grid.RowDefinitions>
60: <RowDefinition Height="12"/>
61: <RowDefinition Height="26" />
62: <RowDefinition Height="12"/>
63: </Grid.RowDefinitions>
64: <Grid.ColumnDefinitions>
65: <ColumnDefinition Width="12" />
66: <ColumnDefinition Width="26" />
67: <ColumnDefinition Width="12"/>
68: </Grid.ColumnDefinitions>
69:
70: <Image Source="Resources/PanUp.png" Stretch="Fill" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Top" Height="20" Margin="0,5,0,0" Width="34" MouseLeftButtonDown="PanMapUp"/>
71: <Image Source="Resources/PanLeft.png" Stretch="Fill" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="20" Margin="5,0,0,0" Height="34" MouseLeftButtonDown="PanMapLeft"/>
72: <Image Source="Resources/PanRight.png" Stretch="Fill" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Width="20" Margin="0,0,5,0" Height="34" MouseLeftButtonDown="PanMapRight"/>
73: <Image Source="Resources/PanDown.png" Stretch="Fill" Height="20" Margin="0,0,0,5" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center" Width="34" MouseLeftButtonDown="PanMapDown"/>
74: </Grid>
75: <Border Margin="0,5,0,0" Width="15" Background="#CC4C4C4C" BorderThickness="1,1,1,0" BorderBrush="#CCFFFFFF" Height="15">
76: <TextBlock Foreground="White" HorizontalAlignment="Center" Text="+" MouseLeftButtonDown="ZoomIn" VerticalAlignment="Center"/>
77: </Border>
78: <Border Margin="0,0,0,5" Width="15" Background="#CC4C4C4C" BorderThickness="1,0,1,1" BorderBrush="#CCFFFFFF" Height="15">
79: <TextBlock Foreground="White" HorizontalAlignment="Center" Text="-" MouseLeftButtonDown="ZoomOut" VerticalAlignment="Center"/>
80: </Border>
81: <Border Margin="0" Width="50" Background="#CC4C4C4C" BorderThickness="1" BorderBrush="#CCFFFFFF">
82: <TextBlock Foreground="White" HorizontalAlignment="Center" Text="Road" MouseLeftButtonDown="MapStyleRoad" VerticalAlignment="Center"/>
83: </Border>
84: <Border Height="15" Margin="0" Width="50" Background="#CC4C4C4C" BorderThickness="1,0,1,1" BorderBrush="#CCFFFFFF">
85: <TextBlock Foreground="White" HorizontalAlignment="Center" Text="Aerial" MouseLeftButtonDown="MapStyleAerial" VerticalAlignment="Center"/>
86: </Border>
87: <Border Height="15" Margin="0" Width="50" Background="#CC4C4C4C" BorderThickness="1,0,1,1" BorderBrush="#CCFFFFFF">
88: <TextBlock Foreground="White" HorizontalAlignment="Center" Text="Hybrid" MouseLeftButtonDown="MapStyleHybrid" VerticalAlignment="Center"/>
89: </Border>
90: </StackPanel>
91: </Canvas>
92: </Grid>
93: </UserControl>
- Kode diatas akan mengatur tampilan dari web page yang dibuat. Setelah itu, kita tinggal memasukkan logic-logic ke dalam MainPage.xaml.cs untuk mengimplementasikan fungsi-fungsi seperti Zoom In, Zoom Out, mengubah style map, dan panning atau menggeser map.
1: using System;
2: using System.Windows;
3: using System.Windows.Controls;
4: using System.Windows.Input;
5: using Microsoft.Maps.MapControl;
6:
7: namespace BingMapsCustomNavigation
8: {
9: public partial class MainPage : UserControl
10: {
11: public MainPage()
12: {
13: InitializeComponent();
14:
15: MyMap.TargetViewChanged += new EventHandler<MapEventArgs>(MyMap_TargetViewChanged);
16:
17: MiniMap.MouseClick += new EventHandler<MapMouseEventArgs>(MiniMap_MouseClick);
18: MiniMap.MouseDoubleClick += new EventHandler<MapMouseEventArgs>(MiniMap_MouseDoubleClick);
19: MiniMap.MouseDragBox += new EventHandler<MapMouseDragEventArgs>(MiniMap_MouseDragBox);
20: MiniMap.MousePan += new EventHandler<MapMouseDragEventArgs>(MiniMap_MousePan);
21: MiniMap.MouseWheel += new System.Windows.Input.MouseWheelEventHandler(MiniMap_MouseWheel);
22: MiniMap.KeyUp += new System.Windows.Input.KeyEventHandler(MiniMap_KeyUp);
23: MiniMap.KeyDown += new System.Windows.Input.KeyEventHandler(MiniMap_KeyDown);
24: MiniMap.KeyPress += new EventHandler<MapKeyPressEventArgs>(MiniMap_KeyPress);
25: MiniMap.KeyHeld += new EventHandler<MapKeyHeldEventArgs>(MiniMap_KeyHeld);
26: MiniMap.SetView(MyMap.TargetCenter, Math.Max(1.0, MyMap.TargetZoomLevel - 5));
27: }
28:
29: private void MyMap_TargetViewChanged(object sender, MapEventArgs e)
30: {
31: MiniMap.SetView(MyMap.TargetCenter, Math.Max(1.0, MyMap.TargetZoomLevel - 5));
32: }
33:
34: #region MiniMap Events
35:
36: private void MiniMap_KeyHeld(object sender, MapKeyHeldEventArgs e)
37: {
38: e.Handled = true;
39: }
40:
41: private void MiniMap_KeyPress(object sender, MapKeyPressEventArgs e)
42: {
43: e.Handled = true;
44: }
45:
46: private void MiniMap_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
47: {
48: e.Handled = true;
49: }
50:
51: private void MiniMap_KeyUp(object sender, System.Windows.Input.KeyEventArgs e)
52: {
53: e.Handled = true;
54: }
55:
56: private void MiniMap_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)
57: {
58: e.Handled = true;
59: }
60:
61: private void MiniMap_MousePan(object sender, MapMouseDragEventArgs e)
62: {
63: e.Handled = true;
64: }
65:
66: private void MiniMap_MouseDragBox(object sender, MapMouseDragEventArgs e)
67: {
68: e.Handled = true;
69: }
70:
71: private void MiniMap_MouseDoubleClick(object sender, MapMouseEventArgs e)
72: {
73: e.Handled = true;
74: }
75:
76: private void MiniMap_MouseClick(object sender, MapMouseEventArgs e)
77: {
78: e.Handled = true;
79: }
80:
81: #endregion
82:
83: #region Navigation
84:
85: private void ZoomIn(object sender, MouseButtonEventArgs e)
86: {
87: MyMap.ZoomLevel = MyMap.TargetZoomLevel + 1;
88: }
89:
90: private void ZoomOut(object sender, MouseButtonEventArgs e)
91: {
92: MyMap.ZoomLevel = MyMap.TargetZoomLevel - 1;
93: }
94:
95: private void PanMapLeft(object sender, MouseButtonEventArgs e)
96: {
97: MyMap.Center = MyMap.ViewportPointToLocation(new Point(MyMap.ViewportSize.Width / 2 - 50, MyMap.ViewportSize.Height / 2));
98: }
99:
100: private void PanMapRight(object sender, MouseButtonEventArgs e)
101: {
102: MyMap.Center = MyMap.ViewportPointToLocation(new Point(MyMap.ViewportSize.Width / 2 + 50, MyMap.ViewportSize.Height / 2));
103: }
104:
105: private void PanMapUp(object sender, MouseButtonEventArgs e)
106: {
107: MyMap.Center = MyMap.ViewportPointToLocation(new Point(MyMap.ViewportSize.Width / 2, MyMap.ViewportSize.Height / 2 - 50));
108: }
109:
110: private void PanMapDown(object sender, MouseButtonEventArgs e)
111: {
112: MyMap.Center = MyMap.ViewportPointToLocation(new Point(MyMap.ViewportSize.Width / 2, MyMap.ViewportSize.Height / 2 + 50));
113: }
114:
115: private void MapStyleRoad(object sender, MouseButtonEventArgs e)
116: {
117: MyMap.Mode = new RoadMode();
118: }
119:
120: private void MapStyleAerial(object sender, MouseButtonEventArgs e)
121: {
122: MyMap.Mode = new AerialMode(false);
123: }
124:
125: private void MapStyleHybrid(object sender, MouseButtonEventArgs e)
126: {
127: MyMap.Mode = new AerialMode(true);
128: }
129:
130: #endregion
131: }
132: }
Mudah bukan? Mungkin yang cukup sulit adalah mengubah-ubah tampilan pada MainPage.xaml tetapi, pembuatan logika pada custom control yang kita buat sendiri tidak terlalu sulit karena itu merupakan fungsi-fungsi dasar yang sudah disediakan oleh Bing Maps SDK.
Yang harus lebih diperhatikan disini adalah fungsi PanMapLeft, PanMapRight, PanMapUp, dan PanMapDown karena untuk menggeser posisi map ke kiri, kanan, atas, ataupun bawah, kita harus mengambil titik tengah dari map yang ditampilkan lalu menggesernya dengan cara mengurangi nilai height atau weight.
Source code dari program ini bisa didownload disini. Sebelum me-run project ini, jangan lupa untuk mengisi Credentials pada App.xaml dengan Bing Maps Credentials yang kalian miliki.
Okay, maybe that’s it for now. Ciao…
|
-
Pada tanggal 31 Oktober 2010 kemarin, MSP ITB bekerja sama dengan MIC ITB menyelenggarakan acara kedua dari rangkaian acara Road to Imagine Cup 2011 yaitu Imagine Cup 2010 Winners Sharing Session. Pada acara ini, kami menampilkan para wakil Indonesia yang mengikuti World Final Imagine Cup 2010 di Warsaw, Poland. Mereka adalah tim Ganesh yang mewakili Indonesia pada kategori Software Design dan tim Tselina yang mewakili Indonesia pada kategori Embedded Development. Selain itu, kami juga mengundang Narenda Wicaksono, IT Pro Advisor Microsoft Indonesia untuk berbicara tentang Imagine Cup dari perspektif para juri. Para wakil Indonesia pada Imagine Cup 2010 berbagi pengalaman mereka sejak awal perjuangan mereka mengikuti Imagine Cup sampai akhirnya mereka bisa menang mewakili Indonesia. Mereka juga mendemokan aplikasi yang mereka buat. Sedangkan Pak Naren berbicara tentang apa saja yang sebenarnya dicari oleh para juri Imagine Cup agar kita semua dapat memaksimalkan potensi yang kita miliki sehingga nantinya kita bisa menang di kancah Imagine Cup Internasional. Amin… Berikut adalah beberapa dokumentasi acara ini.     
|
-
Sudah lama juga saya gak posting tentang Bing Maps di blog. Terlalu banyak eksplorasi sampai-sampai gak bisa fokus ke 1 teknologi aja. Hehehe… Mudah-mudahan abis ini saya bisa fokus ke Bing Maps biar punya kesempatan buat jadi MVP. Amin…. Oke sekarang masuk ke inti pembahasan. Sekitar seminggu yang lalu, saya mulai lagi mengeksplorasi Bing Maps. Lalu, saya mendapat ide untuk membuat sebuah aplikasi tentang bencana alam karena kebetulan negeri kita yang tercinta ini sedang dilanda bencana dimana-mana. Terus, saya ingat kalau aplikasi ini sudah pernah ada yang membuat. Kalian dapat melihat tutorial pembuatannya disini dan demo live aplikasinya disini serta mendownload source codenya disini. Nah, mulailah saya melihat-lihat source code itu dan mengeksplorasi Bing Maps lagi. Maklum karena udah lama gak koding Bing Maps, jadinya rada lupa juga. Awalnya, saya ingin menggunakan Entity Framework. Namun, karena belum pernah menggunakannya, jadi saya memutuskan untuk menggunakan LINQ to SQL. Terus, setelah beberapa hari koding diselingi mengerjakan tugas, akhirnya siang tadi saya menyerah menggunakan LINQ to SQL. Nah, pasti pada bingung kan? Untung saja saya menemukan sebuah library yang dibuat oleh Ricky Brundritt yang bisa anda download disini. Selanjutnya, tinggal menggunakan kelas-kelas yang sudah ada tersebut dan ditambahkan dengan sedikit penyesuaian, maka aplikasi ini sudah jadi hanya dalam waktu 4 jam. Cepat bukan? Yah, karena kelas-kelasnya sudah tersedia dan tinggal digunakan serta di “tunning” sedikit makanya bisa cepat selesainya… Bagi yang ingin melihat live demo aplikasi ini, bisa mengunjungi http://ngoprek.info/veri/petagempa/ Terima kash kepada Billy Riantono, MSP dari POLTEKPOS yang telah mendeploy aplikasi saya ini. Bagi yang ingin mengetahui cara pembuatan aplikasi ini, akan saya bahas di postingan saya selanjutnya. So, stay tuned…
|
-
Pada postingan saya sebelumnya, saya sudah memperkenalkan tentang Microsoft WebMatrix dan membuat sebuah web Hello World dengan menggunakan WebMatrix. Nah, pada postingan tersebut saya juga sudah menyinggung-nyinggung tentang CSHTML. Sebenarnya apa sih perbedaan antara CSHTML dengan HTML biasa? Dengan menggunakan CSHTML, kalian bisa menggunakan syntax-syntax C# pada aplikasi web kalian. Penggunaan syntax-syntax C# pada aplikasi web ini dinamakan Razor syntax, sebuah terobosan baru dari Microsoft. Bagi kalian yang pernah membuat web dengan menggunakan Java Server Page atau JSP, mungkin cukup familiar dengan syntax-syntax semacam ini. Namun, perbedaannya adalah pada JSP kita menggunakan tanda % dan dibuka-tutup oleh <> sedangkan pada Razor syntax kita menggunakan tanda @ saja. Untuk lebih jelasnya silakan lihat contoh berikut: <!DOCTYPE html>
<html lang="en">
<body>
<h1>Hello World Page</h1>
<p>Hello World!</p>
<p>The time is @DateTime.Now</p>
</body>
</html> Syntax di atas adalah Razor syntax, sedangkan syntax di bawah ini adalah syntax pada JSP… <HTML>
<BODY>
Hello! The time is now <%= new java.util.Date() %>
</BODY>
</HTML>
Mirip bukan? Ciao for now…
|
-
Pada tanggal 31 Oktober 2010 nanti, akan diadakan acara kedua dari rangkaian acara Road to Imagine Cup 2011 yaitu Imagine Cup 2010 Winners Sharing Session. Pada acara ini, akan diundang Narenda Wicaksono yang akan berbicara tentang Imagine Cup dari perspektif para juri. Selain itu, yang pastinya ditunggu-tunggu adalah talkshow dengan para wakil Indonesia pada kompetisi Imagine Cup 2010 yaitu tim Ganesh (Software Design) dan tim Tselina (Embedded Development). Acara ini akan dilaksanakan pada: Hari, Tanggal : Minggu, 31 Oktober 2010 Waktu : 12.30 – 16.00 Tempat : Gedung Labtek VIII lantai 2, Ruang Multimedia STEI Untuk pendaftaran, harap mengirimkan email ke veri_ferdi@live.com dengan ketentuan sebagai berikut: Subject : [imaginecup2011] Content : Nama lengkap dan asal universitas Poster untuk acara ini bisa dilihat dibawah. Ayo daftar dan mari sama-sama kita harumkan nama bangsa Indonesia di kancah Imagine Cup internasional di New York City!!! 
This event is sponsored by:  
|
-
WebMatrix adalah sebuah web development tools gratis dari Microsoft yang ringan dan mudah digunakan. WebMatrix dapat diinstall melalui Microsoft Web Platform Installer 3.0. Saat menginstall WebMatrix, secara otomatis Microsoft Web Platform Installer juga akan menginstall IIS Express (development Web server), ASP.NET (web framework), dan SQL Server Compact (embedded database). WebMatrix juga menyertakan sebuah tools yang memudahkan kita untuk membuat website dari aplikasi open source yang populer. Kayaknya klo kebanyakan teori gak bakal selesai-selesai nih. So, let’s start to code a simple Hello World! web page using WebMatrix. Tapi sebelumnya, kenalan dulu ya sama WebMatrix… 
- Pilih Site From Template.
- Pilih Empty Site dan beri nama Hello-World.
- Klik OK. Setelah itu akan muncul jendela seperti pada gambar berikut.
- Anda dapat melihat bahwa tampilan jendela tersebut sangat mirip dengan tampilan dari Microsoft Office 2010. Di bagian pojok kiri bawah, Anda dapat melihat workspace selector, yang mengandung button yang akan menentukan menu apa yang tampil pada pane di atasnya. Di sebelah kanan, ada content pane, tempat Anda melihat report, mengedit file, dan lain-lain. Terakhir, di bagian bawah jendela adalah notification bar yang akan menampilkan pesan.
Setelah Anda membiasakan diri dengan tampilan WebMatrix, sekarang saatnya membuat web berisi Hello World! - Pilih Files workspace di bagian pojok kiri bawah. Tampilan jendela Anda akan menjadi seperti berikut.
- Pilih tipe file CSHTML dan ubah namanya menjadi default.cshtml (penjelasan mengenai CSHTML akan saya jelaskan pada postingan saya selanjutnya. So, stay tuned…)
- Klik OK.
- Setelah itu, ketikkan kode HTML berikut…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello World Page</title>
</head>
<body>
<h1>Hello World Page</h1>
<p>Hello World!</p>
</body>
</html>
- Tekan Ctrl+S untuk menyimpan pekerjaan Anda dan klik Run.
And we’re done. Simple isn’t it?
|
-
Beberapa waktu yang lalu, Microsoft mengadakan kompetisi “King of Bing Maps”. Kompetisi ini bertujuan untuk mempromosikan Bing Map App SDK yang saat itu baru saja dirilis. Kompetisi ini mengharuskan kita untuk membuat sebuah aplikasi dengan menggunakan Bing Map App SDK. Pemenang dari kompetisi ini yaitu Ricky Brundritt membuat sebuah aplikasi untuk menghitung besarnya biaya taksi yang perlu kita keluarkan untuk bepergian dari sebuah titik ke titik lain dengan memanfaatkan Bing Maps Routing Service. Terinspirasi dari hal tersebut, saya kemudian membuat sendiri aplikasi yang kurang lebih sama, namun ditujukan untuk Windows Phone 7. Aplikasi ini sebenarnya tidak sulit untuk dibuat, karena hanya menggunakan Bing Maps Routing Service. Bing Maps Routing Service ini digunakan untuk menentukan rute perjalanan berdasarkan posisi awal dan tujuan yang dimasukkan oleh user. Setelah itu, jarak tempuhnya dihitung menggunakan fungsi bawaan dari Bing Maps Routing Service tersebut. Setelah jarak tempuh diketahui, kita dapat menghitung berapa kira-kira biaya yang harus kita keluarkan. FYI, biaya yang tercantum diaplikasi ini hanya “perkiraan” saja karena tidak memperhitungkan kondisi macetnya jalan atau kejadian-kejadian lain. Selain itu, cara perhitungan biaya ini saya lihat dari blog-blog orang lain jadi saya sendiri tidak tahu apakah cara menghitung argo taksi benar-benar seperti yang saya buat. Hehehehe… Berikut adalah contoh screenshot dari aplikasi saya… Tampilan awal:  
Tampilan akhir:  
Jika ada dari pembaca yang ingin mengetahui lebih jauh tentang aplikasi ini, silakan menghubungi saya kesini. Ciao…
|
-
Pada tanggal 27 Agustus kemarin, MSP ITB bekerja sama dengan MIC ITB menyelenggarakan acara pertama dari rangkaian acara berjudul Road to Imagine Cup 2011 yaitu Imagine Cup 2011 Sharing Session. Pembicara pada acara ini adalah Julius Fenata selaku Academic Developer Evangelist Microsoft Indonesia dan Puja Pramudya selaku Manager Microsoft Innovation Center ITB. Acara ini dihadiri oleh mahasiswa-mahasiswa dari berbagai perguruan tinggi di Bandung seperti ITB, UNPAD, UNIKOM, UPI, POLTEKPOS, UNSUR, dan masih banyak lagi universitas-universitas lainnya. Pada sesi pertama, Julius memaparkan tentang “What is Imagine Cup?”. Jadi beliau memberitahukan sebenarnya apa sih Imagine Cup itu dan sedikit tips dan trik tentang bagaimana cara agar kita bisa ikut berkompetisi dalam Imagine Cup. Sesi kedua diisi oleh Puja Pramudya. Disini, Puja memaparkan tentang bagaimana cara mendapatkan ide, membentuk tim, pembuatan proposal, pengorbanannya untuk ikut Imagine Cup dan lain sebagainya. Namun, hal terpenting yang dia sampaikan adalah bagaimana cara kita dapat terus menjaga semangat kita untuk tetap tinggi. Karena, untuk menjaga semangat kita tetap tinggi dalam jangka waktu yang lama tidaklah mudah. Acara ini diakhiri dengan pembagian ta’jil gratis. Hehehehe… Imagine Cup 2011 Sharing Session ini merupakan acara pertama dari rangkaian acara Road to Imagine Cup 2011 yang berarti masih ada beberapa acara lainnya. Acara yang kedua dari rangkaian acara ini Imagine Cup 2010 Winners Sharing Session yang akan diselenggarakan pada bulan September ini. So, stay tuned for the latest info about this event… Berikut adalah beberapa dokumentasi acara ini.      
|
-
Hanya sekedar ingin memberi pengumuman bahwa pada hari Jumat tanggal 27 Agustus 2010, akan diadakan Imagine Cup 2011 Sharing Session sebagai bagian dari rangkaian acara yang saya beri nama Road to Imagine Cup 2011. Saya mendapatkan ide untuk membuat acara ini setelah mengikuti MSP Community MeetUp yang telah dijelaskan oleh Dani di blog student portalnya disini. Acara ini dapat terselenggara berkat kerjasama dari Microsoft Innovation Center ITB, Himpunan Mahasiswa Informatika (HMIF) ITB dan MSP Regional Jawa Barat. Untuk lebih jelasnya, acara ini akan dilaksanakan pada: Hari, tanggal: Jumat, 27 Agustus 2010 Waktu : 16.00 – 18.00 WIB Tempat : Gedung Labtek V ITB, lt.3 ruang 7602 Pembicara : 1. Julius Fenata (Academic Developer Evangelist Microsoft Indonesia) 2. Puja Pramudya (Microsoft Innovation Center ITB Manager) Fasilitas : FREE TA’JIL! Untuk pendaftaran, dapat dilakukan dengan cara mengirimkan email ke veri_ferdi@live.com dengan ketentuan sebagai berikut: Subject: Road to Imagine Cup Body : Nama lengkap, asal universitas Poster untuk acara ini bisa dilihat dibawah. Ayo daftar dan mari sama-sama kita harumkan nama bangsa Indonesia di kancah Imagine Cup internasional di New York City!!! 
This event is sponsored by:   
|
-
Using Expression Encoder, you can make your own Smooth Streaming video. How do you do that? It’s simple. Just choose a Transcoding Project when you start your Expression Encoder and import your video to the Media Content. Look for the Presets toolbar on the right side. Just choose Encoding for Silverlight –> IIS Smooth Streaming and choose whatever video quality that you desire then click Apply. 
You can also choose your own template for the player as shown in the picture below. 
Click Encode and wait for your video to be encoded. When it finished, you can preview it in your browser by opening the Default.html file in your encoder destination folder and you have your very own Smooth Streaming video. Ciao for now…
|
-
Pada postingan saya yang ketiga tentang WCF RIA Services ini, saya akan melanjutkan pembahasan dari postingan saya yang ini dan ini. Di 2 postingan saya sebelumnya, kita sudah berhasil memunculkan data produk dari database ke dalam DataGrid. Namun, diperlukan waktu beberapa detik untuk memunculkan semua data tersebut karena jumlah datanya sangat banyak dan kita menampilkan data yang banyak tersebut sekaligus. Nah, bagaimana caranya agar performansinya meningkat? Jawabannya adalah dengan menggunakan WCF RIA Services dan membatasi jumlah data yang muncul dalam 1 waktu. But how do we do this? It’s simple. I’ll explain it to you… Pertama-tama, hapus semua kode yang ada di dalam event OnNavigatedTo yang kita tambahkan pada postingan saya yang ini. Lalu, drag and drop DomainDataSource dari toolbox ke dalam ProductPage.xaml Anda sehingga kode di dalam ProductPage.xaml Anda akan menjadi seperti berikut: 1: <navigation:Page x:Class="Silverworks.ProductPage"
2: xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
3: xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
4: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
5: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8: mc:Ignorable="d"
9: xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
10: d:DesignWidth="640" d:DesignHeight="480"
11: Style="{StaticResource PageStyle}">
12: <Grid x:Name="LayoutRoot">
13:
14: <riaControls:DomainDataSource />
15:
16: <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
17:
18: <StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">
19:
20: <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
21: Text="{Binding Path=ApplicationStrings.ProductPageTitle, Source={StaticResource ResourceWrapper}}" />
22: <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
23: Text="Content of the Product Page" />
24:
25: <sdk:DataGrid x:Name="ProductsDataGrid" IsReadOnly="True"/>
26: </StackPanel>
27: </ScrollViewer>
28: </Grid>
29: </navigation:Page>
Perhatikan baris yang saya beri warna kuning. Ketika kita mendrag DomainDataSource dari toolbox ke dalam ProductPage.xaml, Visual Studio secara otomatis akan menambahkan namespace tersebut. Selanjutnya, kita akan menambahkan namespace baru:
1: xmlns:local="clr-namespace:Silverworks.Web"
Penambahan namespace ini bertujuan agar kita dapat mengakses entity dari model yang telah kita buat sebelumnya yang saya jelaskan disini.
Next, ganti kode dalam DomainDataSource Anda dengan kode berikut…
1: <riaControls:DomainDataSource x:Name="ProductsDataSource" QueryName="GetProductsQuery" AutoLoad="True" PageSize="10">
2: <riaControls:DomainDataSource.DomainContext>
3: <local:AdventureWorksContext />
4: </riaControls:DomainDataSource.DomainContext>
5: </riaControls:DomainDataSource>
Dan ganti kode dalam DataGrid dengan kode berikut…
1: <sdk:DataGrid x:Name="ProductsDataGrid" IsReadOnly="True" ItemsSource="{Binding ElementName=ProductsDataSource, Path=Data}" />
Tekan F5 dan lihat apa yang terjadi.
Waktu yang diperlukan untuk meload data ke DataGrid menjadi lebih singkat namun hanya muncul 10 data. Hal itu di karenakan kita meminta DomainDataSource agar hanya menampilkan 10 data per halaman. Agar kita tetap bisa melihat seluruh data, kita harus menambahkan DataPager.
Drag and drop DataPager dari toolbox ke dalam ProducPage.xaml dan ganti kodenya dengan kode berikut…
1: <sdk:DataPager x:Name="ProductsDataPager" Source="{Binding ElementName=ProductsDataSource, Path=Data}" />
Setelah itu, hapus ScrollViewer dari ProductPage.xaml agar tampilan yang kita dapatkan lebih bagus sehingga kode didalam ProductPage.xaml Anda akan menjadi seperti ini:
1: <navigation:Page x:Class="Silverworks.ProductPage"
2: xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
3: xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
4: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
5: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8: xmlns:local="clr-namespace:Silverworks.Web"
9: mc:Ignorable="d"
10: xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
11: d:DesignWidth="640" d:DesignHeight="480"
12: Style="{StaticResource PageStyle}">
13: <Grid x:Name="LayoutRoot">
14:
15: <riaControls:DomainDataSource x:Name="ProductsDataSource" QueryName="GetProductsQuery" AutoLoad="True" PageSize="10">
16: <riaControls:DomainDataSource.DomainContext>
17: <local:AdventureWorksContext />
18: </riaControls:DomainDataSource.DomainContext>
19: </riaControls:DomainDataSource>
20:
21: <StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">
22:
23: <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
24: Text="{Binding Path=ApplicationStrings.ProductPageTitle, Source={StaticResource ResourceWrapper}}" />
25: <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
26: Text="Content of the Product Page" />
27:
28: <sdk:DataGrid x:Name="ProductsDataGrid" IsReadOnly="True" ItemsSource="{Binding ElementName=ProductsDataSource, Path=Data}" />
29:
30: <sdk:DataPager x:Name="ProductsDataPager" Source="{Binding ElementName=ProductsDataSource, Path=Data}" />
31:
32: </StackPanel>
33: </Grid>
34: </navigation:Page>
Sekarang tekan F5 dan coba pindah ke halaman selanjutnya dengan menggunakan DataPager.
Aplikasi kita tidak akan berjalan lagi. Why? Karena didalam query GetProducts kita tidak mendefinisikan kriteria untuk sorting. Jadi, buka file AdventureWorksService.cs dan tambahkan kode berikut didalam query GetProducts…
1: public IQueryable<Product> GetProducts()
2: {
3: return this.ObjectContext.Products.OrderBy(product => product.ProductID);
4: }
Kode tersebut menyortir produk secara ascending berdasarkan ProductID.
Now, hit F5 and try to navigate through the pages… Enjoy…
The source code can be downloaded here.
|
More Posts « Previous page - Next page »
|
|
|