locked
How does blend know what "options" there are to a WinJS control?

    Question

  • Whenever I'm creating a WinJS Control programmatically, I need to supply options e.g.

    <div id="datePicker" data-win-control="WinJS.UI.DatePicker" data-win-options="{current:'3/19/2010 11:06:26 AM'}"></div>

    using VS, I get intellisense for the data-win-control attribute, but for the data-win-options I have to *know* what options are available. The same goes if I create it using JS.
    Somehow, Blend knows exactly which options are available for each control, and it allows to set those properties through the property panel under 'Control'.

    How does Blend know? Is it hard-coded into blend?


    http://blogs.microsoft.co.il/blogs/eladkatz @ElatKt

    Tuesday, March 27, 2012 9:16 PM

Answers

  • I believe the philosophy here is that "options" are just a way of passing values to properties during initialization. If you look at WinJS.UI.setOptions (which is called in all of the control constructors) it will just loop over all the keys in the options record and attempt to assign the value to that property on the control itself.

    So there really isn't an options "class" so much as you can arbitrarily specify a number of property sets during control initialization rather than having to do them one at a time afterward.

    Cheers,

    -Jeff

    • Marked as answer by Elad R Katz Sunday, April 15, 2012 7:29 AM
    Thursday, April 12, 2012 5:54 PM

All replies

  • Maybe there are some behind interfaces between VS and Blend. Blend can probably identify these properties through specific property page interfaces.

    Wednesday, March 28, 2012 1:57 PM
  • Kevin - thanks for the answer but my question is HOW EXACTLY this is done.. I know that there is *probably* some properties blend identifies. the question is what are those properties/whatever...

    http://blogs.microsoft.co.il/blogs/eladkatz @ElatKt

    Wednesday, March 28, 2012 5:02 PM
  • Hi Elad,

    Blend leverages OpenAjax metadata to drive the Asset Panel and Attributes Panel experience. Learn more about these at...
         http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification_Widget_Metadata
         http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification_API_Metadata

    You can find WinJS control specific metadata files and sources under C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\Microsoft.WinJS.0.6. I might be a bit off on the folder path but if you search for *oam.xml under the Extension SDKs folder you will find these files. These metadata files are auto generated from the JS sources.

    Thanks
    Chetan


    Ask the doctor. Your Visual Studio Extensibility Expert!

    Wednesday, March 28, 2012 6:15 PM
  • so basically if I want to be able to understand myself (without using documentation) what 'options' there are for a given WinJS control I can't? I have to open those XMLs? It's *NOT* a part of the WinJS js files?

    Moreover, if I want to create my own custom WinJS controls - if I want Blend to know how to work with it I need to build those xml files myself?


    http://blogs.microsoft.co.il/blogs/eladkatz @ElatKt

    Wednesday, March 28, 2012 6:25 PM
  • Hi Elad,

    I'm totally with you that it would be super convenient if we had some IntelliSense help in the HTML editor for specifying data-win-options. That's good feedback to hear and I recommend you submit it here to be the right people see this: https://connect.microsoft.com/visualstudio/feedback

    If you want to unblock yourself for now, I find it handy to instantiate controls imperatively in order to explore their option surface with JS IntelliSense (the controls are nicely doc commented):

    var datePicker = new WinJS.UI.DatePicker();
    datePicker.

    Cheers,

    -Jeff

    Saturday, April 7, 2012 12:00 AM
  • Hey Jeff,

    I'm pretty sure that this is already on their list, as I see that when I type data-win-control="..." i *do* get intellisense. If it's possible for the team to do so I'm assuming they would.

    As for solution for the time being - While I do use the exact tip you're suggesting - but this is not enough. when you create the control programatically you get access only to the *control's* properties through intellisense - but what I need is the *options* "class"

    Thanks,

    Elad.


    http://blogs.microsoft.co.il/blogs/eladkatz @ElatKt

    Sunday, April 8, 2012 6:36 AM
  • I believe the philosophy here is that "options" are just a way of passing values to properties during initialization. If you look at WinJS.UI.setOptions (which is called in all of the control constructors) it will just loop over all the keys in the options record and attempt to assign the value to that property on the control itself.

    So there really isn't an options "class" so much as you can arbitrarily specify a number of property sets during control initialization rather than having to do them one at a time afterward.

    Cheers,

    -Jeff

    • Marked as answer by Elad R Katz Sunday, April 15, 2012 7:29 AM
    Thursday, April 12, 2012 5:54 PM
  • Thanks!

    The WinJS.UI.setOption bit was something I managed to skip somehow. Exactly what I was looking for!

    I'm guessing then that Blend knows which "options" to put in in exactly the same fashion that VS knows which properties to suggest to intellisense.


    http://blogs.microsoft.co.il/blogs/eladkatz @ElatKt

    Sunday, April 15, 2012 7:30 AM