VisualWxで、手軽にHTMLブラウザを作ろう

暫く前から欲しい開発環境ってのがあって、「GUIアプリケーションを簡単に作る環境が欲しいよ」があります。

何で欲しいかというと、

仕事とか趣味で、ちょっとしたツールが欲しい需要がある。
Windows環境をメインにしているのと、仕事仲間に配布したいので、GUIアプリケーションにしたい。
開発に時間をかけたくない。

こんな事情がある訳です。

そんな訳で、Pythonを使って簡単にGUIアプリを作れないかな？と妄想する訳です。

紹介

…前置きが長くなってしまいましたが、最近、VisualWx(http://visualwx.altervista.org/indexit.php)がアップデートされたらしく、0.87.0.1になっていました。
早速入れてみます。

01 posted from フォト蔵

何か、画面変わってますね。

「File」→「New Project」とするとプロジェクト一覧が出ます。

02 posted from フォト蔵

何か、色々増えてます。
C++, Python, Ruby, Lua…。Luaかぁ。

さて、ここでは
一番簡単そうな、「WX_DLG_Python」を選びます。

03 posted from フォト蔵

この状態で、早速動かす事が出来ます。
ほらね。

04 posted from フォト蔵

作ってみましょう

では、VisualWxを使って簡単なアプリケーションを作ってみます。
ここでは、簡単なHTMLブラウザを作ってみます。

まず、URLを入力するエディットボックスを、ぽちっとな。

05 posted from フォト蔵

次は、URLを入力した後、移動する為のボタンを、ぽちっとな。

06 posted from フォト蔵

最後に、HTMLを描画するコンポーネントを、ぽちっとな。

07 posted from フォト蔵

この時点で、以下のように3つのコンポーネントがダイアログボックス上に並んでいます。

08 posted from フォト蔵

これらを適当にレイアウトしちゃいましょう。

09 posted from フォト蔵
レイアウトは、VBやDelphiの感覚で出来ちゃいますんで、楽です。

次は、各コンポーネントの名称をプロパティエディタで修正します。

エディットボックス
- Name:edtURL
- Text:"https://"
ボタン
- Name:btnGO
- Text:移動
- HTMLコンポーネント
- Name:htmlCtrl

プロパティの変更は、プロパティウィンドウ上でダブルクリックして修正すればOKです。

10 posted from フォト蔵

次は、ボタン(btnGO)をクリックすると、エディットボックス(edtURL)のURLに移動・描画させるようにしましょう。
ボタン(btnGO)を選択し、プロパティウィンドウの「Events」をクリックするとイベントタブが表示されます。
そこで、「E」を選択すると、「EVT_BUTTON」イベントが表示されます。
そこで、チェックボックスにチェックを入れます。

11 posted from フォト蔵

その後、中央のウィンドウの「Python」を選択すると、ダイアログのコードウィンドウが現れます。
すると、さっきの「EVT_BUTTON」イベントに該当する箇所のコードテンプレートが挿入されています。
(VBやDelphiみたく、ダブルクリックでコードウィンドウに移動…という事はありません。ちょっと残念)

12 posted from フォト蔵

ここで、エディットボックス(edtURL)のテキスト値をURLとして、HTMLコントロール(htmlCtrl)に移動・描画させてみます。
以下のコードを追加します。
(追加するのは、"add your code here"の下の3行です)

#[win]add your code here
    def btnGO_VwXEvOnButtonClick(self,event): #init function
        #[3d6]Code event VwX...Don't modify[3d6]#
        #add your code here
        url = self.edtURL.GetValue()
        print url
        self.htmlCtrl.LoadPage(url)
        return #end function

13 posted from フォト蔵

早速実行してみましょう。

14 posted from フォト蔵
ここで、"http://www.google.co.jp/"と入力して、「移動」ボタンをクリックします。暫くすると、

15 posted from フォト蔵
と画面が表示されます。やった。