programming iii n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Programming III . PowerPoint Presentation
Download Presentation
Programming III .

Loading in 2 Seconds...

play fullscreen
1 / 33

Programming III . - PowerPoint PPT Presentation


  • 118 Views
  • Uploaded on

Programming III. Comparison of GUI A PIs WPF Hello World UI elements Content models Inheritance chains. Graphical User Interface APIs. API: Application Programming Interface Usually we do not start the programming of a GUI from scratch Exception: games, very often

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Programming III .' - jamalia-langley


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
programming iii

Programming III.

Comparison of GUI APIs

WPF Hello World

UI elements

Content models

Inheritance chains

graphical user interface apis
Graphical User Interface APIs
  • API: ApplicationProgrammingInterface
  • Usually we do not start the programming of a GUI from scratch
    • Exception: games, very often
  • There are several APIs that give us some basic components/concepts/approaches
    • MFC (Windows/C++)
    • Windows Forms (Windows/.NET)
    • Java AWT/Swing (Java)
    • Cocoa (Mac OS X)
    • QT (Unix/Linux ...)
    • GTK/GTK+ (Unix/Linux ...)
    • WPF (Windows/.NET)
    • Windows Runtime (Metro) (Windows/C#, C++)
gui apis windows forms
GUI APIs / Windows Forms
  • Available since .NET 1.0 (2002)
    • Provides managed access of the native Windows API elements
    • Windows API: from Windows 1.0 (1985)
  • Simple, standard-looking user interfaces
  • Functionality: only GUI, no logic/layering
    • Creation and management of windows
    • Basic controls/components
    • Dialog windows
    • Handling of mouse/keyboard input events
    • Various different APIs for different tasks
gui apis wpf
GUI APIs / WPF
  • Since .NET 3.0 (2006)
  • Designed to replace the old Windows Forms
    • Only half-success (as of 2014)
  • Offers a standardized access and logical representation of (almost) every aspect of a Graphical application
    • Build-up of the user interface (similar to Windows Forms)
    • 2D
    • 3D
    • Multimedia/video
    • Document management
    • Input management
gui apis windows runtime
GUI APIs / Windows Runtime
  • Metro: design principles, design language (Metro -> Modern -> Windows Store/Windows 8)
  • Modal, fullscreen apps with simple graphical layout
    • Good for portable devices with smaller screens
choose which one
Choose which one?
  • http://blog.arsanth.com/index.php/2011/09/15/what-is-and-isnt-dead-in-windows-8/ (2013. február 22.)
  • At the moment, WPF is the better way to develop desktop apps –use WinForms for quick prototyping or if it has to be used for compatibility / HR reasons
the future
The future
  • (as of 2014)
  • ?
  • The support for Windows Formsseems to be eternal, but it is no longer developed
  • The future of WPF is not certain, its development is slow, and the developer tools are not mature enough
  • The XAML is a technology that will surely live on
wpf hello world2
WPF Hello World
  • View -> <important toolbox>
  • View -> Other Windows -> <less important toolbox>
wpf hello world3
WPF Hello World
  • Window representation and the XAML designer
wpf hello world4
WPF Hello World
  • Code-behind file of the MainWindow
wpf hello world5
WPF Hello World
  • The properties of the selected UI elementcan be altered in the Properties window
wpf hello world6
WPF Hello World
  • Project settings
    • Compile settings
    • Pre- and post-compile tasks
    • Command line arguments
    • User/app level configuration
    • Etc.
  • External References
    • To ms or non-ms software libraries or web services
  • App-level configuration files
  • Window XAML and code-behind files
app mainwindow
App, MainWindow
  • Appclass:
    • App.xaml.cs + generated bin/obj/App.g.cs = Appclass
    • This is where the Main() is generated, which creates an instance of the Main window
    • The “Current”static property represents the currently running application. It has events/methods to detect/control the execution of the application (e.g. Startup, Exitevents, or App.Current.Shutdown())
  • MainWindowclass / other Window classes:
    • Represents windows / forms
    • MainWindow.xaml.cs + generated bin/obj/MainWindow.g.cs = MainWindowclass
    • It contains the InitializeComponent() method that processes and loads the XAML
toolbox
Toolbox
  • Controls
    • For user input
  • Simple graphical/UIelements
  • “Window frame extensions”
    • Menus, toolbars, status bars…
  • Content managers
    • Used for grouping and placement of other UI elements
  • Etc
simple controls
Simple controls
  • Button
    • Contentproperty to set the caption text (?)
    • Clickevent
  • Label
    • Contentproperty to set the caption text (?)
  • CheckBox
    • Contentproperty to set the caption text (?)
    • IsCheckedproperty to get/set the checked state
    • Checked/Uncheckedevents
  • RadioButton
    • Contentproperty to set the caption text (?)
    • GroupNameto define groups (or use a content manager)
    • IsChecked property
    • Checked/Uncheckedevents
simple controls1
Simple controls
  • TextBlock (to display multiline or simple text)
    • Text property
  • TextBox (input box)
    • Text property
    • TextChangedevent
  • GroupBox
    • Headerproperty
    • Contentproperty
list controls
List controls
  • ListBox
    • Itemsproperty for the elements
    • SelectionChangedevent
  • ComboBox (drop-down list)
    • Itemsproperty for the elements
    • SelectionChangedevent
  • TreeView + TreeViewItem
    • Itemsproperty for the elements (if the elements are TreeViewItem instances, then each will have an Items property)
content models
Content models
  • ContentControl:
    • Can contain a single element (Contentproperty  user controls?)
      • HeaderedContentControl: one element + a header text.
  • ItemsControl:
    • Can contain multiple elements (ItemsSource / Itemsproperties)
      • HeaderedItemsControl: multiple elements+headers.
inheritance of the gui classes
Inheritance of the GUI classes
  • System.Windows.Media.Visual:
    • Rendering, transformations, hit check, bounding box…
  • System.Windows.UIElement:
    • Input, placement, focus management, event handling
  • System.Windows.FrameworkElement:
    • Data binding
inheritance of the gui classes1
Inheritance of the GUI classes
  • System.Windows.Controls.Control:
    • Mainly manages the styles of the different controls (Background, BorderThickness, BorderBrush, FontFamily, FontSize) – it’s possible to completely change the look of every control!
    • Important question: what can be on this control? (ContentControlvsItemsControl) descendant classes?
inheritance of the gui classes2
Inheritance of the GUI classes
  • System.Windows.Controls.ContentControl:
    • Can contain only ONE element (Contentproperty). It can be any type (Object), but it is usually a string or a UIElement descendant
      • Encapsulating User Controls into each other is a common usage
inheritance of the gui classes3
Inheritance of the GUI classes
  • ContentControldescendants :
    • Button
    • CheckBox
    • Label
    • RadioButton
    • Window
inheritance of the gui classes4
Inheritance of the GUI classes
  • System.Windows.Controls.ItemsControl:
    • Can contain MULTIPLE elements (Items, ItemsSourceproperty).
    • Items: ItemCollection–can store Objectreferences
    • ItemsSource: IEnumerable
    • Only one of the two storage modes can be used!!!
      • If we use theItemsSource, then the Items will be read-only. If we set the Items property, then we cannot set the ItemsSource
inheritance of the gui classes5
Inheritance of the GUI classes
  • ItemsControldescendants:
    • ComboBox
    • ListBox
    • ListView
    • Menu
    • TreeView
placement of ui elements
Placement of UI elements
  • HorizontalAlignment
  • VerticalAlignment
  • Margin, Height, Width
  • Every UI elementis placed according to the combination of these values (e.g. …Alignment+Margin, Height+VerticalAlignment, Width+HorizontalAlignment…)
content managers
Content managers
  • They are used to organize the placement and the resizing of the sub-elements – the content managers have no visual representation on their own
  • Grid(helper row/column definitions)
  • Canvas (strictly pixel-accurate placement)
  • DockPanel (docked to left/right/top/bottom)
  • StackPanel (Elements are stacked)
  • WrapPanel (Elements are stacked + paginated/scrolled)

Grid: StackPanel:

inheritance of the gui classes6
Inheritance of the GUI classes
  • System.Windows.Controls.Panel:
    • Every content manager is the descendant of the Panel base class
    • Children: UIElementCollectiontyped property – can store UIElementreferences
wpf hello world ii1
WPF Hello World II.
  • Event handling
    • The list of events can be accessed in the Properties window (“lightning” icon)
    • After double-clicking, a new event handler is created in the code-behind source, and the new method is added into the event-delegate
    • After deleting the reference in the Properties window, the association for the method is removed from the event-delegate (but the method itself is not deleted!)
    • We can also add an event handler to the “default event” of an element by double-clicking on the element itself
exercise
Exercise
  • Tax checker. Input: income, tax percentage, prepaid tax ... Evaluate the user input!