Presentation Technologies Outline
=================================

Opening
-------

 [slide: home]
 
 - Introduce myself - Andy Frank - Core engineer at Tridium
 - Topic for today 
 - Presentation in AX - This is sort of a big topic
 - So I'm going to try and hit the core concepts that everything else builds on
 - When we talk about presentation - we mean anything that contributes
   to the user experience:
    - Custom workbench profile
    - WireSheet
    - PxPage
    - Servlet or HxView
    - Even a Pdf
 - All these things contribute to how a user interacts with Niagara
 - Tried to provide large collection of built-in controls and tools out of the
   box to get people up and running quickly
 - But its important to note - AX is a developer platform - so if something's
   missing - just add it!
 - As we'll see its pretty easy to actually do that.


Presentation Stack
------------------

 [slide: stack]

 - So here are the major pieces in the "Presentation Stack"
 - And how they fit togethers 
 
 - Gx is our graphics API responsible for drawing stuff - images, shapes, text
 - Bajaui is our widget toolkit for doing menus, buttons, tables, etc
 - Workbench is used for creating tools for interacting with Niagara
 - Hx is used for creating lightweight browser interfaces using HTML/AJAX
 - Px is the non-programmers mechanism for design real-time graphics 


Gx
--

 [slide: stack-gx]
 
 - Foundation for all presentation in Niagara AX
 - Its an API for drawing things like shapes, text, and images
 - Its also independent of the output device
    - Which means that same code can render to:
       - Monitor on your desk
       - Directly to a Printer or a PDF page
       - An SVG image
       - Or a PNG or JPEG
 - Allows use to leverage complex layout and rendering code for all your
   supported output formats
 - So what exactly does gx let use draw?
 
 [slide: gx playground] 
 
 - Vector based Shapes
    - Rectangles
    - Ellipses
    - Polygons
    - Paths - which let me create complex shapes - like this funky guy
 - And if you zoom in here - notice things stay crisp - thats vector
 - And I can rotate things around
 - Scale + Rotate are examples of Transforms
 - Transforms just let me manipulate shapes
    - Other two things transform let me do is:
       - Translate - move the location of the shape
       - Skewing - stretch a shape in one direction - either vert or horiz
    - And you can apply multiples transform on top of each other
       - Just like here
 - Images - draw GIFs, and PNGs, and JPEGs
 - Gradients -> even transition b/w two or + colors
 - Can use to fill shapes
    - Circle - light red to a darker red
    - Funky Dude - uses three color stops
    - I can even use gradients when drawing text
 - Stroke shapes - stroking is just using another color draw the outline 
   of a shape
    - I can use gradients for stroking too
    - Width
    - Dotted
 - Alpha transparency
    - Lets me make shapes semi-transparent
    - I can use them in gradients too
 
 - Let me show you a more realistic example of what gx lets you do
 
 [slide: ahu]
 
 - This is a 100% vector gx drawing - no bitmaps
 - Restore window -> resize
 - Notice how everything is scaling smoothly up and down
 - Point out
    - Alpha top duct
    - A few gradients
    - Path shape used with Fan
 
 - Most of the time you're going to use it with Bajaui...

Bajaui
------

 [slide: stack-bajaui]
 
 - Our custom widget toolkit we developed specifically for Niagara
 - Built on top of niagara component model
    - BWidget extends BComponent
    - properties, actions, and topics
    - registry and agents  
 - What is a widget?
 - Dive and demo some widgets 

 [slide: bajaui playground] 
 
 - Go thru each widget
 - Layout - how do we layout widgets?
 - Panes - what is a pane?
 - I can create my own panes to do any type of layout
    - We use Panes - open ended
    - EdgePane
    - GridPane
    - CanvasPane
 - Easy to create a new widget
 
 [slide: exampleWidget]
 
 - Three main methods needed to implement
    - computePreferredSize - ideal size if you could have it
    - doLayout - computative-intensive layout
    - paint - the rendering code
 - Interactivity
    - mousePressed
    - other mouse callbacks and keyboard callbacks


Workbench
---------
 
 [slide: stack-wb]   
 
 - Platform for developing tools on Niagara
 - Built on top of bajaui
 - Can serve several roles
    - Programming tool (code editor/compiler)
    - Configuration tool (property sheet/wiresheet)
    - Graphics tool (px editor)
    - End user operator interface (schedules/alarming)
 - So lots of flexibilty in what it can be used for
 - And thats the focus here - How can I extend workbench to customize a UX?
 
 [slide: anatomy of wb]
 
 - Workbench divided into 7 different areas
 - Describe each one
    - View is the view I'm using to look at the current object
    - Menubar/Toolbar - display current commands available to me - merging
    - Locator - display my current location - def: breadcrumb/view picker
    - Sidebars
       - Nav
       - Help
       - Bookmark
       - Todo list
       - Palette
    - Console - built-in console - drop down use the command line if needed
    - StatusBar - typical status bar - display extra info that may be useful
 - What is static?  What is context-sensitive?
 - When we talk about customizing WB, these are things you are able to change 
    - Modify/Replace/Remove
 - When you approach customizing - these get lumped into 3 main chunks:
    - Views
    - SideBars
    - Profiles
 - We'll get into the details of each shortly
 - But first, lets take a look at the class heirarchy...
 
 [slide: wbClassHeirarchy]
 
 - Not going to spend alot of time on this
 - Give you a feel for how the big pieces fit together
 - Reiterate everything built on top of the component model
 
 [slide: wbparts-view]
 
 - So lets look at first of those 3 chunks - views
 - What is a View?
    - A view is a visualiztion of a specific type of object
       - For example - the PropertySheet is a view on BComponent and anything
         that extends BComponent
    - Let me view and modify objects - filesystem or running in station
    - I can have multiple views on a type
 - Of course, you can create your own views
 - And they can be registered on any type - not just your own
    - NumericWritable
 - Lets looks at an example View...
 
 [slide: exampleView]
 
 - Go thru code example
 - Demo ExampleView 
 - Hows makeFor() work?
    - Registry - database of all types in Niagara
    - Agents - define a relationship b/w two types  
    - Use Registery to find all agents for a given type
 - And thats how views and fe's work
 - So if you look at module-include.xml -> agent
    
 [slide: wbparts-sidebar]
 
 - The second chunk is SideBars
 - Not a whole lot to say here
 - A SideBar is just a widget that can be opened in the SideBar
 - Pretty much plain old widget - expect for callback when view changed
    - Could have context-sensitive sidebar that changed with view
 - Run Workbench -> Add example, and a few others
 - *** Leave NavSideBar open ***
 
 [slide: exampleSideBar]
 
 - Go thru code example
 
 [slide: wbparts-profile]
 
 - Last of the three chunks are Profiles
 - Profiles customize the appearance of everything outside of the view
    - Includes toolbars, menubars, sidebars, etc.
 
 [slide: exampleProfile]  

 - Go thru code example
 - Callbacks to handle each section
 - So its really easy to turn stuff off
 - Biggest use case - I want to simply things
 - If you take this to the extreme you get what I have here
    - This is workbench with a custom profile
    - Strip out everything except for a custom locator bar that's
      stepping tru a nav file
 - You get alot of stuff by default
 - But you can trim it almost down to nothing
 - Whole session on doing this tomorrow with Brian
    
Px
--
 
 [slide: stack-px]
 
 - Px is a presentation technology for designing graphics that are 
   independant of the display environment
 - So, for example I can create AHU graphic in px, and I can:
    - View it in workbench
    - View it in a web browser using HTML
    - Export it to a PDF
 
 [slide: pxParts]
 
 - Px composed of three main components:
    - A xml file format that defines a tree of BWidgets and data bindings
    - A runtime that handles subscribing those data bindings, as well as
      converting to HTML, PDF, etc.
    - An WYSIWYG editor tool for creating and editing px files
 - Probably easiest way to grasp all this is to dive and create a
   px page from scratch and we can walk thru some of this stuff...
    
 [slide: pieces of flair - create and view px page]
 [browser: show in hx]
 [browser: show in pdf]
     
 - Bindings 
    - Associates a property on a BWidget to an object using an BOrd.
 - Impendance mismatch - converters massage one type into another type
 - Converters
    - Used by bindings to convert the target type of a binding to another type
      that is consumable by the bound widget


Hx
--
 
 [slide: stack-hx]
 
 - What is hx?  Hx is an API for creating lightweight browser interfaces
   using HTML, CSS, JavaScript, and XHR - commonly referred to as AJAX
 - Modeled after Workbench - so you'll see the same concepts
    - HxView
    - HxFieldEditor
    - HxProfile 
 - So how does it fit in with the other layers in our stack?
    - Acts as a peer to workbench for the browser -> using hx versions of
      the equivalent workbench view
        - PropertySheet
        - UserManager
    - The px runtime knows how to auto convert px pages to pure HTML when
      being displayed in an hx enviornment
 - Of course you can create standalone HxViews as well - or even entire 
   applications in just hx -> which is exactly what we did with Niagara Central
 - Lets take a look at what an HxView looks like... 
 
 [slide: sample hxview]
 [bump up text size]
 
 - This is pretty much the Hx version of the WbView I showed you early
 - Methods - write/save/event      
 - Create AJAX dialog w/o writing _any_ JavaScript - built-in to hx
 - Example of HxFieldEditor building/populating/selecting dropdown for you


Closing
-------
  
 [slide: end]
 
 - Thank everyone
 - I will be around the rest of Summit
 - So feel free to track me down and ask any questions
 - Brian has a presentation tomorrow on customizing Workbench
   that apply most everything we just talked about in some real
   world examples      

