Quaqua, OS X Application Bundle - Maven - Netbeans 6.1
To skip the introduction and scroll straight to the tutorial, click here.
I’m currently developing a program to make the lives of people who maintain large RapidWeaver projects easier. As I don’t know Objective C, I am developing this program in Java. Before I started work on this project my only Java GUI development experiences were in Linux, during a University programming paper. The main focus of the paper was “Object Orientated Program Design” - the programs we had to make weren’t supposed to be pretty, merely functional. We used Eclipse - use of “cheat” interface builders like Netbeans would have resulted in a fail grade. I found manually coding the GUI of my programs to be a real chore. I decided to use the new Netbeans 6.1 to create my RapidWeaver helper program for this reason.
I want my program to look as “native Mac OS X” as possible, as the intended end-users will all be working in Mac OS X.
Now that I’ve finally managed to get my program to look like a native OS X program, I thought I’d share the process with the Internet.
To achieve my desired look & feel for both my personal project and the example created for the tutorial I used the following tools:
Netbeans 6.1
Maven Plugin
The OS X Application Bundle Plugin
Quaqua Library
Netbeans is a multi-language IDE, predominantly used for Java programming. It has a visual form editor which I find intuitive and easy to use.
The code editor is excellent. For the past two years I have been using Eclipse, and have found Netbeans provides many of the same features that I would expect from a mature IDE.
You can learn more about it, and get it from here: Netbeans 6.1.
The Netbeans Maven Plugin (Mevenide2) is a project management tool. Its features are too many to mention here. You want, no, need this plugin.
It is installed via the Netbeans > Tools > Plugins menu.
This plugin is part of the Mojo Project at Codehaus. To quote the creators, this plugin allows one to: “Package dependencies as an Application Bundle for Mac OS X.”
You can find out more about this Maven plugin here: OS X Application Bundle Plugin
To quote from the Quaqua homepage:
“The Quaqua Look and Feel (Quaqua) is a user interface library for Java applications which wish to closely adhere to the Apple Human Interface Guidelines for Mac OS X.”
You may obtain Quaqua and learn more about it here: Quaqua Library.
All of the above products are of extremely high quality, and provide Java developers with the tools we need to create Mac OS X applications with such convincing appearance and behaviour that they would fool Mr. Jobs himself.
Tutorial
1) Download, install and run Netbeans 6.1.
2) Install the Maven plugin: To do this, select Tools > Plugins from the Netbeans menu. Within the window that opens, select “Available Plugins”. Type “Maven” in the Search box, which should remove the other plugins from the catalogue, leaving you with “Maven” and “Netbeans Maven Hints”. Check the box next to both of these then press “Install”. Follow any instructions that appear.
3) Create a new Netbeans Maven project: Select “File > New Project” from the Netbeans menu. Within the window that appears, select “Maven”. Select “Maven Project”, press “Next”. Select “Maven Quickstart Archetype”, press “Next”. Enter some meaningful information in the fields, then press “Finish”.
You should now have a new Netbeans Maven project. Mine looks like this:
4) Setup and configure the Maven “Mac OSX Bundle Plugin” plugin: Expand the “Project Files” node and double click on the “pom.xml” file, which opens it for editing. You will need to add the following to your pom.xml file (between the
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>osxappbundle-maven-plugin</artifactId>
<version>1.0-alpha-2-SNAPSHOT</version>
<executions>
<execution>
<configuration>
<mainClass>com.pagesofinterest.quaqua_maven_netbeans.NewJFrame</mainClass>
<bundleName>Quaqua Maven Netbeans</bundleName>
<additionalClasspath>
<path>/System/Library/Java/</path>
</additionalClasspath>
<vmOptions>-Dcom.apple.macos.useScreenMenuBar=true</vmOptions>
</configuration>
<phase>package</phase>
<goals>
<goal>bundle</goal>
</goals>
</execution>
</executions>
</plugin>
If you’ve named any part of your project differently you will need to ensure you make the relevant changes to your pom.xml file.
More information and another usage example may be found here: Simplericity: Making your Java app shine on OS X.
This step is recommended: add a “profiles.xml” file to your project.
Right click on “Project Files” and select “Create profiles.xml”.
Overwrite the file’s contents with:
<?xml version="1.0" encoding="UTF-8"?>
<!--
Project-local overrides to the build process based on detected or user-provided environmental parameters.
-->
<profilesXml xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/profiles-1.0.0.xsd">
<profiles>
<profile>
<id>Snapshots</id>
<repositories>
<repository>
<id>Codehaus Snapshots</id>
<url>http://snapshots.repository.codehaus.org/</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
<releases>
<enabled>false</enabled>
</releases>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>Codehaus Snapshots</id>
<url>http://snapshots.repository.codehaus.org/</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
<releases>
<enabled>false</enabled>
</releases>
</pluginRepository>
</pluginRepositories>
</profile>
</profiles>
<activeProfiles>
<activeProfile>Snapshots</activeProfile>
</activeProfiles>
</profilesXml>
5) Change project Java version: Right click on the root node of your project (mine, as seen above, is “quaqua_maven_netbeans (jar)) and select “Properties”. In the window that appears, select “Sources”. Here one may change the Java version used for this project. Change it to “1.5” and press “OK”.
6) Create a form for your project: Right click on the root node of your project and select “New > JFrame Form”. Give your new form a name, and make sure it is being added to the correct package. Press “Finish”. Delete the “App.java” file from your project. If you see errors in your new form’s source, open the project’s “Library” node. If one of the files in the library has a red “-” sign in its icon, you haven’t’ downloaded it yet. To do this, right click on the “Libraries” node and select “Download All Libraries”.
Now you should build your project. Right click on the root node and select “Build”. When it has finished, assuming there were no errors, navigate to your project’s directory. Within the “target” folder you should find a .zip, .dmg and .app file. Test out the .app file - it should open with no problems. If it doesn’t, make sure you haven’t missed any part of the above steps.
7) Setup Quaqua: Download the required Quaqua Look & Feel files.
Right click on the “Libraries” node of your project and select “Add Library”. Give the library a GroupID, ArtifactID and Version then press “OK”. Right click on the new library and select “Manually Install Artifact”. Press “Browse” and locate the “quaqua.jar” file, which will be in the “Quaqua/lib” folder that was created when you extracted the Quaqua archive downloaded previously.
In the constructor for the form you created earlier, paste the following:
//Make tabbed panes look like tabbed panes should
System.setProperty("Quaqua.tabLayoutPolicy","scroll");
//Move the menu bar to Mac OS X position
System.setProperty("apple.laf.useScreenMenuBar", "true");
// set the Quaqua Look and Feel in the UIManager
try {
UIManager.setLookAndFeel("ch.randelshofer.quaqua.QuaquaLookAndFeel");
// set UI manager properties here that affect Quaqua
} catch (Exception e) {
System.out.println("Appropriate error message");
// take an appropriate action here
}
More information about Quaqua can be found here: Quaqua Look & Feel.
To give a panel a nice Mac OS titled border, do the following:
Change to the design tab of your form. Add a Panel. Right click on the new panel and select “Customize Code”.
Below the panel’s initialisation line, paste:
TitledBorder titledBorder = new TitledBorder("Panel's Title");
aPanel.setBorder(titledBorder);
Change the name of the panel to whatever you’ve called your panel.
Change to the source view and fix the missing dependency.
Compile and run your project, which should look like this:
Now we’ll add a tab panel, to prove to ourselves that it really does look native.
To do this simply drag the “Tabbed Pane” from the palette into your JFrame. To add Tabs, drag JPanels into the Tabbed Pane.
Build your project, and run the App file that is generated.
This is what you should see:
And that’s it! You’ve successfully installed Netbeans 6.1, installed the Maven plugin, setup Macify and Quaqua!
No you’re ready to start creating the core functionality of your program - good luck!
The example project is available: download it here.
Scroll to top
Flash Slideshows Within Blog Entries
When I wrote my short review of the Besta TA-3000 Electronic Chinese-English Dictionary, I wanted to show readers how easy it is to handwrite characters. The ideal way to do this was to use a Flash Slideshow, so that is just what I did:
Example of entering a Chinese character into the dictionary:
1. Your browser does not support Javascript.
2. If you are using RapidWeaver, please make sure your theme is using the most up-to-date version of the javascript include file.
Better than a textual description, right?
If you’d like to learn how to do this, read on.
You’ll need the “swfobject.js” for this to work. You can get it here (right click to download).
1) Create a RapidWeaver Photo Album page. Select the album that you wish to use for this slideshow.
2) Open the Page Inspector, select the “Page” tab. Check “Use Flash Slideshow”. Check “Scale Image” and set the size you wish the slideshow to be. Still in the “Page” section, select the “Flash Slideshow tab. Uncheck “Controls”, “Info”, “Activate on Rollover” and “Link to Large Images”. Set “Scale Images” to “Scale to Fit”. set slideshow size.
3) Export the page and open the folder in Finder. Open your FTP program and create a folder to hold the slideshow files. I created mine in my blog directory, but it doesn’t really matter where you put yours. Upload all the files to this new folder. Open the “slideshow.swf” file in your browser. It will probably fill the whole page, but it should be working. An example.
While you’ve got your FTP program open, upload the “swfobject.js” file. Note the URL leading to the file.
4) In the Page Inspector, select the “General” tab. Uncheck both “Enabled” and “Show in Menu”.
5) Go to your Blog page and open the Page Inspector again. This time select the “Header” tab, within that select “Header”. Into this field you’ll need to paste* the following:
<script type="text/javascript" src="PATH_TO/swfobject.js"></script>
Change “PATH_TO” to the path to the file.
6) Where you want the slideshow to appear, paste* the following:
<div id="UNIQUE_ID">
Sorry, I cannot display the flash slidehsow for one of the following reasons.<br />
1. Your browser does not support Javascript.<br />
2. If you are using RapidWeaver, please make sure your theme is using the most up-to-date version of the javascript include file.<br />
</div>
<script type="text/javascript">
var so = new SWFObject("PATH_TO_SLIDESHOW/slideshow.swf", "mymovie", "320", "240", "6", "#ffffff");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("base",".");
so.write("UNIQUE_ID");
</script>
PATH_TO_SLIDESHOW should be changed to the full URL leading to the “slideshow.swf” file.
UNIQUE_ID should be a unique name, that no other object in the page is likely to contain.
7) Upload the changes to your Blog page, check to make sure it worked.
If you ran into problems, or notice an error in the tutorial, please let me know by leaving a comment or sending me an email.
Of course, if everything worked perfectly, I’d like to hear about it as well!
Always do this when pasting code. Always.
If you don’t do this, there is a good chance that the code will break. Always do this!
As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.
Scroll to top
JS-Kit Comments + Greybox on Any Page
I’ve been using JS-Kit for comments for a long time, and I’ve been extremely impressed with the quality of their service.
They’ve recently acquired Haloscan, which is great - I dropped Haloscan in favour of JS-Kit some time ago, as I didn’t like the lack of control I felt I had over my comments. I haven’t looked back.
A few weeks ago I was showing my site to a fellow student, when she asked me why people were unable to leave comments on my photo pages. I couldn’t think of a reason, so as soon as I got home I set about fixing this lack.
After thinking about the problem for a short time, I realised that I didn’t want comments to be visible on the page in case one set of photos became wildly popular (yeah, right); which would result in a page of comments with a few photos, instead of a page of photos with maybe one or two comments. For some reason, Greybox popped into my head, and wouldn’t leave. A few hours later, this happened: Hangzhou Day 1.
If you like the effect, read on. Below is a short tutorial explaining how it was accomplished.
1) You must first have Greybox integrated with your site. Jan Erik Moström has written a tutorial explaining how to do this -RapidWeaver - using Greybox in a theme.
When you’re done with that (please make a test page to verify Greybox is working), head over to Code of Interest and download the Friendly Comments snippet.
Friendly Comment Snippet’s User Rating:
2) Open your RW project, select/create the page you wish to add JS-Kit comments to.
3) Open the page inspector, go to the Header > CSS tab. Paste the following CSS:
#comment{
height: 40px;
visibility: hidden;
font-size: 13px;
}
.href{
font-size: 15px;
}
#subtext{
height: 12px;
position: relative;
top: -20px;
visibility: hidden;
font-size: 8px;
font-style: italic;
}
Please note that the CSS may require some editing to ensure the link to the comment page matches the style of your site. Not all of us adore grey links.
The CSS reserves a space for the comments link, which is generated when the page has finished loading.
4) Still in the page inspector, switch to the Javascript tab. Drag the Friendly Comments snippet in. Close the page inspector.
Please note that if you are using a different script on the page that uses the “addLoadEvent” function, you don’t need to add the function again. You will, however, need to make a call to it:
addLoadEvent(friendlyComment);
<html><body>
<div class="js-kit-rating" title="A_TITLE" path="PATH_TO_MAIN_PAGE" starColor="Golden"></div>
<div class="js-kit-comments" permalink="PATH_TO_MAIN_PAGE" path="PATH_TO_MAIN_PAGE"></div>
<script src="http://js-kit.com/comments.js"></script> <script src="http://js-kit.com/ratings.js"></script>
</body></html>
A_TITLE = a title (do this now, it’ll come in handy in the future ;)
PATH_TO_MAIN_PAGE = full URL to the page containing the link to this comment page.
As this page will only be displaying comments, it won’t need much of the styling required for the other pages in your site. The way I accomplished this is possibly not the best, but it worked for me. I copied the CSS from the styles.css file for the theme I use, pasted it between tags, and removed the information from the {...} for each item. It took awhile. I suggest you work through the rest of the tutorial and preview your work to see if you need this step.
View the CSS example
Now you should upload the HTML page.
6) On your main page, wherever you wish the link to the comment page to appear, paste* the following:
<div id="comment"><center><span class="js-kit-comments-count" path="LINK_THIS_PAGE">0 </span><a href="LINK_TO_COMMENTS_PAGE" class="href" title="TITLE_OF_COMMENTS" rel="gb_page[***X ***Y]">Leave a comment!</a></center></div>
<center><p id="subtext">(Comments will open on top of this page)</p></center>
<script src="http://js-kit.com/comments-count.js"></script>
You will need to change the following:
***X = Horizontal size of the comment Greybox
***Y = Vertical size of the comment Greybox
LINK_TO_THIS_PAGE = the full URL to the page this code is to be pasted in
LINK_TO_COMMENTS_PAGE = full URL to the comments page
TITLE_OF_COMMENTS = Text you wish to appear at the top of the comment Greybox
This code should go in either the main body of the page or the sidebar. On my photo pages I’ve pasted it into the “header” area of the Rapidflicker plugin.
As an example, this is the exact code I use for my Hangzhou Day 1 photo page:
<div id="comment"><center><span class="js-kit-comments-count" path="http://pagesofinterest.net/mikes/photo/hangzhou/day_1.php">0 </span><a href="http://pagesofinterest.net/mikes/photo/hangzhou/day_1_comments.html" class="href" title="Hangzhou Day #1 - Comments" rel="gb_page[450 490]">Leave a comment!</a></center></div>
<center><p id="subtext">(Comments will open on top of this page)</p></center>
<script src="http://js-kit.com/comments-count.js"></script>
<style type="text/css" media="all">
img {border: none;}
body {width: 435px;font-size: 11px;font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;color: #333333;margin: 10px;text-align: center;}
a:link {color: #808080;text-decoration: underline;}
a:visited {color: #808080;text-decoration: underline;}
a:hover, a:active {color: #b3b3b3;text-decoration: none;}
blockquote {font-size: 10px;color: #808080;padding: 7px 0;}
#top {display: none;}
#shadows {display: none;}
#hdrcolor {display: none;}
#overlay1 {display: none;}
#overlay3 {display: none;}
#overlay4 {display: none;}
#header {display: none;}
#contenttop {display: none;}
#bottom {display: none;}
.clearer {clear: both;}
#container {width: 435px;text-align: left;margin: 0 auto;padding: 0;}
#pageHeader {}
#pageHeader img {display: none;}
#pageHeader h1 {display: none;}
#pageHeader h2 {display: none;}
#contentContainer {width: 440;padding-top: 10px;}
#contentContainer #content {margin-left: 0;padding: 0;}
#sidebarContainer {display: none;}
#sidebarwrapper {display: none;}
#sidebartop {display: none;}
#sidehead {display: none;}
#sidebarbottom {display: none;}
#sidebarContainer #sidebar {display: none;}
.image-left {float: left;margin: 3px 3px 3px 0;padding: 3px 3px 3px 0px;}
.image-right {float: right;margin: 3px 0 3px 3px;padding: 3px 0 3px 3px;}
h1 {}
h2 {}
h3 {font-size: 13em;}
h5 {padding: 0;font-size: 18px;margin: 0;color: #999;}
.blog-entry-comments-body {text-align: left;}
.blog-entry-comments-body-even {background-color: #eee;text-align: left;padding: 5px 8px;}
.blog-entry-comments-body-odd {background-color: #fff;text-align: left;padding: 5px 8px;}
</style>
Back to step #5
Always do this when pasting code. Always.
If you don’t do this, there is a good chance that the code will break. Always do this!
As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.
Scroll to top
