Contextual PortletMode changes using the JBoss Portlet Bridge

Posted by: wesleyhales under Java
No Comments

By default, the JSR-301/329 portlet bridge manages your navigation history during PortletMode changes. Meaning that, if the user is clicking around in the portlet "view" mode and decides to click the help icon (help mode), the user should be directed to the place where he left off in help mode - and vice versa. Of course, if the user has never been in help mode during the current session, he will go to the default help viewId.

Why use portlet modes instead of javascript widgets?

First I would like to give you a little justification of the beauty of this feature. Some people will argue the point of "Why do you need different modes like, Help and Edit?", when you could add some cool "javascript of the week" that would dynamically display what you intended to present in one of the given modes. Well, you could develop your interactions either way but it really isn't a question of why. It's a question of "How?". How do you want users to interact with your applications? And since you have already made the decision to invest in a portal solution, why not use the features that are built in and that stay consistent across the entire UI? Any UI Developer or Interaction Designer will tell you that adding cool javascript widgets adds another layer of complexity and maintenance, thus adding to developer time and bottom line ROI. In addition, when you develop any servlet based application to work within a portal environment, you are properly separating your concerns when you use these modes (without even realizing it in most cases). You are presenting distinguished flows for different trains of thought and making it easier for users to accomplish the task at hand.

The Usecase

Ok, off the soap box and onto the use case. Let's say your user is filling out a beloved expense report. It's probably one of his top 5 things that he loves most about his job ;) Seriously, his IT department just launched a new intranet portal using the latest and greatest GateIn platform and they completely revamped their old Seam application that was used for expense report submissions to run as a portlet.

So, Joe User starts to fill out his expense report in a 6 step wizard. He gets through the first few steps and arrives at a screen asking for his cost center and other details that he has no idea about. Behold the beautiful question mark(help mode) in the top right hand corner of his portlet window! Joe clicks the button and sees exactly the information he needs, and he also sees a link at the bottom of the screen that says “add this to the form”. Joe clicks it, and is returned to his expense report with all of the details pre-populated in his form. Not only was the help screen easy to understand, but it was just a basic .xhtml page that can be templated and maintained by any UI developer without any special javascript kung fu.

The next screen (in view mode), asks him to itemize each receipt and expense. Since he took a trip to Euro-land, all of his receipts are in Euros. And since he recently just got his internet privileges suspended (and no, he won't tell us why) he has no idea what the current conversion rates are. Once again, Joe clicks the help button and is presented with a clickable table of currency options. Not only that, but the finance department has placed some important notifications on this page via CMS. Joe reads the notifications and clicks on "Euros" and is taken back to a modified input table that auto converts his itemized euro(€) values to USD($).

As you can see, these are just random examples of possibilities of detecting PortletMode changes with GateIn, Seam, and RichFaces. The real beauty of this code is detecting the actual mode change and providing contextual help. This is not currently provided by the bridge as a default behavior, so here is the code to do it:

The Code

First create a simple session bean with the following code. This will allow us to get a handle on the current mode.


   private String mode;

   public String getMode()
   {
      Object responseObject = FacesContext.getCurrentInstance().getExternalContext().getRequest();
      if (responseObject instanceof RenderRequest) {

         RenderRequest renderRequest = (RenderRequest)responseObject;
         if(renderRequest.getPortletMode().toString().equals(mode)){
            mode = null;
         }else{
            mode = renderRequest.getPortletMode().toString();
         }

      }
      return mode;
   }

   public String getFromView() {
      PortletSession portletSession = (PortletSession)FacesContext.getCurrentInstance().getExternalContext().getSession(false);
      String viewId = (String)portletSession.getAttribute("javax.portlet.faces.viewIdHistory.view");

      viewId = viewId.substring(0,viewId.indexOf("?"));
      return viewId;
   }

   public void setMode(String mode)
   {

      this.mode = mode;
   }


Next add something similar to this in pages.xml


    <page view-id="/expenseWizard/*" action="#{mode.getMode()}">
        <navigation>
            <rule if-outcome="help" if="#{mode.getFromView() == '/expenseWizard/step3.xhtml'}">
                <render view-id="/helpPages/step3help.xhtml"/>
            rule>
            <rule if-outcome="help" if="#{mode.getFromView() == '/expenseWizard/step4.xhtml'}">
                <render view-id="/helpPages/step4help.xhtml"/>
            rule>
        navigation>
    page>


Creating (another) Firefox Theme

Posted by: wesleyhales under Java

I started laying down ideas for a new Firefox theme a few months ago and this is what emerged. I'm not sure why I can't stay away from the darker themes. Maybe it's the richness that black (and darker colors) allows on a monitor, but I tried to stay as far away from mainstream design on this as I could. I have already coded this into a downloadable theme, but I am still working out some glitches. Then I have to let it sit in the Mozilla incubator, as I did with ANTHEM.

Speaking of ANTHEM, I'm quite surprised that it has done so well. 780k downloads and counting in 1 year. But it is all in vain if I can't "supply more blood" to this living organ (As Rob W. likes to put it.) With that said, I'm thinking about starting an open source project for these themes, because quite honestly, I don't have time to fix the bugs. Anybody wanna help? Comment with your email...




I have been a bit indecisive about the the background on the toolbar on this one. What do you think? The first one at the top, or this one...





Sometimes I forget...

Posted by: wesleyhales under Life
No Comments

...that this blog can be used for things other than work related stuff.

I have been undergoing a bit of a reinvention of myself lately. For the past few years I have felt like Jodie Foster in the movie Contact. You know when they finally build the monolithic alien machine that will take humanity to a new level of existence? When she finally drops and and the metallic ball is cast into a worm whole, Jodie starts to witness the beauty of the cosmos. But, she can barely look at anything because the stupid chair that the scientists thought would be "safe" to install is shaking so badly that those beautiful sights cannot be seen. Well, I have been in that chair for quite sometime and I just took my seat belt off :)


Replacing FacesMessages with Growl alerts

Posted by: wesleyhales under Java

I saw a tweet from(@maxandersen) the other day and decided to try adding Growl like messages in a standard JSF/Richfaces application using jGrowl. It is quite simple and my approach could definitely be improved upon.

This is really just javascript on the front end and can be used with any backend message generating system.

Code Used:

Include the scripts in the head:

Note the loading of jquery in the Richfaces page...

 
    <a4j:loadScript src="resource://jquery.js"/>
    <link rel="stylesheet" href="/css/jquery-plugins/jquery.jgrowl.css" type="text/css"/> 
    <script type="text/javascript" src="/js/jquery-plugins/jquery.jgrowl.js"></script> 
 
   

Write a simple script to extract the message:

... and add any customizations you may need to jGrowl. One thing to take note of here is that you cannot use the $ sign for jQuery in a Richfaces app. This is because of the RF framework using prototype.js by default and it too uses the $ sign. So every 3rd party jQuery script that you use, you must s/$/jQuery/g (find and replace all usages of '$' with 'jQuery')

        function showError()
        {
            jQuery.jGrowl.defaults.position = 'center';
            if (document.getElementById('errorMessage') != null)
            {
                jQuery.jGrowl(jQuery('#errorMessage').html(), {
                    sticky: false,
                    life: 10000
                })
            }
        }

And tell the script to run after page load:

jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:

 $(document).ready(function(){
   showError();
 });

Here is a live screen shot of the script in action using a generate h:message.


ul horizontal tab menus, cross browser, with no hacks

Posted by: wesleyhales under Java

There are too many times when I need a nice horizontal tab menu, using semantic html, and with cool graphics all at the same time. So this post is more for my personal reference and will shave a few hours off any ones html prototype. This is cross browser valid css 2.1 on IE6, IE7, FF3, Chrome and Safari without using any hacks.

The end result:

To start with, here is the css:

/*----------------------Navigation*/ 

div.nav-container ul.primary-nav { 
    margin: 45px 0 0 236px; 
    white-space: nowrap; 
    display: inline; 
    float: left; 
} 
div.nav-container ul.primary-nav li { 
/*setup the container for tab divs*/ 
    list-style: none; 
    height: 28px; 
    display: inline; 
    font-size: 1.2em; 
    margin: 0; 
    position: relative; 
} 
div.nav-container ul.primary-nav li div { 
/*float all divs containing tab images left*/ 
    float: left; 
} 
div.nav-container ul.primary-nav a { 
    color: #777; 
    text-decoration: none; 
    font-weight: 700; 
} 
div.nav-container ul.primary-nav li.selected div.tab-main a { 
    color: #fff; 
} 
div.nav-container ul.primary-nav li div.tab { 
    height: 28px; 
    /*-5 on margin will give us the overlap look*/ 
    margin: 0 -5px 0 0; 
} 
div.nav-container ul.primary-nav li div.tab div.tab-main, 
div.nav-container ul.primary-nav li.selected div.tab div.tab-main { 
    float: left; 
    padding: 5px 15px 0 10px; 
    text-align: center; 
    margin: 0 auto 0 auto; 
} 
div.nav-container ul.primary-nav li div.tab div.last, 
div.nav-container ul.primary-nav li.selected div.tab-last div.last { 
    float: left; 
    padding: 5px 10px 0 10px; 
    text-align: center; 
    margin: 0 auto 0 auto; 
} 
div.nav-container ul.primary-nav li.inactive div.tab div.tab-main { 
    background: url(../images/nav/nav-bg-center-inactive.gif) repeat-x left top; 
    height: 28px; 
} 
div.nav-container ul.primary-nav li.inactive div.tab div.tab-left { 
    width: 2px; 
    background: url(../images/nav/nav-bg-left-inactive.gif) no-repeat left top; 
    height: 28px; 
} 
div.nav-container ul.primary-nav li.inactive div.tab div.tab-right { 
    width: 2px; 
    background: url(../images/nav/nav-bg-right-inactive.gif) no-repeat right top; 
    height: 28px; 
} 
div.nav-container ul.primary-nav li.selected div.tab div.tab-main { 
    background: url(../images/nav/nav-bg-center-active.gif) repeat-x left top; 
    height: 28px; 
} 
div.nav-container ul.primary-nav li.selected div.tab div.tab-left { 
    background: transparent url(../images/nav/nav-bg-left-active.gif) no-repeat left top; 
    width: 4px; 
    height: 28px; 
} 
div.nav-container ul.primary-nav li.selected div.tab div.tab-right { 
    background-image: url(../images/nav/nav-bg-right-active.gif); 
    width: 4px; 
    height: 28px; 
}

And finally the html:

        <div class="nav-container"> 
            <ul class="primary-nav "> 
                <li class="selected"> 
                    <div class="tab"> 
                        <div class="tab-left"></div> 
                        <div class="tab-main"><a href="#">Home</a></div> 
                        <div class="tab-right"></div> 
                    </div> 
                </li> 
                <li class="inactive"> 
                    <div class="tab"> 
                        <div class="tab-left"></div> 
                        <div class="tab-main"><a href="#">Profile</a></div> 
                        <div class="tab-right"></div> 
                    </div> 
                </li> 
                <li class="inactive"> 
                    <div class="tab"> 
                        <div class="tab-left"></div> 
                        <div class="tab-main"><a href="#">About Us</a></div> 
                        <div class="tab-right"></div> 
                    </div> 
                </li> 
                <li class="inactive">
                    <div class="tab"> 
                        <div class="tab-left"></div> 
                        <div class="tab-main last"><a href="#">Help</a></div> 
                        <div class="tab-right"></div> 
                    </div> 
                </li> 
            </ul> 
        </div> 
    </div>


Recovering deleted files from Windows and Linux... and a little forensics

Posted by: wesleyhales under Utils
No Comments

I got one of those "tech support" phone calls from a family member this weekend, asking if I could help him undelete some files that were deleted by some ghost that snuck into his office ;) You gotta love it when people say they have no idea how an entire folder got deleted and they swear they've been hacked.

So I scoured the web to see what exists. For *nix based utils, I think sleuthkit with the autopsy forensics browser is the best out there (that's open source).

But of course this user was on a Windows box. I finally found a really nice free tool for recovering files from NTFS. NTFSUndelete does exactly what the titles says. Saved the day for me and the person who "got hacked" ;)

One other really cool forensics tool I ran across was Helix from a company called e-fence. This is really powerful stuff and the guys from hak5 actually did a segment on how to use the tool in one of their episodes.


How to make money off of a Firefox theme (or not)

Posted by: wesleyhales under Java

This weekend was quite an eye opener for me. Since the first public release of ANTHEM (my Firefox 3 theme), I have been trying to think of a way to monetize the downloads. Not really looking for a way to get rich, but a way to take advantage of, as of today, a theme that has been downloaded almost 500,000 times.

I started out with a Paypal donate button which helped a little, but wasn't really doing what I wanted. Then, I got the idea of adding a sponsor logo somewhere in the top banner like this (see top right corner):

So I made the change and uploaded the new theme to the Mozilla Developer area. The next morning I awake to tons of emails and reviews on the Mozilla site with some seriously pissed off users. I knew I may get a little fallout, but not quite this bad. I guess I am guilty of falling prey to the big company mindset of caring about $$ more than the users of my product. But like I said on the Mozilla site, this was purely an experiment and the advertisement has been removed per the latest version (1.5.2).

Today I received a message which is truly a great idea and I can't believe I did not think of it:

Mate,

Excellent skin! That's been said many times but I saw something new 
today that you gave away for free (and was a great opportunity!) 
Donating without cause never gets a response (although it needs to 
for the sake of others), but I think if you said people needed to 
donate 50c to remove the advert, you'd be buying my motorcycles by 
now, and by the dozen J.

All the best,

The Convicts
Thank you Convict and all the best to your motorcycle company. Hopefully I will be able to buy one soon!

I think I will either develop another skin much better than ANTHEM, or I may just work for free for the rest of my life and die a poor (but appreciated) man. I think it's easier to get into Heaven if we die poor, right? Ah, the life of open source. To me it really is worth it to use your talent and provide something that makes people's life better. I don't care what anybody says, you get it back (and usually doubled) at some point in your life.


JBoss Portlet Bridge Beta 6 Released!

Posted by: wesleyhales under Java
No Comments
Read about it here: http://blog.jboss-portal.org/2009/01/jboss-portlet-bridge-beta-6-released.html

2 years of blogging about java and my life, now what?

Posted by: wesleyhales under Life

It has been 2 years since I decided to write my first blog post and I am pretty happy I did so. When I first tossed the idea around about it (and this was back in 2006) I was thinking, man, blogging is so 2002 and why would anybody want to read about stuff I'm doing. But much to my surprise, starting a blog is one of the best things I could've done. Much better than joining any social network by far, and much better than thinking future employers will take my resume at face value.

This year has been incredible, moving so fast that I have hardly had time to sit back and reflect. With around 30,000 total unique visitors since this time last year, a4j:status, maven vs ant, richfaces cdk, xhtml to pdf, and seam tomcat are the top 5 keywords driving traffic.


ANTHEM reaches 15,000 in its first week

Posted by: wesleyhales under Life

I recently created a Firefox 3 theme out of curiosity and because I love to try new things that deal with design. Much to my surprise, ANTHEM has been receiving a lot of attention over the past week since it has been released publicly on Mozilla.org. ANTHEM is named so because I consider it a hymn of praise or loyalty to my worshipful savior Jesus Christ. I also consider it dedicated to my newborn son, my wonderful wife, and the woman who raised me to be the man I am, my beautiful mother. I know, it may sound funny that I am using a Firefox theme for all of this, and I tend to keep my religious/personal views out of the work place, but I always tell God "...the more fame I receive, I will try my best to glorify you..." So here it is, a song of praise, in its own sense.


In ANTHEM's first week, it has received over 15,000 downloads and ranks in the top 10 of the most downloaded themes for Firefox.


Visit the project page here: http://addons.mozilla.org/addon/9627



SO MOTE IT BE

AjaxWorld West '08 Recap

Posted by: wesleyhales under Java

This week, I attended/spoke at the AjaxWorld conference in San Jose. The cool thing for me is that this was my first public speaking appearance. This leads to another notch in my belt of professional development and evangelism. I really got a lot out of the conference because I was able to meet quite a few people that I have known but never actually met in person. On that note, all of the exhibitors and speakers at the conference were very welcoming to form alliances and work together to help each other out.

I was able to pull Chris Schalk aside and talk to him about how we can incorporate OpenSocial/Shindig into JBoss Portal. I also wanted to get a good understanding of exactly what ShinDig is doing. My idea is to make a service available via some js lib and leverage one of the huge bullet points of portals... Personalization. With social capabilities in portal, users activities (like updating a wiki article) can be published to their "group" - how you define the group can be done systematically via existing infrastructure or letting users subscribe to social groups. For now, this is just a bunch crazy ideas flying around, I need to get something coded.

I talked to Ted Goddard and Steve Maryka from IceFaces, and they seemed very excited about getting IceFaces support into the JBoss 301 bridge. Maybe we can squeeze it into the JBoss Portlet Bridge GA.

Jonas Jacobi and John Fallows presented some very cool technology that I would also like to prototype into JBoss Portal. WebSockets, Server Side Events, and full-duplex communication between various protocols is another up and coming tech that I really want to play around with and see where it would be a good fit in portals.

I hung out with Matt Quilan from Appcelerator and soon to be employee of {company_name_here}. I see where Appcelerator is going and if they can hook up with the something like the guys from nextDB.net are doing, I think it could be something cool.

During the open bar (and after a few beers), I got a chance to talk to Geoff from nextDB.net. These guys are thinking on a fairly radical level and I like it. I think people forget the power of small-medium sized business market websites. I joked with the guys about reading 2600 and their product is just screaming "Hack Me" and I hope they push it to the limits to show their front-end encryption really is secure to hold vital customer info. Maybe they will show up at the next DefCon wearing a "I dare you to Hack Me" t-shirt.

Last but not least, thanks to all the people who showed up and withstood my portal presentation. I learned a lot, and judging from the folks that asked the questions during Q&A I feel pretty good about it. Out of all the presentations I went to, mine had the most questions at the end... don't know if that's good or bad ;)

I guess the more you put into meeting people and talking to them, the more you get out of conferences like this. Some of the folks I talked to thought the turnout was a little scarce, and that is probably just a sign of the times. Overall I had a good time and met some good people.


AJAX in Enterprise Portals at AjaxWorld

Posted by: wesleyhales under Java
No Comments

I will be giving a presentation for the AjaxWorld conference Tuesday at 5:00 on Ajax in Enterprise Portals. If you are here in San Jose, don't be a stranger!
Check out the sessions here.

**Update with slides:


Developing an OpenSocial Portlet

Posted by: wesleyhales under Java

I dedicated some time this weekend to creating a fully functional demo with OpenSocial, Shindig and JBoss Portal. It seems like OpenSocial has a lot of new supported platforms coming out in 0.8 and the future is looking promising. Here is a bullet list to summarize what I found:

  • Documentation is scarce when you want to roll you own OS container via Shindig
  • Luckily Chris Schalk did a good job providing some documentation on getting persistence setup on a mysql db
  • Unfortunately, due to the bleeding edge of this technology, some of (the few) demos that exist don't work with today's Shindig trunk
  • I was able to quickly learn Google widgeting and am on my way to being a "widget master"
  • Next on the list is to mess around with Google Data APIs in OpenSocial Apps
  • The transition/integration of Shindig into a standard webapp/portlet was a huge pita. Too many hard coded servlet context in .js files.
  • It seems like (for now) you really need to be into the Orkut scene to leverage current social users. Myspace is something I try to stay away from, and I was really hoping to see some LinkedIn stuff but was let down.

This is definitely the way portals are headed and I guess I will try to muster up the energy to write an article once the kinks are worked out of my demo. I would also like to do something cool with the collected social data inside of a portal environment (like notifications of other user activities, posts, changes, etc...). I used the JBoss Portlet Bridge Richfaces project/archetype to create the demo. The bridge makes it incredibly easy to do stuff like this because of having things working on both the servlet and portlet side.


Creating a Firefox 3 theme

Posted by: wesleyhales under Java
**UPDATE - This theme is now available on Mozilla.org here: https://addons.mozilla.org/en-US/firefox/addon/9627/

I decided to tryout Firefox theme building a few weeks ago on vacation. It took me a few days to design the skin and slice up all the images for theme creation. But once it came to laying down the Firefox CSS, I have to say that I was a little overwhelmed and haven't been back to finish the theme since.

Of course this could be due to me actually having a day job and somewhat of a life. I think the overall css code for the layout is fairly simple. All you have to do is get your x,y coordinates right and you are golden. If anybody has any quick tips to make the process of placing the buttons a little simpler, please speak now! Or if someone wants to take on the task of completing this theme I will post the .psd files.




One of the cooler things about this theme is that the icons are 100% original. We all know most themes take some form of Windows or *nix icons. I tried to take the old 1930's cinema approach where I could. But I couldn't come up with anything for the copy and paste buttons (C and V).





Developing Portlets using JSF, Ajax, and Seam (Part 1 of 3)

Posted by: wesleyhales under Java

InfoQ just published the first in a series of 3 articles for the JBoss Portlet Bridge. The author of this series did an unbelievable job. I could write a whole post about how great his article(s) are, but I would hate to loose sight of this post topic :-) heh - just kidding... the author is me!


This first part is about basic JSF development with an easy to follow tutorial and real world development tips. The next one will be about RichFaces and the final (about Seam) will be published right after the release of Beta 4 in early September.

Enjoy!
http://www.infoq.com/articles/jsf-ajax-seam-portlets-pt-1

http://www.infoq.com/articles/jsf-ajax-seam-portlets-pt-2