みかづきメモ

学習したことのメモとか、日記とか、備忘録。

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

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


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

f:id:MikazukiFuyuno:20160224233531p:plain:w400

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

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

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

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

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

f:id:MikazukiFuyuno:20160224233547p:plain:w400

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

f:id:MikazukiFuyuno:20160224233600p:plain:w200

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

f:id:MikazukiFuyuno:20160224233617p:plain:w200

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

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

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

f:id:MikazukiFuyuno:20160224233634p:plain:w200

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

f:id:MikazukiFuyuno:20160224233650p:plain:w400

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

@IBOutlet weak var loginButton: NSButton!

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

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

// 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

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

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