Announcement

Collapse
No announcement yet.

[CLOSED] JQueryUI Sample

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    [CLOSED] JQueryUI Sample

    I was trying to use Retyped.jqueryUI, but without success.
    Someone could post an example of using this library, for example the creation of a jQueryUI button:

    // Create a new HTML Button
    var htmlbutton = document.createElement ("button");
    
    // Set the Button text
    htmlbutton.innerHTML = "Html button";
    
    // Add a Click event handler
    htmlbutton.onclick = function (ev) {
    // create jquery ui button
    $ (htmlbutton).button ({label: "Jquery UI button"});
    };
    
    // Add the button to the document body
    window.document.body.appendChild (HtmlButton);
    Thank you in advance for your answer

    #2
    I finally succeeded, although I am not sure that this is the best solution !

    using System;
    using Retyped;
    using static Retyped.jquery;
    using static Retyped.jqueryui;
    namespace ClassLibrary1
    {
        public class App
        {
            public static void Main()
            {
                var htmlbutton = new dom.HTMLButtonElement();
                htmlbutton.innerHTML = "Html Button";
                htmlbutton.onclick = (ev) =>
                {
                    JQueryUI.ButtonOptions buttonOptions = new JQueryUI.ButtonOptions() { label = "JQueryUI Button" };
                    var uibtn = jQuery.select(htmlbutton).As<jqueryui.JQuery>().button(buttonOptions);
                    return null;
                };
                dom.window.document.body.appendChild(htmlbutton);
            }
    
        }
    }

    Comment


      #3
      Hi pmpasnet ,

      Thanks for the update. Your solution is correct. You'd probably want to get rid of repeated casting by introducing extensions (this is what Retyped will take care of soon):

      /// <summary>
      /// jQueryUI -> jQuery mappings
      /// </summary>
      public static class jQueryUIExtensions
      {
          /// <summary>
          /// This method maps original jQuery interface to jQueryUI.jQuery extension.
          /// </summary>
          public static jqueryui.JQuery.Interface UI(this jquery.JQuery.Interface jquery)
          {
              return jquery.As<jqueryui.JQuery.Interface>();
          }
      
          /// <summary>
          /// This method maps original JQueryStatic interface to jQueryUI.JQueryStatic extension.
          /// </summary>
          public static jqueryui.JQueryStatic UI(this JQueryStatic.Interface jquery)
          {
              return jQuery.As<jqueryui.JQueryStatic>();
          }
      }

      Comment


        #4
        Hi pmpasnet,

        I just want to let you know that Retyped now detects and generates extensions automatically, so you're not longer required to use unsafe casting.

        Make sure, you have using Retyped; statement to get access to the generated extension methods.
        You can find more information in that GitHub issue.

        This is how your sample would look like with the extension method used instead casting:
        public class App
        {
            public static void Main()
            {
                var htmlbutton = new dom.HTMLButtonElement();
                htmlbutton.innerHTML = "Html Button";
                htmlbutton.onclick = (ev) =>
                {
                    JQueryUI.ButtonOptions buttonOptions = new JQueryUI.ButtonOptions { label = "JQueryUI Button" };
                    var uibtn = jQuery.select(htmlbutton).jqueryui().button(buttonOptions);
                    return null;
                };
                dom.window.document.body.appendChild(htmlbutton);
            }
        }

        Comment


          #5
          Good news, this will make development much easier

          Comment

          Working...
          X