free web page hit counter

« Expected NB 6.0... | Main | NB 6.0 Tip: Finding... »
Wednesday Oct 31, 2007

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

 

Posted at 05:46PM Oct 31, 2007  |  Permanent link to this entry

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 06:25 PM 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 07: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 11: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 01:25 PM 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 01:50 PM 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 01:51 PM PDT #

Thanks,Winston Prakash
your plugin help me a lot.

Posted by xiaochong on November 02, 2007 at 03:16 AM 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 07: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 02:53 PM 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 03, 2007 at 03:29 AM 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 03, 2007 at 04:59 AM PDT #

Hi
This is good tool for visual web

Posted by Saeed Zarinfam on November 04, 2007 at 04:44 AM PST #

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

Posted by javiersinnada on November 08, 2007 at 08: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 08: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 08: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 04:13 PM 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 29, 2007 at 02:51 AM 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 09: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 10: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 12:58 PM 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 09: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 04, 2007 at 05:51 AM 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 01:46 PM PST #

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

Posted by Ezequias Rodrigues da Rocha on December 09, 2007 at 06:08 PM 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 10, 2007 at 07:06 AM 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 11: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 07:20 PM 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 08: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 10: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 28, 2007 at 12:07 AM 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 10:01 AM PST #

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

Posted by Antonio Persichini on January 05, 2008 at 04:02 AM 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 12, 2008 at 03:13 AM PST #

,

Posted by 62.3.32.54 on January 16, 2008 at 12:03 AM 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 11: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 23, 2008 at 06:17 AM 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 11: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 11: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 10:24 PM PST #

great pluggin

Posted by mirc on February 08, 2008 at 07:46 AM PST #

thanks

Posted by forum on February 08, 2008 at 07:47 AM PST #

very good, thanks , Arapongas-PR-Brazil

Posted by 201.66.195.244 on February 09, 2008 at 08: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 19, 2008 at 01:10 AM 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 19, 2008 at 06:20 AM 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 25, 2008 at 12:55 AM 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 05:20 PM 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 11: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 03:42 PM 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 08: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 10:51 PM PDT #

You are correct ... thanks man

Posted by Nanu on March 19, 2008 at 04:06 PM 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 06, 2008 at 06:19 AM 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 01:37 PM 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 10:18 PM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed