Generic Web Page Designer for Netbeans, anyone?

Visual JSF designer in Netbeans provides a way to design a web page visually. Unfortunately, Visual JSF web page designing is limited  to JSP based JSF web pages created by Visual JSF framework. However, Netbeans users might want to design web pages created by various frameworks. Such pages include HTML, PHP, JSP, RHTML (Ruby on  Rails), XML (facelet) etc. So I thought it is worth a time to explore the concept of a generic Web  Page Designer, with out any restrictions of any particular framework. If you are interested, you can read my proposal for a generic Web Page Designer at http://wiki.netbeans.org/WebPageDesigner The proposal includes Web Page Designer Concept Overview and Web Page Designer Design Concepts.

Web Page Designer
Enlarge

I also spent some time to create a prototype of a HTML designer. This designer will be the foundational designer for all other page designers (like PHP, JSP etc). Other page designers would be extended from this designer. This is obvious because HTML is a subset in all page types.

This HTML designer embeds Mozilla Layout Engine (XULRunner) for rendering the web pages. Therefore, unlike Visual JSF designer, user would get hi-fidelity rendering of the web pages. Details on embedding Mozilla in Netbeans is available here.

I've used JAVA-XPCOM API to interact with underlying XULRunner to facilitate page design. Unlike other Mozilla based Web Page authoring tools like NVU, in this designer I'm not exposing the Mozilla Composer, but directly manipulating the Mozilla DOM for visual editing. The advantage is, I can execute JavaScript on demand using XurRunner API. This helps me to render JavaScript based Web 2.0 AJAX widgets (Yahoo, jMaki, Google etc) in the designer. This unique feature I've not seen available in any of the popular WYSIWYG HTML designers, I could lay my hand on, like DreamWeaver or Microsoft expression. Another interesting feature I implemented, is the direct manipulations of CSS style of a HTML element selected in the designer using the Style Builder view docked in the bottom. Any modification of a CSS property in the Style Builder is immediately reflected in the designer.

Oh!, but one bigger question still bothers me - Are Netbeans users really interested in a Web Page Designer or am I just wasting my time?

Comments:

+10 This feature will turn NetBeans to be the coolest IDE EVER!

I'm very exiting to hear this good news!!! w000t

Posted by Lee on July 11, 2008 at 10:05 AM PDT #

The other day I had wanted to build a single html page and i found out that I couldn't do that visually, this was sought of a drawback, on the other hand incubator projects like the Apache Sling lets you other technologies such as jsp, javascript, html on top of it framework and I am yet to find a development IDE that gives this options, so I will say this is def a good thing for Apache Sling and other Ajax web development

Posted by Ransford segu-Baffoe on July 11, 2008 at 11:17 AM PDT #

Dear Winston,

we are really interested!

Posted by VerriJavaMen on July 11, 2008 at 12:06 PM PDT #

This sounds fantastic!

Posted by Vic Ricker on July 11, 2008 at 01:28 PM PDT #

That's a great idea. Finally we'll be able to visually edit anything from HTML pages to plain JSP to JSF and other platforms. This is a great idea.

Posted by Ramon Casha on July 11, 2008 at 02:50 PM PDT #

Brilliant!

Posted by Geertjan on July 11, 2008 at 08:09 PM PDT #

I add my voice to the chorus. I'll add a spotlight at TheAquarium in tomorrow's edition and will suggest people to leave their feedback here. - eduard/o

Posted by Eduardo Pelegri-Llopart on July 12, 2008 at 02:32 AM PDT #

How many visual HTML design tools that really work can we find in the FOSS space right now? To the best of my knowledge: exactly none! If you are succesfull, you will have created an open source FrontPage replacement (just for a start, ignoring JSP, PHP and all the others).

Georg

Posted by Georg on July 12, 2008 at 06:09 AM PDT #

This is fantastic news -- and a development that I'd consider one of the most important steps forward for Netbeans.

Posted by Luca on July 12, 2008 at 12:08 PM PDT #

Wow, this is such a great idea and it's amazing that you got a prototype that fast - it shows what can be done with NetBeans and improves NetBeans tremenduously at the same time. This is a killer project. If you need help with this I bet you'll have no problem finding people who will be happy to participate in this.

Posted by Martin Neumann on July 12, 2008 at 05:45 PM PDT #

put me in the YEAH category!

Posted by jake on July 12, 2008 at 08:25 PM PDT #

I think this feature is an absolute must for NetBeans to stay competitive in the web based IDE space. Let me ask you however, how would something like GWT(Google Web Toolkit) render in framework like this one? You mention being able to render AJAX components but don't mention GWT itself.

Posted by Patrick Julien on July 12, 2008 at 11:05 PM PDT #

This is needed. Put me in the yes.

Posted by Allan Davis on July 13, 2008 at 06:13 AM PDT #

Awesome!! I imagine this combination:
WebPageDesigner + (WoodStock || Richfaces) + Facelets + WebBeans + JPA
Who said MS Visual Studio?
Simply revolutionary in Java IDE world!
We expect it for 7.0?

Posted by Daoud AbdelMonem Faleh on July 13, 2008 at 11:36 AM PDT #

Most important proposal EVER! I;m skeptical that it's feasible, but if NetBeans could pull it off, it would truly be king.

Posted by Ben Loud on July 13, 2008 at 12:22 PM PDT #

I'm glad to see so many people showing interest in this feature because I also want it. Mainly I'm interested in previewing my HTML or Facelet inside NetBeans, and being able to use it to help me build/debug CSS layouts by highlighting sections I'm interested in. I hope that this embedded Mozilla code will not have problems when my Linux distro upgrades Firefox, and that installation will be seamless (built into NetBeans installer & plugins manager)

Posted by Ryan de Laplante on July 13, 2008 at 01:11 PM PDT #

After looking at the screenshot I have one suggestion: Use the pallet for HTML input components such as buttons, text boxes, forms, etc.

Posted by Ryan de Laplante on July 13, 2008 at 01:13 PM PDT #

YES!!!

Posted by Timo Jalonen on July 13, 2008 at 04:28 PM PDT #

Put me on yes category, this thing will be cool for netbeans. I have one suggestion : many of the html editor/designer doesn't have AP div(Absolute position div) designer just like JSF editor, if it can be implemented I guess netbeans can be dreamweaver killer

Posted by Erio prihastono on July 13, 2008 at 04:30 PM PDT #

good job, im impressed. what im waiting since i see netbeans....

Posted by Luis Molina on July 13, 2008 at 04:37 PM PDT #

fantastic news for this summer, what's about support of other frameworks like gwt,echo3...

Posted by walid on July 13, 2008 at 09:29 PM PDT #

Netbeans desperately need a Generic Web Page Designer since all other major IDEs(jdeveloper, eclipse, etc..) has one. Netbeans would be my only IDE if it had a Generic Web Page Designer, until the I have to switch between multiple IDEs to get the job done.

Posted by jacques on July 14, 2008 at 12:28 AM PDT #

Bravo, I would love the addition. I have been switching between NetBeans and Dreamweaver to complete projects.

Posted by Dan McDonald on July 14, 2008 at 03:50 AM PDT #

OMG that will be awesome, i was dreaming about that a lot and lot.. great u are blessed! :D

Posted by Marioko on July 14, 2008 at 04:14 AM PDT #

Excellent!!!

I will reconsider using Eclipse JSF visual designer if NetBeans can get it before the next project begins.

Posted by Ken on July 14, 2008 at 04:23 AM PDT #

Please... continue.
You'll put it on the top of Netbeans tools.

It would be really amazing to have a designer, with no restriction about the languaje/framework.

MUCHO ÁNIMO!!!

Posted by Fonsito on July 14, 2008 at 04:42 AM PDT #

Oh, yeah, brother!!

Do it!!

Sehr interessiert!

Posted by Dave on July 14, 2008 at 04:44 AM PDT #

This is totally awesome. If carefully implemented in the right way, this would give great impetus to Netbeans and would put it way (way!) ahead of other web development IDE's - Expression Web, Dreamweaver, etc. Using JavaXPCOM is an awesome idea, one that we're planning to use for the GUI designer for NBXUL as well. Looking forward to it.

Posted by Angad Singh on July 14, 2008 at 05:26 AM PDT #

Add me to the list of people that would love to see this. We've moved all our development machines to Linux and all that we are missing is a Dreamweaver replacement. This makes it completely possible for us to completely abandon the Windows platform.

Posted by Kevin Daly on July 14, 2008 at 05:43 AM PDT #

Excellent!!!

Count with me, to code, desing and help!!!

Posted by Roberto Carlos Gonzalez Flores on July 14, 2008 at 05:47 AM PDT #

Yes!

Posted by HandyGeek on July 14, 2008 at 06:30 AM PDT #

I think all of us really need this, till now I have had used 2 IDEs netbeans and Dreamweaver. But I would also say that while making this we should take care of performance side also because my ide already hangs more then twice a day on 2GB 1.8 GHZ dual core machine.

Posted by Sapan on July 14, 2008 at 06:34 AM PDT #

Looks like you already have an early edition working. Are the bits available? If so where?

Thanks
alley

Posted by Allan Davis on July 14, 2008 at 11:00 AM PDT #

Count me in.

I'm a PHP developer and have been waiting for this feature.
Before reading your blog, I have posted a request (Visual PHP GUI Editor) for Netbeans IDE for PHP future enhancement (http://www.netbeans.org/issues/show_bug.cgi?id=139856).

I'm looking forward to see this Designer working & running :-)
Thanks.

Posted by Yudi Setiawan on July 14, 2008 at 01:20 PM PDT #

This would be brilliant! Can't wait to try it out!

Posted by Toni Epple on July 14, 2008 at 04:15 PM PDT #

Simply: YES!

Posted by me on July 14, 2008 at 05:05 PM PDT #

I'm very interested to!

Posted by Jordi Farrés on July 14, 2008 at 05:26 PM PDT #

Well, nice idea but is it going to really work? Web Pros really use designers (switching between Dreamweaver and Netbeans? omg!)? What kind of pages do ppl design in a designer? If you want a really nice and light web page, then the only way still is to code it yourself. I believe that visual jsf as it is, it is just for intranet area, administration pages, the famous CRUD pages. Its too slow and heavy! AjaxZone and AjaxTransactions 10 times slower than Dojo's xhrget and xhrpost. Anyway, you say "Therefore, unlike Visual JSF designer, user would get hi-fidelity rendering of the web pages." so yes if it is really going to work, then it worths the effort (specially if it renders JavaScript based Web 2.0 AJAX widjets). But on the other hand, you never know till is out, if it really worthed the effort. Do you?

Posted by Stratos Pavlakis on July 14, 2008 at 06:06 PM PDT #

Count me in!

Posted by Bill McAllister on July 14, 2008 at 09:38 PM PDT #

Hi Prakash,
This idea is brilliant and the need for such web page designer real. As Stratos Pavlakis suggested, professional web designers will probably not (all) switch from their favourite tools to NetBeans however, I do not think that they are the primary target audience for such plugin (if I can call it like that); on the other hand, Web Application developers, who obviously also often have to spend time on web page design will, I'm convinced, be very happy to have the possibility to ALSO use NetBeans for such activities. Despite being only an occasional web app. developer and/or web page designer, I would personally be very enthusiast about being able to leverage your work.
Wish you the best!

Posted by Renaud Lapoele on July 14, 2008 at 11:49 PM PDT #

hi prakash
your idea is too good. in fact i am enjoying the web development in visual jsf using netbeans. just go ahead and make the netbean such that every web developer should use netbeans to do thre web development. ok
i am expecting that "i will be able to make html pages in netbeans using drag and drop such as in visual jsf".

And wish you the best!

Posted by prashant gajare on July 14, 2008 at 11:59 PM PDT #

Yes, 1+

Posted by guest on July 15, 2008 at 12:02 AM PDT #

OK, any way I can stop receiving these e-mails? I subscribed because I was expecting some news from the author, not a +1 from everyone.

Posted by Patrick Julien on July 15, 2008 at 12:02 AM PDT #

Maybe the Netbeans folks should concentrate on improving the quality of what is in there already before adding the bells and whistles. We are using / trying to use Netbeans for day to day development in our company (and yes we have paid for support) and the thing is shakier than a house of cards. Considering switching to Eclipse for our (glassfish) development.

Posted by guest on July 15, 2008 at 12:02 AM PDT #

Winston, is necessary!!!

Posted by aristides villarreal bravo on July 15, 2008 at 03:08 AM PDT #

Been there done, done that! The Eclipse community is way ahead of you. As an example see the Visual Web Designer of MyEclipse (www.myeclipseide.com) which has supported visual HTML, JSP, JSF and JavaScript development for the past 3 years while NetBeans developers have punished themselves.

Posted by guest on July 15, 2008 at 04:35 AM PDT #

... great effort! Thanks for starting on something like that, it will be very useful.

Never mind the gripes, those are like a\*\*\*les - everybody got one; valid, but have nothing to do with this part of the project. I suspect there are better places to b\*\*\*\*ch about these things.

Posted by tb on July 15, 2008 at 10:22 AM PDT #

Great idea. Netbeans IDE need this plugin ASAP

Posted by Anthony Bisong on July 15, 2008 at 10:27 AM PDT #

+100 from me.
Netbeans definitely needs a plain web designer and it should be in such a way that we should be able to use it on top of any technology framework.
Which means, whether I'm working on a JSF app or PHP app or a Ruby app, I must be able to use this web page designer.
If this is done properly, we don't need things like Visual JSF designer, because people are more comfortable with plain html goodies.
Great idea. Looking forward for this to be a part of NetBeans 6.5.
Wish you all the best.
Thanks for sharing your ideas with the community.

Posted by James Selvakumar on July 15, 2008 at 11:49 AM PDT #

I need it ASAP

Posted by guest on July 15, 2008 at 04:26 PM PDT #

This would be fantastic.
And important, quasi a MUST: WRAP LINE, this is what I am really missing in NetBeans.
Switching between Design View and Sourde Code was also great!

Posted by YES on July 15, 2008 at 05:34 PM PDT #

Yes there are gripes and then again some of them are valid gripes. I am very active on the mailing lists and often problems remain unsolved because the developers are concentrating on new features. The tendency seems to be to keep packing in the new features _sometimes_ without guaranteeing the quality of the features that are already in there. We have gone past the evaluating stage and are trying to use the software in a medisum sized development department and for production environments. Yeah sure the features win the users but the stability keeps them. Maybe the development needs to be slowed down and the users allowed to catch up.

Posted by guest on July 15, 2008 at 05:53 PM PDT #

want!

Posted by Moses on July 15, 2008 at 05:54 PM PDT #

Well not everything is gripe. I use Netbeans so I am generally satisfied with it and I love its big and active community. But facts are facts. Indeed developers who want to keep up with high end technology, have a difficult time with all these new features, as performance lucks (specially at the launch of new features) and they are buggy. Is there anyone here who has developed a relatively large cross browser app with Visual Web JSF? Beta testing and developing commercial stuff are 2 different things.

Posted by Stratos Pavlakis on July 15, 2008 at 08:15 PM PDT #

+1 Yes

Posted by Le Funes on July 15, 2008 at 10:18 PM PDT #

Definitely a +1 from me.

Posted by Tim Dudgeon on July 15, 2008 at 10:26 PM PDT #

You bet! Just one more thing to make Netbeans the only IDE you'll ever need!

Posted by javakcl on July 16, 2008 at 06:53 AM PDT #

+1 Yes

Posted by Omar Rodriguez on July 16, 2008 at 10:57 AM PDT #

n+1 yes

Wow! Netbeans surprise me with PHP support... and now you are talking about insert NVU into it!!

sorry Aptana but I want it!!

thank you

PD: please an split view (design and html).

Posted by Evelio on July 16, 2008 at 11:06 AM PDT #

excelente idea, ojala liberen la primera version pronto para probarla

Posted by corredor on July 16, 2008 at 12:09 PM PDT #

+100 + infinite . ..
I always wondered why netbeans doesn't have a WYSISYG designer for HTML already. Great job there Winston. I would be glad to be any help to you on thee project. Can be anything from testing to actually coding, I am no expert in any of those techs but have a basic fair idea of both the things.

Posted by Rohit on July 16, 2008 at 01:26 PM PDT #

Yes definitely,

Posted by Dhanuka Priyanath Ranasinghe on July 16, 2008 at 05:58 PM PDT #

Not useful
..
..
..
..
..
..
..
Nah I'm kidding ;)

Posted by Eric on July 16, 2008 at 07:14 PM PDT #

Excellent working man, please continue.

Posted by Slack on July 16, 2008 at 10:44 PM PDT #

Hombre!!!, una herrmienta muy necesaria...

Posted by Xavier on July 16, 2008 at 11:41 PM PDT #

It would be great!!!

Posted by israel on July 17, 2008 at 01:55 AM PDT #

Go Winston! I have been looking forward to this particular feature for a long time and I think its time we get it. It will be a great boot for all users!

Posted by Tsega on July 17, 2008 at 01:37 PM PDT #

hi Winston,
I'm so excited to her this news, the visual web editor is very needed, by developer of web 2.0.
So, I encourage you to finish this netbeans part, and I hope find it in the next release.
Thanks for your efforts and your hard work.

Posted by itachee on July 18, 2008 at 12:06 AM PDT #

I think that having this plug-in will make netbeans the best open source ide. this is one of the best ideas i'd heard

Posted by omar on July 18, 2008 at 12:23 AM PDT #

I am VERY interested in this proposal!!!

Posted by Jack on July 18, 2008 at 01:00 AM PDT #

It's a great idea, we need somethink like this,
I won't need Dreamweaver never again

Posted by Sergio Valdez on July 18, 2008 at 06:25 AM PDT #

Just go for it, looks like from the feed back it is required, I would use it.

Posted by Neil on July 19, 2008 at 04:14 PM PDT #

Only a few days ago I lost two hours trying to find this feature on my netbeans installation. Sadly, I realized that it just wasn't there :-(

Posted by Andres on July 21, 2008 at 12:12 AM PDT #

Sounds like an awesome idea - something that would be very useful in the IDE!

Posted by Daniel on July 22, 2008 at 01:40 AM PDT #

Que bueno, creo que soy el único que escribi en español
pero me parece buenisimo, era lo que le faltaba al ide de netbeans

Posted by geovanny on July 22, 2008 at 07:28 AM PDT #

It's a great
good work

Posted by Edson on July 27, 2008 at 02:56 AM PDT #

Most helpful and awaited among us, the netbeans loyals.

Posted by Rambo on August 04, 2008 at 05:52 PM PDT #

Yes 1+

Posted by roberto on September 09, 2008 at 09:19 AM PDT #

hi Winston,
i am tooooooooooo excited for this plug in.
But when it will be a viable for me to use it?

Posted by prashant on September 09, 2008 at 02:48 PM PDT #

Hi Winston,
this is what i am looking for go ahead,count me in, cud u suggest me something to render the ordinary jsf components for drag n drop support (not the woodstock components)

Posted by Karthik Bala on September 11, 2008 at 07:46 AM PDT #

It will be a great idea and functional tool, thanks to improve that idea :)

Posted by aldo on September 12, 2008 at 02:43 AM PDT #

Hello,

I like very much the idea. It is good to use with ruby on rails.

Posted by Marco Mangiante on September 13, 2008 at 05:08 PM PDT #

Fantastic! I like very much the idea, too. Like Visual Studio 2008, but a free IDE. Very good work.

Posted by Jordi Farrés on October 04, 2008 at 07:38 AM PDT #

Excelente!!! es lo qeu le hace falta en la parte de intgracion progrmador/diseñador!!!

Posted by Aditardo on October 08, 2008 at 12:30 PM PDT #

excelent!!.... is what i need!... thanks bro...

Posted by augusto on October 08, 2008 at 12:35 PM PDT #

I thought of doing something like this as a Firefox add-on! That is definetly needed!

Posted by Stoian Atanasov on October 23, 2008 at 08:53 AM PDT #

This would be an Awesome addition. Especially for linux users of netneans. This would turely be fantastic.
However, I read on your blog that you have left for Aptana does this mean that this is now a dead duck!

Posted by Andy on October 24, 2008 at 10:43 AM PDT #

Excellent idea, it is a greatly improve the functionality of netbeans because it gives us the possibility of a visual design of the pages, and if we add to this that netbeans is multi-platform and that there are not many visual editors in linux, it would result in the best development environment that exists

Posted by Juan Rodriguez on October 24, 2008 at 03:56 PM PDT #

great feature - implement it please!

Posted by Oliver Vogel on December 04, 2008 at 10:25 PM PST #

Seems to me that he went to Aptana :-( surely someone else at Sun could take this on? This really would be an awesome feature set for netbeans. Especially those of us that live in both the windows and \*nix worlds.

Please please someone reply like .......Winston ???????

Posted by Andy on December 05, 2008 at 06:54 PM PST #

Support JQuery UI????????????

Posted by Hugh on June 08, 2009 at 12:30 PM PDT #

I think this project looks dead to me anyone else have suggestions for a tool that could be used in nb for this?

Posted by andy on June 08, 2009 at 04:56 PM PDT #

Me parece genial esta caracteristica, es lo que le hace falta a netbeans para que sea el mejor IDE... saludos!!!... PD: Alguien sabe donde puedo descargarla?

Posted by Carlos Javier Caro on July 02, 2009 at 07:59 AM PDT #

muy buena idea... me parece que lineas arriba hay unos cuantos latinos que tambien apoyan la idea... fuera de nosotros cuenta con todo el apoyo de la comunidad latina desarrolladora de java en netbeans... espero que pronto podamos utilizar este diseñador... ya la sola idea es motivo de alegría y emocion... EXITOS

Posted by Mario Amorín on July 11, 2009 at 02:28 PM PDT #

Fantastic idea. Something I've wanted to see for a long time.

Posted by Gerry Polk on October 23, 2009 at 12:18 AM PDT #

This is not a waste of time! This is a NEED for Netbeans. I believe it will definitely complement the tool set and allow the developers to be more efficient as they will only deal with one tool.

Posted by Billy Draper on November 04, 2009 at 04:57 AM PST #

Yeah, it's really cool. And this will definitely make NetBeans the best IDE ever. We are really waiting for such a cool development.

waiting....
waiting....
waiting....

Well, let's see how long we have to wait..........

Posted by Waqas on November 19, 2009 at 02:58 PM PST #

This needs to be transfered to a SUN blog somewhere this blog is dead the Guy left to go to aptana and I don't think anyone is looking at this anymore. Any body have any ideas as to where or how someone at SUN can be made aware of this idea or early work?

Posted by Andy on November 19, 2009 at 06:03 PM PST #

I stand corrected Winston is back! hey Winston any plans on this :-)

Posted by Andy on November 19, 2009 at 06:07 PM PST #

Hello Sir,

This is what I am looking. Because HTML page is nothing but a normal which u can design as you want. So this drag-drop facility will be really helpful for new learners like me. This one is simpler than using Microsoft Word for creating document.

Thank You
Best Regards.

Posted by Ravikiran on November 27, 2009 at 07:45 PM PST #

That s why we love eclipse... For web designers, eclipse+aptana rockssssss... hate netbeans, 6.8 is not worthy compared to 6.7 ,BPEL support was the best thing available, along with visual JSF, now both are gone......So switching back to best( as of current situation )==eclipse , truly wonderful open source community for developers.. long live eclipse

Posted by Aakash on December 16, 2009 at 03:43 PM PST #

@above
Netbeans 6.8 already supports embedded browser plugin.. great code coverage, content assist already there.. A visual designer would be icing on the cake.. not mandatory, since netbeans is now a coder's dream IDE

Posted by Sathish Kannath on January 17, 2010 at 07:16 PM PST #

Use eclipse(for your flavour) + Web Page Editor.

Posted by Eclipse on August 10, 2010 at 01:37 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today