vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

AngularとSpringBootでWebページを作ってみたい その3

Angular SpringBoot CSS

はじめに

今回は、Spring boot側のルーティングと、特定の要素をマウスオーバーした時に、メニューを表示する方法について調べたことをまとめます。

ルーティング

以前Angular側ではルーティングを行ったわけですが、トップページから遷移したときは問題なくても、
「トップドメイン/contact」 など、トップから遷移したあとのURLに直接アクセスしようとするとエラーになってしまいます。

これを回避するためには、Spring boot側でトップドメイン以下のページのURLにアクセスしたときもAngularのindex.htmlを返すようにする必要があります。

MainController.java

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.View;
import org.springframework.web.servlet.view.InternalResourceView;

@Controller
public class MainController {
    @RequestMapping(value = {"/", "/menulist", "/contact"})
    public View redirect() {
        return new InternalResourceView("/index.html");
    }
}

htmlを表示するために使っているInternalResourceViewですが、下記などを見ると、JSPを表示する場合に使用されるもののようです。

これを使うと、ng buildでビルドしたファイルを全部 src/main/resources/static 以下に入れればOKなのですが、
これが正しい方法なのか、というところはちょっと不安が残っています。

アイテムがマウスオーバーされた時にメニューを表示する

ボタンをマウスオーバーした時に、メニューを表示してみます。

具体的には https://www.jetbrains.com/ の上部メニューの、「IDEs」「.NET & VISUAL STUDIO」などをマウスオーバーした時に表示されるメニュー(ウィンドウ)を真似したいということですｗ

ngIfなどを使ったり試行錯誤していたのですが、ぐぐってみるとCSSでシンプルに解決する方法が見つかりましたorz

global-header.component.html

< header id="global-header">
〜省略〜
  < div id="header-button-menulist-area">
    < button routerLink="./menulist" class="header-button">Menu< /button>
    < app-global-header-menulist-window id="global-header-menulist-parent">< /app-global-header-menulist-window>
  < /div>
〜省略〜
< /header>

global-header.component.css

#global-header{
    background-color: #2980B9;
    width: 100%;
    min-width: 1200px;
    height: 90px;
    position: fixed;
    top: 0;
    z-index: 1;
}
〜省略〜
.header-button{
    background-color: #2980B9;
    border-style: none;
    color: #FFFFFF;
    font-size: 18px;
    width: 160px;
    height: 60px;
}
.header-button:hover{
    background-color: #FFF;
    color: #000;
    font-weight: bold;
}
〜省略〜
#header-button-menulist-area{
    width: 160px;
    height: 60px;
    float: left;
    margin: 30px 20px 0px 0px;
}
〜省略〜

#header-button-menulist-area #global-header-menulist-parent{
    visibility: hidden;
}
#header-button-menulist-area:hover #global-header-menulist-parent{
    visibility: visible;   
}

global-header-menulist-window.component.html

< div id="global-header-menulist-window-frame">
  < button class="menulist-window-button">
    < div>Menu 1< /div>
    < div>1つめのメニューはカレーうどんについて。

    いや〜、うまいっすね。

    みなさんも白い服を着ているときはカレーうどんに決まり！
    < /div>
  < /button>
  < button class="menulist-window-button">
    < div>Menu 2< /div>
    < div>2つめのメニューはかけうどん。

    いいっすよ、かけうどん。

    かけっこしながらかけうどん！
    < /div>
  < /button>
  < button class="menulist-window-button">
    < div>Menu 3< /div>
    < div>3つめのメニューは月見うどん。

    月が、きれいですね。
    < /div>
  < /button>
  < button class="menulist-window-button">
    < div>Menu 4< /div>
    < div>4つめのメニューはきつねうどん。

    場所によってはきつねそばもあるらしいです。
    < /div>
  < /button>
< /div>

global-header-menulist-window.component.css

#global-header-menulist-window-frame{
    width: 100%;
    height:300px;
    background-color: #FFF;
    position: absolute;
    left: 0;
    padding: 40px;
}
.menulist-window-button{
    border-style: none;
    width: 400px;
    height: 120px;
    margin-left: 60px;
    margin: 10px;
    float: left;
}
  • メニュー自体は適当にボタンを並べているだけです。
  • global-header-menulist-window.component.htmlが表示されている間は、
    マウスオーバーの領域が div id:header-button-menulist-area に加えて global-header-menulist-window.component.html に広がるため、メニュー内のボタンも選択可能、というわけですね。

おわりに

次は入力フォーム辺りを触ってみたいところ。

参照