WP7 HUB_Introducción a Silverlight

Silverlight 4 Business Applications Media Beyond the Browser Silverlight 1 Silverlight 2 Silverlight 3 Silverlight 4 September 2007 October 2008 July 2009 April 2010

Programming and Design Software and Design It is a sad fact that most programmers are not very good at graphic design Although some are (lucky people) Also, most designers do not program much

Programming and Design Separation of tasks One way to get good looking programs is to separate the graphical design aspects from the programming The designer can work on the look and feel of the application The programmer can implement the required behaviours Silverlight supports this way of working

Programming and Design Tools for the job : Graphical Design A Silverlight designer can use the “Expression Blend” to specify the appearance of the user interface A version of Blend for the phone is supplied as part of the phone SDK

Programming and Design Tools for the job : Code Creation A Developer can take the user interface design and use Visual Studio build the program to make it work Windows Phone developers use Visual Studio

Programming and Design The Metro design style The Windows Phone team have taken a lot of trouble over the look and feel of the phone They have created a design style, “Metro” to express this Programs on the phone should reflect this style

Programming and Design Design Style and programming As programmers we probably start of just worrying about making the program work This is a very good place to start But in modern systems the “look and feel” of the user interface is very important No matter how good the code is, if the program is hard to use it will not be popular You should pay careful attention to user interface issues when making your programs

Programming and Design Silverlight and Metro To make life easier for us the Metro style is “baked in” to the Windows developer tools The default appearance, behaviour and fonts of the user elements all match the style If you want to find out more about Metro you can read the style guidelines for it

Programming and Design Silverlight and Us We are going to use the Silverlight designer in Visual Studio This can be used to create a good quality user interface that adheres to the Metro principles If you know any Graphic Designers it is worth getting them on your development team when you make a Marketplace application They can make your programs much more impressive

Programming and Design Software Objects In this study of C# we will see that we can create software objects to represent things We talk to our customer to establish their requirements and then identify elements that our software will manipulate We then create software classes which contain the data and behaviours For example, if we were creating a bank application..

Programming and Design Software Objects 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}

Programming and Design Data members 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} This is the data our bank account will hold: The name of the holder and the balance

Programming and Design Data members 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} These are the behaviours the account provides

Programming and Design UsingtheAccountclass The bank program can create instances of the account class and use them to hold customer information Each instance of an account represents a particular customer The bank software calls methods in the Account class to work with the data in it Account rob = new Account();rob.SetName("Rob");

Programming and Design ObjectsOrientedDesign Object Oriented Design is a great way to manage complex projects It lets you break the solution down into manageable chunks It allows you to put off detailed implementation of the elements until you know what they need to do It allows you to test objects separately before they are incorporated into the product

Programming and Design The Silverlight Adding Machine This is a very simple calculator All it can do is add two numbers The user types the numbers into the text boxes and presses the equals button The answer is displayed at the bottom of the screen

Programming and Design Silverlight and Objects Silverlight is implemented using objects to represent the elements on a User Interface Each of the items on the screen of the application shown is graphical rendering of a software object

Silverlight displayelements Application title Page title First number Plus text Second number Equals button Result text

Displayelement data Each of the elements contains data elements that define how it appears on the screen Position on the screen Height and width Font colour and size etc.. These values are used by Silverlight when the display is drawn If these value are changed by the program the appearance of the element will change

Typespfelement The adding machine actually contains three different types of Silverlight display element TextBox Used to receive user input from the keyboard TextBlock Used to display messages to the user Button Used to cause events in the application

ClassHierarchies and Silverlight The elements will have some properties in common All will have a position on the screen and a height and width But there will be some properties that are specific to that element Only a TextBox needs to track the cursor position for user input A class hierarchy is a great way to implement this

Silverlight elementclasshierarchy The Silverlight class hierarchy is quite complex Everything is based on the FrameworkElement class which contains the fundamental properties of all elements There are many other classes

ClassHierarchies Using a class hierarchy for Silverlight elements has many advantages A particular set of element data only needs to be stored once, at the appropriate position in the hierarchy The display drawing system can treat them all display elements in exactly the same way We can add new Silverlight elements that extend the behaviour of existing ones

Silverlight and Code This means that to update the items on a display our program will be calling methods or updating properties on the appropriate software object 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

Silverlight and Design When we design a user interface we set values to give the elements position and size We do not do this from a program that we write (although we could) Instead we are going to use the design tools in Visual Studio to set up the elements We are going to start by using the element toolbox and the design surface

The Toolbox and Designer Visual Studio provides a menu of Silverlight elements that can be placed on the display page You can do this by simply dragging the elements from the toolbox onto the page

Demo Demo 1: Adding display elements

Silverlight elementnames When you drag an element onto the page Visual Studio creates a new variable in your program These are declared in a special area of the project that Visual Studio looks after for you And you should not fiddle with this or bad things will happen However, you should always make sure that your variables have sensible names

Settingthename of anelement The default name of an element is not useful TextBox1, Button1 etc We want to have more meaningful names firstsNumberTextbox, EqualsButtonetc We can use the Properties window in Visual Studio to update the name of an element in our program

Settinganelement The name of an element is right at the top of the properties pane in Visual Studio To display the properties pane for an object, click on the object in the design surface The pane will usually be located at the bottom right of the Visual Studio display

Editingthename of anelement You can simply type in the new name for your element here Make sure that it is a valid C# variable name, or Visual Studio will complain When you navigate away from this textbox the name will change

Demo Demo 2: Display element names

Silverlight element properties We have seen that Visual Studio lets us manipulate the properties of the display elements We can drag them around the display page We can set values using the property pane Now we are going to consider how the properties actually from the perspective of C# To do this we have to revisit what properties are in C# classes 35

Properties in C# A program is made up of classes A class can contain data and behaviours The data is held in member variables The behaviours are provided by member methods When you design an application you decide what classes are required and the data and behaviours they have

Private and Public Data in a class is usually made private Methods are usually public You call methods to make changes to the data inside the class This means that all changes to data in the class is controlled Programmers love having control........

Managing Class Data We might decide to create a class called Accountto store information in a bank The Accountclass will have lots of data items that are stored about each customer Each of these items will map onto a data member of the class The programmer must then provide methods to get and set the values of the items

Bank accounts and data Perhaps our bank needs to store the age of the account holder Perhaps they are concerned about allowing very young people to draw out too much cash This information must be stored in the account It will be a data member within it

NameProperty public class Account{ private int age; /// rest of account here} The age value is a privatemember of the Accountclass To work with the age value we have to provide methods that are public

Using Get and Set methods publicclassAccount{privateint age;publicintGetAge() {returnthis.age; }publicvoidSetAge( intinAge ) {if ( (inAge > 0) && (inAge < 120) ) {this.age = inAge; } }}

Managing the Age CurrentAccounta = newAccount(); a.SetAge(21); When we want to control the age property we can call the SetAge method We can use the GetAge method to read the age of the account holder

Get and Set Methods Creating Get and Set methods is a standard programming pattern Frequently they will perform validation of incoming data and reject out of range values I have not added any validation to the set method yet Nobody with an age less than 8 or greater than 100 can have an account

Using Properties The C# language provides properties to make getting and setting data easier They do not make things possible that we couldn’t do before They must make the programs easier to write Properties are used extensively in Silverlight for display elements

Age Property publicclassAccount{privateintageValue;publicint Age {set {if ( (value > 8) && (value < 100) ) ageValue= value; }get {returnageValue; } }}

Property Keywords The block of code after the get keyword is obeyed when the property is read by a program It must return a value of the property type The block of code after the set keyword is obeyed when the property is written Within the set block the keyword value means “The value being assigned to the property”

Using the Age Property Account s = newAccount ();s.Age = 21;Console.WriteLine ( "Age is : " + s.Age ); When a program uses a property it looks just like direct access to a data member The difference is that the get or set behaviours are used the blocks of code in the property are used This makes the code much tidier

Property validation Account s = newAccount ();intnewAge = 150;s.Age = newAge;if (s.Age != newAge ) Console.WriteLine ( "Age was not set" ); If the property uses validation it I up to the user of the property to make sure that an assignment worked correctly

Multiple properties for one value publicintAgeInMonths{get {returnthis.ageValue*12; }} This property only has a get method It provides a way of reading the age in months

Properties and Silverlight The items that we see in the properties Pane for an element are all C# properties When an assigning to an element property a program runs code inside a C# set behavior This might seem inefficient Accessing the data directly would be quicker But it is actually a necessary part of how Silverlight runs 50

Properties and Notification The set method in a Silverlight property has to do a lot more than just update the stored data This action will also trigger a display update for the screen Setting a property in a program also sends a notification to the program that the property is being changed This idea of using property changes to trigger events is one we will return to 51

Page Design with Silverlight We can design all our pages by dragging items onto the page, giving them a name and then setting their properties Visual Studio will create all the code behind the program to make this work You can set many properties of element s including colour, texture, transparency and even animation But this is best left to Graphic Designers 52

Review Visual Studio provides a complete design tool for creating and managing user interfaces A Silverlight display is made up of elements Each element is implemented by a C# class which is part of the element hierarchy Silverlight elements expose properties which allow programs (and Visual Studio) to determine their location and appearance on the display page 53

XAML and Silverlight A Silverlight application is made up of pages that contain elements These have properties that determine where they are, how they appear and what they can do in an application The Visual Studio tool allows us to manipulate the page content by using the design surface and the element properties pane 55

Expressing Silverlight Elements The description of the elements in a Silverlight application is actually held in a text file This file is formatted in a particular way Microsoft invented a language, XAML to hold this design information: eXtensibleApplication Markup Language XAML was invented to hold user interface design information 56

Why do we need XAML? XAML allows us to separate the role of graphic designer and programmer The designer should not have to see code objects to work The programmer should not be held back while the design is produced The XMAL file provides a separation between the code that drives the application and the way the application looks 57

XAML file content <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center" /> This snippet of XAML is the description of the firstNumberTextBox in our adding machine It contains fields that describe the position and size of the textbox This file is managed by Visual Studio as your program is being developed 58

XAML in Visual Studio The XAML file holds the information which is updated by both views 59

The XAML language XAML is a “declarative” language It just tells us about things, it does not tell us what they do and how they can do it The XAML file has a particular format The characters < and > are used to mark the start and end of some elements in the file The format looks a bit like XML eXtensible Markup Language 60

Using XAML You can actually edit the XAML text in your project to create new display elements and modify existing ones This can often be much quicker than using the editing interface provided by Visual Studio You just have to type the new values into the XAML window and the properties of the element are changed immediately 61

The XAML file at run time 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 This is the point at which the XAML object descriptions in the text are converted into program objects we can use in our code This all happens automatically as far as we are concerned 63

XAML and XML XAML looks a bit like XML XML means “Extensible Markup Language” This means that XML is really a way of designing languages that want to talk about something Just like the english language lets us invent verbs and nouns and put them into sentences that have meaning in a particular context 64

Inventing our own XML <?xml version="1.0" encoding="us-ascii" ?> <HighScoreRecordscount="2"> <HighScore game="Breakout"> <playername>Rob Miles</playername> <score>1500</score> </HighScore> <HighScore game="Space Invaders"> <playername>Username</playername> <score>4500</score> </HighScore> </HighScoreRecords> This XML format to hold a video game high score table 65

HighScore element <HighScore game="Breakout"> <playername>username</playername> <score>1500</score> </HighScore> The HighScore element contains two other elements, playername and score It also has a property that gives the name of the game We could add others, for example the date and time the score was achieved 66

HighScoreRecords element <?xml version="1.0" encoding="us-ascii" ?> <HighScoreRecordscount="2"> <HighScore game="Breakout"> <playername>username</playername> <score>1500</score> </HighScore> <HighScore game="Space Invaders"> <playername>username</playername> <score>4500</score> </HighScore> </HighScoreRecords> The HighScoreRecords element contains a count of the number of HighScore elements 67

XML and data structures We can invent our own language format whenever we have some structured data that we want to store The designers of XAML have done this They have created a language that lets us design user interfaces 68

The XAML data revisited <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center" /> We can see that the XAML content that describes a textbox is very similar to a HighScore element The designers of XAML had to work out what data fields are required in a TextBox object 69

What is a Markup Language? The “ML” in XML stands for “Markup Language” A markup language was originally a set of commands for the printers of a document ‘Put the words “Table of Contents” in bold’ 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 70

XML and HTML The idea of creating your own markup language was such a good one that people wanted a standard form for doing this XML came out of this drive for standards 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 It also tells you how to create “schemas” that define the structure and content of XML documents 71

XML Schema An XML schema describes a particular XML document format: “A HighScore element must contain a PlayerName and a Score value, but the Date value is optional” Programs can use a schema to make sure that a particular document contains content which is valid 72

XML and software XML allows programs to share data irrespective of what kind of system was used to create the data There are many software tools that can create schemas and you can even store the contents of C# directly into XML structured files However, for now just remember that the description of a Silverlight page is a text file containing an XAML document 73

XAML and Silverlight Pages A Silverlight application is made up of a number of pages Each page is expressed as a single XAML source file The page will contain descriptions of a number of Silverlight elements From time to time we will have to make changes to the XMAL file directly 74

Review The design of a Silverlight page is expressed as a XAML document stored as text file The separation of the design from the program code makes it much easier for designers and programmers to work together The format of a XAML document is based on XML (an eXtensible Markup Language) XML allows us to create languages that describe any kind of structured data 75

Creatinganapplicationwithsilverlight

Silverlight and C# Up until now all we have done is create XAML designs for our application We have used the editing surface and the properties pane, along with a text editor Now we are going to see where the program content lives This code will provide the active content for our calculator This will work out the result 77

The Visual Studio Solution Explorer The Solution Explorer is another pane in Visual Studio It shows all the elements in a particular solution This includes all the application resources and XAML files 78

The MainPage.xaml file The MainPage.xaml file contains the XAML that describes how the main page looks If you add further pages to the application they will appear as xaml pages in the solution 79

The code behind a xaml page Each xaml page has a file of C# behind it We can find this by opening up the xaml file as shown in Solution Explorer 80

XAML file content namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }} This is all the actual code behind our adding machine main page 81

MainPage class namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }} This code is in a class called MainPage which extends the PhoneApplicationPage class 82

MainPage constructor namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }} The code just contains the constructor that is called when the page instance is loaded 83

Initialise Components namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }} The constructor calls a method that initialises all the components on the page 84

Health Warning We have just had a quick look in the “engine room” of Silverlight This is somewhere you should never go Do not make any changes to this code or Visual Studio may get very upset and you will almost certainly break your program 86

Running our application We can run our application if we like We can type in values and press the equals button But nothing happens Next we need to make a method that will do the calculation and get it to run 87

calculateResult method privatevoidcalculateResult() { float v1 = float.Parse(firstNumberTextBox.Text); float v2 = float.Parse(secondNumberTextBox.Text); float result = v1 + v2; resultTextBlock.Text = result.ToString(); } This method will calculate the result and display it If we call this the display will be updated 88

Obtaining values privatevoidcalculateResult() { float v1 = float.Parse(firstNumberTextBox.Text); float v2 = float.Parse(secondNumberTextBox.Text); float result = v1 + v2; resultTextBlock.Text = result.ToString(); } This line gets the text out of the firstNumberTextbox and parses it to produce a floating point value 89

Calculating a result privatevoidcalculateResult() { float v1 = float.Parse(firstNumberTextBox.Text); float v2 = float.Parse(secondNumberTextBox.Text); float result = v1 + v2; resultTextBlock.Text = result.ToString(); } This statement calculates the result we get by adding the values together 90

Displaying the result privatevoidcalculateResult() { float v1 = float.Parse(firstNumberTextBox.Text); float v2 = float.Parse(secondNumberTextBox.Text); float result = v1 + v2; resultTextBlock.Text = result.ToString(); } This statement gets a string version of the result value and puts it into the result texbox 91

Silverlight elements and properties 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) Our program is able to work with the display elements because they are objects as far as we are concerned The objects are created when the program starts 92

Getting the result Now all we need is to run the calculateResult method when the Equals button is pressed To do this we have to connect an event generator (the button) with the method that will run when the button produces an event The event is generated when the user presses the equals button 93

Programs and events For events to work a program must have a way of managing an event as a data object We need to be able to give the button an object that represents a method to be called when the event occurs C# provides a delegate mechanism that can create references to methods Fortunately Silverlight and Visual Studio make this very easy to use 94

Events in Visual Studio We can ask Visual Studio to create an event delegate for us by double clicking on the element in the designer Visual Studio will do all the “plumbing” to make this work 95

The Event Handler Method When we have double clicked the button we find that there is now a new method in the MainPage class This will be called when the button is clicked in our program 96

Displaying the result privatevoidequalsButton_Click(objectsender, RoutedEventArgs e){calculateResult();} Visual Studio has given this method a sensible name This is based on the component name We just need to add a call of calculateResult to get the program to work 97

Demo 2: A Complete Solution Demo 98

Managing Events The properties of a Silverlight element include information about the events and what methods they are bound to You can see this by selecting Events in the Properties pane 99

Events and XAML <Button Content="equals" Height="72"HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton"VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> We know that everything in Silverlight begins and ends with the XAML When we add an event binding in Visual Studio this adds a property to the XAML for that component You can see it above 100

Review Behind each XAML file is a C# source file that contains the behaviour for that page You add your own behaviours by putting methods into this code file If you bind Silverlight events to elements the event handlers are also placed in this file You connect these handlers to your code to produce a working application

Exercise 1: Time Trackeruser interface design

Exercise 2: time record xmlDesign

WP7 HUB_Introducción a Silverlight

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

Semelhante a WP7 HUB_Introducción a Silverlight

Semelhante a WP7 HUB_Introducción a Silverlight (20)

Mais de MICTT Palma

Mais de MICTT Palma (20)

Último

Último (20)

WP7 HUB_Introducción a Silverlight

Notas do Editor