X

Geertjan's Blog

  • April 3, 2016

Custom Elements & Attributes in HTML in NetBeans IDE

Geertjan Wielenga
Product Manager

Here I have a custom element and attribute I have created in an HTML file in NetBeans IDE. When I press Alt-Enter or the yellow lightbulb on the left side of the editor, NetBeans offers to create an element, in a file that will be named "customs.json":

When I invoke the above action, the red error underlines are remove, though I can still click the yellow lightbulb or press Alt-Enter for further help:

For example, I'm now also able to declare "abc" as an attribute of element "test", as shown below: 

Notice also that the last item above will open the "customs.json" file for you, so you can take a look at it or tweak it further. Alternatively, switch to the Files window (Ctrl-2) and then you'll find the file in your "nbproject" folder.

In the above scenario, the result is as follows, which also gives you an idea of the structure of this kind of file:

{
"elements": {
"test": {
"attributes": {
"abc": {}
}
}
},
"attributes": {}
}

And now your new element is in the code completion box, i.e., when you press Ctrl-Space:

A more complicated scenario:

And here's the "customs.json" for the above:

{
"elements": {
"foo": {
"attributes": {
"cool": "boolean",
"id": "id",
"class": {
"type": "css-class",
"doc": "http://foo.org/elements/foo"
}
},
"elements": {
"infoo":{
}
}
},
"infoo2": {
"parent" : "foo"
},
"infoo3": {
"parent" : ["infoo", "infoo2"]
}
},
"attributes": {}
}

Take note of the "class" attribute defined above, this is how it looks when I now use code completion:

Also see these:

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha