Successfully reported this slideshow.

WP7 HUB_Introducción a Silverlight


Published on

Fase 2.2

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

WP7 HUB_Introducción a Silverlight

  1. 1. Introduction to Silverlight<br />
  2. 2. Programdesignwith Silverlight<br />
  3. 3. Silverlight 4<br />Business Applications<br />Media<br />Beyond the Browser<br />Silverlight 1<br />Silverlight 2<br />Silverlight 3<br />Silverlight 4<br />September 2007<br />October 2008<br />July 2009<br />April 2010<br />
  4. 4. Programming and Design<br />Software and Design<br />It is a sad fact that most programmers are not very good at graphic design<br />Although some are (lucky people)<br />Also, most designers do not program much<br />
  5. 5. Programming and Design<br />Separation of tasks<br />One way to get good looking programs is to separate the graphical design aspects from the programming<br />The designer can work on the look and feel of the application<br />The programmer can implement the required behaviours<br />Silverlight supports this way of working<br />
  6. 6. Programming and Design<br />Tools for the job : Graphical Design<br />A Silverlight designer can use the “Expression Blend” to specify the appearance of the user interface<br />A version of Blend for the phone is supplied as part of the phone SDK<br />
  7. 7. Programming and Design<br />Tools for the job : Code Creation<br />A Developer can take the user interface design and use Visual Studio build the program to make it work<br />Windows Phone developers use Visual Studio<br />
  8. 8. Programming and Design<br />The Metro design style<br />The Windows Phone team have taken a lot of trouble over the look and feel of the phone<br />They have created a design style, “Metro” to express this<br />Programs on the phone should reflect this style <br />
  9. 9. Programming and Design<br />Design Style and programming<br />As programmers we probably start of just worrying about making the program work<br />This is a very good place to start<br />But in modern systems the “look and feel” of the user interface is very important<br />No matter how good the code is, if the program is hard to use it will not be popular<br />You should pay careful attention to user interface issues when making your programs<br />
  10. 10. Programming and Design<br />Silverlight and Metro<br />To make life easier for us the Metro style is “baked in” to the Windows developer tools<br />The default appearance, behaviour and fonts of the user elements all match the style<br />If you want to find out more about Metro you can read the style guidelines for it<br />
  11. 11. Programming and Design<br />Silverlight and Us<br />We are going to use the Silverlight designer in Visual Studio <br />This can be used to create a good quality user interface that adheres to the Metro principles<br />If you know any Graphic Designers it is worth getting them on your development team when you make a Marketplace application<br />They can make your programs much more impressive<br />
  12. 12. Programming and Design<br />Software Objects<br />In this study of C# we will see that we can create software objects to represent things <br />We talk to our customer to establish their requirements and then identify elements that our software will manipulate<br />We then create software classes which contain the data and behaviours<br />For example, if we were creating a bank application..<br />
  13. 13. Programming and Design<br />Software Objects<br />public classAccount{private decimal balance ;private string name ;public stringGetName () {return name; }public boolSetName (stringnewName){ {// Final version will validate the namename = newName; return true; }// Other get and set methods here}<br />
  14. 14. Programming and Design<br />Data members<br />public classAccount{private decimal balance ;private string name ;public stringGetName () {return name; }public boolSetName (stringnewName){ {// Final version will validate the namename = newName; return true; }// Other get and set methods here}<br />This is the data our bank account will hold:<br />The name of the holder and the balance<br />
  15. 15. Programming and Design<br />Data members<br />public classAccount{private decimal balance ;private string name ;public stringGetName () {return name; }public boolSetName (stringnewName){ {// Final version will validate the namename = newName; return true; }// Other get and set methods here}<br />These are the behaviours the account provides<br />
  16. 16. Programming and Design<br />UsingtheAccountclass<br />The bank program can create instances of the account class and use them to hold customer information<br />Each instance of an account represents a particular customer<br />The bank software calls methods in the Account class to work with the data in it<br />Account rob = new Account();rob.SetName("Rob");<br />
  17. 17. Programming and Design<br />ObjectsOrientedDesign<br />Object Oriented Design is a great way to manage complex projects<br />It lets you break the solution down into manageable chunks<br />It allows you to put off detailed implementation of the elements until you know what they need to do<br />It allows you to test objects separately before they are incorporated into the product <br />
  18. 18. Programming and Design<br />The Silverlight Adding Machine<br />This is a very simple calculator<br />All it can do is add two numbers<br />The user types the numbers into the text boxes and presses the equals button<br />The answer is displayed at the bottom of the screen<br />
  19. 19. Programming and Design<br />Silverlight and Objects<br />Silverlight is implemented using objects to represent the elements on a User Interface<br />Each of the items on the screen of the application shown is graphical rendering of a software object <br />
  20. 20. Silverlight displayelements<br />Application title<br />Page title<br />First number<br />Plus text<br />Second number<br />Equals button<br />Result text<br />
  21. 21. Displayelement data<br />Each of the elements contains data elements that define how it appears on the screen<br />Position on the screen<br />Height and width<br />Font colour and size etc..<br />These values are used by Silverlight when the display is drawn<br />If these value are changed by the program the appearance of the element will change<br />
  22. 22. Typespfelement<br />The adding machine actually contains three different types of Silverlight display element<br />TextBox<br />Used to receive user input from the keyboard<br />TextBlock<br />Used to display messages to the user<br />Button<br />Used to cause events in the application <br />
  23. 23. ClassHierarchies and Silverlight<br />The elements will have some properties in common<br />All will have a position on the screen and a height and width<br />But there will be some properties that are specific to that element<br />Only a TextBox needs to track the cursor position for user input<br />A class hierarchy is a great way to implement this<br />
  24. 24. Silverlight elementclasshierarchy<br />The Silverlight class hierarchy is quite complex<br />Everything is based on the FrameworkElement class which contains the fundamental properties of all elements<br />There are many other classes<br />
  25. 25. ClassHierarchies<br />Using a class hierarchy for Silverlight elements has many advantages<br />A particular set of element data only needs to be stored once, at the appropriate position in the hierarchy <br />The display drawing system can treat them all display elements in exactly the same way<br />We can add new Silverlight elements that extend the behaviour of existing ones<br />
  26. 26. Silverlight and Code<br />This means that to update the items on a display our program will be calling methods or updating properties on the appropriate software object<br />The next time that object is drawn the Silverlight rendering system will use the new data values and the appearance of the object will change to match<br />
  27. 27. Silverlight and Design<br />When we design a user interface we set values to give the elements position and size<br />We do not do this from a program that we write (although we could) <br />Instead we are going to use the design tools in Visual Studio to set up the elements<br />We are going to start by using the element toolbox and the design surface<br />
  28. 28. The Toolbox and Designer<br />Visual Studio provides a menu of Silverlight elements that can be placed on the display page<br />You can do this by simply dragging the elements from the toolbox onto the page<br />
  29. 29. Demo<br />Demo 1: Adding display elements<br />
  30. 30. Silverlight elementnames<br />When you drag an element onto the page Visual Studio creates a new variable in your program<br />These are declared in a special area of the project that Visual Studio looks after for you<br />And you should not fiddle with this or bad things will happen<br />However, you should always make sure that your variables have sensible names<br />
  31. 31. Settingthename of anelement<br />The default name of an element is not useful<br />TextBox1, Button1 etc<br />We want to have more meaningful names<br />firstsNumberTextbox, EqualsButtonetc<br />We can use the Properties window in Visual Studio to update the name of an element in our program<br />
  32. 32. Settinganelement<br />The name of an element is right at the top of the properties pane in Visual Studio<br />To display the properties pane for an object, click on the object in the design surface<br />The pane will usually be located at the bottom right of the Visual Studio display<br />
  33. 33. Editingthename of anelement<br />You can simply type in the new name for your element here<br />Make sure that it is a valid C# variable name, or Visual Studio will complain <br />When you navigate away from this textbox the name will change<br />
  34. 34. Demo<br />Demo 2: Display element names<br />
  35. 35. Silverlight element properties<br />We have seen that Visual Studio lets us manipulate the properties of the display elements<br />We can drag them around the display page<br />We can set values using the property pane<br />Now we are going to consider how the properties actually from the perspective of C#<br />To do this we have to revisit what properties are in C# classes<br />35<br />
  36. 36. Properties in C#<br />A program is made up of classes<br />A class can contain data and behaviours<br />The data is held in member variables<br />The behaviours are provided by member methods<br />When you design an application you decide what classes are required and the data and behaviours they have<br />
  37. 37. Private and Public<br />Data in a class is usually made private<br />Methods are usually public<br />You call methods to make changes to the data inside the class<br />This means that all changes to data in the class is controlled<br />Programmers love having control........<br />
  38. 38. Managing Class Data<br />We might decide to create a class called Accountto store information in a bank<br />The Accountclass will have lots of data items that are stored about each customer<br />Each of these items will map onto a data member of the class<br />The programmer must then provide methods to get and set the values of the items<br />
  39. 39. Bank accounts and data<br />Perhaps our bank needs to store the age of the account holder<br />Perhaps they are concerned about allowing very young people to draw out too much cash<br />This information must be stored in the account<br />It will be a data member within it<br />
  40. 40. NameProperty<br />public class Account{ private int age; /// rest of account here}<br />The age value is a privatemember of the Accountclass<br />To work with the age value we have to provide methods that are public<br />
  41. 41. Using Get and Set methods<br />publicclassAccount{privateint age;publicintGetAge() {returnthis.age; }publicvoidSetAge( intinAge ) {if ( (inAge > 0) && (inAge < 120) ) {this.age = inAge; } }}<br />
  42. 42. Managing the Age<br />CurrentAccounta = newAccount();<br />a.SetAge(21);<br />When we want to control the age property we can call the SetAge method<br />We can use the GetAge method to read the age of the account holder<br />
  43. 43. Get and Set Methods<br />Creating Get and Set methods is a standard programming pattern<br />Frequently they will perform validation of incoming data and reject out of range values <br />I have not added any validation to the set method yet<br />Nobody with an age less than 8 or greater than 100 can have an account<br />
  44. 44. Using Properties<br />The C# language provides properties to make getting and setting data easier<br />They do not make things possible that we couldn’t do before<br />They must make the programs easier to write<br />Properties are used extensively in Silverlight for display elements<br />
  45. 45. Age Property<br />publicclassAccount{privateintageValue;publicint Age {set {if ( (value > 8) && (value < 100) ) ageValue= value; }get {returnageValue; } }}<br />
  46. 46. Property Keywords<br />The block of code after the get keyword is obeyed when the property is read by a program<br />It must return a value of the property type<br />The block of code after the set keyword is obeyed when the property is written<br />Within the set block the keyword value means “The value being assigned to the property”<br />
  47. 47. Using the Age Property<br />Account s = newAccount ();s.Age = 21;Console.WriteLine ( "Age is : " + s.Age );<br />When a program uses a property it looks just like direct access to a data member<br />The difference is that the get or set behaviours are used the blocks of code in the property are used<br />This makes the code much tidier<br />
  48. 48. Property validation<br />Account s = newAccount ();intnewAge = 150;s.Age = newAge;if (s.Age != newAge ) Console.WriteLine ( "Age was not set" );<br />If the property uses validation it I up to the user of the property to make sure that an assignment worked correctly<br />
  49. 49. Multiple properties for one value<br />publicintAgeInMonths{get {returnthis.ageValue*12; }}<br />This property only has a get method<br />It provides a way of reading the age in months<br />
  50. 50. Properties and Silverlight<br />The items that we see in the properties Pane for an element are all C# properties<br />When an assigning to an element property a program runs code inside a C# set behavior<br />This might seem inefficient<br />Accessing the data directly would be quicker<br />But it is actually a necessary part of how Silverlight runs <br />50<br />
  51. 51. Properties and Notification<br />The set method in a Silverlight property has to do a lot more than just update the stored data<br />This action will also trigger a display update for the screen<br />Setting a property in a program also sends a notification to the program that the property is being changed<br />This idea of using property changes to trigger events is one we will return to <br />51<br />
  52. 52. Page Design with Silverlight<br />We can design all our pages by dragging items onto the page, giving them a name and then setting their properties<br />Visual Studio will create all the code behind the program to make this work<br />You can set many properties of element s including colour, texture, transparency and even animation<br />But this is best left to Graphic Designers<br />52<br />
  53. 53. Review<br />Visual Studio provides a complete design tool for creating and managing user interfaces<br />A Silverlight display is made up of elements<br />Each element is implemented by a C# class which is part of the element hierarchy<br />Silverlight elements expose properties which allow programs (and Visual Studio) to determine their location and appearance on the display page<br />53<br />
  54. 54. Understanding XAML<br />
  55. 55. XAML and Silverlight<br />A Silverlight application is made up of pages that contain elements<br />These have properties that determine where they are, how they appear and what they can do in an application<br />The Visual Studio tool allows us to manipulate the page content by using the design surface and the element properties pane<br />55<br />
  56. 56. Expressing Silverlight Elements<br />The description of the elements in a Silverlight application is actually held in a text file<br />This file is formatted in a particular way<br />Microsoft invented a language, XAML to hold this design information:<br />eXtensibleApplication Markup Language<br />XAML was invented to hold user interface design information <br />56<br />
  57. 57. Why do we need XAML?<br />XAML allows us to separate the role of graphic designer and programmer<br />The designer should not have to see code objects to work<br />The programmer should not be held back while the design is produced <br />The XMAL file provides a separation between the code that drives the application and the way the application looks<br />57<br />
  58. 58. XAML file content<br /><TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center" /><br />This snippet of XAML is the description of the firstNumberTextBox in our adding machine<br />It contains fields that describe the position and size of the textbox<br />This file is managed by Visual Studio as your program is being developed<br />58<br />
  59. 59. XAML in Visual Studio<br />The XAML file holds the information which is updated by both views<br />59<br />
  60. 60. The XAML language<br />XAML is a “declarative” language<br />It just tells us about things, it does not tell us what they do and how they can do it<br />The XAML file has a particular format<br />The characters < and > are used to mark the start and end of some elements in the file<br />The format looks a bit like XML<br />eXtensible Markup Language<br />60<br />
  61. 61. Using XAML<br />You can actually edit the XAML text in your project to create new display elements and modify existing ones<br />This can often be much quicker than using the editing interface provided by Visual Studio<br />You just have to type the new values into the XAML window and the properties of the element are changed immediately<br />61<br />
  62. 62. Demo 1: Editing XAML<br />Demo<br />62<br />
  63. 63. The XAML file at run time<br />When a Silverlight program runs the XAML file is compiled into a set of low level display instructions that are obeyed by the Silverlight runtime system<br />This is the point at which the XAML object descriptions in the text are converted into program objects we can use in our code<br />This all happens automatically as far as we are concerned<br />63<br />
  64. 64. XAML and XML<br />XAML looks a bit like XML<br />XML means “Extensible Markup Language”<br />This means that XML is really a way of designing languages that want to talk about something<br />Just like the english language lets us invent verbs and nouns and put them into sentences that have meaning in a particular context<br />64<br />
  65. 65. Inventing our own XML <br /><?xml version="1.0" encoding="us-ascii" ?><br /><HighScoreRecordscount="2"><br /><HighScore game="Breakout"><br /><playername>Rob Miles</playername><br /><score>1500</score><br /></HighScore><br /><HighScore game="Space Invaders"><br /><playername>Username</playername><br /><score>4500</score><br /></HighScore><br /></HighScoreRecords><br />This XML format to hold a video game high score table<br />65<br />
  66. 66. HighScore element<br /><HighScore game="Breakout"><br /><playername>username</playername><br /><score>1500</score><br /></HighScore><br />The HighScore element contains two other elements, playername and score<br />It also has a property that gives the name of the game<br />We could add others, for example the date and time the score was achieved<br />66<br />
  67. 67. HighScoreRecords element<br /><?xml version="1.0" encoding="us-ascii" ?><br /><HighScoreRecordscount="2"><br /><HighScore game="Breakout"><br /><playername>username</playername><br /><score>1500</score><br /></HighScore><br /><HighScore game="Space Invaders"><br /><playername>username</playername><br /><score>4500</score><br /></HighScore><br /></HighScoreRecords><br />The HighScoreRecords element contains a count of the number of HighScore elements<br />67<br />
  68. 68. XML and data structures<br />We can invent our own language format whenever we have some structured data that we want to store<br />The designers of XAML have done this<br />They have created a language that lets us design user interfaces<br />68<br />
  69. 69. The XAML data revisited<br /><TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center" /><br />We can see that the XAML content that describes a textbox is very similar to a HighScore element<br />The designers of XAML had to work out what data fields are required in a TextBox object<br />69<br />
  70. 70. What is a Markup Language?<br />The “ML” in XML stands for “Markup Language”<br />A markup language was originally a set of commands for the printers of a document<br />‘Put the words “Table of Contents” in bold’<br />When the World Wide Web was created the Hyper Text Markup Language was designed to allow a text file to describe a particular web page design<br />70<br />
  71. 71. XML and HTML<br />The idea of creating your own markup language was such a good one that people wanted a standard form for doing this<br />XML came out of this drive for standards<br />It is the way in which the files use the < and /> and other characters to mean the start and end of elements, names and properties<br />It also tells you how to create “schemas” that define the structure and content of XML documents<br />71<br />
  72. 72. XML Schema<br />An XML schema describes a particular XML document format:<br />“A HighScore element must contain a PlayerName and a Score value, but the Date value is optional”<br />Programs can use a schema to make sure that a particular document contains content which is valid<br />72<br />
  73. 73. XML and software<br />XML allows programs to share data irrespective of what kind of system was used to create the data<br />There are many software tools that can create schemas and you can even store the contents of C# directly into XML structured files<br />However, for now just remember that the description of a Silverlight page is a text file containing an XAML document <br />73<br />
  74. 74. XAML and Silverlight Pages<br />A Silverlight application is made up of a number of pages<br />Each page is expressed as a single XAML source file<br />The page will contain descriptions of a number of Silverlight elements <br />From time to time we will have to make changes to the XMAL file directly<br />74<br />
  75. 75. Review<br />The design of a Silverlight page is expressed as a XAML document stored as text file <br />The separation of the design from the program code makes it much easier for designers and programmers to work together<br />The format of a XAML document is based on XML (an eXtensible Markup Language) <br />XML allows us to create languages that describe any kind of structured data<br />75<br />
  76. 76. Creatinganapplicationwithsilverlight<br />
  77. 77. Silverlight and C#<br />Up until now all we have done is create XAML designs for our application<br />We have used the editing surface and the properties pane, along with a text editor<br />Now we are going to see where the program content lives<br />This code will provide the active content for our calculator<br />This will work out the result <br />77<br />
  78. 78. The Visual Studio Solution Explorer<br />The Solution Explorer is another pane in Visual Studio<br />It shows all the elements in a particular solution<br />This includes all the application resources and XAML files <br />78<br />
  79. 79. The MainPage.xaml file<br />The MainPage.xaml file contains the XAML that describes how the main page looks<br />If you add further pages to the application they will appear as xaml pages in the solution<br />79<br />
  80. 80. The code behind a xaml page<br />Each xaml page has a file of C# behind it<br />We can find this by opening up the xaml file as shown in Solution Explorer<br />80<br />
  81. 81. XAML file content<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }}<br />This is all the actual code behind our adding machine main page<br />81<br />
  82. 82. MainPage class<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }}<br />This code is in a class called MainPage which extends the PhoneApplicationPage class<br />82<br />
  83. 83. MainPage constructor<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }}<br />The code just contains the constructor that is called when the page instance is loaded<br />83<br />
  84. 84. Initialise Components<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }}<br />The constructor calls a method that initialises all the components on the page<br />84<br />
  85. 85. Demo 1: Code Behind<br />Demo<br />85<br />
  86. 86. Health Warning<br />We have just had a quick look in the “engine room” of Silverlight<br />This is somewhere you should never go<br />Do not make any changes to this code or Visual Studio may get very upset and you will almost certainly break your program<br />86<br />
  87. 87. Running our application<br />We can run our application if we like<br />We can type in values and press the equals button<br />But nothing happens<br />Next we need to make a method that will do the calculation and get it to run<br />87<br />
  88. 88. calculateResult method<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />float v2 = float.Parse(secondNumberTextBox.Text);<br />float result = v1 + v2;<br />resultTextBlock.Text = result.ToString();<br />}<br />This method will calculate the result and display it<br />If we call this the display will be updated<br />88<br />
  89. 89. Obtaining values<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />float v2 = float.Parse(secondNumberTextBox.Text);<br />float result = v1 + v2;<br />resultTextBlock.Text = result.ToString();<br />}<br />This line gets the text out of the firstNumberTextbox and parses it to produce a floating point value<br />89<br />
  90. 90. Calculating a result<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />float v2 = float.Parse(secondNumberTextBox.Text);<br />float result = v1 + v2;<br />resultTextBlock.Text = result.ToString();<br />}<br />This statement calculates the result we get by adding the values together<br />90<br />
  91. 91. Displaying the result<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />float v2 = float.Parse(secondNumberTextBox.Text);<br />float result = v1 + v2;<br />resultTextBlock.Text = result.ToString();<br />}<br />This statement gets a string version of the result value and puts it into the result texbox<br />91<br />
  92. 92. Silverlight elements and properties<br />The method works because the Silverlight elements expose properties that the program can read (to get the numbers typed in) and write (to display the required result)<br />Our program is able to work with the display elements because they are objects as far as we are concerned<br />The objects are created when the program starts<br />92<br />
  93. 93. Getting the result<br />Now all we need is to run the calculateResult method when the Equals button is pressed<br />To do this we have to connect an event generator (the button) with the method that will run when the button produces an event<br />The event is generated when the user presses the equals button<br />93<br />
  94. 94. Programs and events<br />For events to work a program must have a way of managing an event as a data object<br />We need to be able to give the button an object that represents a method to be called when the event occurs<br />C# provides a delegate mechanism that can create references to methods<br />Fortunately Silverlight and Visual Studio make this very easy to use<br />94<br />
  95. 95. Events in Visual Studio<br />We can ask Visual Studio to create an event delegate for us by double clicking on the element in the designer<br />Visual Studio will do all the “plumbing” to make this work<br />95<br />
  96. 96. The Event Handler Method<br />When we have double clicked the button we find that there is now a new method in the MainPage class<br />This will be called when the button is clicked in our program <br />96<br />
  97. 97. Displaying the result<br />privatevoidequalsButton_Click(objectsender, RoutedEventArgs e){calculateResult();}<br />Visual Studio has given this method a sensible name<br />This is based on the component name <br />We just need to add a call of calculateResult to get the program to work <br />97<br />
  98. 98. Demo 2: A Complete Solution<br />Demo<br />98<br />
  99. 99. Managing Events<br />The properties of a Silverlight element include information about the events and what methods they are bound to<br />You can see this by selecting Events in the Properties pane<br />99<br />
  100. 100. Events and XAML<br /><Button Content="equals" Height="72"HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton"VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /><br />We know that everything in Silverlight begins and ends with the XAML<br />When we add an event binding in Visual Studio this adds a property to the XAML for that component<br />You can see it above<br />100<br />
  101. 101. Review<br />Behind each XAML file is a C# source file that contains the behaviour for that page<br />You add your own behaviours by putting methods into this code file<br />If you bind Silverlight events to elements the event handlers are also placed in this file<br />You connect these handlers to your code to produce a working application<br />
  102. 102. Exercise 1: Time Trackeruser interface design<br />
  103. 103. Exercise 2: time record xmlDesign<br />