Week1 Examples: Phone SDK and Simple GUI

1. PPT Lecture note:
   • Resources in portable devices
   • GUI elements and Events
   • Timer event
      
2. Our first app: Exact same app as default except ...
   • File and class names: all different
     • KelvinApp: instead of the default App
     • PageOne: instead of the default MainPage
   • Compiled name:
     • MyFirstApp (different from project name)
   • Compile/Run to notice:
     • TileImage and name: appear in the list of all programs
     • TileOption and name: appear when you Pin the application
   • Customized SplashScreen (cannot change name of this file! :-( ): SplashScreenImage.jpg
   • What is the name of the App? I mean the "actual name" used by the OS to identify it?
   • How to change all these?
   • Why would we care?
   • WARNING: when changing project settings, you have to pay attention to a few details
     • Make sure Visual Studio cached information are up-to-date. This means, when necessary: Manually remove the followings:
       • the Bin and Obj folders
       • the YourProject.csproj.user file
     • Make sure the phone/emulator is not caching portions of your previous deployment. This means when necessary:
       • uninstalled the app and redeploy from scratch.
       • In the case of emulator, you may want to consider quitting and re-starting the emulator
     • Make sure all resources are present and properly identified (via the project) and up-to-date (Icon, Background images): this means, when necessary:
       • go to the project property page and re-select all the images
     • If any of the above is incorrectly set, problems you are likely to encounter include:
       • Application quitting immediately on the emulator. When run in debugging mode, you will encounter NullReferenceException probably around line 57 of the App.cs file.
       • Compile time error that says: Xap packaging failed. Object reference not set to an instance of an object, even after you have probably set the startup object on the project property sheet.
          
3. Simple app of button and echo, Notice:
   • The XAML file: is "compiled" into part of the actual class!
   • Code in XAML or in .cs: often time your choice, which is easier?
   • Event registration and event service:
     • Make sure we know the connection (so we can change our code in the future)
     • Every action performed on the GUI editor generates code in XAML (or CS)
   • UIElement: can have name (or not)
   • Fun(?) fact: TextBox: Get/Lost focus service routines
      
4. MVC software structure and orientation:
   • This project is copied from previous with no modifications to the project settings. Can you tell? No? Try loading both previous and this projects onto the same phone. What happens?
   • Only difference: AppState class.
   • Why bother for such a simple system? To make a point.
   • App State: should be (must be) free from UI interaction!!
   • Imagine, if user wants to enter "one" "two" etc. as valid input: this can be done completely inside the AppState class, UI needs no changes!!
   • Phone Orientation: select the "outer most" element (PhoneApplicationPage)
     • Property: Orientation: what is the current orientation
     • Property: SupportOrientation: which are the ones supported (switching on the flipping)
     • Event: OrientationChange: if you want to do something different.
        
5. Timer for fun (?): still based on exact same project as above, only solution/project name change
   • working with timer, changing color, and date/time.
   • OK, nothing interesting. Moving on.
      
6. Event Routing
   • Notice we are getting mouse click (or touch!)
   • Open in ExpressionBlend  (Object and Timeline view) to see UIElement hierarchy. Notice:
     • Grand/Parent/Child structure
     • Button (with a canvas underneath)
   • Click around to examine the output message
   • Pay attention to e.Handled
   • Note: Panel without Fill cannot receive Touch events.
      
7. Phone Specific UI: AppBar and SDK Toolkit
   • Icons, buttons, and menu
   • Icons:
     • notice the image location (as specify by URI)
     • notice the build action (under property sheet)
   • Read the XAML code on Toolkit:TimePicker and DataPicker
     • External library from: http://silverlight.codeplex.com/releases/view/75888
     • On my machine, I have trouble with AppBar: Check mark not showing.
   • UIElement: List: supports scrolling of _anything_!