How I setup my Netbeans templates

This post will be all about how I setup my templates in Netbeans. Please feel free at the end of the post if you have any other suggestions or ideas on improving the work flow. The first thing I do when I go into the template manager is change the HTML, CSS templates. I also add a Reset CSS and HTML 5 template as I pretty much use them in every project I use. *NOTE* I am assuming you have read my first part of this series How to customize your Netbeans template files. Most the work will be done in the template manager and I won’t be going over how to open/edit the template files.

How I setup my Netbeans templates

Let’s first start with HTML Files:

Click on HTML Files and hit rename button.
Rename it to “HTML 4 File”
Click the “Open In Editor”

There are two extra lines I add. The “reset.css” and “default.css”. files.

<#assign licenseFirst = "<!--">

<#assign licensePrefix = "">

<#assign licenseLast = "-->">

<#include "../Licenses/license-${project.license}.txt">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=${encoding}">

    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

    <link rel="stylesheet" href="css/default.css" type="text/css" media="screen">

  </head>

  <body>

    TODO write content

  </body>

</html>

The next template we will need to create. It will be for HTML5. Don’t worry it’s not very hard to do.

We are going to have to create a folder. From here on in I will refer to it as the the custom template directory. You can put the template directory anywhere.The code you will need to paste will be at the bottom of the steps list.

Open My Computer
Go to: “C:\Users\<user>\.netbeans\” *Note* replace <user> with your profile username
Create a folder called “custom templates”
Copy the code at the end of this section and paste it into an brand new file.
Save the file as html5.html in the Custom Templates folder.
Inside Template manager make sure you are in the “Other” folder
Click “Add…” button.
Select the HTML5.html file you just created. Press Ok.
Single click the new template.
Hit the “rename” button.
Rename the template “HTML5 File”
You now have create your first customized template

<#assign licenseFirst = "<!--">

<#assign licensePrefix = "">

<#assign licenseLast = "-->">

<#include "../Licenses/license-${project.license}.txt">

<!DOCTYPE html>

<html lang="en">

  <head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=${encoding}">

    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

    <link rel="stylesheet" href="css/default.css" type="text/css" media="screen">

    <link rel="stylesheet" href="css/html5.css" type="text/css" media="screen">

    <!--[if IE]>

    	<script src="javascript/html5.js"></script>

    <![endif]-->

  </head>

  <body>

    TODO write content

  </body>

</html>

We are next going to create reset.css, html5.css, html5.js. Copy this code and save it into blank files in the template folder. Save each file accordingly:

reset.css

/* RESET CSS FILE */


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,

pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,

samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,

legend,table,caption,tbody,tfoot,thead,tr,th,td

{border:0; outline:0; vertical-align:middle; background:transparent; margin:0; padding:0; font-family: Verdana, Geneva, sans-serif;}


* {margin:0; padding:0; }

a img { border:0; }



/*

This is called the clearfix "hack" to prevent container from colapsing

in on itself when all the elements inside are floated elements.

Make sure to add --[ class="container" ]-- to any object that you

don't want to colapse.

*/

.container:after { visibility: hidden; display: block; font-size:0; content: " "; clear: both; height: 0; }



/* start commented backlash hack \*/

* html .container   { height: 1%;     }

.container          { display: block; }

/* close commented backlash hack */



/* Easy way for me to float items */

.floatleft 	{ float:left;       }

.floatright 	{ float:right;      }

.floatmiddle 	{ margin: 0px auto; }

html5.css

header, section, footer, aside, nav, article, figure {

	display:block;

}

html5.js

// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,figure,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

Now that these extra file are created, we are going to create 3 new templates in Netbeans.

Open Netbeans Template Manager
Click “Add…” button
Select each file and click ok
Rename the file to something a bit more descriptive

The only thing you will have to remember going forward is that in the templates I have taken for granted that you will you my folder structure convention. You will have to create both a “css” and “JavaScript” folder in the same location where the file is. In both of those folders you would need to use the template to easily create the needed CSS or JavaScript files.

Now that you have those templates created you could just as easily create templates for things like jQuery. I hope this post will help eliminate the mundane and boring setup we all go through on each file we create!

[...] Have you ever wondered how you could change your Netbean IDE Template files? It’s actually quite easy! This will be post one of two. This first post will go over how to make minor tweaks to your template files. The second post will cover my recommendations on how I setup my Netbean Templates. [...]

How to customize your Netbean Template files | Jared Heinrichs on February 27th, 2010 at 12:12 pm

how i am able to work with html 5 in netbeans.html 5 tag like video ,audio etc does not show in intellicenes of netbeans php 6.8 editor.pls help me .

andy on April 6th, 2010 at 9:26 pm

Thank you for your useful tutorial, but is possible to set a template in order to have one or more prompts to allow a parametric creation of the file?
I work with PHP version.
Thank you in advance.

Antonio on November 24th, 2011 at 3:42 am

How I setup my Netbeans templates