ONLamp.com
oreilly.comSafari Books Online.Conferences.

advertisement


Introducing TrimPath Junction
Pages: 1, 2

Adding a Contact

The first thing to do is to go back to the web browser and click on the "Create A New Contact" link to create a new contact. That takes us to the page shown in Figure 2.



The new instance page
Figure 2. The new instance page

This page is created from the newInstance.est template, which is used by the scaffolding in the contacts controller. The EST code for the page is shown in Listing 6.

    <h1>Create A New Contact</h1>
    <%= errorMessagesFor('contact') %>
    <%= startFormTagLocal('contact', 'create') %>
      <label>First Name:</label>
      <%= textField('contact', 'first_name') %>
        <br/>
      <label>Last Name:</label>
      <%= textField('contact', 'last_name') %>
        <br/>
      <label>Address:</label>
      <%= textArea('contact', 'address') %>
        <br/>
      <label>Phone:</label>
      <%= textField('contact', 'phone') %>
        <br/>
      <%= submitButtonLocal("ok", "OK") %>
      <%= linkToLocal('Cancel', 'contact', 'index') %>
    <%= endFormTag() %>

Again I think it's remarkable how closely TrimPath Junction models the Ruby on Rails framework, especially in a case like this. Just as with Rails, the code starts by putting in an error display section at the top of the page that displays any validation errors on the model. After that, we start a form tag and add fields for each of the items. Then at the bottom, there is a submit button and a link back to the main index page, as well as the end of the form tag.

It's all very easy-to-understand code, and that makes it very easy to maintain. Now, back to the web browser again, I'm going to add some valid, albeit fake, contact information and click on the OK button.

The Show Page

Adding the contact to the database brings up the show page, where we see the specified contact. This is shown in Figure 3.

The show page showing my fake contact
Figure 3. The show page showing my fake contact

This is just like the creation page, with the exception that we aren't creating a contact, we are just viewing it. The template code is shown in Listing 7.

    <h1>Contact <%= contact.id %></h1>
      <label>First Name:</label>
      <%= contact.first_name %>
        <br/>
      <label>Last Name:</label>
      <%= contact.last_name %>
        <br/>
      <label>Address:</label>
      <%= contact.address %>
        <br/>
      <label>Phone:</label>
      <%= contact.phone %>
        <br/>
      <%= linkToLocal('Edit', 'contact', 'edit', contact.id) %>
      or
      <%= linkToLocal('Remove', 'contact', 'destroy', contact.id, { confirm: true }) %>
    <br/><br/>
      Back to the <%= linkToLocal('Contacts List', 'contact', 'index') %>

The last step in my walkthrough is to go back to the index page to show that the item has been accurately added to the database. Let's have a look in Figure 4.

The index page with the new contact
Figure 4. The index page with the new contact

Indeed it has, and if I close the browser and re-open it to the same URL, I'll see the contact.

One thing that I did leave out was the basic template for all pages, which is also implemented in a very Rails-like way. It's called default.est and is shown in Listing 8.

    <html>
    <head>
      <title>Contact Manager App</title>
      <script type="text/javascript" src="/javascripts/trimpath/junctionUtil.js"></script>
    </head>
    <body>
      <%= contentForLayout %>
</body>
    </html>

Just as with Rails, the content for the page is specified within whatever bounding layout you want. All you have to do is ensure that the base TrimPath Junction library is included, as it is with the script tag in the head section of the page.

Conclusion

This little demonstration of TrimPath Junction just scratches the surface of its power. Just as with a Rails demo, using the scaffolding only shows a portion of its potential. For an in-depth view, you can check out the Next Action demo application, which is a very powerful to-do list maintainer. That application works well both online and offline through use of Google Gears.

Since it requires a specific web server solution, TrimPath Junction might not be appropriate for every web application or developer. But it does certainly show the potential of what can be done with JavaScript, both on the client and server side. And it is a fascinating glimpse into the potential offered by disruptive technologies like Google's Gears and Adobe's AIR platform.

Resources

Jack Herrington is an engineer, author and presenter who lives and works in the Bay Area. His mission is to expose his fellow engineers to new technologies. That covers a broad spectrum, from demonstrating programs that write other programs in the book Code Generation in Action. Providing techniques for building customer centered web sites in PHP Hacks. All the way writing a how-to on audio blogging called Podcasting Hacks.


Return to ONLamp.



Sponsored by: