Jaime Rodriguez
On Windows Store apps, Windows Phone, HTML and XAML

  • Jaime Rodriguez

    Early version of snoop for silverlight 1.0 ...

    • 9 Comments

    First 3 hours of troubleshooting the problem my last post, I was thinking "I need snoop" ... 

    Next 5 hours, I wrote a very early rough version ...  It needs work,  I want to clean it up, but have not have a chance..  Sharing it in the mean time  and adding this to my very long "to clean up later" list ...   [email me if you want to be notified or think it would be useful]..

    Here is what it does:
    1 - Creates a VisualTree ...    [in a different Silverlight control, as not to bother your code]
    2 - you can click on any item in the visual tree and it will adorn it in the control ..   [see known issues]
    3 -- It can subscribe to either MouseMove or MouseEnter/MouseLeave in your code ... so you can get details on the items that the mouse hovers over..  of course for this, your item needs to be hitTestVisible...
    I did both events cause i thought mouseMove would be too much.. but I ended up adding a cache and MouseMove seems OK.. Still MouseEnter is likely a better choice for very large project.. the one I tested had about 2000 visuals..
    4-  I added a flag to skip paths...  this turned useful for me, but if you want paths, then change the flag in VisualTreeHelper.js

    Here is a sample screenshot of the tree + details..  the LHS is the VisualTree,  the RHS is a Silverlight control with items..  the Adorned item is in yellow..

     

    Here are the known issues:

    1- My treeview control and its scrollbar sucks .. sorry .. would have taken me longer to write the tree than the snoop functionality..   
    2 --  If you are clicking on the tree, it does its best to guess the position for the adorner, but currently it ignores transforms... so it is more accurate if you subscribe to mouse move... or Mouse Enter .. cause then it caches the position it should adorn so it is accurate..
    3 -- tree 'ignores' changes once tree is built ... but you do have the ability to "refresh the tree" ...
    4 -- in my machine I wired it in same window..   but for sample, to try to make it usable for people with lower resolutions, I hacked some very ugly  buttons for a new window..  the problem is if you close the window with out unplugging the event listeners you will get errors.. 

    My current wishlist:

    1. I should make it so it can edit the values in the details tab... that should be easy and quite handy ...
    2. Gotta fix known issues.. specially UI..  
    3. Still debating the re-write in 1.1 .. I would benefit from perf, but I thought keeping it 1.0 to make sure any one is comfortable..  [instead of people thinking, well I am in 1.0 would this work if it is 1.1?]

    Want to take it for a spin ???   It is "live" here ...   The source is here..  

    The sample is no where representative of what this early snoop helped me troubleshoot... To see some of the intricacies, follow this sequence..

    1. Click on the "Create window" button ..  wait until it loads ( gray background appears )
    2. Click on the "Create visual tree" to get a tree...
      1. Click around in the tree.. to see it adorn some of the elements in the page..
      2. Good example, click on the "invisibleEllipse" element ..
    3. Subscribe to Mouse Move events..  (by clicking "3- subscribe to move"  in the controls page)
      1. Move the mouse around... to see the adorner and how the tree keeps track of element with mouse focus ..
      2. if you navigate around the bottom canvases, notice how some items are not hittestable cause there is an invisible rect in front.. very last item in the tree, called the "hog" ..
    4. Go back to visual tree and high light these not reachable items..   see how the adorner finds them


    if you take this early sample and make it useful or good quality, please drop me an email so I can redirect ...  If you run into issues, let me know too ..  

    PS -- apologies to Peter for calling it 'snoop' when it does 0.1 of what snoop does..  Peter, imitation is flattery ..

  • Jaime Rodriguez

    Chuckj on XAML conditional compilation ... a must read ...

    • 0 Comments

    Rob Relyea points to Chuck Jazdzewski' s post on conditional compilation ..

    IMO, this is one of the top  features you need for troubleshooting perf in WPF . At some point you will be thinking "what would happen if I used ImageBrushes instead of cached VisualBrushes?" or what happens if this template is lighter, etc.. the XAML gets messy very quick with out this awesome feature  ... [trust me I was there] ...

    Apologies for surfacing an 'old' post that I missed before [ I do subscribe to Chuck's RSS] ... but this is so useful that I could not help pointing to..   [while at Chuck's check the rest of his XAML series]

  • Jaime Rodriguez

    IsHitTestVisible and Opacity in Silverlight 1.0

    • 1 Comments

    I spent last friday "fighting" this breaking change from earlier CTPs , so sharing hoping to save some one else time.. 

    In earlier CTPs, UIements with Opacity = 0  were NOT hit testable...  Now, they are [same behavior as WPF]...

    So if you have layered controls and are turning them invisible by setting Opacity to 0, make sure you also set the IsHitTestVisible property to false else what is underneath will not get any events...   

    A slightly different alternative that I now like is just setting Opacity =0  and moving it some where out of the way ...  like this one better in case I do want items with IsHitTestVisible to false by default..

     

    In case you run into it, the symptom was that the control appeared to be freezing ... cause we had canvases or overlays (e.g. ink) on top of what was visible .. so none of the mouse moves/clicks were gettign through ..


    There was one good outcome from the exercise.. 

  • Jaime Rodriguez

    sandboxing silverlight 1.0.. (aka the internal script model)

    • 1 Comments

    Say you are a hoster ( fake example: myspace)  of some website where users create pages..  
    You will hopefully want to give them the ability to 'host silverlight' but want to restrict what they can script ( so they don't turn off your ads or messup the navigation) ..    How to ??

    In comes the 'internal script model' in silverlight ...  Here is the 'gist' of how it works:

    1. You can add an <x:Code > tags to your XAML to bring in Javascript for the interactivity within silverlight..
      <Canvas  xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="390" Height="340" Loaded="onRootLoaded">
          <x:Code Source="silverlight.js" Type="application/x-jscript" />
          <x:Code Source="default.html.js" Type="application/x-jscript" />
          <x:Code Source="scene.xaml.js" Type="application/x-jscript" /> .
          ...
      </Canvas>

    Note:

    • you can have as many x:Code tags as you need, the x:Code tags must be children in the root Canvas.. the "type" and Source attributes are required..
    • x:Code can not be used from createFromXaml  ..
    1. When you add these x:Code tags, you are automatically running in 'internal script mode' ..  Your Javascript can NOT access any thing outside of the other JS files included in the xaml file .. 
      • It can not access the browser DOM  ( no access to window, document or any thing like that)..  A couple of FAQs here:
        • No access to window.setTimeout or similar callbacks, the workaround is to use Silverlights animation model to get timers...
        • No access to XmlHttp or similar objects to make WS calls..  the workaround is to use the Downloader object.. ideally calling some GETs of JSON stuff so you avoid parsing manually ...

     

    1. Likely, the next question is how to instantiate the silverlight plug-in..  using the recommended createSilverlight javascript is likely out since we said no external script, so you can use an object tag ...

      <object id="ag" type="application/ag-plugin" height="340" width="390" >
      <param name="Source" value="sceneInternal.xaml"/>
      <param name="MaxFrameRate" value="30" />
      <param name="OnError" value="default_error_handler" />
      </object>

       

    Live sample is here.. There is an "internal script version" and a non-sandboxed version...    The difference shows when you left click on the MediaElement itself.. (one alerts, the other one throws error caught in try catch) ..

    Download the source here...


    Disclaimers:

    1. the sample is not a full blown player, just wanted to wire enough to show you the gist..   The play/pause button does work of course...
    2. the ugly logos are to illustrate the likely "Brought to you by .." ad-scenario that I think would go well with this embeddable player model..
    3. This feature is still under development.. I would expect small changes to come between now and RTM..  my wish is that  it would be opening up a small communication channel back to the DOM.. even if one-directional... [though not sure if everyone else desires that]  
    4. I put together the sample in 20 mins.. only tested in Windows Vista.. IE and Firefox.. if you find issues let me know..
  • Jaime Rodriguez

    Astoria: data services for the web..

    • 0 Comments

    This was one of several projects that did not surface much at MIX due to the silverlight hype..   I have gotten a few questions around it this week... so I thought I would at least share useful pointers:
    My interpretation:  Astoria is a set of Data Services that exposes data via URIs over HTTP.   Astoria serializes the data to JSON (or to XML) and it leverages the Entity framework for quick creation of the object model ..

    • MIX session (from sessions.visitmix.com, XD006)
    • Pablo's blog .. definitely a better place to ask questions.. 
    •  Channel 9 video -- quite similar to MIX session but has white board.. you can watch one or the other .. I think MIX might be longer and more complete..

    My initial random thoughts :
    Pros:

    • I love the simple/uniform way to access data..  Does not get much simpler than URIs .. [that part is brilliant]
    • I can think of scenarios where discoverability of data is a desire and this would be ideal ...  his example in the MIX demo of Encarta is a top match ...   Any thing with a catalog is likely a good match..
    • I am also liking the potential perf possiblities of the model (so simple it is likely good perf, and it does run on top of WCF)..  also caching of data is likely easy since these are standard URLs..

    My early cons [some of it are going away as I think more about them] :

    • I am still a SOAP believer  (for B2B) ... I think advanced web services are critical to the evolution of enterprise web ..   fading a little for consumer scenarios, I would have to be a fool not to acknowledge that REST is strong and AJAX is making JSON a strong format for end-user scenarios...  Also,  Astoria is based on a WCF web service, so potentially the higher level goodness can be
    • This reminded me of  when SQL exposed  webservices directly -- imho a feature not widely adopted - but after looking at the extensiblity/customization I actually re-considered...  you could build on this and keep the simplicity of the URI navigation pattern..but plugging business rules along the way ...

    My first conclusion,  I am keeping an eye on it it and will definitely consider it for rapid silverlight prototypes .. I think it could save me time . :) 
    I would also like to know a lot more about the WCF aspect of this .. Could we bolt-on WCF higher level features on top of this?...  My guess is yes but it is just a guess..

    Your thoughts?

     

Page 1 of 1 (5 items)