How to Set the Various User Interface Properties with ASP.NET Site Builder

Now, what you might want to do at this stage is to set the various users interface properties. Let me show you how to do that. If you are dealing with html controls in the properties window, you have to use the style attribute. If you single click the ellipses, it brings up the Style Builder. Style Builder lets you set various different user interface aspects for the selected control. So for example, we can choose the font family. If I click the ellipses next to font family, I can choose from a list which fonts I want to use and I can prioritize them so that if the preferred font is not available then it will degrade to a second of the font and so on and so on. Let us choose Arial as our preferred font and then if I scroll right down to the bottom of the list, I am going to search for just a bit too far Verdana as the second one and also you can choose generic fonts as the alternate full back. For example, you can specify Sans-Serif as another font that you can use as the worst case scenario. So that is my font family in order of preference. If you prefer, you can have to choose the system font. So for example, you could have specified that you wanted to choose the window caption font or the dialog text font. I do not want to do that so we click on family.

Okay, you can also set font color. So let us choose maroon. You can specify italics and small caps and so on. You can choose the size that you want. So here, I can choose whether to specify pixels or percentage or points or picas. A pica is 12 points or I can choose millimeters and so on and so on. So, we will just go for a font size of 12 points. Now if you preferred, you could have chosen an Absolute font size such as large or relative font size such as larger. I will leave you to experiment with yourself and we will also just finally specify that the font is going to be bold. What else can we choose? Well, we can set the default background color. So I can choose the background color to be yellow. I can choose it to be a transparent color if I want to. I can specify a background image if I have one. Now, I want that to be the background image for my control. So, there we are. There are various other properties you can set as well. All of these, you can play with yourself but we will just leave that for now. So, let us just take a look at the source view just to see what we have added. Let us scroll to the source view and there is our label. I will just go to the beginning of that statement. You can see it has added the style attribute and these are the various properties that we set in the style property builder. Now if you prefer, you could have typed all these in yourself manually. It depends how constant you feel with the various bits of syntax here.

Okay, let us go back to the design view and one last control. What I am going to add is a Submit button. So let us add a Submit button and drag it outside the table. There we go. Let us set its ID to be Submit button and let us just set its value property to be “Submit”. Okay, so we built the user interface for our webpage. Let us just run it before we are going further to see how it works. So on the Debug menu, start without debugging. I will enter some details here. My name is Andy and my age is 21 and my nationality, it is not actually listed here, so I will say that I am from Argentina and my programming languages, I feel okay with Visual Basic and Visual C#. I am okay with Java but not really visual J# so I will leave that one unselected. I will click the Submit button. That is going to cause the data to be submitted to the webpage running on the server. We have not actually written any click handler code yet. So, we are not expecting too much to happen. If nothing much has happened at all, let us wipe out the content of my controls. It did not display the results in the textbox. So, let us close the webpage.