Validated numeric input control
The communication interface between the user and the software is important part in all application - especially which runs on touch enabled devices.
Many business application’s base are the numbers but the touch based smartphones do not contain any easy, fast and safe possibility to request a number from the user.
I will introduce that how can implement a reusable, flexible validated numeric input panel in MobiAccess.
In the first part I present the source code of the sample application’s user interface and the event handling. Let’s see it!
All MobiAccess application must contain a Main class with a public static Main method. This is the application’s entry point.
Because this is a very simple application it contains only a main form where everything happens. The Main class’s Main function creates and shows only a MainForm.
Main class:
Main { MainForm.CI().Show(); return; }
The MainForm contains three buttons (“Integer”, “Float” and “Exit”), a label (this role will reveal in the next part of the blog), a textbox which displays the entered number and a PictureBox. The application’s essence is very simple:
- When the user clicks on the “Integer” button the application displays an integer input panel.
- When the user clicks on the “Float” button the application displays a float input panel.
- If a panel opened the user can enter a value on it. If he clicks on the panel’s Ok button and the entered number is valid the application displays it on the form. If the entered number is not valid the application displays an error to the user.
We want to the MainForm respond to key presses. We must implement a click event handler class to handle the click event. The MobiAccess framework calls the FireEvent method of the event handler classes when the listened event occurs.
We construct the FormClickEventHandler class which derived from the ClickHandler class. The constructor of this class got a MainForm object. The FormClickEventHandler calls the gotten MainForm’s ClickHandler methods with the event’s sender parameter when the click event occurs.
FormClickEventHandler class:
class: ClickEventHandler { //This method runs when the Click event occurs. //@sender [Object] : The Object that raised the event. //@args [EventArgs] : The instance containing the event data. public function FireEvent(sender:Object, args:EventArgs):Void;
private var forwardTo : MainForm;
//@forward [BaseForm]: The object, which handles the event public CI(forward: MainForm) { super(); this.forwardTo = forward; }
FireEvent { this.forwardTo.ClickHandler(sender); return; } }
We need write the MainForm’s ClickHandler method which describes the application’s behavior when the user clicks on a form’s controls.
MainForm class: //This is an event handler method for the click events on this form //@sender [object] : the sender object of the event ClickHandler { //Float button if (Utils.ReferenceEquals(sender, this.floatBtn)) { InputPanel.CI(this, false, this.txtBox.GetText(),this.floatBtn); }
//Integer button if (Utils.ReferenceEquals(sender, this.intBtn)) { InputPanel.CI(this, true, this.txtBox.GetText(),this.floatBtn); }
//Exit button if (Utils.ReferenceEquals(sender, this.exitBtn)) { this.Close(); }
return; }
We need to sign up into the wanted button’s click event:
MainForm class: this.intBtn.OnClick = FormClickEventHandler.CI(this); //… this.floatBtn.OnClick = FormClickEventHandler.CI(this); //… this.exitBtn.OnClick = FormClickEventHandler.CI(this);
The InputPanel class which we used in the ClickHandler method provides the easy, fast and safe numeric input functionality. The InputPanel is a Panel derived class as its name reveals.
The InputPanel’s constructor got a MainForm, a Boolean, a String and an Object parameter.
The MainForm parameter is the form which will contain the popup InputPanel.
If the Boolean parameter is true the InputPanel will accept only the valid integer values, otherwise only the valid float values. The String parameter contains the previously entered value which will be the new InputPanel’s initial value.
The Object parameter contains that Object which requested the Input Panel (in this case the “Integer” or the “Float” button).
The Input Panel’s constructor creates, configures and adds its own controls to itself.
When the Input Panel’s control components are completed the Input Panel adds a PictureBox with a semitransparent gray background and itself to the form which specified in the constructor’s first parameter.
InputPanel class: //@form [MainForm] : A MainForm based instance. The input // panel will be shown on this form //@isInt [Boolean] : If the isInt is true the input panel //accepts only integer values //@prevVal [String] : The previously entered value //@claimant [Object] : The object which requested the value public CI(form: MainForm, isInt: Boolean, prevVal: String,claimant: Object) { super();
//Storing the arguments in class variables
this.isInt = isInt; this.form = form; this.claimant = claimant;
////////////////////////////////// //User interface design section //////////////////////////////////
////////////////////////////////// //End of user interface design section ////////////////////////////////// //The number textbox initially contains the previous entered value this.number.SetText(prevVal);
//Setting the panel's gray background this.grayBg = PictureBox.CI();
//The gray background fills the entire screen this.grayBg.SetPosition(LTWHPos.CI(0.0, 0.0, 0.999, 0.999)); this.grayBg.SetImage(Image.FromStream(Resources.GetResourceAsStream("transparent.png"))); this.grayBg.SetSizeMode(EPictureSizeMode.STRETCH);
//The gray background is not enabled to avoid the focus this.grayBg.SetEnabled(false);
//Adding the gray background to the form which will contain the input panel this.form.AddControl(this.grayBg);
//Setting the input panel's size this.SetPosition(LTWHPos.CI(0.02, 0.06, 0.94, 0.88));
//Adding the input panel to the parent form's controls. this.form.AddControl(this); }
When we are done with these sections we have a multiplatform MobiAccess application which displays a non-functional Input Panel when the user clicks on the “Integer” or the “Float” labeled button on the MainForm.
In the next blog-entry I will introduce how can fill this Input Panel with functionality!
See you later!
Written by AB
