REUSABLE UI OBJECTS
UNDER
C# AND .NET FRAMEWORK
Total Number of Pages: 5
BusCase UI 6.1
Dafesty Video Rental Pte Ltd.is interested in creating the following Forms:
• Customer Maintenance
• Video Tape Master Maintenance
They suspect that there may be a few more Static Data Maintenance Screens that would have similar functionality and hence desire to create a template form to act as a “master” format for all such maintenance screens.
Your Task:
1. Define the Standards for a typical static data maintenance screen.
2. Identify the Template Components, i.e., those features that would be common for all the data maintenance screens.
3. Sketch a rough figure on the look and feel.
4. Identify program codes that would be common for all the screens.
5. Create a Template Form with the look and feel identified in step 3 and having program codes determined in step 4.
6. Use (Inherit) the template to create
a. Customer Maintenance Screen
b. Video Maintenance Screen
Note:
a. You may refer to BusCase UI 5.2 for Screen Template ideas.
b. The above exercise deals with the data maintenance screen. However, since this module deals only with the UI aspects, and in view of the fact that database connectivity and programming would be dealt in a subsequent module, your exercise solution would confine to UI design and Template implementation with client side codes only – server related implementation is not required.
BusCase UI 6.2
Dafesty Video Co’s CTO, Karen is taking efforts to convert their video rental information system not only friendly from user point of view but is bent upon making his system adopt good programming and design practices. In this light, she noticed that there is a common requirement in many of their Windows Forms.
The textbox used in many screens invariably proceeded with a label – this was not her major concern. She found that very often text boxes used in the forms required only alphanumeric entry and she felt the need to prevent the users from entering data other than alphanumeric characters. Not knowing how to approach the problem, she called Venkat of VIT who had taught her in a short course she attended. After listening to her requirement Venkat said: “I do not offhand remember any property in Textbox control that would prevent entry of special characters.” He suggested that a good way to do this would be to create a “user control” object that would comprise of a composition of two .NET visual controls, viz., Label and TextBox. Further the TextBox in the user control can have an event handler on keydown that would cancel the entry if the key that was pressed were non-alphanumeric.
Karen was thrilled by the idea, but confessed that though she understood the concept, she does not know how to proceed on actual development and requested Venkat to provide a proof of concept code sample. Venkat is currently very busy, so can you help him develop the usercontrol?
A sample look and feel of the user control is given below:
USER CONTROL:
CONSUMING FORM:
Description of the User Control:
The above control can be used in ay form. Let us call the user control: CodeFieldUControl. The user control would consist of a label and a textbox pair.
The user control should provide a facility for the consuming form to set the label text since each consuming form can have different captions. This is achieved fy providing a public get/ser property (accessor/mutator) to the label’s text property. We would require a public property as mapping since the label control is private to the user control class. Let us call the getter/serer public property as LabelCaption.
The text box (placed in the user control) is a normal textbox, but we wish to have some additional features for this textbox. These features should be ser / programmed at the user control level for the text box. Hence the consumer of this user control would automatically be able to achieve all these features without writing codes each time in his/her form.
The following are the identified preset properties of the components within the user control.
a. Label’s Text font size is 10pt
b. Textbox’s Text font size is default.
c. Textbox automatically makes the text to upper case.
? To achieve this you need to sert the CharacterCasing Property appropriately.
d. Only alphanumeric characters can be entered in the text box when a person tries to enter values in the user-control’s text box when this user control is used in a consuming form.*
* This alphanumeric constraint may need programming since Venkat has not located a masked edit facility in .NET textbox control. Even if there happens to be one that you locate, for the purpose of this exercise, we would suggest that you write your own event handler for practice purposes.
Some possible ideas for achieving this are given below.
Checking for the Alphanumeric data entry:
o Use the KeyPress event of the textbox.
o From the event argument, it would be possible for you to capture the key character that invoked the event.
o If the character pressed is not alphanumeric, then you can stop proceeding with the action by setting the Handled property of the event argument to true.
o It would be a challenge to incorporate permitting the backspace or delete keys since these are often used during data entry process – if you are not able to achieve this it is ok. If you need to achieve this also, you may need to consider additional programming and may require use of a combination of events like keydown /keyup in addition to the keypress. This may be taken up if students wish perfection.
Steps for doing this workshop:
1. Create (or use) the Windows forms project.
2. Add a couple of forms that would consume the usercontrol. Ideally these are forms that would be launched from a menu in form1, the application start up form.
3. Add a user control (name it CodeFieldUControl.cs).
4. Define the user control features:
a. Place Textbox and label with predefined properties as mentioned in the specs (including the character casing restrictions).
b. Add the getter/setter Property for label text.
c. Write event handler codes for alphanumeric check.
5. Add the user control to a consuming form:
a. Selecting the UserControl, look in the Properties Window – you should be able to see the get/set property LabelCaption in the properties window! Set the label as desired on the fly.
b. Add any other normal controls if required.
6. Run the project and test.
7. Repeat steps 5 and 6 in another form – notice how the features are well reused.
Wow what a reuse!
To distribute your user controls to other projects you may try this: (this is an optional exercise)
1. Start a fresh project called UCLib – the project should be a user control project not a windows forms project.
2. You need to do the user control as before – rather than repeating all the steps, you may simply copy the CodeFieldUControl.cs into the new project directory and include it from the solution explorer.
3. Compile the project into a dll library.
4. Start a new windows forms project call it TestUCApp.
- Add a couple of forms in this where the UC would be consumed.
5. Right click on the Toolbox and add components. Choose the UCLib.dll
a. You would notice that the user control that you had created now appears in the Toolbox.
b. You would also notice that references are added in the solution explorer.
6. Now you can use the user control the same way you had done earlier.
a. Test it and enjoy.
b. Why not, perhaps you can build a lot of useful templates and controls in this separate library project for use at a later point.
7. Caution: After adding a user control to an application project, if you make modifications to the original control, the changes are not automatic since the old version of the dll has been localised in the windows forms library – hence you may need to repeat step 5, every time you make a change in the library. There are of course other productive ways of tackling it; these are not discussed here since it does not relate to UI specific learning.