http://labs.stingrayengineering.com/calx/

The Gist:

Not too much different from the previous entry on this topic. HTML5 manifest is used to cache all resources and localStorage is used to store your thousands/decimal separators.

The Gist:

Create a basic html page with a “home” div.  In the home div add another div with the id “toolbar”.  Everything outside the toolbar div is effectively treated as the “body” of the “page” by jqtouch.  Within the “body” (not an actualy html body tag), create an unordered list with li items for each of the sub-components (in this case calculators and an about section).

<div id="Home">

<div class="toolbar">
 <h1>Stingray Calculators</h1>
 <a class="button dissolve" href="#About">About</a>
 </div>
 <h2>A collection of calculators made iPod / webkit Friendly by jqtouch.</h2>
 <ul class="rounded">
 <li class="arrow"><a href="#Finance">Car Financing</a></li>
 <li class="arrow"><a href="#Lease">Car Lease</a></li>
 <li class="arrow"><a href="#Mortgage">Home Mortgage</a></li>
 </ul>
 <br/>
 <ul class="rounded">
 <li class="arrow"><a href="#About">About</a></li>
 </ul>

</div>

This just gives you a standard html page since we haven’t told the page about jqtouch just yet.  We need to reference the js and css files (the css below is basically the default jqt theme with one or two edits:

   <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

   <script src="jqtouch/jqtouch.js" type="text/javascript" charset="utf-8"></script>

   <link rel="stylesheet" href="jqtouch/jqtouch.css" type="text/css" media="screen" />

   <link rel="stylesheet" href="themes/sting/theme.css" type="text/css" media="screen" />

But that didn’t quite do it since we need to init jqtouch.

            var jQT = new $.jQTouch({

                icon: 'jqtouch.png',

                addGlossToIcon: true,

                startupScreen: 'jqt_startup.png',

                statusBar: 'black',

            });

Now you have a basic “home” section of your application but the links don’t quite point to anything since we didn’t define the sections defined in the “home” section.  Let’s just build 1 of the content for the sub-components.

<div id="Finance">

  <div class="toolbar">

                        <h1>Finance Calculator</h1>

                        <a class="button back" href="#">Back</a>

  </div>

  <form id="financecalc">

    <ul class="edit rounded">

    <li>Price: <input id="price" type="text" value="25000" onChange="CFormat(this);calculateFinance();"/></li>

    <li>Down Payment: <input id="dpamount" type="text" value="5000" onChange="CFormat(this);calculateFinance();"/></li>

    <li>Rate: <input id="ir" type="text" value="1.9" onChange="calculateFinance();"/></li>

    <li>Tags: <input id="tags" type="text" value="200" onChange="calculateFinance();"/></li>

    <li>Term: <input id="term" type="text" value="60" onChange="calculateFinance();"/></li>

    <li>Payment: <input id="pmt" type="text" value="" /></li>

    <li>Taxes: <input id="tax" type="text" value="1.06" onChange="calculateFinance();"/></li>

    <li>Total Financed: <input id="total" type="text" value="" /></li>

    <li><input type="button" onclick="calculateFinance()" value="Calculate"></li>

    </ul>

    </form>

</div>

That is basically it.  Note that in the above the toolbar section has an a tag with a class “button back” and points to the default section so you can use the browser’s back button or click the button in the toolbar.

dumbcalx – financial calculator built using the KISS approach…..simple and stupid.

The original was just a mortgate calculator and was made so you could quickly approximate the PITI (Principal, Interest, Taxes, and Insurance) while shopping for a home on a mobile phone so it is intentionally limited in functionality. Maybe we’ll build one for the iPhone soon…

Next up was do I lease or buy that new car, and so was added the finance and lease calculators. More features for that iphone version…

So I ended up with a compact little JS library which contain a few widgets that will take care of both retrieving data and rendering it out as standards compliant “UL” and “LI” items. The slideshow is a touch more elaborate as it uses the elusive and nocturnal “DIV” element. In any case, css classes are arguments to the various constructors so you should be able to make the widgetos look however you want. In a brilliant display of over-engineering, i factored out the rendering to separate classes so you could always implement your own “renderer”.

Enough of that, should be very easy to use, consult the demo page for a more clear and full demo implementation.  Also, check out the project on the reuters spotlight sight, more info is available there on how to steal the code and there’s an even bigger sales pitch too!!

Of course, to make all this work I had to find a “ScrAPI” to get exchange price history data from, and Oh yes, i just coined a new term, “ScrAPI”, that’s mine, i’ll patent that if I have to. Its right up there with “digital garbage picking” – an example of which would be using perl to scrape some poor bastards hard fought to display HTML (a pervasive theme throughout some of its documentation even).

anyway, we’ll have to thank the Big G, oh, and really fiddler/firebug for that little data discovery. So, at long last, here it is, in the truest spirit of “digital garbage picking”© using a ScrAPI™, I give you:

Flexing with Charts

The web is not a one size fits all environment for you or your consumers. It is all about knowing how to get your site in front of the right audience and putting the right information in their hands once they get there.

If you’d like to do something interesting on the web, we’d like to help.

Unless you are in the business of technology you probably don’t care about the plumbing, you just want it to work.  If you want, we can help you sort out all the questions of Ruby, .Net, PHP, Flex, AJAX, etc. or you can leave that stuff up to us.  Let us build you a custom application using the latest standards for your website, business applications, etc.  We’ll give you the tools you need to get work done and get the information you want to your customers.

http://labs.stingrayengineering.com/gyui/