230 likes | 494 Vues
Windows Presentation Foundation (WPF). Chapter 16 Dr. Abraham. WPF. Microsoft’s new framework for GUI, graphics animation and multimedia. WPF generates vector-based graphics and is resolution independent. Building a GUI with WPF
E N D
Windows Presentation Foundation (WPF) Chapter 16 Dr. Abraham
WPF • Microsoft’s new framework for GUI, graphics animation and multimedia. • WPF generates vector-based graphics and is resolution independent. • Building a GUI with WPF • WPF uses XAML (Extensible Application Markup Language) to generate the code.
XAML • When you use the designer, the IDE creates code to create and configure the controls • In WPF, it generates XAML. You can manually write XAML to define GUI controls. • When the application is compiled the XAML compiler generates code to create and configure controls. • XAML allows designers and programmers to work together more efficiently.
XML TUTORIAL Portions from w3 schools By Dr. John Abraham
What is XML? • XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to describe dataXML tags are not predefined. You must define your own tagsXML uses a Document Type Definition (DTD) or an XML Schema to describe the data XML with a DTD or XML Schema is designed to be self-descriptiveXML is a W3C Recommendation - 1996
XML • Portable, Widely supported, Open technology • Standard for storing data (as text file) that are exchanged between applications. • Not for displaying data • No predefined tags – user supplies tags. • With XML, financial information can be exchanged over the Internet
XML vs. HTML • XML was designed to describe data and to focus on what data is.HTML was designed to display data and to focus on how data looks. • HTML is about displaying information, while XML is about describing information • XML can separate data from HTML
ARTICLE.XML file • <?xml version = "1.0"?> • <!-- Article structured with XML --> • <article> • <title>Simple XML</title> • <date>December 6, 2001</date> • <author> • <firstName>John</firstName> • <lastName>Doe</lastName> • </author> • <summary>XML is pretty easy.</summary> • <content>In this chapter, we present a wide variety of examples that use XML. • </content> • </article>
EXPLANATION • Root element is article • Child elements are title, data, author & summary • To process this file, an XML parser is required, such as msxml (microsoft), Xerces (appache), etc.
XML rules • All XML elements must have a closing tag • With XML, it is illegal to omit the closing tag. • XML tags are case sensitive • All XML elements must be properly nested. Following is wrong: • <b><i>This text is bold and italic</b></i> • All XML documents must have a single root element
XML attributes • XML elements can have attributes in the start tag, just like HTML. • Attribute values must always be quoted • <note date="12/11/2002"> • Avoid using attributes if you can. Use child elements instead.
DTD • A Document Type Definition defines the legal building blocks of an XML document. It defines the document structure with a list of legal elements. • A "Valid" XML document also conforms to a DTD. • A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a Document Type Definition (DTD) • A DTD can be declared inline in your XML document, or as an external reference • Your application can use a standard DTD to verify that the data you receive from the outside world is valid. • You can also use a DTD to verify your own data.
Internal DTD • <?xml version="1.0"?> • <!DOCTYPE note [ • <!ELEMENT note (to,from,heading,body)> • <!ELEMENT to (#PCDATA)> • <!ELEMENT from (#PCDATA)> • <!ELEMENT heading (#PCDATA)> • <!ELEMENT body (#PCDATA)> • ]> • <note> • <to>Tove</to> • <from>Jani</from> • <heading>Reminder</heading> • <body>Don't forget me this weekend</body> • </note>
This DTD is interpreted like this: • !DOCTYPE note (in line 2) defines that this is a document of the type note. • !ELEMENT note (in line 3) defines the note element as having four elements: "to,from,heading,body". • !ELEMENT to (in line 4) defines the to element to be of the type "#PCDATA". • !ELEMENT from (in line 5) defines the from element to be of the type "#PCDATA" • and so on.....
External DOCTYPE declaration • If the DTD is external to your XML source file, it should be wrapped in a DOCTYPE definition with the following syntax: • <!DOCTYPE root-element SYSTEM "filename"> • <?xml version="1.0"?> • <!DOCTYPE note SYSTEM "note.dtd"> • <note> • <to>Tove</to> • <from>Jani</from> • <heading>Reminder</heading> • <body>Don't forget me this weekend!</body> • </note> • And this is a copy of the file "note.dtd" containing the DTD: • <!ELEMENT note (to,from,heading,body)> • <!ELEMENT to (#PCDATA)> • <!ELEMENT from (#PCDATA)> • <!ELEMENT heading (#PCDATA)> • <!ELEMENT body (#PCDATA)>
XML Schema XML Schema is an XML based alternative to DTD. • An XML schema describes the structure of an XML document. • The XML Schema language is also referred to as XML Schema Definition (XSD). • An XML Schema: • defines elements that can appear in a document • defines attributes that can appear in a document • defines which elements are child elements • defines the order of child elements • defines the number of child elements • defines whether an element is empty or can include text • defines data types for elements and attributes • defines default and fixed values for elements and attributes
A Simple XML Schema • This is a simple XML Schema file called "note.xsd" that defines the elements of the XML document above ("note.xml"): • <?xml version="1.0"?> • <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" • targetNamespace="http://www.w3schools.com" • xmlns="http://www.w3schools.com" • elementFormDefault="qualified"><xs:element name="note"> • <xs:complexType> • <xs:sequence> • <xs:element name="to" type="xs:string"/> • <xs:element name="from" type="xs:string"/> • <xs:element name="heading" type="xs:string"/> • <xs:element name="body" type="xs:string"/> • </xs:sequence> • </xs:complexType> • </xs:element></xs:schema>
Viewing XML files • Raw XML files can be viewed in Mozilla, Firefox, Opera, Internet Explorer, and in Netscape 6+. • However, to make XML documents to display like nice web pages, you will have to add some display information • With CSS (Cascading Style Sheets) you can add display information to an XML document. • Look at this XML file: Look at this XML file: note.xml
Displaying XML files with CSS • Take a look at this XML file: The CD catalog • Then look at this style sheet: The CSS file • Finally, view: The CD catalog formatted with the CSS file • XSL (the eXtensible Stylesheet Language) is the preferred style sheet language of XML. • View the XML file, the XSL style sheet, and View the result.
XSLT XSLT (Extensible Stylesheet Language Tranformation) is a language for transforming XML documents into XHTML documents or to other XML documents. • XSLT is the most important part of XSL • XSLT transforms an XML document into another XML document • XSLT uses XPath to navigate in XML documents
XAML PROGRAMMING • Here is the hello world program we wrote in class <Window x:Class="wpfHello.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Say Hello Program" Height="350" Width="525" Background="Gold"> <Grid> <Label HorizontalAlignment="Center" VerticalAlignment="Center"> Welcome to My first WPF program! </Label> <Button Content="say Hello" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="btnHello" VerticalAlignment="Top" Width="75" Click="btnHello_Click" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="331,12,0,0" Name="txtHello" VerticalAlignment="Top" Width="120" /> </Grid> </Window>
Future value interface with WPF <Window x:Class="WpfFutureValue.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Future Value Program in WPF" Height="458" Width="610" Background="Gray" FontWeight="Bold"> <Grid Height="368" Width="650"> <TextBox Height="23" HorizontalAlignment="Left" Margin="390,0,0,0" Name="txtInitDep" VerticalAlignment="Top" Width="120" /> <Label Content="Initial Deposit" Height="23" HorizontalAlignment="Left" Margin="296,0,0,0" Name="label1" VerticalAlignment="Top" Width="88" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="390,29,0,0" Name="txtPerDep" VerticalAlignment="Top" Width="120" /> <Label Content="Deposit Every 30 days" Height="31" HorizontalAlignment="Left" Margin="249,29,0,0" Name="label2" VerticalAlignment="Top" Width="135" /> <TextBox Height="23" HorizontalAlignment="Right" Margin="0,58,140,0" Name="txtRate" VerticalAlignment="Top" Width="120" /> <Label Content="Rate of Interest Per annum" Height="31" HorizontalAlignment="Left" Margin="186,50,0,0" Name="label3" VerticalAlignment="Top" Width="165" /> <TextBox Height="23" HorizontalAlignment="Right" Margin="0,86,140,0" Name="txtStartAge" VerticalAlignment="Top" Width="120" /> <Label Content="Age When Account Started" Height="31" HorizontalAlignment="Left" Margin="186,86,0,0" Name="label4" VerticalAlignment="Top" Width="165" /> <TextBox Height="23" HorizontalAlignment="Right" Margin="0,111,140,0" Name="txtRetAge" VerticalAlignment="Top" Width="120" /> <Label Content="Retirement Age" Height="31" HorizontalAlignment="Left" Margin="249,111,0,0" Name="label6" VerticalAlignment="Top" Width="102" /> <Button Content="Calculate" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="btnCalculate" VerticalAlignment="Top" Width="75" Click="btnCalculate_Click" /> <RichTextBox Height="246" HorizontalAlignment="Left" Margin="1,139,0,0" Name="txtOutput" VerticalAlignment="Top" Width="559" TextChanged="txtOutput_TextChanged" VerticalScrollBarVisibility="Visible" Background="gold" FontFamily="Courier New" /> </Grid> </Window>