Wicket 挑戦記 Vol.7
~メニュー編~
大分かかってしまいました。一週間はかかってしまいました。
サンプル毎にメニューを追加したいと思い、どうせやるならとwicket-jqueryに挑戦してみました。それでは、本編スタート。
まずはmvnリポジトリからあさります。いつもお世話になっております。
![](https://kazoku-love.com/wp-content/uploads/2023/07/46-1.png)
いまのところ9.x系で最新の9.12でいきます。
LicenseはApache 2.0です。OKですね。Mavenの文字をコピーします。
![](https://kazoku-love.com/wp-content/uploads/2023/07/47-1024x683.png)
これを、pom.xmlにはりつけます。最初にダウンロードしたwicket.versionは9.14ですが、
![](https://kazoku-love.com/wp-content/uploads/2023/07/48.png)
ぷろばいでど でぃぺんでんしー(日本語がわかりません。)は9.12.0とあるのでpom.xmlもそれにあわせます。
![](https://kazoku-love.com/wp-content/uploads/2023/07/51.png)
wicketのversionを9.12.0にさげて、wicket-jquery-uiのversionも変数に変更します。
![](https://kazoku-love.com/wp-content/uploads/2023/07/49.png)
pom.xmlに保存したら、勝手にダウンどーろが始まります。ライブラりのなかをのぞきます。
![](https://kazoku-love.com/wp-content/uploads/2023/07/52-1.png)
jquery-ui.jsが入っています。v1.13.2のようです。リソースリファレンスのコメントはv.1.11.1とありますが、気にしません。
あと名前がでてしまうところの削除がめんどーです。どこかで消し忘れてもそっとしておいてください。
メニューはベースhtmlに置きます。
![](https://kazoku-love.com/wp-content/uploads/2023/07/55-1-1024x446.png)
①:メニューの1階層目にSampleを入れます。
②:1階層目のSampleの子メニューにSample001を入れてます。Sample001~と続けていきたいと思います。
③:ベースHtmlのwicket:idにメニューを追加します。
④:画面左側に設定したcss(left)に差し込みます。
⑤:Sample001メニュークリックでSample001のページを開くようにします。
⑥:自前のスタイルシートを登録します。下で説明します。
メニューがどーてきに作成できてうれしいですね。メニューがどーてきに作成できる。うれしいですね。昔懐かしいJava Swingみたいです。
これがWebでできるんですから時代はかわりましたね。
それでは起動してみます。
![](https://kazoku-love.com/wp-content/uploads/2023/07/57.png)
マウスを重ねたときのメニュー表示です。
![](https://kazoku-love.com/wp-content/uploads/2023/07/58.png)
画面遷移もばっちりです。
![](https://kazoku-love.com/wp-content/uploads/2023/07/63.png)
マウスを重ねたとき、”Sample”メニューが”Hello Wicket World”よりも前に来ていますが、最初は来ませんでした。
![](https://kazoku-love.com/wp-content/uploads/2023/07/61-1-1024x258.png)
なので、前にくるよう自前で作成しました。
⑦:自前のクエリを登録します。
⑧:前にくるようにz-index:2としました。ほかはそのままです。
⑨:これも自前。というかもともとのjQueryのアイコンpngでっす。
メニューのイメージだけ緑色にしてみました。上のメニューをみてみてください。みどり色です。
![](https://kazoku-love.com/wp-content/uploads/2023/07/62.png)
ぃいじょーです。
最近歯医者通ってるんですけど。
治療してる虫歯を金属の棒でごちごち叩いて、「痛いですか?」って聞いてきます。
その時は「痛いです」と答えましたが、
「そんなにごちごち叩いたら、虫歯じゃなくても痛いです!叩くなっ!」
って答えたいです。これが伝わるよな「痛いです」の方法はないでしょうか。
それでは。