Main Page | Packages | Class Tree | Index

it.gotoandplay.smartfoxbits.bits

class LoginBox

MovieClip
  |
  +--it.gotoandplay.smartfoxbits.bits.LoginBox


class LoginBox
extends MovieClip

The LoginBox class provides methods and properties to control the SmartFoxBits' LoginBox component behavior at author-time and run-time.

The SmartFoxBits' LoginBox component lets the user login to a specified zone on a SmartFoxServer instance. The component contains two textfields to input a username and a password, and a login button. As for all the other SmartFoxBits components, these form items and their window-like background are based on the mCOM Flash components. You can read more about these components and their features here.

The LoginBox can be customized by setting the form layout (among the seven ones available), the input fields labels and the window title, hide the password field and the window frame. You can also make it invisible until a connection with the server is set, and make it disappear after a succesful login.
As the LoginBox doesn't feature advanced, database driven user identification, both the username and the password are optional. If no username is provided, the server automatically creates a name for the client using the format "guest_n", where n is a progressive number. You can avoid this and force users to enter their own nickname by setting the 'No guest login' message property.
If a password is provided, username and password are checked against the moderators list (configured in the config.xml file on the server side) and if a a matching is found, the user is set as a moderator.

Usage:
Drag & drop the LoginBox component onto the stage and set its properties in the Property Inspector at author-time, or attach it at run-time using actionscript.
The component communicates with SmartFoxServer through the SmartFoxBits' Connector component: read the Connector's description for further details.
During run-time, as soon as a connection is available, the form fields are enabled and the user can enter his/her own credentials and hit the button (or the Enter key) to login. If an error occurs (username already existing, for example) an error message is displayed.


Author:

Version:
1.0.0 - First release.

Since:
SmartFoxBits v1.0

Example:
To instantiate the LoginBox at run-time, make sure it's contained in your library and write the following:
import it.gotoandplay.smartfoxbits.bits.LoginBox
 
var loginBox_mc:LoginBox = LoginBox(attachMovie("LoginBox", "loginBox_mc", 10))
loginBox_mc.zone = "simpleChat"

NOTE 1: importing the it.gotoandplay.smartfoxbits.bits.LoginBox class and casting the LoginBox's movieclip to it is useful if you intend to use a development tool having code-completion features. Otherwise this is enough:

var loginBox_mc = attachMovie("LoginBox", "loginBox_mc", 10)
NOTE 2: in the following examples loginBox_mc represents the LoginBox instance name.

See also:


Property Summary

public
autoHide: Boolean (read, write)
Hide the LoginBox component before connection to SmartFoxServer and after a succesful login.

public
backgroundWindow: Window (read-only)
A reference to the background Window component.

public
backgroundWindowTitle: String (read, write)
The title of the form fields background window.

public
buttonText: String (read, write)
The label of the "login" button.

public
errorTextField: TextField (read-only)
A reference to the error message TextField.

public
height: Number (read, write)
The height of the LoginBox component on the stage, in pixels.

public
layout: String (read, write)
The layout of the login form components.

public
loginButton: Button (read-only)
A reference to the "login" Button component.

public
noGuestLoginMsg: String (read, write)
The error message to be displayed in case of guest login attempt.

public
passwordLabel: Label (read-only)
A reference to the "password" Label component.

public
passwordLabelText: String (read, write)
The label text of the password input field.

public
passwordTextInput: TextInput (read-only)
A reference to the "password" TextInput component.

public
restrict: String (read, write)
The set of characters that a user may or may not enter into the username input field.

public
showBackgroundWindow: Boolean (read, write)
Show/hide the LoginBox background window.

public
showFocusRectangle: Boolean (read, write)
Show/hide the focus rectangle around the input fields and the login button.

public
showPassword: Boolean (read, write)
Show/hide the password input field and label.

public
spacing: Number (read, write)
The number of pixels dividing the form components (username and password inputs fields, login button, error message).

public
usernameLabel: Label (read-only)
A reference to the "username" Label component.

public
usernameLabelText: String (read, write)
The label text of the username input field.

public
usernameTextInput: TextInput (read-only)
A reference to the "username" TextInput component.

public
width: Number (read, write)
The width of the LoginBox component on the stage, in pixels.

public
zone: String (read, write)
The SmartFoxServer zone (application) to login to.

Constructor


LoginBox ( )
LoginBox class constructor. Initializes the component.

Method Summary

public
refreshView ( ): Void
Refresh the LoginBox's view.



Property Documentation

autoHide

public autoHide: Boolean (read, write)
Hide the LoginBox component before connection to SmartFoxServer and after a succesful login.

If set to true, the LoginBox won't be visible until a connection to SmartFoxServer is made available (through the Connector component), and will disappear again after a successful login.

NOTE: setting this property at run-time only affects the post-login behavior of the component.

Usage:
To make the LoginBox disappear after a succesful login:
loginBox_mc.autoHide = true

backgroundWindow

public backgroundWindow: Window (read-only)
A reference to the background Window component.

This reference allows you to take control over the background Window mCOM component, to set its properties.
Check the mCOM Flash components documentation for further details.

Usage:
To access the background Window component:
import com.metaliq.containers.Window
 
var win:Window = loginBox_mc.backgroundWindow
win.icon = "myCustomIconLinkage"

See also:

backgroundWindowTitle

public backgroundWindowTitle: String (read, write)
The title of the form fields background window.

Usage:
To set the background window title:
loginBox_mc.backGroundWindowTitle = "Login"

buttonText

public buttonText: String (read, write)
The label of the "login" button.

Usage:
To set the login button label:
loginBox_mc.buttonText = "Click here"

See also:

errorTextField

public errorTextField: TextField (read-only)
A reference to the error message TextField.

This reference allows you to take control over the error message TextField, to set its properties (for example text styling). Check the Flash documentation for further details.

Usage:
To access the error message TextField:
var tf:TextField = loginBox_mc.errorTextField
tf.textColor = 0xFFCC00

height

public height: Number (read, write)
The height of the LoginBox component on the stage, in pixels.

Use this property instead of _height to resize the LoginBox mantaining the inner components' aspect ratio. If the size of inner components exceeds the height value, this property is set to the minimum possible value to avoid clipping.

Usage:
To set the LoginBox's height:
loginBox_mc.height = 300

See also:

layout

public layout: String (read, write)
The layout of the login form components.

Username and password inputs fields, their labels and the login button can be rearranged according to seven predefined layouts:
  • row: input fields and button in a row with labels above the input fields, left aligned;
  • column-left: input fields, labels and button draw up in column, left aligned;
  • column-center: input fields, labels and button draw up in column, center aligned;
  • column-right: input fields, labels and button draw up in column, right aligned;
  • side-top: input fields and labels draw up in column, left aligned; login button on their right side, aligned to the username input field (this is the default layout);
  • side-middle: input fields and labels draw up in column, left aligned; login button on their right side, centered between the input fields;
  • side-bottom: input fields and labels draw up in column, left aligned; login button on their right side, aligned to the password input field;
NOTE: if password input field is hidden, the side- layouts are all the same.

Usage:
To set the LoginBox layout:
loginBox_mc.layout = "column-center"

See also:

loginButton

public loginButton: Button (read-only)
A reference to the "login" Button component.

This reference allows you to take control over the login Button mCOM component, to set its properties (for example size). Please notice that if you change the component size, you have to call the refreshView method to rearrange the LoginBox's view accordingly.
Check the mCOM Flash components documentation for further details.

Usage:
To access the login Button component:
import com.metaliq.controls.Button
 
var bt:Button = loginBox_mc.loginButton
bt.height = 100
loginBox_mc.refreshView()

See also:
com.metaliq.controls.Button, SmartFoxBits and the mCOM Flash components

noGuestLoginMsg

public noGuestLoginMsg: String (read, write)
The error message to be displayed in case of guest login attempt.

At login, if no username is provided, SmartFoxServer automatically creates a name for the client using the format "guest_n" (where n is a progressive number). Setting this property prevents the LoginBox to accept a null username, showing the error message if the login button is pressed.

Usage:
To set the "No guest login" message:
loginBox_mc.noGuestLoginMsg = "Please enter a username"

passwordLabel

public passwordLabel: Label (read-only)
A reference to the "password" Label component.

This reference allows you to take control over the password Label mCOM component, to set its properties (for example text styling). Please notice that if you change the component size, you have to call the refreshView method to rearrange the LoginBox's view accordingly.
Check the mCOM Flash components documentation for further details.

Usage:
To access the password Label component:
import com.metaliq.controls.Label
 
var lb:Label = loginBox_mc.passwordLabel
lb.setInstanceStyle("fontColor", 0xFFCC00)

See also:
com.metaliq.controls.Label, SmartFoxBits and the mCOM Flash components

passwordLabelText

public passwordLabelText: String (read, write)
The label text of the password input field.

Usage:
To set the password label text:
loginBox_mc.passwordLabelText = "Enter your password:"

See also:

passwordTextInput

public passwordTextInput: TextInput (read-only)
A reference to the "password" TextInput component.

This reference allows you to take control over the password TextInput mCOM component, to set its properties (for example text styling). Please notice that if you change the component size, you have to call the refreshView method to rearrange the LoginBox's view accordingly.
Check the mCOM Flash components documentation for further details.

Usage:
To access the password TextInput component:
import com.metaliq.controls.TextInput
 
var ti:TextInput = loginBox_mc.passwordTextInput
ti.setInstanceStyle("fontColor", 0xFFCC00)

See also:
com.metaliq.controls.TextInput, SmartFoxBits and the mCOM Flash components

restrict

public restrict: String (read, write)
The set of characters that a user may or may not enter into the username input field.

Check the TextField class documentation in the Flash help for description and usage examples of this property.
By default, tag delimiters ("<" and ">" characters) are not allowed, to prevent possible html textfields corruption.

showBackgroundWindow

public showBackgroundWindow: Boolean (read, write)
Show/hide the LoginBox background window.

Usage:
To hide the background window:
loginBox_mc.showBackgroundWindow = false

showFocusRectangle

public showFocusRectangle: Boolean (read, write)
Show/hide the focus rectangle around the input fields and the login button.

Usage:
To show the focus rectangle:
loginBox_mc.showFocusRectangle = true

showPassword

public showPassword: Boolean (read, write)
Show/hide the password input field and label.

If you need to implement the Moderator feature in your application, then this property must be set to true.
In the LoginBox component, the entered password is checked against the Moderator list only, in the SmartFoxServer's config.xml file. No advanced user identification is available with this component.

Usage:
To show the password input field:
loginBox_mc.showPassword = true

spacing

public spacing: Number (read, write)
The number of pixels dividing the form components (username and password inputs fields, login button, error message).

Usage:
To set the spacing:
loginBox_mc.spacing = 10

See also:

usernameLabel

public usernameLabel: Label (read-only)
A reference to the "username" Label component.

This reference allows you to take control over the username Label mCOM component, to set its properties (for example text styling). Please notice that if you change the component size, you have to call the refreshView method to rearrange the LoginBox's view accordingly.
Check the mCOM Flash components documentation for further details.

Usage:
To access the username's Label component:
import com.metaliq.controls.Label
 
var lb:Label = loginBox_mc.usernameLabel
lb.setInstanceStyle("fontColor", 0xFFCC00)

See also:
com.metaliq.controls.Label, SmartFoxBits and the mCOM Flash components

usernameLabelText

public usernameLabelText: String (read, write)
The label text of the username input field.

Usage:
To set the username label text:
loginBox_mc.usernameLabelText = "Enter your username:"

See also:

usernameTextInput

public usernameTextInput: TextInput (read-only)
A reference to the "username" TextInput component.

This reference allows you to take control over the username TextInput mCOM component, to set its properties (for example text styling). Please notice that if you change the component size, you have to call the refreshView method to rearrange the LoginBox's view accordingly.
Check the mCOM Flash components documentation for further details.

Usage:
To access the username TextInput component:
import com.metaliq.controls.TextInput
 
var ti:TextInput = loginBox_mc.usernameTextInput
ti.setInstanceStyle("fontColor", 0xFFCC00)

See also:
com.metaliq.controls.TextInput, SmartFoxBits and the mCOM Flash components

width

public width: Number (read, write)
The width of the LoginBox component on the stage, in pixels.

Use this property instead of _width to resize the LoginBox mantaining the inner components' aspect ratio. If the size of inner components exceeds the width value, this property is set to the minimum possible value to avoid clipping.

Usage:
To set the LoginBox's width:
loginBox_mc.width = 500

See also:

zone

public zone: String (read, write)
The SmartFoxServer zone (application) to login to.

Usage:
To set the server zone:
loginBox_mc.zone = "simpleChat"

To retrieve the zone:

trace(loginBox_mc.zone) // Traces the SmartFoxServer zone to login to

See also:


Constructor Documentation

LoginBox

function LoginBox()
LoginBox class constructor. Initializes the component.


Method Documentation

refreshView

public function refreshView(): Void
Refresh the LoginBox's view.

If you change the size of the LoginBox's inner components, you have to call this method to rearrange the LoginBox's view accordingly.


The documentation was generated from the following file: