Creating a Dynamic User Interface

One of the most common tasks in which web developers faced is the creation of a dynamic user interface. The interface is used for providing the system users with a means of inputting data. When you are creating the user interface, the initial step is to hammer out the requirements which specifically spell out the information needed to be collected from the user. Consequently, the data entry web form is design. This involves creation of a graphical user interface as well as writing the code which updates the user input of the database.

Here you will be able to find graphical user interface examples.

For you to create a dynamic user interface, the data entry form should be well known in advance. The forms are identical across all users for the system. For you to create such entry forms, it is hardly challenging. In fact, the task becomes more arduous.

Creating a Dynamic User Interface

How to Create Dynamic User Interface Using ASP.NET

ASP.NET is used for creating the user interface. ASP.NET comprises of two parts which include: an HTML portion and a code portion. The HTML portion contains static HTML markup and web controls. These are added through a declarative syntax. On the other hand, a code portion can be implemented as a separate class file. The ADP.NET web page is added through a declaratives syntax which spells out the web control for the addition of the initial property values.

When the ASP.NET page Is visited for the first time after the HTML potion has been modified, the ASP.NET engine converts the mix static control content and the web control syntax into a class. The main function of the auto generated class is to control the auto generated hierarchy. Consequently, the controlled hierarchy is the set of controls which compose the webpage. The next step is to translate the static HTML markup into literal control instances. Moreover, the web controls are translated into the corresponding class type.

The Programmed Control Hierarchy of the Dynamic User Interface

The user interface uses ASP.NET server control, which contains both a set of parent control and children control. The children controls are accessible through the server property control.

The main functions of the control collection class include:

  • Determination of how many children controls by use of the read-only count property
  • Removal of all the child controls with a clear () o removal of a specific control with remove at () and remove () methods.
  • Addition of new items to the controls collection by use of the add at () or add () methods

For you to add the control into the control hierarchy, you need to simply create the controls corresponding to the class instance. You can also add the control to the end of the page control collection. This will cause the collection to appear at the bottom of the webpage. You can also add a placeholder control to the page which specifies the location in the hierarchy. This is applicable for addition of one or more controls. As it will assist you in placing a certain spot I the web form.

Dynamic labels can also be added rather than the use of a page control. This can be done by addition of the label to the placeholder control collection instead of the page control collection.

The dynamic user interface control hierarchy before and after the addition of the dynamic label

  • Prior to adding the dynamic label control

The auto generated page class comprises of two literal controls and the HTML form. The HTML form is subdivided into two literal controls and a place holder.

  • After adding the dynamic label control

As mentioned above, the auto generated page class is at the top of the hierarchy. The control hierarchy before and after adding the label control is almost the same. What only differs is the addition of a Label after the placeholder.

How to access the dynamic user interface control

The process of adding the static web controls into the ASP.NET PAGE visual studio, NET adds references automatically to the web controls in the code which is behind the class. The reference to the web control will enabled strongly typed access of the controls, its properties, events and methods.

One of the approaches used is the finding of dynamic control; through the examination of the control hierarchy. The code used illustrates how to iterate recursively at a specified control. The code will be applicable if a number of dropdown list control has been dynamically added to a specified placeholder.

For you to go through the approach mentioned above, a number of server controls is required. However, you might require a gaggle of dissimilar controls which you ca n access at different times. The wok can be done by performing of different actions on each of the control. You can also use the findcontrol() method to define in the system. The control only searches the current naming container. As a result, they create their own ID namespace in controlling the parent’s ID.

The dynamic user interface’s page life cycle

The control hierarchy is rebuilt from scratch every time the class is auto generated. It will not only reconstruct the control hierarchy but also rewires the control events to their specified events handlers. Therefore, it is very important to ensure that you add these controls in every page visit. There is a code which is used by most of the developers in order to start off with dynamic controls. One of the main problems of the code is the fact that it adds the dynamic controls only in the first page visit but not on the subsequent post backs. If you are using that code, you will find out that when a post back occurs, the dynamic controls disappear. Thus, you need to be certain that you can add dynamic controls on each of the page visits. This only possible of you move the code of “if not page” on all the page visits.

Conclusion

The user interfaces of the customers will enable the clients to log on to the website and define the clients’ attributes. An individual can also use the interface to define the client attributes. Hence, dynamic user interface is important as its functions have been highlighted.

 

graphical user interface design examples -text image

 

Megan Wilson
Megan Wilson is user experience specialist & editor of UX Motel. She is also the Quality Assurance and UX Specialist at WalkMe Megan.w(at)walkme.com
Megan Wilson on sabtwitterMegan Wilson on sablinkedinMegan Wilson on sabgoogleMegan Wilson on sabfacebook