Multiple Line JSF Data Tables

Ok, so you need to create a multi row data table right? Now you want to do this with JSF and you see that you're up a creek without a paddle. This doesnt fit the norm for most "grid" layouts on the web. The standard JSF just doesnt allow for this with a datatable but you can use the panelgrid to get the results that you want. Here is how.

<br /> <h:dataTable value="#{reportListingReports.claimsToWork}"<br /> var="ctwb" rowClasses="list-row-even, list-row-odd"<br /> style="text-align: left; border-color: blue;" border="1"<br /> cellpadding="0" cellspacing="0" columnClasses="list-column-all"><br /> <h:column id="FileName"><br /> <h:panelGrid columns="6" cellspacing="0"<br /> columnClasses="report_cell_normal,report_cell_small,report_cell_normal,report_cell_normal,report_cell_small,report_cell_currency"><br /> <h:outputText value="#{ctwb.carrierName}   "<br /> escape="false"></h:outputText><br /> <h:outputText value="#{ctwb.loadedDate}   "<br /> escape="false"></h:outputText><br /> <h:outputLink<br /> value="jsfReportDetail.jsp?reportEntryGUID=#{ctwb.id}"><br /> <h:outputText value="#{ctwb.patLastName}, #{ctwb.patFirstName}" /><br /> </h:outputLink><br /> <h:outputText value="#{ctwb.patAccountNumber}"></h:outputText><br /> <h:outputText value="#{ctwb.beginDOS}"></h:outputText><br /> <h:outputText value="#{ctwb.totalCharge}">$<f:convertNumber<br /> currencyCode="US" maxIntegerDigits="10" minFractionDigits="2"<br /> groupingUsed="true" maxFractionDigits="2" /><br /> </h:outputText><br /> </h:panelGrid><br /> <h:outputText value="#{ctwb.claimStatusCode}"></h:outputText>: <h:outputText<br /> value="#{ctwb.claimMessage}"></h:outputText><br /> </h:column><br /> </h:dataTable><br />

Why don't we break this down to see what we do here.

Line 1 is our standard data table layout using the backing bean reportListingReports.claimsToWork

There is nothing new here, standard call to a backing bean for the JSF information. We set the variable ctwb for use in the column.

Line 5 is where we introduce the column. As you can see here the matching tag for this is at line 25. We use one column so we continue to iterate through our row data.

Line 6 introduces our panel grid. We use this to construct the real table here. We continue to go down through the panelgrid and output the different elements using the ctwb variable.

Line 22 closes out the panelgrid.

Line 23 gives us a summary row underneath. I use this for outputting a status message on the previous row but you could introduce another panelgrid or whatever you like here.

So to summarize what we have here is 2 visible rows of data on the screen. Presentation goes something like this.

ROW1COL1     ROW1OL2    ROW1COL3
ROW2BUT BUT IS PART OF DATA ROW 1

ROW2COL1     ROW2OL2    ROW2COL3
ROW3BUT BUT IS PART OF DATA ROW 2

You should have the idea. This gives nice formatting for anyone that needs to output a text description on the row but doesnt have the space on the screen (or in the data table column.

Now, remember you'll need to use the column classes and style the table correctly or this may not look just right for you. It is easy enough to acomplish with some css code.

Code Syntax Highlighter/Formatter

Now this was a tasty nugget I had to dig hard for. Hopefully more developers will blog this one so it can end up in some search pages. The code formatter for java or many other languages allows you to embed it in blogger highlight your code. I like this one very much as it's all javascript and nothing complex. I'm switching over to use this one on the website.

Why aren't you using Damn Small Linux?

This has to be one of the best distros for a boot and go scenario. I have a few notes about this I'd like to pass along. Do you have some java software you'd like to demo or run but don't want to install it at the clients site? Want to send them a running copy? Here is a nice trick. You'll need both a linux box and an XP box.

First, get yourself a copy of MagicISO (Windows XP) for hacking the ISO image.

Next, download the Java Runtime for linux. Run the install and have it extract out to a standalone directory.

Use MagicISO and bust open the ISO from DSL (Damn Small Linux). Copy over the entire Java directory to the root of the CD.

Now, you can simply do the same with your Java software. DSL has some really nice boot options for the opt directory or the mydsl directory to load in options. You can point these at cdrom to enable specific settings. Once you have this done you can then go in and hack the isolinux.cfg located in the /boot/isolinux directory on the CD. You can hard code the options setup on the disk and remove the standard DSL prompts.

Overall I was able to get a very small CD footprint (150 Megs) roughly. It also beats remastering the entire DSL setup. While this is an option it saves a lot of time with this approach.

EJB3, Glassfish, MySQL, Toplink Working Together Continued

Alright, here are my notes on all of this.

First, much of the documentation out there on the web I saw had plenty of JPA for J2SE examples. Nothing I found talked about the setup of the glassfish data pools and sources.

<jta-data-source>jdbc/MySQL</jta-data-source>

Shows the configuration for the persistence.xml you'll need to include. This should be part of the <persistence-unit> tag that you'll include as part of persistence.xml. EJB3 users should know how to set this up or can easily reference this.



That's about the only real configuration you'll need as part of your persistence.xml file for the Glassfish server to locate your connection.



The rest is in glassfish. Why the Apress EJB3 book does include this information is beyond me. It's like a whole chapter on setting up the data sources is needed.



In glassfish login and go to your connection pools for JDBC



From here you'll need to create a new connection pool. Configure the connection as a javax.sql.DataSource then use the Database Vendor MySQL. You'll also need to give it a name. Save your new connection pool, then go back into it to make the following modifications under "Additional Properties" tab.

Under the advanced properties tab, you'll need to create a 'user' property and give it the user name. This would be whatever the mysql login is. Since I was using my research server I simply used 'root'. I didn't have to specify a 'password' property, but I imagine you'll need to in an actual configuration on a live server.

From there you'll need to modify the URL properties (I noticed there were 2 different ones, so I modified both to match). This should be something like 'jdbc:mysql://localhost/XE' where XE is the database you're attempting to access.

Now go back into the JDBC settings and go to JDBC resources. This is where you want to give it a name which matches the jta tag above. create a new JDBC resource that points to the connection pool you just created.

I found it necessary to restart Glassfish here. Although not every change here requires a glassfish restart technically. In practice I couldn't get it to work without the restart.

That was it, once that is setup you should be able to have your client access the localhost for the proper database connection which is mysql and not derby.

EJB3, Glassfish, MySQL, Toplink Working Together

Oh brother I cant tell you how much of a pain in the butt it was trying to get all these to work together. The JPA is really straightforward. No challenge there but the persistence.xml configuration and JDBC connections for MySQL are just no where to be found. Looking everywhere I couldn't find some really simple documentation on setting up MySQL to work with Glassfish and EJB3 with the JPA. I'm sure someone did find a link but it took some effort to find the right configuration.

Sure plenty of J2SE examples but when it came down to setting up the connection pooling and the jta-datasource I couldnt find a thing. Well bits and pieces and about 3 days later I have it running.

Tomorrow I'll be posting my notes on everything. Hopefully someone else can save some time in getting these to work together. I still haven't successfully replaced toplink with Hibernate at the EntityManger but for right now I'm happy having MySQL running vs. derby.

More on this soon.

Google Mapplets and Custom Writeable Pushpins

Well, I came up with some simple and yet incredible code for Google Maps or Google Mapplets. I think this is just brilliant but you may think otherwise.

Ever wanted to put something on those push pins other than a number or a custom graphic. Well low and behold I did this recently and it's pretty simple. If youre familiar with PHP you'll say to yourself why didnt I think of that.
So let's review what we have here. Lines 2-5 are basic sanity checking for a "rate" which is nothing more than a number.

CODE:
<br /><?php<br /> $rate="0.000";<br /> if(isset($_REQUEST['rate'])){<br /> $rate=number_format($_REQUEST['rate'],3); <br /> }<br /> Header( "Content-type: image/png"); <br /> $im = imagecreatefrompng("./pin_image.png");<br /> imageAlphaBlending($im, true);<br /> imageSaveAlpha($im, true);<br /> $color = ImageColorAllocate($im, 0, 0, 0); <br /> imagettftext($im,8,0,3,13,$color,"./verdana.ttf",$rate);<br /> imagepng($im,"",0); <br /> ImageDestroy($im);<br /> ?><br />
Line 6 is changing the response type for this PHP script to an image.

Line 7 loads up a base image to write text to.

Line 11 put's the text onto the pushpin.

Line 12 Returns the image

That's it folks. Now you have some very cool push pins for google maps. What do you put on them? Well that is up to you. I used "rate" data from banks. You could in theroy put names of things, locations, anything. One template image is used then from there you write the text you want onto the graphic.

This DOES support transparency by the way. I needed that myself. One thing though is that IE6 doesnt support PNG transparency the right way so if you do this you might want to use a GIF instead of a PNG.

If you find this useful please post something on this blog. I'd just like to see how this is being used.

Well this blog has been fairly inactive since I've started my new Job. New posts forthcoming.