Geertjan's Blog

  • September 2, 2005

Branding a Rich Client Application in NetBeans IDE 5.0

Geertjan Wielenga
Product Manager
I've been looking at some really cool things that'll be part of NetBeans IDE 5.0 (yay, now that everyone's made up their mind -- and picked '5.0' -- I can finally stop saying 'the upcoming release'). The magic word for this blog entry is... branding. Branding is what you do when you have a finished rich client application built on top of the NetBeans Platform. At that stage, you want to hide the fact that you're using the NetBeans Platform. (The best part of all is that, after you've finished branding, you can use the IDE to create an executable for you -- with a branded name -- which is the NetBeans Platform plus, merged with it, the rich client application that you've made.) Here are the things that are encapsulated in the term 'branding': (a) remove the NetBeans Platform splash screen and replace it with your own, (b) specify a progress bar, (c) name the executable, (d) provide a title for the titlebar, (e) localize where necessary, and (f) hide menus, menu items, toolbars and toolbar buttons that belong to the NetBeans Platform but that you don't need in your application. And the cool thing is... NetBeans IDE 5.0 provides a user interface for all of these activities! So, here's how you'll do it:
  1. Right-click a module suite project and choose Properties:

  2. In the Project Properties dialog box, click Basic Branding in the left margin, and then click 'Use basic branding information for building' (click to enlarge):

    This is also where you specify a name for the executable and a title that will be displayed in the titlebar of the application (click to enlarge):

  3. When you click OK, you'll find that the IDE has magically created a folder called 'branding'. (All you need to do for this to happen is click the checkbox in the panel shown in the previous step.)

  4. Now go back to the module suite project's Project Properties dialog box and, this time, click Splash Branding in the left margin. This is what you see (click to enlarge):

    The above NetBeans Platform splash screen is the default splash screen for your rich client application. Click Browse and add your own (click to enlarge):

    As you can see, you can also specify whether a progress bar should be shown, as well as the progress bar's color and the size of the text that accompanies it. When you make changes to the colors in the panel above, you can immediately see the effect in the splash screen preview, which means that this allows you to do some final tweaking before adopting the splash screen of your choice. Not a bad touch, huh. (I mean, this part could've consisted of nothing more than a browse button and a preview screen, but clearly a lot more detailed thinking went into this -- the colors, bar bounds, text bounds, and font size are something one wouldn't expect in the first release of this feature.)

  5. Next, add a folder called 'resources' and create an XML file called 'layer' with, for example, the following content -- and note that the location of the folder and layer file have to be exactly as specified in the screenshot below (click to enlarge):

    The layer file above specifies that the NetBeans Platform's File toolbar, Edit toolbar, Edit menu, and several items in the File menu, will all be hidden -- because this particular rich client application doesn't need these toolbars, menus, and menu items.

  6. Now you're ready to create a ZIP distribution of your rich client application. That's as simple as choosing 'Build ZIP Distribution' in the module suite project's pop-up menu:

    I've added a small Ant script to my build.xml file. It unzips the ZIP file and launches the application's executable:

    <target name="FeedReader" description="feedreader">
    <unzip src="dist/feedreader.zip" dest="unzipped"/>
    <exec executable="unzipped\\bin\\feedreader.exe"/>

    So, in other words, because NetBeans IDE has created your very own executable, you can treat it like any other executable and launch it from inside the IDE, using an Ant script. Not bad, huh. I think it's pretty cool. The only thing you had to do manually was create the layer file and the folder that contains it (for internationalization, there's a Bundle.properties file created for you by NetBeans IDE in the branding folder).

    When the above target is run, the rich client application's splash screen is shown, with the progress bar defined in the Basic Branding screen, and then the application appears -- with the title specified in the Basic Branding screen, minus the menus, menu items and toolbar buttons that I excluded, using the layer file.

I'm not really sure whether there's all that much more that you could expect NetBeans IDE to do for you in terms of branding. Pretty much everything I'd hope to be done for me is done! If anyone has any additional wishes or desires in relation to branding, I'd be interested to know what they are.

Join the discussion

Comments ( 10 )
  • Rich Unger Monday, September 5, 2005
    All the options for the splash screen have been around for quite some time. You just had to brand all the bundle keys manually. This is just the first version where they're exposed with some kind of UI (or even clear documentation).
  • Wulgar Friday, January 6, 2006
    I've got one question about branding. I want to develop J2EE client on Nb Platform, and I must provide login screen. It would be great if I can integrate it with splash screen. Is it possible?
  • Fabiano Thursday, August 24, 2006
    I'm need a login sreen too !!! It's possible ???
  • Geertjan Thursday, August 24, 2006
    Sure. But you have to create it yourself and use the Module Install wizard to create an Installer class for you. An Installer class is called when you install a module, which is when you'd like the login screen to appear. See the dev@openide.netbeans.org mailing list, because others have asked this same question.
  • Fabiano Friday, August 25, 2006
    Do you have some sample of the login screen in Installer class?
  • kgeoghe Thursday, August 31, 2006
    I am using NetBeans5.5 beta 2. I dont have the basic branding option in the properties dialog. I can add a splash screen OK.
    In the Module Manager under libraries NetBeans IDE Branding is switched off and is deactivated so I cant torun it on. Any Help Appreciated. Thanks.
  • Geertjan Thursday, August 31, 2006
    "Basic Branding" is now called "Application". In the Module Suite project's Project Properties dialog box.
  • kgeoghe Thursday, August 31, 2006
    Thanks. I can specify the application icon there (the 48x48 image), but how can I change the small icon in the title bar of the application, and the task bar icon (which I presume is the same thing)
    I've got a logo48.gif, logo32.gif and logo.gif all at the same location. thanks again.
  • Geertjan Thursday, August 31, 2006
    Those you need to brand manually. In the module suite's "branding" folder (look in the Files window) you need to dig into somewhere and replace the icons there with your own icons. Write to dev@openide.netbeans.org for details. If you want to replace the executable icon with your own, you need to use one of the freely available resource editors (look on-line, and there are some references somwhere in this blog) that can replace the executable icon for you.
  • Jennifer Monday, August 13, 2007

    Does this still work when you build a distribution? I am still seeing the same default NetBeans icon in the title bar and About box when I run my application executable.

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.