Retired Trialist

I thought it would be worthwhile documenting the proof of concept app that I developed last year.

This was built with the Reboot Landing Bootstrap theme. There are issues, front and back, so I’ve decided to “freshen” several areas but there are some features worth keeping, e.g. texting players directly from the app on an iPad.  You can find the code here. And this is what it looks like, the retro style font used in the playermanager logo is YWFT Trisect

playermanager-trialist

Trial Match

“Blue and green should never be seen, except on the head of an Irish queen” I remember my mother saying to me when giving me some fashion tips, probably about my blue and green tank top. I my defence it was probably in the 70s. Personally I like the combination of blue and green and think it makes a nice colour scheme for a footie app; Rangers and Celtic, blue sky and green grass, blue sky thinking (really?) managers and players …erm, coz they play on grass.

Blue and Green Theme

I googled for some example and came across this post at Crazy Egg, number 7 Lake Nona with its “fresh, modern color palette” looked good to me. Next up was choosing a Twitter Bootstrap theme. Cerulean from Bootswatch was a possibility, but I ended up splashing out $4 on Ericka and a ridiculous $15 on Reboot Landing from WrapBootstrap. Combining elements from all of these themes was beginning to feel like it might just work. But I needed some nice icons…

Font Awesome

The icons from Font Awesome are actually awesome. Designed to work with Bootstrap they are unbelievably good looking and easy to use and all for free. I plan to use them liberally throughout. So far they are on the index page, coloured to match the theme. The masthead icon and favicon have also been created from the font as well, pasting the font into Adobe Illustrator and exporting as a PNG.

Google Fonts

Google’s Oswald font is used both in PlayerManager and in the theme for this blog. It somehow reminds me of football shirt fonts.

Result

The most important thing is the result…

playermanager

And on the touchline…

Mini-iPad-B&W-Mockup

Thanks to Pixeden for the iPad mockup. You can get the source code here.

PlayerManager – Qualifying Round (Application Server)

Tomcat, TomEE or GlassFish? I like the simple life. But getting to the simple always seems to take so long. And with enterprise java sometimes even longer than that… I was experimenting with Java EE 6 RESTful Web Services and Entity beans generated with NetBeans when I thought it would be good to test how easy it would be run this app on Tomcat, TomEE and GlassFish. Well, with Tomcat I would have to build my own Tomcat based Java EE 6 server (again). To be honest I couldn’t be bothered and the guys at TomEE had already done that. So it was between GlassFish, the reference EE server, and TomEE.

Running one of the sample NetBean apps, Customer Database on Spring, on GlassFish is as easy as you might expect, but porting that to TomEE was more difficult than I expected… With TomEE there is a choice to be made from the 3 versions currently available; standard, web services and enterprise options (not the official names). I really only wanted the web service version (Java EE 6 Certified JAX-RS) for its RESTful web services but as I wasn’t sure if that contained everything that I would need I went with the enterprise version (TomEE 1.5.1 Plus) which has the most supported APIs.

With the TomEE version choice made I started googling for what seemed like days for documentation, help, examples, anything that would help me to configure  an app on TomEE, an app that took minutes to write in NetBeans and run on GlassFish. Finally stumbling across this I was able to piece together what was required to get things working on TomEE.

A resources.xml file needs to be in the WEB-INF/classes/META-INF folder to define a data source, e.g. this example defines a Derby data source.

I also had to update the persistence.xml file to use the EclipseLink JPA provider as I just couldn’t get the default TomEE JPA provider (OpenJPA) to work…

TomEE 1.5.1 doesn’t like Spring injecting an EntityManager, as documented here. So I removed that from the Spring config, instead relying on the GlassFish managed entity manager. No big deal there, and not a big deal either to remove the lines of code that were closing the entity manager, as that isn’t allowed with a container manager entity manager.

All in all it wasn’t too hard to prove that a simple Java EE 6 app can be ported from GlassFish to TomEE.

Mac Mini 2007 with OS X Server

Man alive! Against all expectations I’ve managed to upgrade my 6 year old Mac Mini (mid 2007 aka Macmini 2,1) to Mac OS X 10.7.5 Lion Server.

Memory
Upgraded memory from 1GB to 4GB as the minimum for Lion is 2GB. Apparently the max for my Mac Mini is 2GB or 3GB depending on what out-of-date website you believe.

Lion Server
Signed up to Mac Developer Program for £60 to get access to downloads of Mac OS X, Server add on, etc. My Mac Mini’s architecture doesn’t support Mac OS X 10.8 Mountain Lion. Although Lion is available from Apple (for about £20 I think) but not via the online store. Upgraded from Mac OS X 10.6.8 Snow Leopard  to 10.7.5 Lion with the Server add on.

Fan
Waited for Spotlight to stop indexing. Wondered why the fan on the Mac Mini was going mental even after Spotlight had finished doing its stuff. Realised that I hadn’t reconnected the fan after the memory upgrade. Attached the fan cable.

Server vs iCloud
Decided not to bother using the Server functionality to share calendars, contacts, etc but to go for the convenience of iCloud instead.

And finally … bish, bash, bosh I have a Mac OS X Server ready for testing and other stuff like iTunes streaming via TwonkyServer which works well on DLNA devices.

In the end it wasn’t too painful and I feel as though I’ve saved myself about £800 on the cost of a new Mac Mini with OS X Server.

Development Environment II

I’ve been rethinking using Eclipse as my Java & HTML5/JavaScript IDE of choice since discovering that NetBeans 7.3 supports both, and with integrated Chrome JavaScript debugging and Twitter Bootstrap, BackBone.js and Jersey RESTful WebServices support it seems too good to be true. But after getting a couple of building a couple of simple apps with NetBeans it could be time to wave goodbye to Eclipse plugin hell and say hello to NetBeans simplicity.

One thing I couldn’t figure out was why the CustomerDBSpring sample app and the CustomerRestfulService  app were producing different JSON. It turns out it was all down to how Jersey was configured to convert Java to JSON. This guy describes the problem well and the first solution that I tried, but clearly that wasn’t a great long term option. The longer term solution was to use Jersey’s POJO support, which basically amounts to sticking this in your web.xml.

<init-param>
  <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
  <param-value>true</param-value>
</init-param>

BTW I don’t usually blog on a Saturday night, not that I’m saying there is anything wrong with that, but its just that my wife is watching the final of Strictly Come Dancing :-(

Development Environment

The development environment is based on Mac OS XEclipse 4.2 (Juno) for Java development and Google Chrome with the JSONView plugin for JavaScript debugging.

One of the challenges was to replicate the technical architecture of the production environment in the development environment. Installing Apache HTTP Server, Apache Tomcat and MySQL was a skoosh but mod_jk on OS X was a different issue. In fact I had problems with the subversion plugin for Eclipse 4.2 and upgrading from Eclipse 3.6 to 4.2.

mod_jk
No easy download and install for mod_jk on Mac OS X, oh no you have to get the source code and build it your self. After downloading the mod_jk source …

cd tomcat-connectors-1.2.37-src
./configure --with-apxs=/usr/sbin/apxs
cd native/
./configure --with-apxs=/usr/sbin/apxs
CFLAGS='-arch i386 -arch x86_64' APXSLDFLAGS=' -arch i386 -arch x86_64' ./configure --with-apxs=/usr/sbin/apxs
sudo make install

And bish, bash, bosh I had a /usr/libexec/apache2/mod_jk.so

Eclipse 3.6 to 4.2 upgrade
Upgrading from Eclipse 3.6 to 4.2 didn’t work, but I put that down to the Flex plug-in. I gave up on that upgrade and installed a new 4.2 version and backed out the upgrade on 3.6 with the wonders of Time Machine. I need the 3.6 version to support the Flex apps I’ve built with Eclipse 3.6. I have an elephants graveyard eclipse versions on my machine.

Unfortunately the 4.2 Juno release initially ran like a dog. It would take several seconds to just open a file, I’m not the only one to experience this problem. Increasing the memory allocation in the eclipse.ini file soon sorted this problem though…

-Xms1024m
-Xmx2048m
-Xss2m

Subversion plugin
Using the subversion plugin from  Eclipse 4.2 on Mac OS X also needed a bit of work, this time having to install subversion and a load of other Darwin port stuff. The magic that worked for me was…

sudo port install subversion-javahlbindings +no_bdb +universal
sudo port -f activate subversion-javahlbindings

Technical Architecture

I’ve decided to build the playermanager app with a classic 3-tier architecture;

  • HTML5 presentation tier
  • Java RESTful web services middle tier
  • MySQL database data tier

HTML5 presentation tier
Choosing HTML5 and JavaScript for the front end was a difficult decision. After putting a fair bit of effort into Flex in the last five years it felt bad ditching ActionScript in favour of  its ugly sisters HTML and JavaScript but with the likes of Twitter Bootstrap and Backbone.js things have changed a lot since I last fiddled with them. There seems little no point in dusting off my ancient copies of HTML: The Definitive Guide  and JavaScript: The Definitive Guide, or even giving them to the  Scouts Fall Fair, I’ll just need to splash out on new ones.

This tier will be served alongside other static web content from the playermanager.net website on an Apache HTTP Server, passing any Java RESTful API calls to the Java tier below via mod_jk.

Java RESTful web services middle tier
A RESTful web services tier seems like a good a choice from a Service Oriented Architecture view, developing services so that different clients, e.g. mobile apps, browsers, FIFA, can make use of playermanager services via a RESTful API.

Choosing Java for the implementation of the RESTful API was a fairly easy decision. In my experience RESTful Java web services written in Jersey producing and consuming JSON are a very lightweight and productive option. Using Spring in the Java tier seemed like a good choice based on industry best practice and extensive Jobserve research; Spring Security to secure the RESTful API, Spring’s data access framework with Hibernate to simplify the reading and writing of data in addition to Spring’s dependency injection are all tried and trusted methods.

The Apache HTTP Server of the tier above passes on any Java RESTful web services API calls to an Apache Tomcat Java Server that services any URL beginning /api.

MySQL database data tier
MySQL was an obvious as its simple and open source with good developer and admin tools.

Currently all of the tiers above run on one CentOS machine, hosted by enciva for £10 per month, but there is scope for scaling this architecture when playermanager goes global. And will scale further with the addition of caching where appropriate, e.g. mod_cache and Ehcache.

So that’s the architecture in a nutshell. Next up is the development environment.

Jogo Bonito

I’ve been looking around for a nice WordPress theme. Christophe Coenraets does a fine blog with StudioPress Minimum theme but that is more the reassuringly expensive option. This Blaskan one seems like a good free choice, it’s responsive, clean and uncluttered. All I think I need to add is source code formatting and a GitHub respository to share example code.

class JogoBonitoApp {
    public static void main(String[] args) {
        System.out.println("The Beautiful Game!");
    }
}

And for Gists…

 

Kick Off!

I’ve started developing an app called playermanager, you can find it at www.playermanager.net. It’s a webapp to help organise my kids’ footie teams and the games that I play in. Even when the app is finished it probably won’t help get Scotland to a World Cup finals but it should make informing parents that the school footie training is cancelled or getting 10 players for a works 5-a-side game a wee bit easier…

Flex & Ant top tips

After a couple of days creating an ant build script for a Flex app previously only ever built from within Eclipse I thought I’d share my pain.

Asset references

To avoid compilation errors when the mxmlc task can’t find your assets refer to images, fonts, etc with an absolute path (relative to the flex src directory), e.g…

<mx:Image
source="@Embed(source='/../assets/an_icon_with_a_sensible_absolute_path.png')"/>

This also has the happy side effect of making the paths of these assets more sensible than the alternative crazy relative path approach, e.g. the above line replaced a line similar to the following…

<mx:Image
source="@Embed(source='../../../../../../../assets/an_icon_with_a_crazy_relative_path.png')"/>

Eclipse environment variables

Increase the Java Heap space if you get an OutOfMemory exception during the mxmlc task when running the ant build from within Eclipse.
Select the JRE used in your Eclipse project and add this to the command line… -Xmx512m
See http://www.themorphicgroup.com/blog/2009/07/10/compiling-using-ant-in-flex-builder-error-java-heap-space/ for more details.

Command line environment variables

export ANT_OPTS=-Xmx512m
export ANT_HOME=<ant 1.7 installation dir>
export PATH=$ANT_HOME/bin:$PATH
export JAVA_HOME=<jdk 1.6 installation dir>
export JAVACMD=${JAVA_HOME}/bin/java

Flex Builder Pro license

If using Data Visualization Components (charts, etc) then to avoid the trial watermark provide the mxmlc task with the Flex Builder Pro license number, e.g. ..

<license product="flexbuilder3" serial-number="000000000000000000000000"/>

Note the lowercase product name and the format of the serial-number.

If running the ant build on a machine with Flex Builder Pro installed be aware that the Flex Builder Pro license can be picked up from a variety of locations, see http://livedocs.adobe.com/flex/3/html/help.html?content=configuring_environment_2.html#212596 for details.

Embed fonts with url not local

To increase the portability of your Flex app embed Fonts using urls (preferably part of your version controlled Flex assets), e.g…

@font-face {
 src: url("/../assets/fonts/FancyFont.ttf");
 fontFamily: myFancyFont;
}

See http://gerrymclarnon.wordpress.com/2010/05/25/flex-on-a-mac-and-gcgetglyphdevicemetrics for more details.

Roll your own index.html

The html-wrapper task doesn’t handle a fancy dan index.template.html very well, so you can roll your own task, e.g…

<target name="fancy.dan.html-wrapper">
  <copy file="${basedir}/html-template/AC_OETags.js"
        tofile="${STAGING_LOCATION}/AC_OETags.js" />
  <copy file="${basedir}/html-template/playerProductInstall.swf"
        tofile="${STAGING_LOCATION}/playerProductInstall.swf" />
  <copy file="${basedir}/html-template/swfMouseWheel.js"
        tofile="${STAGING_LOCATION}/swfMouseWheel.js" />
  <copy file="${basedir}/html-template/index.template.html"
        tofile="${STAGING_LOCATION}/index.html" />
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${swf}" value="${APP_NAME}"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${application}" value="${APP_NAME}"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${width}" value="100%"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${height}" value="100%"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${bgcolor}" value="#000000"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${version_major}" value="9"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${version_minor}" value="0"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${version_revision}" value="28"/>
</target>

Don’t rely on Eclipse

Just to state the obvious it’s best not to rely on any Eclipse generated class files, relocated properties files, etc. If you do rely on Eclipse then this will only lead to confusion when someone, who hasn’t first of all built the app from within Eclipse, runs your ant file from the command line and gets different results to you!

Follow

Get every new post delivered to your Inbox.