Pythonでflexxを用いてUI要素を含む新しいウィジェットを作成する

Pythonでflexxを用いてUI要素を含む新しいウィジェットを作成してみます。

今回はflexxを用います。このライブラリ・モジュールはPythonの標準ライブラリではありませんので、事前にインストールする必要があります。

■Python

今回のPythonのバージョンは、「3.8.5」を使用しています。(Windows10)(pythonランチャーでの確認)

■flexxを用いてUI要素を含む新しいウィジェットを作成する

では、早速flexxを用いてUI要素を含む新しいウィジェットを作成し表示させるスクリプトを書いていきます。

■コード

from flexx import flx 

class Test(flx.Widget):
    def init(self):
        flx.Button(text='テスト1')
        flx.Button(text='てすと2')

app =flx.App(Test)
app.launch('app')

flx.run()

「from import」でflexxのflxを呼び出します。その後、testというclassと宣言し、引数,パラメーターとして括弧内にflx.Widgetを渡します。さらにclass内にdef文を用いてinit()を定義し、引数,パラメーターとして括弧内にselfを渡します。

渡した後に、init()を呼び出した時に実行される処理として、flx.Button()を用いてButtonウィジェットを作成します。引数,パラメーター(text=)として括弧内に文字列を渡します。これでButtonウィジェットが作成され、ウィジェット内に文字列が表示されます。

なお、今回はデスクトップアプリとして、作成したウィジェットを表示してみますので、app.launch()とflx.run()用いて、デスクトップアプリを実行します。

■実行・検証

このスクリプトを「flex_ui.py」という名前で、Pythonが実行されている作業ディレクトリ(カレントディレクトリ)に保存し、コマンドプロンプトから実行してみます。

[I 08:11:35 flexx.app] Asset store collected 2 new modules.
[I 08:11:36 flexx.app] Serving apps at http://localhost:49190/
[I 08:11:36 flexx.app] Asset store collected 26 new modules.
[I 08:11:36 flexx.app] Starting Flexx event loop.
[I 08:11:37 flexx.app] New session Test v59TaE2LwHUzItjJeeZFJyEi

実行してみると、コマンドプロンプト上に上記のメッセージが出力され、デスクトップアプリが実行され、今回作成したButtonウィジェットを表示させることができました。

デスクトップアプリの右上にある「X」ボタンをクリックすると、アプリが終了となります。

[I 08:15:35 flexx.app] Asset store collected 2 new modules.
[I 08:15:36 flexx.app] Serving apps at http://localhost:49190/
[I 08:15:36 flexx.app] Asset store collected 26 new modules.
[I 08:15:36 flexx.app] Starting Flexx event loop.
[I 08:15:37 flexx.app] New session Test JQEnitrFBvMqEGSumLUCQPMw
[I 08:15:39 flexx.app] Session closed Test JQEnitrFBvMqEGSumLUCQPMw
[I 08:15:39 flexx.app] Stopping Flexx event loop.

終了後、コマンドプロンプト上には上記のメッセージが出力され、eventloopが停止していることが確認できました。

コメント

タイトルとURLをコピーしました