[Pharo-users] Writing a Login Dialog using Spec in 3 methods

Feb. 12, 2015

      So, how hard would it be for a normal user like me, who knows little about the Pharo UI or Spec, to write a plain, simple Login dialog ?

It turns out it only takes 3 methods and some boilerplate code that is mostly auto generated.

0. Make a subclass of ComposableModel with instance variables for the UI elements that we need

ComposableModel subclass: #LoginModel
  instanceVariableNames: 'usernameLabel usernameField passwordLabel passwordField'
  classVariableNames: ''
  category: '_UnpackagedPackage'

1. Specify the layout of the UI

LoginModel class>>#defaultSpec
  <spec: #default>

  ^ SpecLayout composed
      newColumn: [ :col |
        col 
          newRow: [ :row | 
            row 
              add: #usernameLabel width: 80; 
              add: #usernameField ]
          height: self inputTextHeight;
          newRow: [ :row | 
            row 
              add: #passwordLabel width: 80; 
              add: #passwordField ]
          height: self inputTextHeight ];
       yourself

2. Build the UI elements

LoginModel>>#initializeWidgets
  usernameLabel := self newLabel.
  usernameLabel text: 'Username'.
  usernameField := self newTextInput.
  usernameField autoAccept: true; ghostText: 'john@acme.com'.
  passwordLabel := self newLabel.
  passwordLabel text: 'Password'; yourself.
  passwordField := self newTextInput.
  passwordField beEncrypted; autoAccept: true; ghostText: '******'.
  self focusOrder add: usernameField; add: passwordField

3. Open the UI as modal dialog

LoginModel class>>#getCredentials
  "self getCredentials"

  | login dialog |
  login := self new.
  dialog := login openDialogWithSpec.
  dialog modalRelativeTo: self currentWorld.
  dialog cancelled ifTrue: [ ^ nil ].
  ^ login credentials

X. Some boilerplate code

Auto-generate read accessors for the 4 instance variables.

LoginModel>>#title
  ^ 'Login'

LoginModel>>#initialExtent
  ^ 350 @ 150

LoginModel>>#credentials
  ^ usernameField text -> passwordField text

I think this is pretty cool. I really can't imagine how much easier, how much less code this should take.

Let us all learn to use what we have, accept it the way it is, and make it better, together.

Sven

BTW: While writing this, following some senders/implementers, I found out that in Pharo 4, CredentialsEditor does almost the same thing.

--
Sven Van Caekenberghe
Proudly supporting Pharo
http://pharo.org
http://association.pharo.org
http://consortium.pharo.org