src/content/community/articles/interviews/Visual-Studio-user-tries-Matisse.html - netbeans-website-cleanup - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>VisualStudio User Tries Matisse</title>
 <META NAME="description" CONTENT="Interview: Visual Studio User Tries Matisse">
 <link rel="stylesheet" type="text/css" href="../../../netbeans.css">
 <META NAME="AUDIENCE" CONTENT="NBUSER">
 <META NAME="TYPE" CONTENT="ARTICLE">
 <META NAME="EXPIRES" CONTENT="N">
 <meta name="author" content="Roman Strobl"/>
 <meta name="indexed" content="y"/>
 </head>

 <body>
 <h1>Article: Visual Studio User Tries Matisse</h1>
 Contributed by: Aviad Ben Dov, software designer and developer
 <p />
 <im src="../../images_www/articles/Aviad.jpg" class="align-right">
 When I first tried out the NetBeans GUI Builder Matisse, I was as skeptical
 as I would be with any Java GUI builder.
 They never turn out to be exactly what you'd expect;
 even IDEA's designer, simplifying GridBagLayout to just a few clicks and properties,
 doesn't have the same feel as Visual Studio 2005.
 <p />
 Whatever my feelings were before trying Matisse, I was surprised after using it:
 Not only did Matisse do everything I expected a GUI editor to do,
 it even offered new features that really made me raise an eyebrow wondering,
 &quot;Why did no one else think of this before?&quot;
 <p />
 In this article I will present the features I enjoyed best in Matisse,
 and then suggest a few features I would like to see in future releases.
 <p />

 <h2><a name="Matisse_Features"> </a> Matisse Features </h2>
 <p />
 Matisse presents the developer with some new and surprising features -
 including some that have been long awaited amongst the GUI editing community.
 <p />
 <h3><a name="Free_Form_Layout"> </a> Free Form Layout </h3>
 <p />
 Matisse's default layout manager, the new GroupLayout, is just great.
 It allows you to place controls anywhere you want them.
 Resize them, move them, and snap them to other controls,
 and watch it all come together when you preview the form or execute your application.
 <p />
 The best part is that the sizing and locations are later determined by the loading OS's look and feel,
 so that you can be almost sure there won't be any running back and forth between a Windows XP machine,
 a Linux machine and a Mac, just to see that the form looks great in all possible variations. It will.
 <p />
 <h3><a name="The_Matisse_Editor"> </a> The Matisse Editor </h3>
 <p />
 What makes the layout manager even better is Matisse itself, the user interface editor.
 Snap controls to other controls or to a container and choose whether the snapping
 should occur for the location of the controls or also for their size, all by simply using your mouse.
 <p />

 <img src="../../../images_www/articles/interviews/visual-studio-user-tries-matisse/matisse-snaps.png" alt="matisse-snaps"
  width="347" height="270"  />
 <p />
 <p />
 Matisse provides the developer with a real drag, drop and stretch experience:
 Drag your control from the toolbox, drop it on your form
 (noticing that the panels are highlighted when moved over!),
 resize the control, and then using visual guide lines snap it to basically anything on the form.
 <p />
 Another nice feature of Matisse is that you can always figure
 out its resizing and relocation logic. At any time, you can
 select a control to display the anchors that explain expected size
 and location changes, even if it's a snap connection between two
 other controls.
 <p />

 <p />
 <h3><a name="Connections_Manager"> </a> Connections Manager </h3>
 <p />
 Matisse allows you to define connections between a control's event
 and another control's or a JavaBean's property.
 This gives you the ability to bind a control's state to the properties of another control
 or to those of a JavaBean, or to have a change in a control's state trigger a change in another's,
 for example a checkbox that, when selected, enables a set of buttons and text boxes.
 <p />
 This connection is made via a simple three step wizard,
 followed by an option to edit the code automatically generated by Matisse.
 <p />
 <h3><a name="Small_Footprint_and_High_Speed"> </a> Small Footprint and High Speed </h3>

 <p />
 NetBeans has a small enough footprint.
 It runs easily on my iBook G4 with 256MB RAM seems smooth enough to actually do some work,
 and that's reassuring for me as an on-the-roads developer.
 What was surprising though was that Matisse didn't raise the memory bar by more than a few megabytes,
 and kept its memory usage no matter what was added to the form.
 <p />
 The speed was impeccable as well:
 NetBeans continued to run smoothly no matter how many snaps and connections were added to the form.
 <p />
 <h3><a name="Matisse_s_Look_and_Feel"> </a> Matisse's Look and Feel </h3>
 <p />
 NetBeans uses the native look and feel of the system you're working on.
 This nativeness of the IDE gives you the feeling of working on a product made for your environment,
 which means you know exactly what to expect:
 A tab will look like a tab, a button like a button, and so on and so forth.

 <p />
 The native look and feel is very helpful when you are working with Matisse,
 because you can see how the form is going to look before running it or previewing it,
 directly on your designer window.
 <p />
 The Preview option in Matisse helps even more by enabling the developer to resize a form
 to see how the controls all play together, but as said above,
 it's possible to tell how a form will look like straight from the designer.
 <p />
 <h3><a name="Generated_Code"> </a> Generated Code </h3>
 <p />
 The generated code is cross-IDE, with the exception
 that using the default layout manager means exporting the layout manager's .jar file.
 Besides that, any IDE should be able to handle the code generated,
 which is a huge advantage when working in a team that is using a diverse set of IDE tools.
 <p />
 Now, the first thing I love doing when encountering generated code is to mess around with it.
 Change names, delete portions of code, make the code uncompilable,
 and see the editor throw error messages and in some cases even crash.
 <p />
 The first thing I noticed with Matisse is that I just can't do that.
 Matisse keeps its generated code read only (marked with blue for your attention)
 when viewed from within NetBeans.
 (By generated code I mean the form building itself, as well as event methods' definitions.)

 <p />
 <a href="../../../images_www/articles/matisse-readonly.png">
 <img src="../../../images_www/articles/interviews/visual-studio-user-tries-matisse/matisse-readonly.png" alt="matisse-readonly.png"
   width="600" class="b-none"  /></a>
 <p />
 This is a great feature, as it prevents mistakes and allows the generated code
 to be truly separated from the form's logic, even if it is written in the same class file.
 Further, the generated code is folded so that it can't be seen
 unless the developer really wishes to see it.
 <p />
 No matter, NetBeans can't prevent me from changing the code outside the editor.
 This is relevant in case someone with a different editor decides to change the form by code,
 and in doing so, breaks the form's code.
 <p />
 Having done that, Matisse didn't even budge.
 Apparantly, Matisse keeps a .form file for every form the user creates.
 This file is an XML document representation of the original form,
 and Matisse uses this document when the form is edited and when the form's code is generated.
 <p />
 <h2><a name="My_Wishlist_for_Future_Releases"> </a> My Wishlist for Future Releases </h2>

 <p />
 These are my own speculations, or should I say ideas,
 about what should come in future releases of NetBeans in regards to Matisse.
 I think that the team developing Matisse has really done a great job with it,
 and that from here it can only keep improving in order to keep its supremacy among GUI editors.
 <p />
 <h3><a name="Improved_JavaBeans_Binding"> </a> Improved JavaBeans Binding </h3>
 <p />
 Ultimately, the form is simply a way to communicate with the user.
 JavaBeans are the instances containing the information communicated back and forth from the form,
 and having them easily bound to the form's controls is highly important.

 <p />
 I think that on top of the connections manager's option to connect between an event
 to a JavaBeans property, Matisse should offer a way to bind a JavaBeans property to a control's value.
 <p />
 I would go even further and suggest a wizard which generates a JavaBean from a group of controls on a form,
 and in so doing, separating the form's logic from the form's class file even more.
 <p />

 <h3><a name="Better_Support_for_Other_Layouts"> </a> Better Support for Other Layouts </h3>
 <p />
 Matisse handles its own GroupLayout brilliantly,
 but fails to provide the same level of support for the original Java layout managers.
 In the future I would enjoy using Matisse in such a way that dragging a control onto a
 BoxLayouted panel would highlight the area the control would take,
 and maybe even move the controls already on that panel to show how it will look after placing the control.
 <p />
 <h3><a name="Automatic_Conversion_From_Other"> </a><a name="Automatic_Conversion_From_Other_"> </a> Automatic Conversion From Other Layouts </h3>

 <p />
 Not every application is a new application,
 and some code is old, using a diversity of BoxLayout, GridBagLayout and FlowLayout
 to make a form fulfil its developer's desires.
 Matisse should allow for automatic conversion from these layouts to the new, free-form layout,
 by keeping old events and control names and keeping the form's old presentation
 by supplying automatically generated snaps to the controls.
 <p />
 <h2><a name="Some_Conclusions"> </a> Some Conclusions </h2>

 <p />
 It's obvious that to me, Matisse is the number one GUI editor for Java,
 and in more than one way, the number one GUI editor on all platforms.
 Considering the past of NetBeans, starting out fresh with something like Matisse
 is just a sign for what's coming, and there's no doubt that
 even though I first looked at the new NetBeans with scepticism,
 I'd be looking at the next release with anticipation.
 <p />
 <h2><a name="About_the_Author"> </a> About the Author </h2>
 <p />
 Aviad Ben Dov is a software designer and developer,
 working on enterprise applications in both .NET and Java.
 He is a long time user of both Visual Studio and IntelliJ IDEA.
 <p />
 <h2><a name="Links"> </a> Links for Further Reading </h2>
 <a href="http://javachaos.crazyredpanda.com">Aviad Ben Dov's Java Blog</a><br>
 <a href="https://netbeans.org/kb/archive/index.html">Quick start guide for Matisse </a><br>
 <a href="https://netbeans.org/kb/archive/index.html">Flash demo of Matisse</a><br>
 <a href="http://java.sun.com/developer/technicalArticles/Interviews/violet_pavek_qa.html">Interview with creators of Matisse</a><br>
 <p />
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	<head>
	<title>VisualStudio User Tries Matisse</title>
	<META NAME="description" CONTENT="Interview: Visual Studio User Tries Matisse">
	<link rel="stylesheet" type="text/css" href="../../../netbeans.css">
	<META NAME="AUDIENCE" CONTENT="NBUSER">
	<META NAME="TYPE" CONTENT="ARTICLE">
	<META NAME="EXPIRES" CONTENT="N">
	<meta name="author" content="Roman Strobl"/>
	<meta name="indexed" content="y"/>
	</head>

	<body>
	<h1>Article: Visual Studio User Tries Matisse</h1>
	Contributed by: Aviad Ben Dov, software designer and developer
	<p />
	<im src="../../images_www/articles/Aviad.jpg" class="align-right">
	When I first tried out the NetBeans GUI Builder Matisse, I was as skeptical
	as I would be with any Java GUI builder.
	They never turn out to be exactly what you'd expect;
	even IDEA's designer, simplifying GridBagLayout to just a few clicks and properties,
	doesn't have the same feel as Visual Studio 2005.
	<p />
	Whatever my feelings were before trying Matisse, I was surprised after using it:
	Not only did Matisse do everything I expected a GUI editor to do,
	it even offered new features that really made me raise an eyebrow wondering,
	"Why did no one else think of this before?"
	<p />
	In this article I will present the features I enjoyed best in Matisse,
	and then suggest a few features I would like to see in future releases.
	<p />

	<h2><a name="Matisse_Features"> </a> Matisse Features </h2>
	<p />
	Matisse presents the developer with some new and surprising features -
	including some that have been long awaited amongst the GUI editing community.
	<p />
	<h3><a name="Free_Form_Layout"> </a> Free Form Layout </h3>
	<p />
	Matisse's default layout manager, the new GroupLayout, is just great.
	It allows you to place controls anywhere you want them.
	Resize them, move them, and snap them to other controls,
	and watch it all come together when you preview the form or execute your application.
	<p />
	The best part is that the sizing and locations are later determined by the loading OS's look and feel,
	so that you can be almost sure there won't be any running back and forth between a Windows XP machine,
	a Linux machine and a Mac, just to see that the form looks great in all possible variations. It will.
	<p />
	<h3><a name="The_Matisse_Editor"> </a> The Matisse Editor </h3>
	<p />
	What makes the layout manager even better is Matisse itself, the user interface editor.
	Snap controls to other controls or to a container and choose whether the snapping
	should occur for the location of the controls or also for their size, all by simply using your mouse.
	<p />

	<img src="../../../images_www/articles/interviews/visual-studio-user-tries-matisse/matisse-snaps.png" alt="matisse-snaps"
	width="347" height="270" />
	<p />
	<p />
	Matisse provides the developer with a real drag, drop and stretch experience:
	Drag your control from the toolbox, drop it on your form
	(noticing that the panels are highlighted when moved over!),
	resize the control, and then using visual guide lines snap it to basically anything on the form.
	<p />
	Another nice feature of Matisse is that you can always figure
	out its resizing and relocation logic. At any time, you can
	select a control to display the anchors that explain expected size
	and location changes, even if it's a snap connection between two
	other controls.
	<p />

	<p />
	<h3><a name="Connections_Manager"> </a> Connections Manager </h3>
	<p />
	Matisse allows you to define connections between a control's event
	and another control's or a JavaBean's property.
	This gives you the ability to bind a control's state to the properties of another control
	or to those of a JavaBean, or to have a change in a control's state trigger a change in another's,
	for example a checkbox that, when selected, enables a set of buttons and text boxes.
	<p />
	This connection is made via a simple three step wizard,
	followed by an option to edit the code automatically generated by Matisse.
	<p />
	<h3><a name="Small_Footprint_and_High_Speed"> </a> Small Footprint and High Speed </h3>

	<p />
	NetBeans has a small enough footprint.
	It runs easily on my iBook G4 with 256MB RAM seems smooth enough to actually do some work,
	and that's reassuring for me as an on-the-roads developer.
	What was surprising though was that Matisse didn't raise the memory bar by more than a few megabytes,
	and kept its memory usage no matter what was added to the form.
	<p />
	The speed was impeccable as well:
	NetBeans continued to run smoothly no matter how many snaps and connections were added to the form.
	<p />
	<h3><a name="Matisse_s_Look_and_Feel"> </a> Matisse's Look and Feel </h3>
	<p />
	NetBeans uses the native look and feel of the system you're working on.
	This nativeness of the IDE gives you the feeling of working on a product made for your environment,
	which means you know exactly what to expect:
	A tab will look like a tab, a button like a button, and so on and so forth.

	<p />
	The native look and feel is very helpful when you are working with Matisse,
	because you can see how the form is going to look before running it or previewing it,
	directly on your designer window.
	<p />
	The Preview option in Matisse helps even more by enabling the developer to resize a form
	to see how the controls all play together, but as said above,
	it's possible to tell how a form will look like straight from the designer.
	<p />
	<h3><a name="Generated_Code"> </a> Generated Code </h3>
	<p />
	The generated code is cross-IDE, with the exception
	that using the default layout manager means exporting the layout manager's .jar file.
	Besides that, any IDE should be able to handle the code generated,
	which is a huge advantage when working in a team that is using a diverse set of IDE tools.
	<p />
	Now, the first thing I love doing when encountering generated code is to mess around with it.
	Change names, delete portions of code, make the code uncompilable,
	and see the editor throw error messages and in some cases even crash.
	<p />
	The first thing I noticed with Matisse is that I just can't do that.
	Matisse keeps its generated code read only (marked with blue for your attention)
	when viewed from within NetBeans.
	(By generated code I mean the form building itself, as well as event methods' definitions.)

	<p />
	<a href="../../../images_www/articles/matisse-readonly.png">
	<img src="../../../images_www/articles/interviews/visual-studio-user-tries-matisse/matisse-readonly.png" alt="matisse-readonly.png"
	width="600" class="b-none" /></a>
	<p />
	This is a great feature, as it prevents mistakes and allows the generated code
	to be truly separated from the form's logic, even if it is written in the same class file.
	Further, the generated code is folded so that it can't be seen
	unless the developer really wishes to see it.
	<p />
	No matter, NetBeans can't prevent me from changing the code outside the editor.
	This is relevant in case someone with a different editor decides to change the form by code,
	and in doing so, breaks the form's code.
	<p />
	Having done that, Matisse didn't even budge.
	Apparantly, Matisse keeps a .form file for every form the user creates.
	This file is an XML document representation of the original form,
	and Matisse uses this document when the form is edited and when the form's code is generated.
	<p />
	<h2><a name="My_Wishlist_for_Future_Releases"> </a> My Wishlist for Future Releases </h2>

	<p />
	These are my own speculations, or should I say ideas,
	about what should come in future releases of NetBeans in regards to Matisse.
	I think that the team developing Matisse has really done a great job with it,
	and that from here it can only keep improving in order to keep its supremacy among GUI editors.
	<p />
	<h3><a name="Improved_JavaBeans_Binding"> </a> Improved JavaBeans Binding </h3>
	<p />
	Ultimately, the form is simply a way to communicate with the user.
	JavaBeans are the instances containing the information communicated back and forth from the form,
	and having them easily bound to the form's controls is highly important.

	<p />
	I think that on top of the connections manager's option to connect between an event
	to a JavaBeans property, Matisse should offer a way to bind a JavaBeans property to a control's value.
	<p />
	I would go even further and suggest a wizard which generates a JavaBean from a group of controls on a form,
	and in so doing, separating the form's logic from the form's class file even more.
	<p />

	<h3><a name="Better_Support_for_Other_Layouts"> </a> Better Support for Other Layouts </h3>
	<p />
	Matisse handles its own GroupLayout brilliantly,
	but fails to provide the same level of support for the original Java layout managers.
	In the future I would enjoy using Matisse in such a way that dragging a control onto a
	BoxLayouted panel would highlight the area the control would take,
	and maybe even move the controls already on that panel to show how it will look after placing the control.
	<p />
	<h3><a name="Automatic_Conversion_From_Other"> </a><a name="Automatic_Conversion_From_Other_"> </a> Automatic Conversion From Other Layouts </h3>

	<p />
	Not every application is a new application,
	and some code is old, using a diversity of BoxLayout, GridBagLayout and FlowLayout
	to make a form fulfil its developer's desires.
	Matisse should allow for automatic conversion from these layouts to the new, free-form layout,
	by keeping old events and control names and keeping the form's old presentation
	by supplying automatically generated snaps to the controls.
	<p />
	<h2><a name="Some_Conclusions"> </a> Some Conclusions </h2>

	<p />
	It's obvious that to me, Matisse is the number one GUI editor for Java,
	and in more than one way, the number one GUI editor on all platforms.
	Considering the past of NetBeans, starting out fresh with something like Matisse
	is just a sign for what's coming, and there's no doubt that
	even though I first looked at the new NetBeans with scepticism,
	I'd be looking at the next release with anticipation.
	<p />
	<h2><a name="About_the_Author"> </a> About the Author </h2>
	<p />
	Aviad Ben Dov is a software designer and developer,
	working on enterprise applications in both .NET and Java.
	He is a long time user of both Visual Studio and IntelliJ IDEA.
	<p />
	<h2><a name="Links"> </a> Links for Further Reading </h2>
	<a href="http://javachaos.crazyredpanda.com">Aviad Ben Dov's Java Blog</a><br>
	<a href="https://netbeans.org/kb/archive/index.html">Quick start guide for Matisse </a><br>
	<a href="https://netbeans.org/kb/archive/index.html">Flash demo of Matisse</a><br>
	<a href="http://java.sun.com/developer/technicalArticles/Interviews/violet_pavek_qa.html">Interview with creators of Matisse</a><br>
	<p />
	</body>
	</html>