import wNim

# アプリケーションの基盤準備

let app = App() # wNimアプリケーションのインスタンス作成
let frame = Frame(title = "Hello wNim") # メインウィンドウ(枠)の作成
let panel = Panel(frame) # ウィンドウ上の土台となるパネルを作成

# コントロール(部品)の作成

let sText1 = StaticText(panel, label = "Hello World")

# フォント設定: サイズ28, サンセリフ体(Swiss), 太字(Bold)
sText1.font = Font(28, family = wFontFamilySwiss, weight = wFontWeightBold)

# テキストの内容に合わせてコントロール自体のサイズを自動調整
sText1.fit()

let sText2 = StaticText(panel, label = "Hello wNim")
sText2.font = Font(16, family = wFontFamilySwiss, weight = wFontWeightBold)
sText2.fit()

let btn = Button(panel, label = "Click Me!")

# レイアウト定義(AutoLayout)
proc layout() =
  # autolayout: 文字列で相対的な位置関係を記述する機能
  # | : 親要素(panel)の端
  # ~ : 柔軟なスペース(スプリングのようなもの)
  # [element] : 配置するコントロール
  # (n) : サイズ指定(ピクセル)
  panel.autolayout """
    H:|~[sText1]~|      # 水平方向(H): 左右に伸縮空間を入れ、テキストを中央寄せ
    H:|~[sText2]~|
    H:|~[btn(200)]~|    # 水平方向(H): ボタン幅を200固定にし、左右に空間を入れて中央寄せ
    V:|~[sText1]~[sText2]~[btn(50)]~| # 垂直方向(V): 上下と間に空間を入れ、ボタン高さを50に固定
  """

# イベントハンドラ(動作)の定義

# パネルのサイズが変更された時にレイアウトを再計算する
panel.wEvent_Size do():
  layout()

# ボタンがクリックされた時の処理
btn.wEvent_Button do():
  # メッセージダイアログを生成して表示(.display() はモーダル表示)
  MessageDialog(frame, "Hello", caption = "MessageDialog").display()

# 5. アプリの起動準備
layout() # 初回起動時の配置計算
frame.center() # 画面の中央にウィンドウを表示
frame.show() # ウィンドウを可視化
app.mainLoop() # イベントループ開始(終了まで待機)