================================================================================

# 如何開發「Menu Applet」

================================================================================

延續在另一個討論串「#37」提到的，

我有整理一些「theme」的「排列組合」。

為了要更方便操作，

分別可以藉由「fzf」，「dmenu」，「rofi」，「jgmenu」這些工具，搭配「Shell Script」，

來開發一些「小應用」，我個人稱為「Menu Applet」。

其中「fzf」是在「文字介面 (TUI)」使用，

而「dmenu」，「rofi」，「jgmenu」則是「圖形介面 (GUI)」。

我之前就有使用過「fzf」來開發這樣的「輔助工具」，

* note-about-manjaro / style-switch-xfce
* play-ubuntu-20.04-plan / style-switch-xfce
* play-ubuntu-18.04-plan / style-switch-xfce
* wallpaper-select

最近有了新的架構想法，不過還沒有時間去實作就是了，

所以這篇，先把核心主軸的概念，紀錄下來，提供給有興趣的人，一個探索的起點。

================================================================================

## 索引

* 「#2」 - 如何安裝「相關的工具」
* 「#3」 - 如何產生「選單內容 (Menu Content)」
* 「#4」 - 如何產生「選單 (Menu)」
* 「#5」 - 如何接到「使用者」選了那個「選項」
* 「#6」 - 模組化

================================================================================

## 相關筆記

* Menu Applet 開發筆記

================================================================================

================================================================================

[回到索引]

================================================================================

# 如何安裝「相關的工具」

================================================================================

## Ubuntu or Debian

在「Ubuntu」或「Debian」的環境，執行下面指令安裝

sudo apt-get install fzf dmenu rofi jgmenu

* fzf
* dmenu
* suckless-tools
* rofi
* jgmenu

> 我紀錄的頁面

================================================================================

## Archlinux

在「Archlinux」的環境，執行下面指令安裝

sudo pacman -Sy --needed fzf dmenu rofi jgmenu

* fzf
* dmenu
* rofi
* jgmenu

> 我紀錄的頁面

================================================================================

待續...

================================================================================

[回到索引]

================================================================================

================================================================================

[回到索引]

================================================================================

# 如何產生「選單內容 (Menu Content)」

================================================================================

> 我紀錄的頁面

================================================================================

## 範例選單內容

用來產生「選單」的「範例內容」如下

aaa
bbb
ccc

================================================================================

## 透過「echo」產生

echo -e "aaa\nbbb\nccc"

* man echo

> 關於「-e」指的是「enable interpretation of backslash escapes」

================================================================================

## 透過「printf」產生

printf "aaa\nbbb\nccc"

* man printf

================================================================================

## 透過「cat」產生

cat << EOF
aaa
bbb
ccc

EOF

* man cat
* man bash ## Here Documents
* man sh ## here-document

================================================================================

## 透過「cat file」產生

執行下面指令，產生「menu-content.txt」這個檔案

cat > menu-content.txt << EOF
aaa
bbb
ccc

EOF

執行下面指令，讀取「menu-content.txt」的內容，顯示在「stdout」。

cat menu-content.txt

================================================================================

待續...

================================================================================

[回到索引]

================================================================================

================================================================================

[回到索引]

================================================================================

# 如何產生「選單 (Menu)」

================================================================================

> 我紀錄的頁面

================================================================================

## fzf

* 範例

執行下面指令

echo -e "aaa\nbbb\nccc" | fzf

* man fzf

也就是上面「#3」提到的，

執行「echo -e "aaa\nbbb\nccc"」先產生「選單內容」，

接著再透過「管線 (Pipe)」也就是「|」，輸出給「fzf」去使用，進而產生「fzf 選單」。

下面其他的工具，都是同樣的模式。

================================================================================

## dmenu

* 範例

執行下面指令

echo -e "aaa\nbbb\nccc" | dmenu -b -l 10

* man dmenu

> 關於「-b」指的是「選單」顯示在「畫面下方」，預設是在「畫面上方」。

> 關於「-l 10」指的是「顯示 10 行」

================================================================================

## rofi

* 範例

執行下面指令

echo -e "aaa\nbbb\nccc" | rofi -dmenu

* man rofi

> 關於「-dmenu」指的是採用「dmenu模式」

================================================================================

## jgmenu

* 範例

執行下面指令

echo -e "aaa\nbbb\nccc" | jgmenu --simple --center --no-spawn

執行下面指令

echo -e "aaa,val_aaa\nbbb,val_bbb\nccc,val_ccc" | jgmenu --simple --center --no-spawn

* man jgmenu

> 關於「--center」，指的是「顯示在畫面中間區塊」

> 關於「--no-spawn」，因為「jgmenu」預設會將「選項」，直接當成「指令」執行，
所以要加入「--no-spawn」，才會跟「fzf」，「dmenu」，「rofi」的模式一致，顯示在「stdout」。

> 而「jgmenu」除了單純一行「一個選項」，也可以每行都用「,」當作「分隔符號」來區分「欄位」，
就是第二個指令的意義，也就是「選單內容」如下

aaa,val_aaa
bbb,val_bbb
ccc,val_ccc

可以想成是「csv」的格式。

更多的欄位定義，可以閱讀「$ man jgmenu」找尋「Fields」。

可以找到如下的內容

   Fields
       Each line of CSV menu data is parsed into the following fields  using  comma  as  a  field
       separator:

       (1) description
       (2) command
       (3) icon
       (4) working directory
       (5) metadata
       (6) execute without “sh -c” wrapper

       For example:

              printf "Terminal,xterm\\nWeb Browser,firefox" | jgmenu --vsimple

================================================================================

待續...

================================================================================

[回到索引]

================================================================================

================================================================================

[回到索引]

================================================================================

# 如何接到「使用者」選了那個「選項」

================================================================================

> 我紀錄的頁面

================================================================================

## fzf

* 範例

執行下面指令

selected=$(echo -e "aaa\nbbb\nccc" | fzf)

echo "Selected: ${selected}"

或是執行下面指令

selected=`echo -e "aaa\nbbb\nccc" | fzf`

echo "Selected: ${selected}"

可以對照「#4」提到的，

這裡將「echo -e "aaa\nbbb\nccc" | fzf」放到「$()」裡，或「``」裡

這個用法可以查詢「bash Command Substitution」。

當「使用者」選了「某個選項」，在「fzf」，按下「Enter」，

就會將「該選項」的「內容」，顯示在「stdout」。

而上面的範例，用了「selected」這個「變數」來「接收」，

所以上面的範例，並不會直接顯示在「stdout」，

而是將原本要顯示在「stdout」的內容，存到「selected」這個「變數」。

接著再使用「echo "Selected: ${selected}"」這行指令，顯示「selected」這個「變數」的內容。

下面其他的工具，都是同樣的模式，就不再個別說明了。

================================================================================

## dmenu

* 範例

執行下面指令

selected=$(echo -e "aaa\nbbb\nccc" | dmenu -b -l 10)

echo "Selected: ${selected}"

================================================================================

## rofi

* 範例

執行下面指令

selected=$(echo -e "aaa\nbbb\nccc" | rofi -dmenu)

echo "Selected: ${selected}"

================================================================================

## jgmenu

* 範例

執行下面指令

selected=$(echo -e "aaa,val_aaa\nbbb,val_bbb\nccc,val_ccc" | jgmenu --simple --center --no-spawn)

echo "Selected: ${selected}"

================================================================================

以上提供參考

報告完畢

================================================================================

[回到索引]

================================================================================

================================================================================

[回到索引]

================================================================================

# 模組化

================================================================================

## fzf

延續「#5」的範例。

原本的

selected=$(echo -e "aaa\nbbb\nccc" | fzf)

echo "Selected: ${selected}"

修改成

menu_content () {
	echo -e "aaa\nbbb\nccc"
}

menu_factory () {
	fzf
}

menu_start () {
	 menu_content | menu_factory
}

selected="$(menu_start)"

echo "Selected: ${selected}"

其他的工具，都是同樣的模式，就不再個別說明了。

## 範例

* fzf
* dmenu
* rofi
* jgmenu

## Demo Application

* demo-application

================================================================================

待續...

================================================================================

[回到索引]

================================================================================