Tuesday, June 5, 2012

Membuat HTML Text Editor Sederhana di WPF

Categories:

Sekedar share sedikit mengenai apa yang telah saya dapatkan di praktikum terakhir PSBO (Pengenalan Sistem Berorientasi Objek) tadi yakni membuat HTML Text Editor Sederhana. Baiklah langsung saja buka Microsoft Visual Studio 2010-nya dan buat project baru bernama HTML Text Editor.
hte1
Pada tampilan MainWindow.xaml, kita manipulasi sedikit kode xaml-nya menjadi seperti berikut
<Window x:Class="HTML_Text_Editor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="HTML Text Editor" Height="600" Width="525" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded">
    <Grid Background="#FFC8D3D0">
        <TextBox Height="177" HorizontalAlignment="Left" Margin="12,12,0,0" Name="textBox1"
VerticalAlignment="Top" Width="479" HorizontalScrollBarVisibility="Visible" 
VerticalScrollBarVisibility="Visible" TextWrapping="Wrap" AcceptsReturn="True" 
KeyUp="textBox1_KeyUp" />
        <StackPanel Height="318" HorizontalAlignment="Left" Margin="12,231,0,0"
Name="stackPanel1" VerticalAlignment="Top" Width="479">
            <WebBrowser Height="316" Name="webBrowser1" Width="478"/>
        </StackPanel>
        <Button Content="Refresh" Height="30" HorizontalAlignment="Left" Margin="12,195,0,0"
FontSize="14" Name="button1" VerticalAlignment="Top" Width="85" Click="button1_Click" />
    </Grid>
</Window>
sehingga jika kita view design akan tampak seperti berikut:
hte8

Jika kita lihat, didalam project tersebut sudah kita isi dengan sebuah TextBox (bagian atas), sebuah Button dan StackPanel yang didalamnya kita isi dengan WebBrowser (bagian bawah).
Kemudian, buatlah sebuah file baru dengan ekstensi .html, pada gambar saya menggunakan notepad untuk membuat file HTMLnya.

hte2

Lalu save dengan nama tes.html. Setelah itu klik kanan pada file HTML tersebut –> Properties

hte3

Dari properties tersebut kita ambil path file HTML-nya dan copy-kan kedalam source WebBrowser dengan cara klik WebBrowser pada project yang kita buat tadi –> Properties –> Paste pada bagian source. Sekarang coba jalankan project dengan tekan F5, akan tampil seperti berikut:

hte4

Oke, sekarang kita mulai ngoding C#-nya, bukalah MainWindow.xaml.cs. Tambahkan Using System.IO pada Base Class Library dan buatlah event Window_Loaded seperti berikut: 

public partial class MainWindow : Window
    {
        //membuat file dengan tipe string yang isinya file HTML td
        private string fileName = "C:/Users/azida/Desktop/tes.html";

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            StreamReader sr = new StreamReader(fileName);
            textBox1.Text = sr.ReadToEnd();
            sr.Close();
        }
Sekarang coba jalankan.
hte5
Disini ketika kita mengubah text pada textBox, yang ditampilkan pada WebBrowser belum otomatis berubah. Jadi untuk membuat WebBrowser tersebut berubah ketika kita mengetikkan di TextBox, buatlah sebuah method baru dengan nama refresh. Berikut kode C#-nya:
public void refresh()
        {
            StreamWriter sw = new StreamWriter(fileName);
            sw.Write(textBox1.Text);
            sw.Close();

            webBrowser1.Refresh();
        }
Selanjutnya buat event click pada button dan panggil method refresh.
private void button1_Click(object sender, RoutedEventArgs e)
        {
            refresh();
        }
Coba jalankan dengan tekan F5. Dari situ ketika kita mengubah di textBox 
dan klik button Refresh, maka yang ditampilkan pada WebBrowser pun ikut berubah.
Nah, jika kita ingin membuatnya berubah seiring dengan apa yang kita ketikkan 
tanpa harus menekan button, buatlah sebuah event baru untuk TextBoxnya. 
Coba kembali ke design project dan klik TextBox-nya.
Pada properties, pilihlah Events lalu KeyUp
hte7
Selanjutnya panggil method refresh tadi pada event KeyUp
private void textBox1_KeyUp(object sender, KeyEventArgs e)
        {
            refresh();
        }

Sekarang jalankan kembali dan ketikkan pada TextBox, maka apa yang ditampilakn pada WebBrowser juga akan ikut berubah.

Terimakasih atas kunjungannya.. Semoga bermanfaat dan tunggu postingan-postingan selanjutnya.. CMIIW

Spread The Love, Share Our Article

Related Posts

2 Response to Membuat HTML Text Editor Sederhana di WPF

June 5, 2012 at 10:49 AM

Wahhh langsung diposting mas?? hehe

June 6, 2012 at 4:31 AM

Ozi : iya nih om.. mumpung lg rajin2nya.. hee

Post a Comment