Week 1 Basic GUI with AngularJS

Link to all source code (zipped)

Example 1: Basic HTML input
- <input> tag: http://www.w3schools.com/tags/ref_byfunc.asp
  - type: attribute (button, text, checkbox, range [slider], etc. etc.)
  - id: unique name (not enforced, you should be careful)
  - value: in this case is used as the button label
- <link> that defines the location for the icon
- Convention: all ids, begin names with "id"
- Lesson:
  - GUI elements (buttons, slider bar, etc) are simple instructions (code), in this case, web-browser renders them
Example 2: Embed Javascript source code
- <input>: type text for text input/output
  - value: is the attribute for receiving/sending the value
- <script> text
  - Javascript code: http://www.w3schools.com/jsref
  - Notice the syntax: name of function followed by defining the function with "function" keyword.
  - Strange, but whatever
- <input button> onClick event
  - integration of event service functions inside the GUI environment
- Problem:
  - Two types of information in the same index.html file
    - Logic: Javascript programming code
    - Appearance: html-code that defines how the page look
- Lesson:
  - It is possible to attach "logic" to GUI elements
Example 3: Javascript in separate source code file
- <script> tag: reference to the source code file
- src/ButonHandlers.js: source code file
  - "use strict": ensure variables must be defined before use!
  - myButtonClick: is a variable that contains the definition of a function!
    - This variable is invoked when the button is clicked
- index.html: contains only html code, logic is separated in .js files
- Important hint: how to debug
  - In chrome: ctrl-shift-I
    - All the different tabs
  - From NetBeans: set breakpoints
    - Stack trace, watch variables, etc.
- Lesson:
  - Pays to organize
  - One of the metrics that guides organization is: functionality (what does it do?) ... in our case
    - Does it provide logic (JavaScript) or does it show user something (HTML)
Example 4: Simple Buttons with Angular
- Find out more about Angular
  - Simple tutorials: http://www.w3schools.com/angular/
  - Complete API: https://docs.angularjs.org
- <div> tag
  - ng-app: defines a "Module" (logical entity): appMyExample
  - ng-controller: defines a "Controller" (GUI interaction unit): buttonCtrl
  - ng-model: defines the "application/module state" of this entity: mCount, mWhichIsClick
    - Convention: variables start with "m" (instance variables, that persists)
  - Note: these "directives" (the ng-xxx) can be located in ANY of the parent tag-block,
    - e.g., we can remove <div> and put the directives directly into the <body> tag. Key is, ng-model and logic must exist within the corresponding controller!
    - Important lesson: just like programming languages, there is "scoping" going on!
- Details:
  - <script> tag in the beginning of file, include the source code of AngularJS (this is like #include for C++ or import Java)
  - <input> tag:
    - Calling service functions are defined in the "controller" (to be defined in the JavaScript source code)
    - ng-click: registers services/handlers for click. Notice, we can write actual JavaScript code here (BAD STYLE, should separate logic into JaveScript source code file).
    - ng-model: when present, replaces the label for <input text>, it becomes the "value" of input text.
    - Try: typing in the input text field!
      - {{ aVar }} <-- recalls the value of "aVar" (defined ng-model variable)
  - JavaScript code:
    - Creates the AngularJS Module based on myAppExample definition in the HTML
    - Registers the constructor for the buttonCtrl controller (notice the service routines defined in the constructor)
    - AngularJS names its global variables with "$" as the first character ($scope, $event), don't use "$" as the first character of your variable
- MVC model/architecture: for supporting interaction
  - Model: the reason for interaction (sometimes referred to as the application state)
  - View: the presentation of the reason for human consumption
  - Controller: the mechanism upon which the model is altered
  - Examples: a slider bar, our two button GUI system, facebook home page, Powerpoint application
- Lesson:
  - Needs tools to support interaction (AngularJS is a pretty cool tool)
    - supports two-way binding, e.g., ng-model: mWhichIsClick
      - Can be changed from logic source code (JavaScript)
      - Can be changed by the user (by typing)
  - Needs: higher order abstraction to help us describe/organize the interaction (MVC)
  - We will learn about another pattern: MVVM later for GUI support.
Example 4a: Indentical example as 4, only separate explicit controller constructor
- Check out Handler.js
- Nothing interesting, except, instead of being an anonymous function for constructing the controller, we define an explicit constructor.
- Notice, we need to "inject" the "$scope" to the constructor object.
- Lesson:
  - all anonymous functions can be defined as explicitly named-function
  - Trick is: it can be syntactically complex.
Example 5: Slider Bars and events
- <input> type=range ... notice
  - ng-change: handler receives user defined parameters. Activated when ng-model of the <input> changed. It is an error to not have a defined ng-model in this case.
    - details here: https://docs.angularjs.org/api/ng/directive/ngChange
    - This is NOT a good hander to receive final slider position!!

ng-mousemove, ng-mouseup (with other mouse events): the handler receives the
- ng-mouse related directives: https://docs.angularjs.org/api/ng/directive
- The $event parameter is a HTML mouse event object: http://www.w3schools.com/jsref/dom_obj_event.asp
- in the mouse handlers, $event.currentTarget returns a HTML element: http://www.w3schools.com/jsref/dom_obj_all.asp
mEchoMsg: is not explicitly defined before the <input> tag. Yes, it is ok!
Vertical slider bar, notice:
- the "style" option in the input tag
- the "orient" attribute
- IE and Firefox solutions are different: http://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically

Lesson:
- For AngularJS, model declaration is optional, you can just start define and use (just as in JavaScript), Proceed with care! This can be VERY confusing if you don't organize your code properly!
- Some familiarization with input type range, and mouse events.

Example 6: Mouse and Keyboard events
- Run and notice:
  - Mouse move only echo when mouse is within the UI bounding box (that bounds all UI elements, ... this is the bound of the <div> element.
  - Key echo only works after you click in the UI bounding box area (need to have focus to receive keyboard events)
  - When mouse in the vertical slider bar, both mouse handlers are fired (message echo in both the echo areas)
- <div> notice:
  - tabindex: so that the div can be focused
  - style: look at the HTML source to see how to get rid of the annoying boarder
- Event handlers
  - This can be associated with each and every HTML element!!
- Event propagation:
  - events are sent to the lowest child, and propagates back out
  - check ou tthe sliderServiceMouseMove-->stopPropagation() function call to stop mouse move from propagation.
  - Use the mCount value to verify that when mouse is moving in the vertical slider bar, slider bar sliderServiceMouseMove() is called before the divServiceMove()
- Lesson:
  - GUI events can be received by any of the elements (in general)
  - GUI elements are organized as trees (with parent child relationships)
  - GUI events propagate from lowest child up to parents
  - HTML, uses key codes (big deal?!)