This document provides an overview of building Plex XAML user interfaces. It discusses: - The speakers for the session on XAML - An introduction to XAML, which is an XML-based language used to declare object structures for WPF and UWP applications - How XAML is used for each Plex function panel and globally for the application executable - Exercises that will have attendees set up projects and customize XAML - Tips for customizing the CA Plex App.xaml templates prior to executable creation and including custom templates - An example Twitter application that obtains access tokens, calls APIs via the tokens, handles JSON results, and uses the

1. Build Plex XAML UI

2. https://twitter.com/IcathlonPlex
CM First Group. Confidential & Do Not Distribute 2

3. Speakers
• Arun, Rob and Kiyoshi
© 2016 CM First Group All Rights Reserved. 3

4. About this Session
• Xaml?
• Exercises
• CA Plex App.xaml Tips
© 2016 CM First Group All Rights Reserved. 4

5. XAML?
© 2016 CM First Group All Rights Reserved. 5

6. XAML
© 2016 CM First Group All Rights Reserved. 6
• eXtensible Application Markup Language
– XML-based language for declaring object structures.
– Used in:
• WPF (Windows Presentation Foundation)
• UWP (Universal Windows Platform)
<Window x:Class=“DemoApp.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height=“140" Width=“130">
<Canvas>
<Button Canvas.Left=“30" Canvas.Top=“40" Name="button1" Width=“50“
Height=“50">Hello!</Button>
</Canvas>
</Window>

7. XAML
• XAML for each Plex Function Panel (local effect)
– Definition of Control
• Name (Identification, consistent via Control ID)
• Type of Control (Label, Edit, Pushbutton etc)
• Event Definition (Click, DoubleClick etc)
– Style ( == Plex Control State) A Set of properties
• XAML for EXE (Global effect for Process space)
– Style (Referenced by all function Styles)
– Common Resources, such as Color
© 2016 CM First Group All Rights Reserved. 7

8. XAML
• Style has an Inheritance like Concept
– By changing Style for EXE will impact all Controls without visiting and
changing individually
– Cannot override any Local definition
© 2016 CM First Group All Rights Reserved. 8

9. Exercises
• Preparation
– Set Up Visual Studio Projects for Exercises
• Customize Xaml
– 5 exercises
© 2016 CM First Group All Rights Reserved. 9

10. CA PLEX APP.XAML TIPS
© 2016 CM First Group All Rights Reserved. 10

11. CA Plex App.xaml Tips
• App.xaml templates are available as text format
– Customizable prior EXE creation
– Drop your template file to get included in app.xaml
• Change these files before EXE creation
– Pro
• Effective Xaml Modification
– Con
• Applying PTF will override
• Requires version controls
© 2016 CM First Group All Rights Reserved. 11

12. Customizable prior EXE creation
Bootstrap.App.xaml.ObPushbuttonData.tml
Insert Triggers
<Style TargetType="ob:ObPushbuttonData">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
© 2016 CM First Group All Rights Reserved. 12

13. Drop your template file to get included in app.xaml
Bootstrap.App.xaml.ObPushbuttonData_custom.tml
Plex EXE creation step pick them up and your Style will be a part of
app.xaml
© 2016 CM First Group All Rights Reserved. 13

14. ABOUT APPLICATION
© 2016 CM First Group All Rights Reserved. 14

15. Twitter Application
CoreTweet, .NET Twitter Library
• Twitter site
– Open Account
– Define Application
– Generate Access Keys
• Install CoreTweet via GitHub
• Code in Plex Source code Object
– Define Twitter Access Tokens
– Call API you want via Tokens
– Handle Jason String Result if needed
– Set Data to Plex Variable
– Use Data in AD
© 2016 CM First Group All Rights Reserved. 15

16. Q & A
© 2016 CM First Group All Rights Reserved. 16