Start a new topic
Answered

WOW... Where have you people been?

Holy crap... Where were you people just 1 year ago. I cant even tell you how much

time, effort and dollars we just spent the last year learning GWT (Google Web Toolkit) for the sole purpose of cross-comping to javascript for the web ui part of

our medical record web application. We had to not only learn JAVA just for this but the ins and out of the GWT framework itself, JSON-RPC in GWT and a wrapper for webix for the ui.


I only heard about DuoCode less than 12 hours ago. And i have already created binding for the "Webix Common Helpers" which was about 50% of all the functionality we have been working on in GWT using JSNI code. The other 50%

are the "UI-Specific" functions (Which i am working on now).


To Summarize.... MONTHS worth of GWT JSNI coding i just boiled down to this one DuoCode Class (And it works beautifully). The following is the API i use in

my current client app... Now fully working in C# in browser PERFECTLY.


I only need STRONG type all the API objects (I am just using 'object' for now... just to see what this whole DuoCode thing was about). The DOCS need real work

... I am still BEGGING for some technical details on getting into the nuts and bolts

of all those JS classes in the DuoCode.Runtime namespace... PLEASE GIVE ME DOCS, OR ANY INFO THERE!


Again.... WOW. Beautiful work DuoCode... And its only a Beta!!!


using System;

using DuoCode.Dom;

using DuoCode.Runtime;


namespace Ajax.Gateway.Webix

{

 [Js(Name = "webix", Extern = true)]

 public static class Webix

 {

 [Js(Name = "uid")]

 public static extern string CreateUID();


 /** webix.$$ functions */

 [Js(Name = "$$")]

 public static extern object Get(string id);


 /** webix.ui functions */

 [Js(Name = "ui")]

 public static extern object UI(object config);

 [Js(Name = "ui")]

 public static extern object UI(object config, HTMLElement parent);

 [Js(Name = "ui")]

 public static extern object UI(object config, HTMLElement parent, HTMLElement replacement);


 /** webix.alert functions */

 [Js(Name = "alert")]

 public static extern HTMLElement Alert(string text);

 [Js(Name = "alert")]

 public static extern HTMLElement Alert(string text, Action<object> callback);

 [Js(Name = "alert")]

 public static extern HTMLElement Alert(object config);


 /** webix.animate functions */

 [Js(Name = "animate")]

 public static extern void Animate(string id, object config);

 [Js(Name = "animate")]

 public static extern void Animate(HTMLElement element, string type);

 [Js(Name = "animate")]

 public static extern void Animate(HTMLElement element, object config);


 /** webix.confirm functions */

 [Js(Name = "confirm")]

 public static extern HTMLElement Confirm(string text, Action<object> callback);

 [Js(Name = "confirm")]

 public static extern HTMLElement Confirm(object config);


 /** webix.delay functions */

 [Js(Name = "delay")]

 public static extern int Delay(Action<object, object> func);

 [Js(Name = "delay")]

 public static extern int Delay(Action<object, object> func, object owner, JsArray<object> parameters, int delay);


 /** webix.dp functions */

 [Js(Name = "dp")]

 public static extern object DP(string name);

 [Js(Name = "dp")]

 public static extern object DP(object config);


 /** webix.message functions */

 [Js(Name = "message")]

 public static extern object Message(string message);

 [Js(Name = "message")]

 public static extern object Message(object config);


 /** webix.modalbox functions */

 [Js(Name = "modalbox")]

 public static extern object ModalBox(string message);


 /** webix is checkers */

 [Js(Name = "isArray")]

 public static extern bool IsArray();

 [Js(Name = "isDate")]

 public static extern bool IsDate();

 [Js(Name = "isUndefined")]

 public static extern bool IsUndefined();


 /** webix misc functions */

 [Js(Name = "bind")]

 public static extern Action Bind(Action func, object master);

 [Js(Name = "clone")]

 public static extern object Clone(object source);

 [Js(Name = "clone")]

 public static extern object Copy(object source);

 [Js(Name = "editStop")]

 public static extern void EditStop();

 [Js(Name = "exec")]

 public static extern void Exec(string code);

 [Js(Name = "extend")]

 public static extern object Extend(object target, object source, bool overwrite);

 [Js(Name = "require")]

 public static extern void Require(string url);


 /** webix.markup object */

 [Js(Name = "markup")]

 public static Markup Markup;

 }


 [Js(Extern = true)]

 public class Markup

 {

 [Js(Name = "init")]

 public extern void Init(HTMLElement node);


 [Js(Name = "init")]

 public extern void Init(HTMLElement node, HTMLElement target);


 [Js(Name = "parse")]

 public extern void Parse(HTMLElement node);


 [Js(Name = "parse")]

 public extern void Parse(string source, string mode);

 }

}


Best Answer

Wow!

So glad you were able to figure this out!


Sorry, there's not much documentation about this yet, we're working on it, promise! :)

We're going to release an update very soon where we improved handling extern overloads with optional parameters.

In addition, we're currently recommending naming the methods in lowercase - keeping them as close to the JavaScript definition as possible (even if that violates the .NET naming conventions).


We'd also love for you to publish the bindings you made for webix as a NuGet package, so other developers can enjoy it.

You can add put it in a .d.cs file (this is a convention we use), and publish it on NuGet.


Check out https://github.com/AndersMalmgren/Knockout.DuoCode made by our friend Anders Malmgren!



Just to recap... that class above GIVE ME MANY OPTIONS for creating a webix ui... Including simple code like this:


Webix.UI(Js.referenceAs<dynamic>(@"{ 

 rows:[

                    { view:'template', 

 type:'header', template:'mackey kinard app' },

                    { view:'datatable', 

                    autoConfig:true, 

 data:{

 title:'My Fair Lady', year:1964, votes:533848, rating:8.9, rank:5

 }

 }

 ]

 }"));


Besides the "Js.referenceAs<dynamic>(@"... The rest of the text is by the book webix... just copy the "JSON" from their website samples... and POW!!!


And thats just 1 of many ways... (I personally use html5 markup) then do a :


var el = Global.document.getElementById("content");

Webix.Markup.Init(el);  (How easy is that interop with a rich ui framework from your c# code)


then in the html page:


<div id="content">


 <div data-view="rows">

 <div data-view="toolbar">

 <div data-view="button" data-id="btn1" data-width="150">Button 1</div>

 <div data-view="button" data-id="btn2" data-width="150">Button 2</div>

 <div data-view="button" data-id="btn3" data-width="150">Button 3</div>


 <div data-view="text" data-id="txt1" data-width="150">Textbox 1</div>

 <div data-view="text" data-id="txt2" data-width="150">Textbox 2</div>

 <div data-view="text" data-id="txt3" data-width="150">Textbox 2</div>

        </div>

        <div data-view="cols">

 <div data-view="datatable" data-autoheight="true" data-width="400">

 <div data-view="column" data-width="150" data-id="firstname">

 First Name

                </div>

 <div data-view="column" data-width="150" data-id="lastname">

 Last Name

                </div>

 <div data-view="column" data-fillspace="true" data-template="#value#">

 Age

                </div>

                <ul data-view="data">

 <li data-firstname="Alex" data-lastname="Wolski"> 55</li>

 <li data-firstname="Rassel" data-lastname="Brown">42</li>

                </ul>

            </div>

 <div data-view="list" data-select="true" data-template="#package_data# (#version#)">

                <ul data-view="data">

 <li data-id="1" data-version="1234" data-package_data="Package 1" />

 <li data-id="2" data-version="5678" data-package_data="Package 2" />

 <li data-id="3" data-version="9876" data-package_data="Package 3" />

                </ul>

            </div>

 <div data-view="list" data-width="320" data-template="#id#: #value#">

                <ul data-view="data">

                    <li data-id="9997">Item 1</li>

                    <li data-id="9998">Item 2</li>

                    <li data-id="9999">Item 3</li>

                </ul>

            </div>

        </div>

    </div>


      </div>

Answer

Wow!

So glad you were able to figure this out!


Sorry, there's not much documentation about this yet, we're working on it, promise! :)

We're going to release an update very soon where we improved handling extern overloads with optional parameters.

In addition, we're currently recommending naming the methods in lowercase - keeping them as close to the JavaScript definition as possible (even if that violates the .NET naming conventions).


We'd also love for you to publish the bindings you made for webix as a NuGet package, so other developers can enjoy it.

You can add put it in a .d.cs file (this is a convention we use), and publish it on NuGet.


Check out https://github.com/AndersMalmgren/Knockout.DuoCode made by our friend Anders Malmgren!


As far as renaming to lowercase, what about something like json.net does with the Camel case serialization resolver does... That way we stay pascal case for .net but just the output javascript gets camel cased

That's a great idea, we're already considering it for the coming version.

Login or Signup to post a comment