I was working in Netbeans today and I came across something I have never seen before. I most likely saw it before but because it’s not very prominent on the screen my eyes must have glazed over it.

On the far right side of the screen you might see VERY little dashes. Here’s a screen shot what I am talking about.

I went an click on the first instance of a paragraph tag. Netbeans is smart enough to tell you where you make changes to other paragraph tags later on in the file. You can just click the dashes and Netbeans will take you to the particular item you clicked on. Please note the dashes aren’t lined up with actual line of code. While this might seem weird at first it actually makes sense. Netbeans wants to show you all the items on your screen. If it was lined up with each line you’d never be able to glance to the side to see how many items are in the page.

Another thing I need you to take notice of is there are two different icons.

• The top line icon is very thin with a small dot in the middle. This represents the item you currently have selected.
• The bottom line icon is thicker, light grey, and does not have a dot. This represents other items on the page that have variations of tag.

So why does this excite me so much? Well I am a very visual person. I like the fact that if I am having cascade issues I have a very easy way of finding similar items.

You might have seen the “Unexpected tag <a> found, expecting one of <table>, <h4>,<h2>,<pre>,<noscript>” error in Netbeans. This happens when you create an anchor link. There will be a red “!” and light bulb on the line that is in question.

Here’s a screenshot of the error:

The reason why you are getting this error is that you are using XHTML with strict mode enabled. What you might not realize (or have forgotten) is that under strict xhtml markup inline elements must always be wrapped inside block level elements like <table>, <h4>, <h2>, <pre>,  <div>, or <p>

So in order resolve this error  the code should look something like this:

Notice how there is no longer a red “!”? As a side note although Netbeans normally has pretty good code hints I definitely think there is room for improvement. I hope this helps!

This post will cover how to use Dreamweaver like snippet feature in the Netbeans IDE. I recently found out about Dreamweaver snippets and fell in love with them.

First off “Snippets” in Netbeans are called “Code Templates” but I will use the two terms interchangeably. *NOTE* The one thing I wish Netbeans did have is drag and drop access to it’s snippets. Dreamweaver has this functionality and I find it very useful.

Let’s go setup your first Netbeans Code Template.

Go to “Tools-Options”.

Then go to “EDITOR – Code Templates”. Make sure you specify the programing language you want to the template to be valid in. I’ve selected HTML in our case.

Click “New” button. After you do that window will popup. It will ask you what you want to type to use the code snippet. I chose “form”. Hit Ok.

You should now see “form” has been created. You must now enter the code that you want to be automatically displayed when you type “form”

Fill out the code you want to use.

Make sure to note what the “Expand Template on:” key is. In my case I select “Tab”.

Hit OK.

Now try it out.

In the body of the HTML document type “form” and then hit the TAB key. Voila! Instant form with barely any coding at all! 🙂

For some extra reading you might like this as well: Netbeans Code Template Module Tutorial

This post will go over how to enable php code completion in HTML files in Netbeans IDE. To enable PHP code completion in HTML files you will first want to make sure that the version of Netbeans already supports PHP. There are about 6 or so versions of Netbeans and there are only two that support PHP. There is a PHP and the complete version. If you only have the JAVA or RAILS version you obviously aren’t going to have the proper files.

Once you are sure you have the proper version of Netbeans installed the next thing to do is check the MIME settings. Netbeans uses Mime settings to figure out how to what code completions to show you when you are working with a file. The mime settings are located in: “TOOLS-OPTIONS”

Click on “Miscellaneous – Files”. The File extension should be “html” and then you want to associated the file type to “PHP (text/x-php5)” as seen in the screenshot.

By making this selection you will have successfully enabled php code completion in HTML files in the Netbeans IDE.