Announcement

Collapse
No announcement yet.

"Not a constructor" error

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

  • "Not a constructor" error

    Hey guys,

    I have my C# code as such:

    1) A HTMLDivElement implementation:
        public class AccordionItemBody : HTMLDivElement
        {
            public AccordionItemBody(string id)
            {
                Id = id;
                ClassName = "panel-collapse collapse";
            }
        }
    2) And, on my App.cs:
    var body = new AccordionItemBody(item1);
    However, I get the following error:
    BriTest.js:34 Uncaught TypeError: BriTest.Framework.Accordion.AccordionItemBody is not a constructor
    When I check my generated JS, it has this:

    Bridge.define('BriTest.Framework.Accordion.AccordionItemBody', {
            inherits: [HTMLDivElement],
            constructor: function (id) {
                this.id = id;
                this.className = "panel-collapse collapse";
            }
        });
    Any idea on how to overcome this?

    Thanks!

    Edit:

    I changed the implementation to instantiate, instead of the AccordionItemBody, a HTMLDivElement, and set the Id and ClassName on instance. It works. However, I'm looking to build a framework with different implementations, and the ability to inherit from HTMLDivElement would be really important.
    Last edited by nicolas; 2016-06-11 @ 12:03 PM.

  • #2
    Hi nicolas,

    Yes, HTMLElement elements are the exact wrappers for Html elements. I.e. you cannot call its constructors directly as browsers throw that constructor errors. We are planning to come up with a solution to create HTML components. There is a related forum post and features in GitHub #389 and #1238.

    I would suggest using helpers for your custom elements (see Live example).

    An element definition would be:
    [External]
    [Name("HTMLDivElement")]
    public class AccordionItemBody : HTMLDivElement
    {
        // You can add your fields here
        public int MyField;
    }
    A helper to create elements:
    public class AccordionItemBodyFactory
    {
        public static AccordionItemBody Create(string id, int value)
        {
            var el = new HTMLDivElement();
            el.Id = id;
            el.ClassName = "panel-collapse collapse in";
            el.Style.Width = "300px";
            el.Style.Height = "200px";
            el["myField"] = value;
    
            return el as AccordionItemBody;
        }
    }
    A code to use the helper:
    var body = AccordionItemBodyFactory.Create("item1", 7);
    
    body.Style.BackgroundColor = HTMLColor.Green;
    
    Console.WriteLine(string.Format("{0} - Value: {1} ClassName: {2} BackgroundColor: {3}",
                body.Id, body.MyField, body.ClassName, body.Style.BackgroundColor));
    
    Document.Body.AppendChild(body);
    Hope it helps.

    Comment


    • #3
      Hey Leonid, thanks for your reply.
      I'm trying to follow your tip, but now I'm getting a different error:
      Uncaught TypeError: Cannot read property 'create' of undefined
      here's my C# implementation:

          public class AccordionItemHeading : HTMLDivElement
          {
              public static AccordionItemHeading Create(HTMLElement content)
              {
                  var heading = new HTMLDivElement
                  {
                      ClassName = "panel-heading"
                  };
      
                  if (content != null)
                      heading.AppendChild(content);
      
                  return heading as AccordionItemHeading;
              }
          }
      And using it as such:

                      var headingContent = new HTMLDivElement
                      {
                          ClassName = "panel-title"
                      };
      
                      AccordionItemHeading heading = AccordionItemHeading.Create(headingContent);
      Edit:

      Image of the error in js code.

      Click image for larger version

Name:	Screen Shot 2016-06-11 at 16.33.02.png
Views:	1
Size:	23.3 KB
ID:	2403
      Last edited by nicolas; 2016-06-11 @ 03:34 PM.

      Comment


      • #4
        Hi nicolas,

        The idea, to work around HTML element inheritance prohibition, is to mark AccordionItemHeading class as [External] (the attribute means Bridge will not generate a class definition for the class, more details here).

        To create real elements we use a separate class, a factory, with no [External] attribute. Bridge will generate JavaScript code that can be called with no Cannot read property 'create' of undefined error.

        Please see Bridge Live example.
        Last edited by geoffrey.mcgill; 2016-06-11 @ 07:44 PM.

        Comment


        • #5
          Related To:

          Comment

          Working...
          X