If you are one of the subscribers to this feed, or you have arrived here via a link from another page, please join us at our new location:

http://bungeeconnect.wordpress.com

Why the move? While Bungee Labs is the company that sponsors the feeds hosted on this blog, we felt that it would be more appropriate to use the name of the platform offering of Bungee Labs. We hope this switch to use “Bungee Connect” will be a one-time change early in the history of our blog. Thanks for sticking with us through the move.

–Ted Haeger

With rich web technology on the rise, it’s easy to get hung up in technology and forget the design. The increasing options to add application functionality (ajax, web services, etc.) make it easy to forget that no amount of functionality can make up for an ugly UI. I contend that as rich web apps become increasingly more sophisticated, those that go the extra distance to provide better visual appeal and ease-of-use will beat out the apps that just have extra functionality.

For the past couple of months we have been demoing a simple Flickr and Google Maps application that I built for our presentation at Web 2.0 Expo. While building the app, I was so involved with the functionality that I kept focusing my attention on what the app could do. But it really needed the attention that only a good designer can give it. So I enlisted the help of our graphics artist, Travis Ryan, to give it a little love and make it look much sexier. Here’s a screenshot of the first version.

Click this screenshot to explore the application.

While exploring this app, try the following:

• Enter the following tags (These tags consistently have both geo data and comments): geo, bungeelabs, and titaniumwombat
• Use Google Maps: If a picture has geo data a little globe will appear in the upper-left corner in the results list. If you click on the picture a map tab shows up in the bottom part of the preview pane. Click on that tab to see the picture on the map.
• Double-click/Drag-and-drop: You can double-click on a picture you like to put it into the “choice pics”. You can also drag a picture from the results area into the “choice pics” list.
• Open Map: The Open Map button will open a new window with only the pictures from your results that have geo data. Now, if you click on one of the photos the main window will show that picture in the preview pane. Pretty slick, don’t you think?
• Comments: If a picture has comments a tab will appear in the photo info pane in the bottom center and you can see all the comments left by users.

This was the first app that Travis and I have spent time collaborating on inside of Bungee Builder and it worked out really well. I built the functionality and checked it in and then Travis took it from there and started working on the design. Travis added a resource project and uploaded the images to the datacenter (Bungee Grid). While Travis was working on the design I kept working on some additional functionality to get us to the final product we have now. Is the functionality complete? I don’t think it is. I’ll keep adding functionality as I get time. I’ve gotten more suggestions on additional features since making it look better. My users have much more to say about the app since we made it look sexy and easier to use. Let me know how you would extend the app.

Alex Barnett, Lyle Ball and Ted Haeger will be joinging me at AJAXWorld Sep 23-26th, if you’d like to meet to discuss this app, any other app or BungeeConnect drop me a note in the comments. Also, in the coming weeks developers with a Bungee Connect account will be able to import and inspect this application.

-Brad Hintze

[Original Post Moved]

Alex Barnett, Brad Hintze, Lyle Ball and Ted Haeger will be at Salesforce.com’s DreamForce conference next week. We’ll be spending a lot of time in the developer lounge, attending developer sessions, and eating sushi at Blowfish.

Leave us a comment if you’d like to hook up with us while we’re there.

During our beta stage, and while we finish rounding off the corners of Bungee Connect, there are a number of features I want to start shedding more light upon. This is the first in a series blog posts I’ll be publishing that I hope our beta developers will find useful.

This particular post will be a quick hit at Form development in the builder. Bungee Connect is all about rich UI, so this is a natural place to start.

First let’s take a look at what you see when you open a form for the first time in Bungee Builder’s Design Editor panel (shown at right).

The first thing to note is that by default a form is set to a Grid Container layout. There are 6 container layout options when building a form. I won’t go into too much detail on each, you can click the link for each to read the docs – but the short story version is:

• Grid – Lots of squares. Great for laying out forms with consistent alignment and similar sized areas. Great for embedding other Grids, other layout container types, or even other forms. Yes, you can embed containers inside other containers and forms in other forms . . . we’ll get to that.
• BulletinBoard – Essentially absolute positioning. Stick a control on the form like you’re sticking that ‘room for rent’ 3×5 card up on the grocery store bulletin board. Great for getting really specific about where something needs to be on the screen but perhaps not so great for specific alignment.
• HorizontalBox – Use this if you want to be able to have items align horizontally - maybe a row of buttons or check boxes, constrained to a specific width and height.
• HorizontalWrap – Kinda the same as the horizontal box – but will wrap the contents if they exceed the width of the container. Use this if you’re looking for an interaction similar to Windows Vista Explorer’s ‘Tiles’ layout.
• VerticalBox – Just like horizontal box except it’s vertical . . . maybe a scrolling list of shopping cart items.
• VerticalWrap – Hopefully you’ve figured out the pattern by now. This is going to align objects vertically but wrap them if they exceed the height of the container – kinda like the Window Vista Explorer’s ‘List’ layout.

If you want to change the layout of a form you can select the parent container for the form by clicking in the grey area around the form or if you have a control selected, you can press the up arrow on the keyboard. You’ll see the properties pane at the bottom of the builder change out to the properties for the Grid. Click the Layout Tab and choose an option in the Container Type dropdown. So maybe we should clarify at this point. Containers come onto a form as a control, but you can change the control layout type by modifying its Container Type property. So in a way, container types are both controls and properties on those controls.

So, if you have more questions about the specific container types, check out the documentation, get into the builder and explore the containers themselves and you can always ask questions in the forums. If you have suggestions about more container types or changes to the existing container types let us know in the forums as well.

The Grid
The most common (probably because it’s the default) container type is the Grid. We’ve spent a lot of time trying to make the Grid very flexible and useful, and you can build some really compelling forms with just the Grid alone – especially if you take advantage of embedding other containers inside the Grid. The first thing I want to call out is the ability to break down Grid walls. It’s a simple but useful way to manipulate the look and feel of forms. You’ve used similar capability I’m sure when building out tables in Microsoft Word, or maybe using the Merge Cells button in Excel. As you mouse over a grid line you’ll see that there’s a little minus symbol (-) in the middle of the line. The minus means you can remove the cell wall – click the minus sign and the grid wall is gone for that cell:

After you’ve removed the grid line, you can mouse over the same region and see the grid line display a plus symbol: That means you can restore the grid wall – click it and the wall is back:

Play with it, it’s pretty cool and you can use it in creative ways to build rich Grid forms. There are some gotchas in there though, especially if you try to start building cell structures that don’t fit the inherent limitations of table layout in HTML.

The next thing to notice when working with the Grid is the little grey and green ruler ticks.

Notice the colors–grey and green: The grey tick is a slider for sizing the row or column that you’re editing. Rather straight forward.

The green tick is a bit more useful. It’s a window to some, for lack of a better word, hidden features of the Grid. When you mouse over the green tick you’ll see one of the rows or columns highlight like this:

This tells you which column or row you’re about to modify. You can modify specific settings for that row or column by clicking on the green tick. You’ll get a popup menu, as shown at right.

Let’s take a closer look at the popup menu and its options:

• Edit Column: Click here to open a dialog that will let you type in specific sizing for the row or column as well as set explicit margins.
• Insert Before: (Above for Rows) : This will insert a new row or colum, as it says, before or above the column or row you’re editing.

Ok, I just need to stop the madness . . . can we just assume that what we can do for a column, we can do for a row . . . that way I don’t have to spend the next 5 hours typing “blah blah blah row or column blah blah blah” We’re all smart people here, you can figure this out, I guarantee it!

• Insert After: This will insert a new column after the one you’ve got highlighted.
• Remove Column: This will remove the column, but this option will be disabled if there’s a control in the column you’re trying to remove.
• Stretchable: Ahh, this one is good. If you’re designing a dialog that is intended to be end user stretchable – and I sure hope you are because only the best dialogs are designed to stretch – this will allow the column to widen automatically as the form is resized by your end user. Turn this off and your column will maintain its width, no matter how big the form gets.
• Locked: This prevents the column from being resized during form design in the Builder. This setting doesn’t affect the form during runtime.
• Separator: Turn this on to give your form a resizing bar that will let your end user configure the width of the column during runtime. You also see an example of that in the builder itself when you resize the different main areas of the builder.
• V-Align: There are three buttons here that will set the vertical alignment that is applied by default to controls in the column.
• H-Align: Three more buttons, this time for the horizontal default alignment for controls in the column.

Embedded Containers
In the toolbox on the left side of the builder there’s a section called “Containers”. You can drag containers onto the parent form, just like you can drag controls onto a form. For this example we’ll keep the parent form a Grid and bring a BulletinBoard container into the top left cell of the parent Grid. Now we can start bringing controls right onto the embedded BulletinBoard container. In this screenshot I’m bringing on a simple Button control. Since the embedded container is a BulletinBoard, I’m prompted with a tooltip showing the x and y coordinates of the mouse position while I place the control, as shown at right.

Embedding containers is pretty powerful. Another example follows. In this case I’ve changed the parent form to a BulletinBoard layout and I’ve brought on a Grid container from the toolbox – kinda looks like it’s floating there:

So, I’ll take it to the extreme a bit and do something that you probably wouldn’t do normally, but does show off the ability to nest several embedded container types – here’s 4 nested Grid containers each inside their respective parent Grids, again at right.
Embedded Forms
Different from embedded containers, embedded forms are another way to make form building effective and fast. Essentially you can re-use forms, much like re-using code. I’ll try to cover this as a simple tip and trick and warn you that there are two valuable controls called Dynamic Form and Dynamic Form List that are similar but more powerful than simply embedding forms. I won’t get into those right now, and believe me, you want me to – but that concept is best left to its own separate post. If you can’t wait; check out the documentation on the Dynamic Form and the Dynamic Form List. Be sure to explore the code samples that go with the documentation which you can import directly from the Builder start page.

Ok, that said, let’s get to the more simple, but still cool, embedded form. I won’t go through screenshots of all of these steps, but I’ll talk you through it. For this example I’m going to create a very simple form that will display, oh . . . let’s say . . . latitude and longitude. I’m going to use a Grid so that I can have clean alignment between the elements.

Something like this:

We’ll call this the “detail” form. As I said, it’s a Grid and I’ve aligned the Labels to the right. I’ve also set the margin on the rows and columns to 10 (by clicking the green tick) to give some spacing for a cleaner look. I like the overall form size: height 85, width 210.

Next I’m going to create a completely separate parent form to hold a Google Map control and then embed the detail form under the Google Map, as shown at right.

So how did I get this look? As a final step, let me walk you through it.

1. Keeping the parent Grid, I broke down the middle Grid wall for both rows on the form…
2. …and then I dragged the middle row height slider down a bit to make the top cell taller than the bottom.
3. I dragged the Google Map control into the top cell. It sized itself to occupy the entire cell.
4. I dragged the detail form from the solution explorer onto the bottom cell. It’s now embedded in the parent form as a reference to the original detail form. What that means is that any changes you make to the original detail form, will automatically reflect in this parent form as well . . . make sense? . . . Hope so.
5. When I embedded the detail form, it also sized itself to fit the entire Grid cell, but I don’t want that, I want it the original size so I clicked on the embedded form and set its size (in the layout section of the properties pane – make sure you have the embedded form selected and not the parent form when you change this) to my original 85 x 210. That made it smaller than the cell it’s embedded in and now looks like there’s a good clean margin around the whole embedded form.

When I simulate the new form, it looks as shown at right.

There’s a lot of ways to build forms with Bungee Connect and we try to keep it powerful and effective while still being somewhat simple. Hopefully you’ve got something out of this “tips and tricks” post that’s useful and you can immediately start applying to your own form development. There’s a documentation link on building forms that can also be found here.

Stay tuned, there’s plenty more tricks to show off in future posts.

Thanks!
Dave Brooksby
Product Manager
Bungee Labs

Due to the U.S. Holiday on Monday, we have moved the September “Jump Call” to the 11th, at 2:00 MDT.

The Jump Call provides web developers in the Bungee Connect Early Access Beta with an opportunity to talk directly with the Bungee team, and ask questions about Bungee Connect.

Agenda for the Sep 11 Jump Call:

1. What’s in latest system update to Bungee Connect
2. A short Update and How to on Bungee Connect Documentation
3. Open Q&A

Please pre-register for the event, see the forums post in the Bungee Connect Developer Network.

[Original Post Moved]

Recently, one of the participants in the Bungee Connect early access beta asked me how to view XML information in Bungee Connect. The usual context for needing to view an XML doc is when calling a REST API, so I’ll use that as an example. What follows may not be a complete answer to the developer’s original question, but with a little luck, it provides a solid enough foundation from which a developer can discover tricks. Also, I’ll build from simplest (no Bungee, just a browser) up to most involved (inspecting an XMLDocObject that has been populated from a REST reply).

Start with the Browser
The easiest way to view the XML reply to a REST call is use your browser. For example, take a look at last.fm’s Audioscrobbler API. The REST API for finding artists similar to Moby would be http://ws.audioscrobbler.com/1.0/artist/Moby/similar.xml. To see the XML for the API, you just enter the URL into the browser’s address bar.

Using HTTP.get in Bungee Connect
The easiest way to make the same call in Bungee Connect is to use the HTTP utility (found under TypeLib: Utility) to call the same URL. To do this, you add a var to a function, setting its type to HTTP, and its default value to Object so that the HTTP var gets instantiated with the function.

Next, you add the call function() command, setting it to call the HTTP var’s get function. The get function has two arguments: an [in] for the URL to call, and an [out] for where to store the result. Assign the latter to a string field, and now you can make a form with a button bound to your function, and a MultilineLabel bound to the response string. When you simulate the form, you get a quick way to see the raw, unformatted XML. It’s not pretty. The ‘<’ and ‘>’ characters appear in HTML encoding (ampersand-hash-60-semicolon), for example. But it does confirm whether or not your Bungee Logic is retrieving XML for your API call or not.

I hardly ever use this technique, but when I was just getting used to using Bungee Connect, I found it re-assuring to know that I was at least successful at getting XML responses.

Using XMLDocObject.readUrl in Bungee Connect
For most REST calls, you will use the XMLDocObject utility. You do this by creating a var based on the XMLDocObject type (also found under TypeLib: Utility). XMLDocObject has a function called readUrl, which allows you to import the XML directly into an object type designed for storing XML. You use this in much the same way as the HTTP.get function. First you add a var to a function, setting its type to XMLDocObject, and its default value to Object. Next, you add the call function() command, setting it to call the XMLDocObject var’s readUrl function. When executed, the readUrl function will populate the XMLDocObject with the XML response.

The data stored in the XMLDocObject type is constructed like this:

Within the XMLDocObject structure, the XML data is stored in the fields below the root field. You can use these fields to start inspecting the XML data.

For example, to know which XML element was assigned as the root of the response to the audioscrobbler API that we have been using as an example, you can assign XMLDocObject.root.name to a string that displays in a form, or simply use the dialog message command in your function to display the var XMLDocObject.root.name as a browser dialog message. For the audioscrobbler API above, the result is similarartists.

You can also inspect a little deeper into the XMLDocObject using the two collections, attributes and children. Because these are collections, inspecting their exact content is not quite as easy as displaying XMLDocObject.root.name, but you can still get some quick information. All collections have a numItems field, which will tell you the count of items in the collection. Once again using our audioscrobbler API example, you will find that XMLDocObject.root.attributes.numItems equals 4, which is the number of attributes in the similarartists element (artist, streamable, picture, and mbid). Likewise, you will find that XMLDocObject.root.children.numItems equals 100, which is how many artist results come back with each call to audioscrobbler’s similar artists API call.

Wrangling XML Into Objects
Inspecting XML is the first step to making it practical in Bungee Connect. The next step is converting XML into actual data objects. The XMLUtil utility provides an xmlToObject function for just that purpose. If you would like to learn how to use this handy function, check out the tutorial called “REST Easy” in the Bungee Connect Documentation wiki.

One Last Thing
I should also mention that within the next two weeks, we plan to roll out a killer new feature that Bungee engineer Nate Ekstrom has been working on to help in debugging your Bungee Logic: code break points. When that feature hits, BCDN developers will have a much more elegant tool for inspecting XML responses than the tricks I share above. Since the feature is certainly worthy of its own blog post, with screenshots, I’ll save the details until we get the feature rolled out.

–Ted

Why should you consider attending AjaxWorld Conference and Expo? I can think of two good reasons.

1. First off, you can win $5000 for registering right now.
2. Secondly, Bungee Labs’ own Alex Barnett will be presenting at the event.

It’s likely that you will find some of the other Bungee Boys hanging out at the show, so if you’re going to be there, drop us a comment on the blog. We’ll make sure that we can meet up.

It’s been confirmed that I’ll be presenting at the AjaxWorld Conference and Expo, Sept 23-26 2007 at Santa Clara. According to the schedule, my session takes place on Day 1 (Sept 24), 10:10am to 10:50am, as part of the Bleeding-Edge AJAX Applications track.

The sessions and speakers list is impressive so I’ll be looking forward to the event and seeing where the industry is heading.

If you are planning to go and want to meet up, then ping me! (alexb at bungeelabs dot com).

Alex.