Implementasi Fitur-Fitur Aplikasi "Guess The Code" - Part 1

Guess The Code adalah sebuah aplikasi game edukasi dengan cara memperbaiki kode-kode program agar menghasilkan output yang sesuai. Terdapat 10 level permainan pada aplikasi ini. Kode program pada setiap level dibuat dengan menggunakan bahasa C.

Aplikasi ini dapat di-download disini:

Guess The Code (For Windows Desktop)

Guess The Code (For Windows Phone)

Silahkan dicoba terlebih dahulu untuk mengetahui apa saja yang terdapat pada aplikasi tersebut.

Aplikasi ini dibuat dengan bahasa C# dan XAML dengan menggunakan Visual Studio. Fitur-fitur yang terdapat pada aplikasi ini adalah

1. Page Navigation

Misalnya pada tombol Blog berwarna biru, kita membuat tombol yang akan pindah ke halaman tempat dimana kita dapat melihat isi dari sebuah Blog. Pertama, buatlah sebuah file .xaml baru yang diberi nama Blog.xaml. Lalu pada MainPage, buatlah sebuah button dengan event handler bernama PindahHalaman seperti ini

<Button Content="Blog" Click="PindahHalaman" />

Kemudian di file MainPage.xaml.cs, pada method PindahHalaman, tambahkan kode berikut

if (this.Frame != null)
{
    this.Frame.Navigate(typeof(Blog));
}

2. Web View

Pada file Blog.xaml, kita membuat suatu area tempat kita dapat melihat sebuah blog dengan memerlukan koneksi internet. Ini dinamakan WebView, misalnya kita membuat sebuah WebView bernama LihatBlog dengan ukuran 1000 x 1000

<WebView x:Name="LihatBlog" Width="1000" Height="1000" />

Kemudian di file Blog.xaml.cs, pada method OnNavigatedTo di bagian NavigationHelper registration, tambahkan kode berikut

Uri targetUri = new Uri(@"http://arliansyahazhary.blogspot.com/2015/03/daftar-subjek-pemrograman-bahasa-c.html");
LihatBlog.Navigate(targetUri);

WebView dengan nama LihatBlog yang kita buat akan terhubung dengan link http://arliansyahazhary.blogspot.com/2015/03/daftar-subjek-pemrograman-bahasa-c.html.

3. Scroll Viewer
Scroll Viewer digunakan ketika kita membuat suatu tampilan yang memiliki teks dan isi yang sangat banyak pada area terbatas. Misalnya seperti ini

Pada tampilan tersebut terdapat 2 Scroll Viewer yang bersebelahan. Cara pertama dalam pembuatannya adalah dengan membagi grid menjadi 2 kolom yang sama besar menggunakan kode seperti ini

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

Lalu tambahkan 2 Scroll Viewer di bawahnya

<ScrollViewer Grid.Column="0">
   <!-- TODO -->
</ScrollViewer>
<ScrollViewer Grid.Column="1">
   <!-- TODO -->
</ScrollViewer>

4. Paragraph and Text Coloring

Mewarnai suatu text sangatlah mudah. Melalui Visual Studio Blend, cukup dengan mem-blok sebagian text lalu diberi warna dengan menggunakan Brush, misalnya int main().  Karena aplikasi "Guess The Code" menggunakan ScrollViewer, kita tidak bisa menggunakan TextBlock. Maka kita gunakan RichTextBlock lalu di dalamnya digunakan Paragraph seperti ini

<ScrollViewer>
   <RichTextBlock>
      <Paragraph>
        <!-- TODO -->
      </Paragraph>
   </RichTextBlock>
</ScrollViewer>

Kita ingin mewarnai sebagian text yang terdapat di dalam Paragraph dengan menggunakan xaml, misalnya int main(), kita menggunakan Run seperti ini

<Run Foreground="Blue">int</Run> main()

Untuk membuat line break agar suatu text berada pada baris di bawah text yang lain, cukup dengan menambahkan tag LineBreak

Text 1
<LineBreak/>
Text 2

5. Inline Textbox

Inline Textbox adalah textbox yang berada satu baris dengan suatu text. Karena kita menggunakan Paragraph, maka kita memakai tag InlineUIContainer lalu di dalamnya terdapat TextBox. Misalnya kita ingin menambahkan TextBox yang berada sebaris dengan text printf, gunakan kode seperti ini di diantara tag Paragraph

printf(
<InlineUIContainer>
   <TextBox />
</InlineUIContainer>
);

Akan lanjut di Part 2 . . .