世紀末の墓

世紀末の墓

IT系寄りの雑記

webブラウザを自作したい!(4)

はい。
今回は前回言ったように、戻る・進む・再読込ボタンを作ろうぜ、っていう回です。

SS↓
最初は、「戻る」も「進む」もできないので暗い。
f:id:silmin:20170807220603p:plain:w300

helloと検索して進んだので「戻る」ができるようになった
f:id:silmin:20170807220613p:plain:w300

戻ったら逆に「進む」ができるようになった
f:id:silmin:20170807220621p:plain:w300

しっかり再読込もできるよ!!!



やることはめちゃ簡単です....................が、めちゃ大変でした。(は?)



今日の荒ぶり度合い(詳しくは余談で)↓

そう、実装内容とは全くと言っていいほど関係ない所で躓いていました^^;;;;;

そんなこんなで見ていきましょう。

戻る・進む・再読込ボタンの実装

はい、やることは簡単です。

ボタン配置して、それにClickイベント乗っけて、GoBack()なりGoForward()なりRefresh()なりをするだけです。(ホントに)

実際には画像貼るとか枠線消すとかしましたが、メインは↑のことするだけです。

ソースコード

ボタン達初期化
urlBox = new TextBox()
{
    Location = new Point( 90, 2 ),
    Size = new Size( 1000, 20 ),
    Font = new Font( "meiryo", 10 )
};
backButton = new Button()
{
    Location = new Point( 0, 0 ),
    Size = new Size( 30, 30 ),
    BackgroundImage = Image.FromFile( @"img\back_clear.png" ),
    BackgroundImageLayout = ImageLayout.Stretch,
    FlatStyle = FlatStyle.Flat
};
forwardButton = new Button()
{
    Location = new Point( 30, 0 ),
    Size = new Size( 30, 30 ),
    BackgroundImage = Image.FromFile( @"img\forward_clear.png" ),
    BackgroundImageLayout = ImageLayout.Stretch,
    FlatStyle = FlatStyle.Flat
};
refreshButton = new Button()
{
    Location = new Point( 60, 0 ),
    Size = new Size( 30, 30 ),
    BackgroundImage = Image.FromFile( @"img\refresh.png" ),
    BackgroundImageLayout = ImageLayout.Stretch,
    FlatStyle = FlatStyle.Flat
};

backButton.FlatAppearance.BorderSize = 0;
forwardButton.FlatAppearance.BorderSize = 0;
refreshButton.FlatAppearance.BorderSize = 0;

各ボタンの初期化を行っています。

backButton・・・戻るボタン
forwardButton・・・進むボタン
refreshButton・・・再読込ボタン

おそらく新要素はここ?

BackgroundImage = Image.FromFile( @"img\forward_clear.png" ),  //名前の通り背景画像設定
BackgroundImageLayout = ImageLayout.Stretch,                   //画像のスタイル?を変更(並べるとかフィットさせるとか中央とか)←ここではフィットさせてる
FlatStyle = FlatStyle.Flat                                     //ボタンのスタイルを変更

画像のパスの@は「\をエスケープ文字じゃなく階層区切りとしてみる」という意味があります。
@がない状態だと\はエスケープ文字と捉えられてしまい、\を使うには\\と記述する必要がありますが、先頭に@をつけることで、普通につかえてうれしいですね。
画像のスタイル?についてはここ↓
コントロールやフォームに画像を表示する: .NET Tips: C#, VB.NET
これはあくまで背景をいじってるだけなのでButton.Imageプロパティとは違います。
今回は文字も表示しないので変わりないと思い、これを採用。

ボタンのスタイルについてはここ↓
01.フラットスタイルの外観を変更する < Button Tips < コントロール Tips メニュー < C# 2005 Tips HOME < HIRO's.NET
昔の記事ですが全然問題ないかと。
今回はフラットにしてます。(かっちょいいので)

backButton.FlatAppearance.BorderSize = 0;
forwardButton.FlatAppearance.BorderSize = 0;
refreshButton.FlatAppearance.BorderSize = 0;

これはボタンの枠線の太さを変更しています。
0に設定しているので実質枠無し、にしています。(かっちょいいので)

新しいメソッド群
private void Browser_CanGoBackChanged( object sender, EventArgs e )
{
    backButton.Enabled = browser.CanGoBack;
    if( backButton.Enabled ) backButton.BackgroundImage = Image.FromFile( @"img\back.png" );
    else backButton.BackgroundImage = Image.FromFile( @"img\back_clear.png" );
}

private void Browser_CanGoForwardChanged( object sender, EventArgs e )
{
    forwardButton.Enabled = browser.CanGoForward;
    if( forwardButton.Enabled ) forwardButton.BackgroundImage = Image.FromFile( @"img\forward.png" );
    else forwardButton.BackgroundImage = Image.FromFile( @"img\forward_clear.png" );
}

private void backButton_Click( object sender, EventArgs e )
{
    browser.GoBack();
    this.ActiveControl = null; 
}

private void forwardButton_Click( object sender, EventArgs e )
{
    browser.GoForward();
    this.ActiveControl = null; 
}

private void refreshButton_Click( object sender, EventArgs e )
{
    browser.Refresh();
    this.ActiveControl = null; 
}

CanGo....Changedというイベントは、「戻る」または「進む」の可不可が変更されると、発火します。
CanGoBackやCanGoForwardはboolで、戻れるかどうか、進めるかどうか、を持っています。

可能か不可能かで画像を変更したかったので書きました。

...Button_Clickというイベントは、文字通りそのボタンがクリックされたら発火します。
GoBack()やGoForward()、Refresh()はそれぞれ戻る・進む・再読込を行うメソッドです。

this.ActiveControl = null;

これは移動した時に、何らかのボタンを選択してしまっていることがあるので、ちょっとかっこ悪いかなぁと思って書きました。
これはデフォルトなのでしょうか。コードの意味は文字通りです。

余談

最初に言った躓いたところについてです。
僕は普段、自分用フォームアプリケーション作るだけならVisualStudioは使わずvimで書いて、付属のcscコンパイルしています。
VSは嫌いなのでね
UWPとかやるなら話は別だよ。

そのコンパイルオプションで /target:winexe というものがあるのですが、これを付けると実行したときにコンソールが開かないので嬉しいです。
というか、実行時にコンソールいちいち開かれても邪魔なのでね・・・^^;
それで、そのオプションを付けると.exeファイルが作られた直後に消失するという現象がおきまして。(は?????)
これには名前があるのかどうかわかりませんが、かなり焦りました。
なんか、色々デバッグした感じ、イベント貼ってないButtonがあって、そのボタンについて

Button.FlatAppearance.BorderSize = 0;

をするとその現象が起きるということがわかりました。

なにを言ってるのかわからないと思います。
僕もわかりませんので。(だれか早く教えて)

今日はこれにて。
明日時間があればお気に入り機能つけたいと思います。ノシ