Week2 Examples: OS Interface and Phone Specific GUI

1. Working with Audio:
   • MainPage.xaml: <MediaElement> a GUI element pick and drop from ToolBox
   • <MediaElement> does not have any "visible" representation!
   • Instance variable name: mMySong
   • Interesting observations:
     • Loop in MainPage() constructor: wait for loading
     • Media (the mp3 file) is part of the project, how to access the entire song list?
   • Notice the working model: GUI element representing media, dropped into GUI area for programming
      
2. Working with Image:
   • Follow the model from above: GUI element <Image>
   • Drag <Image> into GUI, this time visible: can assign instance var name, and "Source"
     • <Image> knows how to read a jpg (or png) image!
   • Load image from TextBox input: LoadImage() routine
     • BitmapImage: object from StreamResourceInfo
     • Draw a conceptual diagram to help visualize the interactions between these two classes.
     • Nothing interesting, except how to do it.
   • Side note on <TextBox>, once again, two event services are of interests
     •  GetFocus: e.g., can select all the existing text
     • LostFocus: this is when we know user has completed the typing
        
3. Task Interface to OS Services:
   • Microsoft.Phone.Tasks: check out the manual page: interface to PhotoChoose, Camera, and other "utility" programs that comes with the phone.
   • Notice the simple abstraction: register a call back and start the task.
   • When user button click, activate OS utility by calling "Task.Show()"
   • Notice: after calling Show(), we have no control at all until OS returns!
   • Pay attention to the camera on the emulator!!
   • If you deploy to the phone device, make sure disconnect the USB cable before trying to use the camera, otherwise the camera cannot run!! (Camera on the phone does not function when it is connected via USB to the computer). This is the same with MedialLibrary (later on in the class, when you want to access media in the MediaLibrary, you must make sure the phone is not connected via the USB to the computer).
    
4. All them Tasks: check it out, really nothing to say.
   • EmailAddr and PhoneNum: has return values so must register for event handler when done./
   • Interesting fact: synchronous services
      
5. MediaLibrary: accessing to the PhotoChooser and Song List from our program
   • UI setup: Toolkit:ListPicker (instance var: mFileNameList)
   • UI setup: mSelectedImage is a <Image>
   • Using Microsoft.Xna.Framework.Media: must set Reference (Microsoft.Xna.Framework)
   • Now, we can create an abstraction interface to photos and albums on the device
   • MedialLibrary.Pictures (all photos), and MediaLibrary.Albums (all albums)
   • Notice: SelectedNewMedia (event of ListBox)
     • How we translate a Stream into an image
        
6. PhotoListBox: creating our own GUI Elements:
   • Right Mouse Button over Project: Add New Item (Choose: Windows Phone User Control)
     • PhotoListBox.xaml
   • Work with PhotoListBox just like another window
   • Compile: and see PhotoListBox is now a new GUI Element in the left ToolBox window!
   • Drag into MainPage! :-)
   • Move all the code from previous example into PhotoListBox! Simple! eh?
      
7. Navigate to new page + Pivot UI:
   • Right Mouse Button over Project: Add New Item (Choose Windows Phone Portrait Page)
     • MediaInformation.xaml
   • Right Mouse Button over Toolbox: Choose Items ... Pivot
   • Drag Pivot into the GUI area of MediaInformation page
   • MainPage: AppBar button click: NavigateService.Navigate(Uri)
     • Notice: after navigate away, back button returns, and MainPage timer continues!
     • Notice: Yes, NavigateService keep a stack of pages
     • OnNavigatingFrom, OnNavigatedFrom: about and just left current page
     • OnNavigatedTo: page just came alive
     • See the commented out code, we can stop the timer and re-start it when leave/returning to this page
   • NavigateService.Navigate( new Uri("/MainPage.xaml"); navigates back this page: has no effect
   • Now MediaInformation Page: A Pivot Page and two PivotItems
   • Compile to run, experience pivot
   • Add in PhotoListBox to each of the pivot items
   • PhotoListBox: now supports "filtering" can filter (look for files with) and characters
   • Panorama: similar to Pivot, check it out yourself!

   7a. Media Library and System Resource freeing ... NEW

   • Thanks to David Langer (Spring 2012, CSS590) for pointing this out, that, MedialLibrary implements IDisposable putting variables to this class in "using block" can trigger the calls to Disposable, and thus force the returning of system resources (rather than wait for garbage collection). Here are more detailed explanations:
     • http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.media.medialibrary.aspx
   • Here is the identical application as in the above example, only now the MedialLibrary is no-longer an instance variable of the "MediaInformation" page. Rather, the variable is allocated and released in "using" blocks.
   • An alternative is to create MedialLibrary in App context and shared among all pages. The advantage of having a global MedialLibrary is, we save "new" commands, disadvantage is of course, system resources will be tied up for the entire application duration (which may or may not be a problem).
    
8. Databinding: easy population of ListBox
   • Behavior:
     • Middle App Bar button automatically populates ListBox
     • Left App Bar button clears the ListBox
   • FrontPage: in the ListBox:
     • <ListBox.ItemTemplate>: what each item to list box looks like
     • <DataTemplate>: what the data looks like
     • <StackPanel Horizontal/Vertical> to stack UIElements horizontally or vertically
     • Syntax: {Binding AString}: the "AString" is exact match to class.Property (assessor)!!
       • Name must match exactly, and data type must match exactly!!
   • To feed the template: FakeDataSource.cs
     • Notice: FakeData has exact assessor: Name, ColorName, and ColorBrush
     • Notice: ColorBrush's data type is to match the Binding need!
   • To populate a ListBox, simply set ItemSource with a enumerate-able collection (e.g., List<T>, or Collection), in this case, we feed it with List<FakeData>.
   • Important: debugging approach:
     • add in _one_ constant data value (e.g., TextBlock.Text) to see the list is actually working
     • Make sure your data source class has all the assessors declared as Public!!
     • Exact Match of {Binding Name} and class assessor method. Must match: name and return data type!!
     • Try: SolidColorBrush, ColorBrush, private/public assessor method, change the data type or name and see nothing shows up!!
   • Think about how this is implemented ... simple string translation!
     • Almost _no_ error checking!