How To: Forms, Design and Layout

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.

Default Form

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 Merge Cellsand 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: Divide Cells 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: Ruler ControlsThe 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:

Column controlThis 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
Embedded container 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.

Embedded containerEmbedding 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:

Infinite embeddingSo, 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: Form for Inclusion in other Form

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.

Embedded FormNext 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.Map form simulated

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: