1 / 21

Generating Controls

Generating Controls. Creating content from the programming language. Generating Components. We will look at how to create content. Each of the familiar html elements has a class. Static elements such as div, table, ... User interface elements such as buttons, text boxes, ...

shelagh-kennefick
Download Presentation

Generating Controls

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Generating Controls Creating content from the programming language. Lecture 2: Generating Controls

  2. Generating Components • We will look at how to create content. • Each of the familiar html elements has a class. • Static elements such as div, table, ... • User interface elements such as buttons, text boxes, ... • Typically you follow three steps: • Create an object • Set various properties • Add the element to the page Lecture 2

  3. But first... • Yesterday we considered: • C# • .NET • css Lecture 2

  4. Two Approaches • There are two good ways to create dynamic content. • Design the page in visual studio, include “placeholders” • Create the elements of the page from scratch. Lecture 2

  5. Updating Placeholders • You create a page using the editor. • You include labels as place holders • You update the place holders in LoadPage Lecture 2

  6. Updating Placeholders protected void Page_Load(object sender, EventArgs e) { DateTime born = new DateTime(1962, 5, 20); TimeSpan age = DateTime.Now - born; yearsOld.Text = (age.Days / 365).ToString(); daysOld.Text = age.Days.ToString(); secondsOld.Text = age.TotalSeconds.ToString(); } Lecture 2

  7. Generating Controls protected void Page_Load(object sender, EventArgs e) { DateTime born = new DateTime(1962, 6, 20); TimeSpan age = DateTime.Now - born; Label LabelDays = new Label(); LabelDays.Text = "He is "+age.Days+" days old."; Controls.Add(LabelDays); } Lecture 2

  8. Which Style is Best? Update Placeholders • It can be easier to create attractive layout using the editor • There will be less “trial and error” to get the right layout Generate Content • You have more flexibility • You may not know how many controls are required till run time • You can put off worrying about appearance Lecture 2

  9. The best of both worlds • You can combine the two techniques. • Create placeholders for the major blocks • Add content to each block • Be sure to include cssClasses in code • Create style instructions in a css file Lecture 2

  10. Creating a Table • A table is useful in many cases. • Each table includes a collection of rows, each row includes a collection of cells. • A table may have a caption. • The widths of the columns will automatically adjust to the content. • You can specify the widths of cells. Lecture 2

  11. Create a Table Table t = new Table(); foreach (String s in new String[]{"A", "B", "C"}){ TableRowtr = new TableRow(); for (inti =0;i<4;i++) { TableCell td = new TableCell(); td.Text = s + i; tr.Cells.Add(td); } t.Rows.Add(tr); } t.Caption = "Sample Table"; Controls.Add(t); Lecture 2

  12. Currency Converter • You must create a table that shows the equivalent RMB for £0 to £19 • You can use the css properties: • border-collapse • border-bottom Lecture 2

  13. Fill in the blanks //Create the header row and add the table double rate = 9.1314; Table t = new Table(); TableHeaderRowtrh = new TableHeaderRow(); TableHeaderCell trhc1 = new TableHeaderCell(); trhc1.Text = "UK Pounds (GBP)"; trh.Cells.Add(trhc1); TableHeaderCell trhc2 = new TableHeaderCell(); trhc2.Text = "China Yuan (RMB)"; ? t.Rows.Add(trh); Controls.Add(t); Lecture 2

  14. Questions... • The missing line on the first page should add the second header cell trhc2 to the header row trh. Give the syntax for this. Lecture 2

  15. Fill in the Blanks //Run over the numbers from 0..19 and show GBP and RMB for (int i = 0; i < 20; i++) { TableRowtr = new TableRow(); TableCell tc1 = new TableCell(); tc1.Text = String.Format("{0,5:n2}", i*1.0); tc1.CssClass = "numeric"; tr.Cells.Add(tc1); ? ? ? ? t.Rows.Add(tr); } Lecture 2

  16. Questions... The phrase String.Format("{0,5:n2}", i*1.0);is used to display the number i*1.0 in 5 character spaces with 2 decimal places. • The highest GBP value is 19.00 which takes 5 characters. How many characters will be required for the highest RMB value? Lecture 2

  17. Questions... • Why do you think we use i*1.0 instead of i? Lecture 2

  18. Questions... • It is silly to show the conversion rate for £0, how could you change the code to show the range £1 to £20? • How would you change the code to show values £10, £20, £30 .. £100? Lecture 2

  19. Questions... • Notice that the cells have been given a CssClass value. Complete this section of it... body{ font-family:helvetica;} table{ border-collapse:collapse;} td,th{ padding-left:1em; border-bottom : solid thin black;} .numeric{ text-align: ....... ;} Lecture 2

  20. Tomorrow • We will look at capturing events. • This allows us to respond to user actions. • We will consider the OnClick and OnLoad events. • We will look at the “life cycle” of a page. Lecture 2

  21. Summary • You can design a page and then change properties of some elements. • You can create complex elements such as tables in code. • A table includes a rows collection. • A row includes a cells collection. • You can assign CssClass to elements that you create. Lecture 2

More Related