locked
WinJS Custom Control Design time support in Expression Blend

    Question

  • Hi guys,

    is it possible to have a custom WinJS control appear in Expression Blend in the Assets window (so that i can drag & drop it, see its options in the pane on the right, etc.)  ? If it is possible, what are the required steps to implement this design time?

    Thanks !

    Angel

    Friday, October 14, 2011 4:17 PM

Answers

All replies

  • Hi Angel,

    Blend leverages OpenAjax metadata to drive the Asset Panel and Attributes Panel experience. For custom WinJS controls you would need to have both <widget> and <api> metadata. 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 place your own created metadata in either of these two paths for it to appear in Blend:

         C:\Program Files\Microsoft Expression\Blend 5 Developer Preview\Intrinsics\

         C:\Program Files\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\Microsoft.WinJS\0.5\js\metadata

    The Windows SDK path above also contains many metadata examples for you to review.

    Charlie

    Monday, October 17, 2011 4:51 PM
  • Thanks Charlie, This works great ! Kudos for the simple and powerful approach you guys took to allow extending WinJS design time.

     

    Angel

    Monday, October 17, 2011 5:52 PM
  • Does it also work also for plain HTML/JS controls (not deriving from Control) ?

    It doesn't seem to work for me. I tried that and I see my control in Asset Panel, but I don't see any properties which I defined in API file for my control.

    It'd be great to be able to integrate HTML/JS controls and widgets along side WinRT-based ones. Blend 5 is best HTML designer I've seen !

     

     

    Thursday, December 8, 2011 10:40 PM
  • @retrosight,

    I created my own custom control library and deployed it as an Extension SDK in:

    C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0\ExtensionSDKs

    similar to the Microsoft.WinJS SDK in there. I can reference my custom SDK from Visual Studio, but when I open Blend, the Assets panel does not show any custom controls from my SDK. I've placed my OpenAjax metadata files appropriately in the js\metadata folder just like in the WinJS SDK:

    C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\MyCustomSDK\0.6\DesignTime\Debug\Neutral\MyCustomSDK.0.6\js\metadata

    If I place the metadata files inside the WinJS metadata folder:

    C:\Program Files\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\Microsoft.WinJS\0.5\js\metadata

    everything works OK. How I can have a custom SDK with its own metadata files appear in Blend?

    Thanks in advance!

    bugventure

    Thursday, April 12, 2012 2:47 PM
  • @retrosight, 

    I have an additional question. OpenAjax Widget Metadata specifies the <config> element for describing a collection of configuration properties for a widget. Ideally, the <config> element could be used to provide support for jQuery widget-style initialization options:

    $("#myContainer").myWidget({
        /* configuration options for this widget */
        width: 100,
        autoLoad: true,
        data: [1,2,3]
    })

    If I had to describe these widget options using OpenAjax metadata, I would use the following method description:

    <?xml version="1.0" encoding="utf-8" ?>
    <api version="1.0" spec="1.0" 
    	 xmlns:blend="http://schemas.microsoft.com/winjs/Blend/2011" 
    	 xmlns="http://openajax.org/metadata">
      <config name="MyWidgetOptions">
        <property name="width" datatype="Number" defaultValue="100" />
        <property name="autoLoad" datatype="Boolean" defaultValue="true" />
        <property name="data" datatype="Array" />
      </config>
    
      <class name="...">
        <methods>
          <method name="myWidget">
            <parameter name="options" datatype="MyWidgetOptions" required="false">
              <description>Provides configuration options for this widget.</description>
            </parameter>
          </method>      
        </methods>
      </class>
    </api>

    However, the <config> element does not seem to be supported by the current Blend 5 version. What is the recommended approach for describing configuration properties and method parameter using OpenAjax metadata? Ideally, I would expect Blend to show me a hierarchy of options in the "HTML attributes" property grid, much like the options shown for the GridLayout option of the ListView control:

    GridLayout configuration options for HTML ListView control as shown in Expression Blend 5

    Thank you in advance.

    Tuesday, April 24, 2012 12:18 PM
  • I have the same problems with "<config>"
    Wednesday, May 23, 2012 5:25 AM