.NET to Javascript compiler

C# code   Html page   Start
// Application
public class BindingSummaryApp
{
    public static void Start()
    {
        HtmlElement main = HtmlDocument.Current.GetElementById("main");
        GridApp.ResizeMainElement(main);
        new BindingSummary().Element = main;
        MenuApp.Start();
    }
}

// Pane
class BindingSummary : UserControl
{
    readonly ObservableProperty<IObservableList> dataSource;
    readonly ObservableProperty<double?> numericValue;
    readonly DataSource rootDataSource;
    internal readonly NodeSource NodeSource;
    internal readonly Calendars Calendars;
    internal readonly DatePickers DatePickers;
    internal readonly DropDowns DropDowns;
    internal readonly Buttons Buttons = new Buttons();
    internal readonly TabStrip TabStrip;
    internal readonly Grid<long?> Grid;
    internal readonly TreeView<Node> TreeView;

    long focusedRow;
    bool bound;

    internal BindingSummary()
    {
        NodeSource = new NodeSource();
        rootDataSource = GridApp.CreateDataSource(0, 100000000000);
        dataSource = new ObservableProperty<IObservableList>(this) { Value = rootDataSource };
        numericValue = new ObservableProperty<double?>(this);
        focusedRow = -1;
        Calendars = new Calendars();
        DatePickers = new DatePickers();
        DropDowns = new DropDowns();
        TabStrip = new TabStrip();
        Grid = new Grid<long?>();
        GridApp.InitGrid(Grid);
        GridApp.AdviseContextMenus(Grid);
        TreeView = new TreeView<Node>() { Renderer = TreeViewApp.Render };
        TreeViewApp.AdviseContextMenu(TreeView);
        TreeViewApp.AdviseDragDrop(TreeView);
    }

    internal Node SelectedNodeData
    {
        set
        {
            dataSource.Value = value != null ? value.DataSource : rootDataSource;
        }

        get
        {
            return null;
        }
    }


    internal IObservableList DataSource
    {
        get
        {
            return dataSource.Value;
        }
    }


    internal long FocusedRow
    {
        get
        {
            return focusedRow;
        }

        set
        {
            focusedRow = value;
            if(value >= 0)
            {
                NumericValue = value + (long)dataSource.Value[value];
            }
            else
            {
                NumericValue = null;
            }
        }
    }

    internal double? NumericValue
    {
        get
        {
            return numericValue.Value;
        }

        set
        {
            numericValue.Value = value;
        }
    }

    public override HtmlElement Element
    {
        get
        {
            return base.Element;
        }
        set
        {
            base.Element = value;
            if (value != null && !bound)
            {
                bound = true;
                TabStripApp.AttachTabStrip(TabStrip);
            }
        }
    }
}

// Template
<body j:type="ui:BindingSummary">
    <div style="display:none" j:control="ui:SummaryStyles()"></div>
    <div style="overflow:hidden;width:100%;height:100%;margin:0 0 0 0"
        j:control="gridLayout:GridLayoutPane()
      {
        Rows = [ { Value = 24, Absolute = true }, { Value = 1 }]
      }">
        <div style="width:100%" j:control="panes:SplitPane() {
                gridLayout:GridLayoutPane.RowBindings = [ gridLayout:UnitBinding(0, 1) { Style = j:target.target.Element.Style } ]             
            }">
            <div style="width:100%;height:100%" id="menubar" tabindex="1"></div>
        </div>

        <!-- comment -->
        <div style="width:100%" j:control="splitters:Splitter(true, 0.25) {
                gridLayout:GridLayoutPane.RowBindings = [ gridLayout:UnitBinding(1, 1) { Style = j:target.target.Element.Style } ]             
            }">
            <div j:control="panes:SplitPane()">
              <div tabindex="1" hidefocus="true">
                <j:control>
                  <![CDATA[
                j:control.TreeView { 
                  NodeClassName ='treeNodeXP20',
                  NodeSource=j:control.NodeSource,
                  Selection = { Data = j:control.SelectedNodeData }
               }
               ]]>
                </j:control>
              </div>
			</div>
			<div j:control="splitters:Splitter&lt;panes:SplitPane&gt;(false, 0.5)">
                <div tabindex="1" hidefocus="true" j:control="j:control.Grid {
                    DataSource=j:control.DataSource,
                    SortColumns = { SortMode = grids:GridSortMode.MultipleColumn },
                    Header = { Height = 24 },
                    FixedLeftColumns = 2,
                    ClassName = 'grid',
                    RowsSelection = { AllowMultipleRowSelection = true, FocusedRow = j:control.FocusedRow },
                    FilterColumns = { AllowFilter = true }
                }">
                </div>
                <div j:control="j:control.TabStrip">
                  <j:collection target="TabItems">
                    <j:item source="tabs:TabItem() { Header = tabs:ImageTextTabHeaderItem() { Text = 'Numeric' }  }">
                      <j:bind target="Page" source="uc:UserControl() { Element.Style.Overflow = html:StyleOverflow.Auto }">
                        <j:template target="Template">
                            <div style="padding:4px" j:control="groupBoxes:GroupBox() { Text = 'Group Box' }">
                              NumericTextBox <input type="text" style="width:150px; text-align:right" j:control="controls:NumericTextBox(true, 2, true) { Value = j:control.NumericValue }"/>
                            </div>
                        </j:template>
                      </j:bind>
                    </j:item>
                    <j:item source="tabs:TabItem() { Header = tabs:ImageTextTabHeaderItem() { Text = 'Calendars' }, 
                      Page = ui:Calendars() { Element.Style.Overflow = html:StyleOverflow.Auto }}"/>
                    <j:item source="tabs:TabItem() { Header = tabs:ImageTextTabHeaderItem() { Text = 'DatePickers' }, 
                      Page = ui:DatePickers() { Element.Style.Overflow = html:StyleOverflow.Auto }}"/>
                    <j:item source="tabs:TabItem() { Header = tabs:ImageTextTabHeaderItem() { Text = 'DropDowns' }, 
                      Page = ui:DropDowns()  { Element.Style.Overflow = html:StyleOverflow.Auto }}"/>
                    <j:item source="tabs:TabItem() { Header = tabs:ImageTextTabHeaderItem() { Text = 'Buttons' },
                      Page = ui:Buttons()  { Element.Style.Overflow = html:StyleOverflow.Auto } }"/>
                    <j:item source="tabs:TabItem() { Header = tabs:ImageTextTabHeaderItem() { Text = 'Windows' }  }">
                      <j:bind target="Page" source="uc:UserControl()  { Element.Style.Overflow = html:StyleOverflow.Auto } ">
                        <j:template target="Template">
                            <input type="button" value="Open Window" onclick="OpenWindow()"/>
                            <input type="button" onclick="StartOK()" value="Start OK"/>
                            <input type="button" onclick="StartOKCancel()" value="Start OKCancel"/>
                            <input type="button" onclick="StartAbortRetryIgnore()" value="Start AbortRetryIgnore"/>
                            <input type="button" onclick="StartYesNoCancel()" value="Start YesNoCancel"/>
                            <input type="button" onclick="StartYesNo()" value="Start YesNo"/>
                            <input type="button" onclick="StartRetryCancel()" value="Start RetryCancel"/>
                            <input type="button" onclick="StartFreeHtml()" value="Start FreeHtml"/>
                        </j:template>
                      </j:bind>
                    </j:item>
                  </j:collection>
                </div>
              </div>
        </div>
    </div>
</body>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;width:100%;height:100%">
<head>
    <meta http-equiv="x-ua-compatible" content="IE=11;IE=10;IE=9;IE=8;IE=7" />
    <title>Binding Summary.html: All controls</title>
    <script type="text/javascript" language="javascript" src="js/bindingsummary.js?v2"></script>
</head>
<body onload="javascript:StartScript()" scroll="no" style="overflow:hidden;width:100%;height:100%;margin:0 0 0 0">
    Binding Summary.html: all controls with declarative binding
    <div id="main" style="width:100%">
    </div>
</body>
</html>
© 2009 JScriptSuite. All rights reserved.