Friday, May 22, 2015

Wealth Projector

We're exciting to be launching our latest project Wealth Projector this week!

Wealth Projector is an amazing website that helps Australians understand their current finances and project scenarios for their future!

Know where you stand

Wealth Projector is a one-stop shop for understanding your financial situation. We'll crunch the numbers on what your home is worth, how much tax you pay, what your insurance needs are, and more. We'll give you a single, overall picture of your finances.

Project your future

Use Wealth Projector's industry-leading modelling to explore multiple scenarios for your future. Can you afford that new home? Do you have enough for those renovations? Will private school fees push you into the red? Are you ready for retirement? How much pension will you receive?

Let us do the math

Other sites ask you to fill out lots of different calculators: superannuation calculators, mortgage calculators, pension calculators. With Wealth Projector's integrated approach, fill out your information once and we'll apply all appropriate calculators to fit your life.

Secure and private

Wealth Projector is anonymous: enter nicknames instead of real names, suburbs instead of street addresses, ages instead of Dates of Birth. If you do choose to enter personal information, rest assured we'll encrypt it using industry standard security.

Immediate response

Wealth Projector delivers your personalised report immediately. There's no waiting around. In fact, Wealth Projector lets you preview how your report is shaping up before you've finished filling out your information. Watch how your report grows!

Want to take it for a spin? Visit Wealth Projector and use the coupon code LINKEDIN

Monday, March 2, 2015

Metawidget on Air

I was excited to be a guest on the latest episode of the JavaScript Jabber podcast. The panel had a wide-ranging discussion on Object Interface Mapping (OIM) technologies, different implementations and frameworks.

My thanks to the panel, Charles Max Wood and AJ O'Neal, and the other guests, David Luecke and Geraint Luff. You can download the episode here:

Friday, February 20, 2015

Create HTML forms from JavaScript objects: Metawidget 4.1

Version 4.1 of Metawidget, the library for creating HTML forms from JavaScript objects is now available!

This release was focused on:
  • JQuery Mobile layout improvements (suppressDivAroundLabel, suppressDivAroundWidget)
  • Improved support for JQuery Mobile overridden widgets
  • Top-level styleClass (JavaScript Metawidget)
  • Fix recursive save on Web Components
  • Bootstrap improvements (wrapInsideLabels, wrapWithExtraDiv)
  • Support table footers in HtmlWidgetBuilder (JavaScript Metawidget)
  • Windows Mobile Internet Explorer compatibility
  • Bug fixes, documentation and unit tests
As always, the best place to start is the Reference Documentation:

Your continued feedback is invaluable to us. Please download it and let us know what you think.

Friday, February 13, 2015

JavaScript Form Generator: from Java EE to Bootstrap 3 (Part 2)

I was recently asked to extend one of my previous blog posts with the ability to inspect nested, annotation-based, Java EE back-end domain objects using a JavaScript, Bootstrap 3 front-end.

Metawidget generates widgets for domain object properties using a five-stage pipeline, specifically WidgetBuilders. There are WidgetBuilders for creating text boxes for string types, number inputs for number types, and so on. However whenever Metawidget encounters a property that its WidgetBuilders don't have a widget for, it creates a nested Metawidget and starts the pipeline process all over again:

The nested Metawidget shares the same pipeline objects as the outer Metawidget (i.e. same Inspectors, WidgetBuilders, etc). This makes nested Metawidgets very lightweight and performant. However it also means the Inspectors must be aware they can be used in multiple modes: in 'top-level' mode, and in 'nested mode'.

Inspectors can tell the difference because of the names array they're passed. In nested mode, the names array will be populated with a path of sub-properties to traverse. It's important the Inspectors honour this.

Back to our Java EE example. We'll expect two back-end REST schema calls: one for /rest/schema/person and one for /rest/schema/person/address. Clearly the back-end must also be expecting this and return different schemas for each (we recommend using client-side expiry headers on REST-based schemas: schemas don't change very often, and you can increase the performance of your UI by not making calls unnecessarily).

I've put together a complete example you can download here.

Of course, you may find multiple REST calls unacceptable for your use-case. Another approach would be to have your REST service return a JSON schema containing all your nested schemas at once. Then use metawidget.inspector.JsonSchemaInspector to inspect it. JsonSchemaInspector includes the ability to automatically traverse nested schemas, based on the names array.

Monday, December 1, 2014

We won Hackagong 2014!

I spent last weekend down at Hackagong 2014. It's an annual hackathon where entrants are challenged to make something awesome in 30 hours. The idea is to form small teams mixing designers, programmers, engineers, entrepreneurs, game creators or anybody with an idea or problem to solve, and build a technology driven product or service prototype. There were over $100,000 of prizes on offer.

I didn't know what to expect going in, other than it was a great opportunity to get out my comfort zone and play with new technology. Competition was pretty fierce, with nearly 40 teams submitting some amazing projects using everything from Augmented Reality goggles to drones to 3D printers. But by the end, I was thrilled to be a member of the winning team!

Team mates Brooke, Caleb, Michael and I developed a 3D-printed, Internet-of-Things Egg Hatchery over the course of 30 hours. The judges described it as "an awesome effort":

Winner: Major Prize Winner
Winner: Most Innovative 3D Print

Here's a video of our winning entry (the rules dicatated the video had to be silent):

This was my first hackathon, and it was a fantastic experience. Many thanks to the organizers and everyone who participated!

Sunday, November 2, 2014

Domain Driven Forms: Metawidget 4.0

Version 4.0 of Metawidget, the library for domain driven forms is now available!

This release was focused on:
  • Web Components support
  • clearWidgets support (JavaScript version)
  • JsonSchemaTypeMappingProcessorConfig
  • Improved Node.js support
  • Boolean radio buttons (JavaScript version)
  • Minor refactoring
  • Bug fixes, documentation and unit tests
As always, the best place to start is the Reference Documentation:

Your continued feedback is invaluable to us. Please download it and let us know what you think.

Breaking Changes

We've taken advantage of the major version number bump to make some minor breaking changes for the sake of clarity and consistency. Specifically:
  • For metawidget.js, addInspectionResultProcessors has been renamed to appendInspectionResultProcessors
  • Similarly for metawidget.js, addWidgetProcessors has been renamed to appendWidgetProcessors
  • XmlUtils.elementToJsonSchema has been renamed to XmlUtils.inspectionResultToJsonSchema
  • For SwtMetawidget, setInspectionPath has been renamed to setPath

Saturday, November 1, 2014

Metawidget meets Web Components

The next release of Metawidget (v4.0) introduces Web Components!

Web Components are an exciting new HTML standard that promise to bring much of the UI goodness of frameworks like AngularJS to HTML without any additional libraries. As usual with emerging technologies, not all browsers fully support Web Components, but there are fantastic 'stop gap' libraries such as Polymer that can get you most of the way there today.

With Web Components, you can use Metawidget in fewer lines of code than ever before! Here's a complete example:

      <script src="metawidget-core.min.js"></script>
         #metawidget {
            border: 1px solid #cccccc;
            width: 250px;
            border-radius: 10px;
            padding: 10px;
            margin: 50px auto;
            display: block;
         var person = {
            firstname: 'Homer',
            surname: 'Simpson',
            age: 36,
            save: function() {
               document.getElementById( 'metawidget' ).save();
               console.log( person );
      <x-metawidget id="metawidget" path="person"></x-metawidget>

Note the new x-metawidget tag. This is registered automatically just by including metawidget-core.min.js. It's available to your code just like any other HTML tag. It has custom methods such as save to make it easy to bind data back from the Metawidget, and automatically watches attributes such as path to rebuild the Metawidget.

Try it today in Chrome:

We've also ported the existing Address Book sample application to Web Components to provide a more meaty example:

Download it and give it a try! And welcome to the future :)