NB 6.0 plugin for Predefined Visual Web Page Layouts

One of the glaring gap in the Netbeans Visual Web Application development is lack of ability to create Pages using predefined Page Layouts. Currently Visual Web users create a Visual Web JSF page using New -> Visual JSF page. This creates the "boring" empty page with no page layouts. It is up to the users to create their page layouts. Users tend to create Page Layout using external tools like Dream Weaver and import them in to VW pages. Unfortunately, page layouts created using these external tools require lots of hand crafting to fit in the VW design paradigm. I was thinking, how nice it would be if Visual Web provides some predefined Page Layouts for the users to select when they create their pages. So I wrote this experimental module that allows you to select such predefined Page Layouts.

Disclaimer:This is not a Netbeans 6.0 release supported plugin. It did not go through any rigorous QA tests like other Netbeans 6.0 Visual Web plugins. So comes without out any warranty.

Download the plugin sources: PageLayoutTemplatePlugin.zip

Steps to install the plugin and create page from Page Layout

  • Download and install Netbeans 6.0 Beta2 (Important: You need NB 6.0 Beta2 or later)

  • Download and install the plugin org-netbeans-modules-visualweb-woodstock-pagetemplates.nbm

  • Once you installed the plugin, it is easy to create a Visual Web Page with one of the predefined Page Layout. Install Page Layout Module

  • Next create a Visual Web Page using New -> Visual Web JSF Page as usual. You will notice that New wizard has one more panel. Page Layout creation wizard

  • Select a Page Layout and click finish. This creates the page with desired layout which can be edited in the designer later.
    Page with Page Layout in the designer

Note: As I mentioned earlier, this is an experimental module and the Page Layouts I've added are experimental too. If you think this module should be converted to an officially supported module, leave a comment to this blog or vote for the feature request at the issue #120748. My idea is to pick some layouts from Open Source Web Design and convert them as Visual Web Page Layouts and present them via the New Page Wizard. Here is an example (andreas01)

OSWD Page Layout

See also

How to Create a CSS based Page Layout
How to create your own Visual Web Page Layout Plugin

 

Comments:

This might be pretty useful. I feel that it should be part of the official visual web pack.

Posted by James Selvakumar on October 31, 2007 at 11:25 AM PDT #

Very good idea, Winston! I really apreciate this. for us, developers, and students that want to create a good site without the guidance of a design professional, these are really helpful.

It would be of great help if it become in a near future as a part of netbeans visual web.

Congrats for the idea.

Posted by Fábio Chicout on October 31, 2007 at 12:33 PM PDT #

A great idea. i'm a programmer but not a desginer. i always need such things, because designing a page takes too much time for me. You may even build a market place for professional templates if you want.

Posted by ilhami visne on November 01, 2007 at 04:11 AM PDT #

I installed the plug in as told, but when I do "New -> Visual Web JSF Page" command, I only see the original page.

What I am doing wrong?
Regards,
Lorenzo

Posted by Lorenzo Jimenez on November 01, 2007 at 06:25 AM PDT #

Lorenzo, hope you pressed the install button after loading the module (I forgot couple of times and wondered what happed :) ) in the plugin manager. Make sure the plugin does not shows up in the "download" tab and shows up correctly in the "installed" tab as "Woodstock Page Templates".

Posted by Winston Prakash on November 01, 2007 at 06:50 AM PDT #

Lorenzo, forgot to mention that you must install the plugin in NB 6.0 Beta2 or later. It doesn't work with older NB6.0 builds.

Posted by Winston Prakash on November 01, 2007 at 06:51 AM PDT #

Thanks,Winston Prakash
your plugin help me a lot.

Posted by xiaochong on November 01, 2007 at 08:16 PM PDT #

Dear Winston,

I have NetBeans IDE 6.0 Beta 2 (Build 200710212201), and I am sure that I pressed the install button when installing the plugin, because I have the "Woodstook Page Templates" in the Installed tab of the plugin window.

Regards,
Lorenzo

Posted by Lorenzo Jimenez on November 02, 2007 at 12:06 AM PDT #

Lorenzo, I just tested on two machines it worked fine. Also Roumen blogs says it works fine. http://blogs.sun.com/roumen/entry/page_layouts_in_visual_web

Posted by Winston Prakash on November 02, 2007 at 07:53 AM PDT #

>I installed the plug in as told, but when I do "New -> Visual Web JSF Page" command, I only see the original page.

>What I am doing wrong?

I also got the same result!!

And I have NetBeans IDE 6.0 Beta 2 also, and I have the "Woodstook Page Templates" in the Installed tab of the plugin window.

Sotohiro

Posted by Sotohiro Terashima on November 02, 2007 at 08:29 PM PDT #

Self Comment to previous :
Posted by Sotohiro Terashima on November 03, 2007 at 03:29 AM PDT #

That was my misunderstanding.
I thought Page1 that was created first, could be applied this feature.
This feature could be applied to newly created page after Page1.
Mr.Winston your work is great!

Sotohiro

Posted by Sotohiro Terashima on November 02, 2007 at 09:59 PM PDT #

Hi
This is good tool for visual web

Posted by Saeed Zarinfam on November 03, 2007 at 09:44 PM PDT #

Hi. Thanks for this plugin. I`ts exactly what i need.
u have my vote.

Posted by javiersinnada on November 08, 2007 at 12:15 AM PST #

hi. can u teach us how convert a desing from open source web desing to vwp?

Posted by javiersinnada on November 08, 2007 at 12:23 AM PST #

Hi Javier, I'm writing a blog that explains how to create a CSS based Fixed Page Layout using Visual Web layout components. I will post it soon. Hope that blog will help you as starting point for converting the OSWD in to VWP design.

Posted by Winston Prakash on November 08, 2007 at 12:33 AM PST #

Winston,

I just installed and played with it. It is a good step in the right direction. I noticed that you are using Panels -- i.e hearderPanel, sideBarPanel, contentPanel, etc. Would it be better to use page fragments instead of these static panels. The advantage would be that if we have to update the header or any other "panel", we can do it just by updating the fragment instead of updating every single page.

Posted by Muhammad Ali Sabir on November 10, 2007 at 08:13 AM PST #

Winston,
could you make the source code for the plugin available?

So that we could bundle our own templates with the plugin for developers in our organization.

Thank you in avance,
regards,

Posted by Thomas Wolfram on November 28, 2007 at 06:51 PM PST #

Thomas, I have checked in the source code in to netbeans repository. You can download it from

cvs :pserver:anonymous@cvs.netbeans.org:/cvs -co visualweb/woodstock/pagetemplates

Posted by Winston Prakash on November 29, 2007 at 01:39 AM PST #

Winston, I am migrating project from 5.5.1. to NetBeans-6.0-RC2, it was Installed succesfully, and "WoodStock Templates" Plugin too but when I try to create a new Visual Web JSF Page in the migrated project, get only two steps 1.Choose File Type and 2.Name and Location.
However, if I create a new project and add a new vw JSF Page, the third step "3.Select Page Layout" is available.
Please, what lack in my migration process ? (5.5.1 to 6.0-RC2).
Beforehand, thanks.

Posted by Willian Suarez on December 02, 2007 at 02:53 AM PST #

Hi Willian, Is your 5.5.1 project based on J2EE 1.4, if so I'm afraid you won't get it, since J2EE1.4 project do not support Woodstock components.

Posted by Winston Prakash on December 02, 2007 at 04:58 AM PST #

Great Works, netbeans Visual Web needs this component.
i vote for it in NetBeans Site too.
Thanks.

Posted by Reza Azizi on December 03, 2007 at 01:51 PM PST #

The plug in is great, sadly there's no template option or doesn't create there's missing an option to use the default (NB) template. If you don't want to use one of the templates you need to deactivate (at least) the plug in. Should work around that. The plug in looks great!

Posted by Javier Ortiz on December 03, 2007 at 09:51 PM PST #

Hey!

I tried to install your plugin, but it failed,
The Errorexception is: "Networking problem in file:/C:/Users/Christoph/Desktop/org-netbeans-modules-visualweb-woodstock-pagetemplates.nbm"

But my internet connection is established and I'm not using a proxy server.
The error occurs after acception of the license agreement, while NB is trying to download the plugin.

I'm using NetBeans 6.0 Finale Release
Can anybody help me?
Thanks!
Best regards

Posted by Chris on December 04, 2007 at 05:46 AM PST #

Could you please make the RedTie sample from http://www.oswd.org/ ?

Posted by Ezequias Rodrigues da Rocha on December 09, 2007 at 10:08 AM PST #

Hi!

That's a really useful plugin! Thanks for it.
My only problem is that I cannot place a page fragment box into a panel on a page created based on a template. It would be necessary to be able to create the same dynamic header/footer or side bar content for all pages in a web application.

Best regards

Posted by Tibor Finta on December 09, 2007 at 11:06 PM PST #

Hi Tibor, one of the reasons why I did not use Page Fragment in the Page Layout is related to limitation in the Netbeans Templating mechanism. Netbeans Templating mechanism allows only one templated file to be instantiated at a time. However, if Page Fragments are added in to the Page Layout, then that involves instantiating multiple template files for single Page Layout. I have asked for enhancement request to the Netbeans Templating mechanism for this purpose. So expect Page Layouts with Page fragments for the header/sidebar/footer sections in future.

Posted by Winston Prakash on December 10, 2007 at 03:04 AM PST #

Winston, great job! This is definitely useful and I expect it will only get more so in the future.

Posted by Steve Wells on December 11, 2007 at 11:20 AM PST #

Mr Winston,
In the final release from NB6, dont get the options, i install the plugin corretlu, but in the new project option doesnt exist the templates, any suggestion?

Posted by Martín Arbañil Martinez on December 17, 2007 at 12:03 PM PST #

I think this plugin deserves to be a officially supported plugin. It would be nice to use it with open source web templates.

Posted by Çağlar Gülçehre on December 26, 2007 at 02:39 PM PST #

Mr Winston,

It's just perfect; especially for a guy like me that hates web design and likes to CODE!!!

Posted by Trooper on December 27, 2007 at 04:07 PM PST #

Mr Winston,
I want to use Myface tomahawk JSCookMenu instead your top menu bar, but always get "webui.suntheme.widget.common s null or not an object", and the layout looks not right. Could you please give me any idea? It's really a big helper! Thank you.

Posted by Amy on December 29, 2007 at 02:01 AM PST #

Hello Thomas I installed the Plugin seccessful. Really a good Idea

Posted by Antonio Persichini on January 04, 2008 at 08:02 PM PST #

Mr. Winston,

I am a java programmer. I am facing some problem prior to geting this plugins. This is realy a nice and powerful thinking. You have solved my lot of problems. Thanks for this plugins and my vote is for you.

Posted by Dilip Chaudhary on January 11, 2008 at 07:13 PM PST #

,

Posted by guest on January 15, 2008 at 04:03 PM PST #

Hello Sir,
i must say you've created such a great plugin here... i've tried it with NB 6 and works fine (the 2nd version using no-whitespace directory name). but now i need to use my own template ... and i don't have access to cvs port.. have you published the code other than in the CVS server?thanks sir :)

~sorry for my bad english

Posted by Aria Wiratama on January 22, 2008 at 03:20 PM PST #

Hi Aria, I've added a link "Download plugin sources" for you to get the source zip (pagelayouts.zip). I'm in the process of writing a blog which explains how to create a page layout (already published) and then how to convert it in to a plugin. Thanks.

Posted by Winston Prakash on January 22, 2008 at 10:17 PM PST #

As a student working on a netbeans web app this is exactly what i had been wishing for, thanks.This plugin is a definite YES!
Now that i have downloaded and installed the plugin. Also i have created Page2 with a layout from the template But i cant seem to edit the Text "Header" "sub Header" "Main Content" with my own text.Can you please guide me in creating a simple page of my own.

Posted by Nusrat on January 27, 2008 at 03:26 AM PST #

Hi Nusrat, the text is added to the StaticText component. So select the static text, in the designer or outline and then click on the [...] button near the "text" property in the property sheet. There you can edit your text.

I've added a blog that explains step by step creation of your own Page Layout (http://blogs.sun.com/winston/entry/creating_css_page_layout). I'm also in the process of writing a blog to explain how to create a plugin to put that layout as template in the "New Visual Web page" Wizard.

Posted by Winston Prakash on January 27, 2008 at 03:35 AM PST #

Thanks a lot Winston, yes i can edit the page with my own text now. i have seen your creating css page tutorial, its great again. I am about to add a <form> in my i hope i can do that too.
In my utter desperation I am lucky to have found your blog :)

Posted by Nusrat on January 27, 2008 at 02:24 PM PST #

very good, thanks , Arapongas-PR-Brazil

Posted by guest on February 09, 2008 at 12:16 PM PST #

Hi Thanks for this tutorial. I'm a beginner concerning Java and Visual Web. Just for my understanding. Can this kind of Template be used in a 'real' Web Application where you have a menu and Data pages that interacts with a database. Or is this just for Web Pages (Home Pages).

Posted by Martin on February 18, 2008 at 05:10 PM PST #

Hi Martin, Netbeans Visual Web is not meant for static web sites (Home Page). You have frontpage or dreamweaver for that. VW is meant for creating data driven web application.

Posted by Winston Prakash on February 18, 2008 at 10:20 PM PST #

Just wanted to add my voice to all the others. This great tool has be officially adopted. Hmmm, keep up the good work.

Posted by solawd on February 24, 2008 at 04:55 PM PST #

Winston ... I am running into an interesting issue!

I have created 2 pages, one before I installed the plugin (test.jsp) and one after (test1.jsp)
Both the pages attempt to set the text of a static label, within the init() method ...

test.jsp ...
this.staticText1.setText("Yo Yo Ma!");

test1.jsp (I had used the last layout from the template the one that has all)
this.staticText11.setText("Yo Yo Ma!");

well, when test.jsp loads, the statislabel shows the value, coded from the init method
when test1.jsp loads, i dont see the value that was coded in the corresponding init method

what could be going on?

thanks

Posted by Nanu on February 27, 2008 at 09:20 AM PST #

Winston

I am stumped with this issue. Here are the 2 URLs you can try it out ...

Here is the page that I created before I installed the pagelayout plugin ...
http://inwizage.homeip.net:8080/repairtime-war/faces/test.jsp
Here on init, I am setting programatically the value of the static label as mentioned in my posting above. I also further change the value of that label with what is typed in the text field, when the user clicks the button. All this is working.

Here is another page I created after I installed the pagelayout plugin ...
http://inwizage.homeip.net:8080/repairtime-war/faces/test1.jsp
Just like before, I am setting the value of a static label (staticlabel11); I am also setting the tooltip just for giggles. If you mouse over the text "Main Content" you will see the tool tip display correctly. But the value that I am setting for that static label's Text but it is not getting set.

BTW, I'm noticing javascript errors (from firefox I can do javascript: to see the javascript errors) - I think these are related, but dont know how to resolve this. Please advice.

Posted by Nanu on February 29, 2008 at 03:27 AM PST #

Looks like if from the netbeans interface I set the text, programatically I am not able to change the value ... even in the version that doesnt use the page template. i guess i will google on that next ... but let me know the javascript errors are when using the page template. Thanks

Posted by Nanu on February 29, 2008 at 07:42 AM PST #

Hi Nanu, the fundamental principle of JSF is, the value set in the JSP takes precedence over the one set via Java. So if your JSP has something like

<webui:statictext binding=#{Page1.staticText1} text="JSP Text"/>

and in your Java you have

staticText1.setText("Java Text");

when you run, you always get "JSP Text".

Posted by Winston Prakash on March 03, 2008 at 12:10 AM PST #

Hello sir.
I'm new bee to both J2EE and VW JSF.I'm working as a trainee.
I want menus in visual web JSF.I've tried the plug in.But i want a menu where i can have the differnt kind of effects like cursor and animation ones.
Kindly reply as soon as possible.
Thanks in advance

Posted by Preeti on March 12, 2008 at 03:51 PM PDT #

You are correct ... thanks man

Posted by Nanu on March 19, 2008 at 09:06 AM PDT #

Mr winston.

Buen dia, llevo casi tres dias dando vueltas como cambiar o ponerle un color de fondo a una caja de texto con netbeans 6.0.1 y no me lo toma, porfavor ayuda en este pequeño problema, he probado asignado una styleclass no lo toma le doy la propiedad en el style y tampoco, ayuda plis

Posted by Jaider Rdoriguez on April 05, 2008 at 11:19 PM PDT #

Winston,

Anything to watchout for when creting your own Web Layout Plugin with NB6.1? The reason I ask is I have gone thru your writeups on creating CSS page layout and the Netbeans Visual Web Page Layout Plugin, using 6.1 and I dont see the page template I have created. Actually whtn I try to add a new visual jsf page, the next button is grayed out and all i can click at is the Finish button.

Please advise, help.

Thanks

Posted by Rambo on May 11, 2008 at 06:37 AM PDT #

pne thing to add ... i observed when I created the netbeans module project, the layer.xml was not created. So I had manually created that file. Dont know of that is due to 6.1 or what, just wnated to share that, should it turn out to be a clue.

Posted by Rambo on May 11, 2008 at 03:18 PM PDT #

Guys ... any ideas? Please

Posted by Rambo on May 13, 2008 at 07:04 AM PDT #

Hi Rambo, one of the things you could do is to open the my original plugin project and your project. Then in the project window open the Important Files -> XML layer and then compare it contents. The folder hierarchy in the layer files is important.

Posted by Winston Prakash on May 13, 2008 at 11:29 PM PDT #

Looks simpler than it realy is. But it definetly looks good. Thank you!

Posted by Q5 Grafisch Webdesign on July 09, 2008 at 11:37 PM PDT #

Hi Winston, thank you by your component, it's so good, but I have one question, I did a layout for the firstpage.jsp when I use my link to go to the next page I don't know if can I have my next page like my fist page? It's possible? If can you help me I'll so greatfull for your help!

My congratulations again!!!

Posted by Targino Silveira on July 28, 2008 at 04:47 AM PDT #

Isn't it the idea?. You create first and second page with the same Page Layout. Then they should look alike. However, you might want such a way that changes should reflect uniformly in all pages. In that case it is better to create Page Layout with embedded Page Fragments. Unfortunately I didn't find time to implement it.

Posted by Winston Prakash on July 28, 2008 at 05:04 AM PDT #

Hi,

I am using Netbeans 6.1 However, after selecting a 'Visual Web JSF Page' I am not given the option to select a Page Layout template.

Any help would be greatly appreciated.

Thanks
Sajid

Posted by Sajid Haniff on August 07, 2008 at 10:43 AM PDT #

Hi,I am new to Netbeans.I have tried to add some plugins to the Netbeans IDE 6.1 but when I click on Plugin tab from my Tools option system becomes hanged nothing will work in the IDE,only after restarting it will again work good the same problem arises when I attempt to open plugin window.Further I have tried installing again but problem continues.I am using Ubuntu 8.2.Please guide me to solve the problem.

Thanks...

Posted by Sanjeev on September 16, 2008 at 05:41 PM PDT #

Hi
Thanks for this great job - Clear usefull for beginners and for others too !
Frenchy guy

Posted by frenchy guy on October 12, 2008 at 06:07 PM PDT #

Its simply great!
As a developer I hate designing, like others it kills a considerable portion of my time. Now I think I have got a way to out of it :)

Posted by Bahar on October 13, 2008 at 02:56 AM PDT #

Hi Winston

I would really like to try this plugin but unfortunately am unable to load it into my version of Netbeans (6.5). After downloading and unzipping, I go to the download tab within plugins. I navigate to the directory I have unzipped your plugin to, but I am unable to find a .nbm file to open?

Do you or anyone have any ideas.

Any help appreciated.

Thanks.

Posted by Jon Smith on March 07, 2009 at 04:10 PM PST #

Hi !!

I've tried to install the plugin, but i don't know how can I activate it, the plugin options don't appear in the netbeans.. I have netbeans 6.5.1 and win xp.

Could you help me ?

Posted by Juan on July 29, 2009 at 02:38 AM PDT #

These templates are really great for low cost webdesigning and in order to outsource websites.

Posted by Outsource websites on October 09, 2009 at 07:34 PM PDT #

This is really amazing, I didn't know something like this had been created, I'm pretty new in Java Web but this make me continue learning and developing... Just great!

Posted by Gabriel Mendez on November 02, 2009 at 06:55 AM PST #

Hi,

I am using Netbeans 6.7.1 with jre 1.6.x. I have installed the Visual Web Page Layouts plugin. As Lorenzo reported , I am not seeing the Pagelayout panel. Please help me what I am doing wrong

Posted by Rao on December 03, 2009 at 07:35 AM PST #

It doesn't work for Netbeans 6.8

Posted by Imos on February 02, 2010 at 09:48 PM PST #

Hi all!
Probably many of you knows that VisualWeb was 'deleted' in the new Netbeans 6.8 and it is not possible to install any PlugIn as this one.
This is a big step backwards from SUN (now Oracle) specially for all developers that use this functionality.
Officially the small explanation is the Visual frame work is unstable but of course there are other reasons. Probably a concurrent software in Oracle products or something else.
Does anyone knows exactly what happened ?

Regards
Jose

Posted by Jose on February 18, 2010 at 06:58 PM PST #

hi Winston Prakash I always appreciated your work on visual web jsf and learned a lot from your blog regarding this. IS visual web jsf development really dead what are the reason for this what is best alternate .

Posted by sahil kaushal on July 06, 2010 at 07:06 PM PDT #

Unfortunately that is true. Visual Web is no longer continued. The best alternative is Fusion Application Development using JDeveloper (http://www.oracle.com/technology/products/jdev/index.html)

Posted by Winston Prakash on July 07, 2010 at 12:38 AM PDT #

it doesn't work for netbeans 6.9

Posted by Pertamax Gan on July 12, 2010 at 11:54 PM PDT #

Thanks for rely. really sad news that vw jsf is no more but I think already enough work had done on it to use it in projects. Thanks once again

Posted by sahil kaushal on July 13, 2010 at 12:56 AM PDT #

This is the coolest thing I have ever experienced in Java Visual Web Development. Since I realised that Visual Web is discontinued in NetBeans IDE I have been keeping the 6.0 version like a jewel. I switched to Visual Web in Eclipse (Download link is http://downloads.businessobjects.com/akdlm/crystalreportsforeclipse/2_0/cr4e-all-in-one-win_2.0.6.zip) before realising that I can always go into the NetBeans Archives to download the previous versions that support Visual Web Development it if I needed it. I am currently downloading NetBeans 6.5.1 to see whether it is supported. I will install this great plugin in it. Great work!! Keep up the good work.

Posted by Sadart Abukari on October 23, 2010 at 05:12 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