なつねこメモ

2016/02/25

OS X アプリでログインフォームを作ってみる

アプリとして必要な、入力と出力の練習のために、
標準的なログインフォームを作ってみようと思います。

ということで、前回の続き(今は、画像の状態)から。

このプロジェクトに対して、ログインフォームをちまちまと実装しようと思います。

ログインフォームに必要そうな要素としては

• 入力ボックス ×2(with placeholder, 片方はマスキングあり)
• ボタン ×1

の２つくらいでしょうか。
あとは、誘導のために、ラベルなどを置くくらいですかね。

ということで、早速やっていきます。
まずは前回設置したラベルを消して、入力ボックスを２つ設置します。
これは、前回同様、右下のボックスからドラッグアンドドロップでいけます。

それっぽくなりました。 ただ、このまま実行すると、

ちょっといろいろ気に入らないので、調節していきます。
まず、 placeholder がほしいので、Attribute inspector から設定します。
ついでに、文字が真ん中に行くように、 Alignment も調節しました。

こういった具合で、もう１つも同様に設定します。

次に、ボタン(Push Button NSButton)を、これもまた適当な場所に設置します。
ボタンの属性として、 State にある Enabled のチェックを外しておきます。

次に、 Storyboard と ViewController を接続します。
Storyboard を開いた状態で、赤丸部分をクリックします。

すると、たぶん、こんな感じになります。

次に、 Storyboard の方にある[ログイン]を Ctrl を押しながら、コード側へ D&D します。
うまくいくと、なんか変なのがでるので、Name に loginButton と入れて[Connect]。
すると選択箇所に

@IBOutlet weak var loginButton: NSButton!

というコードが挿入されます。
ということで、次は Swift コードを書いていきます。

実装すべき処理は入力値を確認して、ボタンを押せるようにすることですので、
NSTextField ２つに対して、入力値チェックをします。

// Do any additional setup after loading the view.

となっている部分の下に、

self.addressTextField.delegate = self
self.passwordTextField.delegate = self

を追加し、クラスの継承の定義部分に NSTextFieldDelegate を追加します。
で、 representedObject の下に、コードを追加。

override func controlTextDidChange(obj: NSNotification) {
    let textField = obj.object as? NSTextField
    if(textField != nil) {
        if(textField?.identifier == "address") {
            self.addressFilled = textField?.stringValue != ""
        } else if(textField?.identifier == "password") {
            self.passwordFilled = textField?.stringValue != ""
        }
    }
 
    // Update button state.
    if(self.addressFilled && self.passwordFilled) {
        self.loginButton.enabled = true
    } else {
        self.loginButton.enabled = false
    }
}

また、クラス変数として、 addressFilled, passwordFilled を定義しておきます。

var addressFilled = false
var passwordFilled = false

これで、メールアドレス、パスワードともに何かが入力されている時のみ、
ボタンを押せるようになります。

ということで、ではでは〜。