Create a simple password change dialog

In this simple tutorial, we'll create a very basic password change view that uses a text label to display a password hint. When the user clicks on the label, the label expands to show more information about the user's password policy. The controls in the dialog are resized and repositioned to accommodate the larger text label. The complete code sample is provided later.

This example uses the following libraries:

import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	import qnx.fuse.ui.text.TextTruncationMode;
	import qnx.fuse.ui.text.TextFormatStyle;
	import qnx.fuse.ui.buttons.LabelButton;
	import qnx.fuse.ui.core.Container;
	import qnx.fuse.ui.layouts.Align;
	import qnx.fuse.ui.layouts.gridLayout.GridData;
	import qnx.fuse.ui.layouts.gridLayout.GridLayout;
	import qnx.fuse.ui.text.Label;
	import qnx.fuse.ui.text.TextFormat;
	import qnx.fuse.ui.text.TextInput;
	import qnx.uitest.views.BaseView;

First, in the GridResizeExample class, create the constructor. The constructor contains a call to the initUI() function, which will contain most of the logic for the example.

public function GridResizeExample()
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

Next, create the initUI() function and add some variables to store the password hint text. The variable valShort contains the text that will appear by default. The variable valLong contains the text that will appear when the user clicks the label.

private function initUI():void
			valShort = "*Password hint";
			valLong = "Your password must be at least 8 characters in length, " +
			"and no more than 12 characters in length. " +
			"Your password must contain at least three of the following: a " +
			"capital letter, a lower case letter, a number, " +
			"a special character. You cannot use passwords that you have " +
			"used within the past 365 days. ";

Next, in the initUI() function, create the container and the main GridLayout object. The dimensions of the container are set to the width and height of the stage. Because we want some flexibility in how the controls will be laid out, we will use the GridLayout type. The topGrid object is the GridLayout object that provides the layout for the container. The padding value, or the amount of padding on the top, bottom, left, and right side of the layout, is set to 30 pixels. The spacing, the amount of space between rows in the grid, is set to 20 pixels. The numColumns property is set to 2, indicating that the grid will contain only two columns. The topGrid object is applied to the mainContainer by using the layout property.

mainContainer = new Container();
			mainContainer.setActualSize(stage.stageWidth, stage.stageHeight);

			topGrid = new GridLayout();
			mainContainer.layout = topGrid;
			topGrid.padding = 30;
			topGrid.spacing = 20;
			topGrid.numColumns = 2;

Next, create the GridData objects that will define the position of the label and the button. All other controls in the container will be sized and positioned automatically. Below, the horizontal span of both objects is set to 2, meaning that both controls will span over two columns. The label that contains the hint will contain a margin on the right and left of the control.

The hAlign property of the buttonGridData object is set to Align.END. This will position the button at the far, right edge of the layout.

myGridData = new GridData();
			myGridData.hSpan = 2;	
			myGridData.marginLeft = 5;
			myGridData.marginRight = 20;

			buttonGridData = new GridData();
			buttonGridData.hSpan = 2;
			buttonGridData.hAlign = Align.END;

Next, create the controls and add them to the container. The labelHint object contains the text that we created in the first step. The myGridData LayoutData object is applied to the label, and the ButtonGridData LayoutData object is applied to the button. Remember that all other controls in the layout are positioned automatically. This allows each control to resize and reposition when the user expands the hint.

labelPassword = new Label();
			labelPassword.text = "New password:";			

			text1 = new TextInput();

			labelHint = new Label();
			labelHint.maxLines = 0;
			labelHint.truncationMode = TextTruncationMode.CLIP;
			labelHint.addEventListener(MouseEvent.CLICK, onButtonClick);
			labelHint.text = valShort;
			labelHint.format = myTextFormat;
			labelHint.layoutData = myGridData;

			labelConfirmPass = new Label();
			labelConfirmPass.text = "Confirm new password:";			

			text2 = new TextInput();

			buttonSubmit = new LabelButton();
			buttonSubmit.label = "Submit";
			buttonSubmit.layoutData = buttonGridData;

Finally, create the callback function to handle touch events on the label.

private function onButtonClick(e:MouseEvent):void
			if (labelHint.text == valShort)
				labelHint.text = valLong;
				labelHint.text = valShort;

That's it. This is a very simple example of a grid layout type that is used to position controls within a container. It shows you to how override automatic layout operations, and it shows how controls will be resized and repositioned automatically as other controls grow and shrink.

comments powered by Disqus