Orizen Designs – Oren Farhi – Javascript Blog, HTML5, CSS3

Well, it’s no secret that I use Notepad++ as an IDE for almost all web development works that I do. To customize notepad++ I created a Bespin color theme for it.
Now, I would like represent Function List plugin for notepad++. This plugin, with the right defined rules, can display a tree view like of available functions in almost any language. I went a bit further. What about object oriented javascript?
Oop javascript includes objects with properites and methods (much like java, php, dot.net etc). I wanted to achieve an eclipse like style of displaying my objects complete with methods. Now, the Function List plugin can be customized so a user can add rules in regular expression which will “extract” the desired text from the document.

The rules I created for object oriented javascript, are based on the prototype approach of building a javascript object:

$V.com.Grid = function (sHtmlId)
{
	this.id = sHtmlId;
	this.init();
};
$V.com.Grid.prototype = {
	init: function ()
	{
		var self = this;
		//- assign on click event
		this.oTable = $('#' + this.id);
		$('#' + this.id).bind('click', self.onClick);
		$('#table-headers tr th.checkbox_column div').bind('click', self.checkRows);
	},

	get: function()
	{
		return this.oTable;
	},

	updateRows: function (rows, oDetails, oData, bCloseEditor)
	{
		//statments
	}
}

You can add these rules in 2 ways. One way is adding it through the user interface of Function List plugin. The other way, which I recommend for this purpose is to add it manually to FunctionListRules.xml.

The Rules:

<Language name="Javascript" imagelistpath="c:\oren\Notepad++\plugins\Config\FunctionsIcons.bmp">
	<CommList param1="/\*" param2="\*/" />
	<Group name="FUNCTION" subgroup="Methods" icon="18" child="4" autoexp="0" matchcase="1" fendtobbeg="" bbegtobend="\{" keywords="">
		<Rules regexbeg="function\s+" regexfunc='["\w_]+' regexend="\s*\(.*\)" bodybegin="\{" bodyend="\}" sep="" />
		<Rules regexbeg="^\s*" regexfunc='["\w_.]+' regexend="\s*[=:]\s*function\s*\([\w_mce_markeramp;=',\s]*\)" bodybegin="\{" bodyend="\}" sep=";" />
		<Rules regexbeg="^\s*var\s*" regexfunc='["\w_.]+' regexend="\s*[=:]\s*function\s*\([\w_mce_markeramp;=',\s]*\)" bodybegin="\{" bodyend="\}" sep=";" />
	</Group>
	<Group name="Classes" subgroup="Prototype" icon="25" child="19" autoexp="0" matchcase="0" fendtobbeg="" bbegtobend="\{" keywords="">
		<Rules regexbeg="^" regexfunc="[a-zA-Z_- $.]+" regexend=".prototype+.=" bodybegin="\{" bodyend="\}" sep="" />
	</Group>
	<Group name="Methods" subgroup="" icon="36" child="11" autoexp="0" matchcase="1" fendtobbeg="" bbegtobend="" keywords="">
		<Rules regexbeg="this\.+" regexfunc="[\w_].*+.=.*." regexend="function+\(.*+\)" bodybegin="\{" bodyend="\}" sep="" />
		<Rules regexbeg="^\s*" regexfunc=".[\w_.]+" regexend=".=.\{" bodybegin="\{" bodyend="\}" sep="" />
	</Group>
	<Group name="Prototype" subgroup="" icon="32" child="35" autoexp="0" matchcase="0" fendtobbeg="" bbegtobend="" keywords="\<if\>|\<else\>|\<return\>|\<new\>">
		<Rules regexbeg="^\s*,*" regexfunc=".[\w_]+" regexend=":\s*function\s*\(.*\)$" bodybegin="\{" bodyend="\}" sep="" />
	</Group>
	<Group name="VisitWeb" subgroup="Prototype" icon="34" child="35" autoexp="0" matchcase="0" fendtobbeg="" bbegtobend="\{" keywords="">
		<Rules regexbeg="^VisitWeb[.]+" regexfunc="[a-zA-Z0-9_- ]+" regexend="" bodybegin="\{" bodyend="\}" sep="" />
	</Group>
	<Group name="objects" subgroup="objects-props" icon="17" child="29" autoexp="0" matchcase="0" fendtobbeg="" bbegtobend="" keywords="">
		<Rules regexbeg="^" regexfunc="[a-zA-Z0-9_.]+*\s*[^={()]*" regexend="=* {" bodybegin="\{" bodyend="\}" sep="" />
	</Group>
	<Group name="objects-props" subgroup="" icon="14" child="14" autoexp="0" matchcase="0" fendtobbeg="" bbegtobend="" keywords="">
		<Rules regexbeg="[^*@]*" regexfunc="[A-Z_]+:\s*'*[\w_-]*'*" regexend="," bodybegin="" bodyend="$" sep="" />
	</Group>
	<Group name="test" subgroup="" icon="32" child="0" autoexp="0" matchcase="0" fendtobbeg="" bbegtobend="" keywords="">
		<Rules regexbeg="orizen" regexfunc="" regexend="" bodybegin="" bodyend="" sep="" />
	</Group>
</Language>

Look for the string <Language name=”Javascript” and replace the whole xml node with this one. Also, please point your icons file to the right path.

Save the file and restart notepad++ (close it and then open it again).

That’s it – you have function list rules for object oriented javascript.