Gtkdialog-Linuxでシェルスクリプトを使用してグラフィカル(GTK +)インターフェイスとダイアログボックスを作成する


Gtkdialog (またはgtkdialog)は、Linuxシェルスクリプトを使用してGTKライブラリを使用し、xmlのような構文を使用して、GTK +インターフェイスとダイアログボックスを作成および構築するためのオープンソースの気の利いたユーティリティです。 gtkdialogを使用してインターフェースを簡単に作成できます。 Zenityと呼ばれる最も有名なツールによく似ていますが、vbox、hbox、ボタン、フレーム、テキスト、メニューなど、多くのウィジェットを簡単に作成できる便利なカスタマイズ可能な機能がいくつか付属しています。

関連項目:Zenityを使用してGTK +グラフィカルダイアログボックスを作成する

LinuxへのGtkdialogのインストール

gtkdialog-0.8.3(最新バージョン)をダウンロードするか、wgetコマンドを使用してダウンロードしたファイルを解凍し、次のコマンドを実行してソースからコンパイルすることもできます。

$ sudo apt-get install build-essential		[on Debian based systems]
# yum install gcc make gcc-c++			[on RedHat based systems]
$ wget https://gtkdialog.googlecode.com/files/gtkdialog-0.8.3.tar.gz
$ tar -xvf gtkdialog-0.8.3.tar.gz
$ cd gtkdialog-0.8.3/
$ ./configure
$ make
$ sudo make install

それでは、いくつかのボックスの作成を開始し、ホームフォルダに新しい「 myprogram 」スクリプトを作成しましょう。

$ cd
$ touch myprogram

次に、任意のテキストエディタを使用して「 myprogram 」ファイルを開き、次のコードを追加します。

#!/bin/bash 

GTKDIALOG=gtkdialog 
export MAIN_DIALOG=' 

<window title="My First Program" icon-name="gtk-about" resizable="true" width-request="300" height-request="310"> 

<vbox> 
	<hbox space-fill="true" space-expand="true"> 
		<button>	 
			<label>Welcome to TecMint.com Home!</label> 
			<action>echo "Welcome to TecMint.com Home!"</action> 
		</button> 
	</hbox> 
</vbox> 
</window> 
' 

case $1 in 
	-d | --dump) echo "$MAIN_DIALOG" ;; 
	*) $GTKDIALOG --program=MAIN_DIALOG --center ;; 

esac 
------------

ファイルを保存し、実行権限を設定して、図のように実行します。

$ chmod 755 myprogram
$ ./myprogram

これは、最初のプログラムがgtkdialogを使用して作成および実行された方法です。

ここで、コードについて簡単に説明します。

  1. #!/bin/bash: The first line of any shell script, it is used to specify the bash shell path.
  2. GTKDIALOG = gtkdialog: Here we defined a variable to use it later when executing the shell script with gtkdialog, this line must be in all scripts that you create using gtkdialog.
  3. export MAIN_DIALOG=: Another variable we defined which will contain all syntax for our interface, you can replace MAIN_DIALOG with any name you want, but you have to replace it also in last 4 lines of the script.
  4. Window Title: I don’t think that this code need to be explained, we created a title, a default icon for the window, we choose if it was resizable or not, and we defined the width and height we want, of course all of those options are secondary, you can just use the <window> tag if you want.
  5. <vbox> : We use the vbox tag to create a vertical box, it is important to create a vbox tag in order to contain other tags such as hbox and button, etc.
  6. <hbox>: Here we created a horizontal box using the <hbox> tag, “space-fill” and “space-expand” are options to expand the hbox through the window.
  7. <button>: Create a new button.
  8. <label>: This is the default text for the button, we closed the label tag using </label>, of course it is very important to close all the tags that we use.
  9. <action>: This what happens when the button is clicked, you can run a shell command if you want or execute any other file if you want, there are many other actions and signals as well, don’t forget to close it using </action>.
  10. </button>: To close the button tag.
  11. </hbox>: To close the hbox tag.
  12. </window>: To close the window tag.

最後の4行は、gtkdialogを使用して作成するすべてのシェルスクリプトにも含まれている必要があります。これらのスクリプトは、gtkdialogコマンドと–centerオプションを使用してMAIN_DIALOG変数を実行し、ウィンドウを中央に配置します。これは実際には非常に便利です。

同様に、別のファイルを作成して「secondprogram」と呼び、次のコンテンツ全体を追加します。

#!/bin/bash 

GTKDIALOG=gtkdialog 
export MAIN_DIALOG=' 

<window title="My Second Program" icon-name="gtk-about" resizable="true" width-request="250" height-request="150"> 

<vbox> 
	<hbox space-fill="true"> 
		<combobox>	 
			<variable>myitem</variable> 
			<item>First One</item> 
			<item>Second One</item> 
			<item>Third One</item> 
		</combobox> 
	</hbox> 
	<hbox> 
		<button> 
			<label>Click Me</label> 
			<action>echo "You choosed $myitem"</action> 
		</button> 
	</hbox> 
<hseparator width-request="240"></hseparator> 

	<hbox> 
		<button ok></button> 
	</hbox> 
</vbox> 
</window> 
' 

case $1 in 
	-d | --dump) echo "$MAIN_DIALOG" ;; 
	*) $GTKDIALOG --program=MAIN_DIALOG --center ;; 

esac

ファイルを保存し、実行権限を設定して、図のように実行します。

$ chmod 755 secondprogram
$ ./secondprogram

ここで、コードについて簡単に説明します。

  1. We create a combobox widget using <combobox>, the <variable> tag is the default name of the variable which the chosen item will be stored in, we used this variable to print the selected item later using echo.
  2. <hseparator> is a horizontal separator, you can set the default width for it using width-request option.
  3. <button ok></button> is an OK button that will close the window just when you click it, it is very useful so we don’t need to create a custom button to do that.

「thirdprogram」という別のファイルを作成し、そのファイルにコード全体を追加します。

#!/bin/bash 

GTKDIALOG=gtkdialog 
export MAIN_DIALOG=' 

<window title="My Second Program" icon-name="gtk-about" resizable="true" width-request="250" height-request="150"> 

<notebook tab-label="First | Second|"> 
<vbox> 
	<hbox space-fill="true"> 
		<combobox>	 
			<variable>myitem</variable> 
			<item>First One</item> 
			<item>Second One</item> 
			<item>Third One</item> 
		</combobox> 
	</hbox> 
	<hbox> 
		<button> 
			<label>Click Me</label> 
			<action>echo "You choosed $myitem"</action> 
		</button> 
	</hbox> 
<hseparator width-request="240"></hseparator> 

	<hbox> 
		<button ok></button> 
	</hbox> 
</vbox> 

<vbox> 

	<hbox space-fill="true"> 
		<text> 
		<label>Spinbutton </label> 
		</text> 
	</hbox> 

	<hbox space-fill="true" space-expand="true"> 
		<spinbutton range-min="0" range-max="100" range-value="4"> 
			<variable>myscale</variable> 
			<action>echo $myscale</action> 
		</spinbutton> 
	</hbox> 

	<hbox> 
		<button ok></button> 
	</hbox> 

</vbox> 
</notebook> 
</window> 
' 

case $1 in 
	-d | --dump) echo "$MAIN_DIALOG" ;; 
	*) $GTKDIALOG --program=MAIN_DIALOG --center ;; 

esac

ファイルを保存し、実行権限を付与して、図のように起動します。

$ chmod 755 thirdprogram
$ ./thirdprogram

ここでは、コードをより詳細に説明します。

  1. We created two notebook tabs using <notebook>, the tab-label option is where you can create tabs, gtkdialog will create tabs depending on the labels you enter, every <vbox> is defined as a tab, so the first tab starts with the first <vbox>, the second tab starts with the second <vbox>.
  2. <text> is a text widget, we used the <label> tag to set the default text for it.
  3. <spinbutton> tag will create a new spin button, range-min option is the minimum value, and range-max is the maximum value for the spin button, range-value is the default value for the spin button.
  4. We gave a variable “myscale” to the <spinbutton>.
  5. We printed the selected value using echo and $myscale variable, the default signal for the action here is “value-changed” which helped us doing that.

これは単なるサンプルウィンドウでした。必要に応じてgtkdialogを使用してより複雑なインターフェイスを作成できます。また、gtkdialog Webサイトの公式ドキュメントを参照して、以下のリンクからすべてのgtkdialogタグを表示できます。

Gtkdialogドキュメント

以前にgtkdialogを使用してシェルスクリプトのGUIを作成したことがありますか?または、そのようなユーティリティを使用してインターフェイスを作成しましたか?あなたはそれについてどう思いますか?

全著作権所有。 © Linux-Console.net • 2019-2022