Views

Flexile provides a very rich way of organizing your fields and displaying your data. Flexile uses a few key concepts, though that you’ll need to understand before you start setting up custom views.

View Structure

There’s a very specific structure setup for each “view” you create. This will allow you to setup your custom view to fit in the various places within Flexile that displays your data.

The are 3 main places data can be displayed: The Record List, The Link List and the Record Detail. However, the iOS device can be rotated in two orientations, so that gives us 6 places we can arrange our data:

• Record List - Portrait
• Record List - Landscape
• Links List - Portrait
• Links List - Landscape
• Record Detail - Portrait
• Record Detail - Landscape After you’ve added a view, you can edit each particular place/orientation that Flexile displays data. Note that you don’t have to edit all of them. If, for instance, you’re fine with the way Flexile displays data in Lists, then you need only edit the “Detail Views”. Any places you don’t edit will be arranged by Flexile using its own layout engine.

Where do I find “Views”?

• The easiest way is to use the “glasses” icon (the view selector) and tap on the Edit button for the view you want to edit. This will bring you directly to the View Editor for the screen you’re currently looking at.
• The standard place is in a table’s options. You can open a table’s options by tapping the Gear icon to the right of the table listing (iPhone, iPad->Sidebar). If you’re not using the sidebar on the iPad (your tables are listed in a Grid), you can swipe-right on the table and then tap on the “Gear” icon. Once you’re in a table’s options, simply tap on the “Views” button in the “Table Constructions” section to be brought to the list of views for that table. If you’ve not setup any views, there’ll be nothing in that list. But you can add one by tapping on the “Add” button (shown right) at the top-right of the screen.

  Adding a Custom View

• Just as with editing a view, you can create a new one by tapping on the glasses icon and then tap on the Add button. This will allow you to name the new view. Once you’ve named it, you can tap on the Edit icon to edit the screen you’re currently looking at.
• To add a view from with the table options, tap on the “Add” button in the view list. When you do, you’ll have exactly one field you need to fill out: View Name. Once you fill it out, tap “Save” and you’re done, you’ve got a new custom view! After you save the new view, you’ll be presented with 6 buttons that will allow you to edit the 3 places (two orientations for each place) you can display your data. This is where the real fun begins. Tap on the one you want to edit.

  Pages

  Flexile allows you to organize your fields into “pages” (sometimes called “tabs” on other platforms). This allows you to easily group your fields together and provides “room” when you can’t (or don’t want to) fit all of your fields in the space allowed by your device. All views can have pages, including the List views where it’s most useful (Record List & Links List).

Anatomy of the View Creator

There are a variety of sections in the Custom View Creators, some of which are only available in certain view types. Also, even though many of the screens I show are for the iPhone, the iPad is pretty much the same. I’m just using iPhone photos because they’re easier to fit in the tutorial.

Settings

If you tap on the “Settings” button, you’ll be give a couple options. At the moment there aren’t too many:

• Use Header: If you’re editing a List view (Record or Link List) you’ll have the option to Use Header, which displays the “Header” section. You don’t have this option for “Detail” views.
• Snap To Guidelines: You can also turn off “Snap to Guidelines”. Guidelines are displayed along the boundaries of other fields in the view when you’re dragging a view around. This allows you to align the view you’re dragging to other fields by “snapping” to the guide line when you’re close to it. This makes it easy to create nice looking views, but it can also get in the way if you’re doing some precise maneuvering.

  Pages

  This tab bar is where you can add, remove and select pages for the current custom view. Tapping on the “+” will add a page. Tapping on the “-“ will remove the currently selected page and all fields in that page will be replaced in the Unused Fields area. Of course, tapping on a page number will take you to that page so you can edit the fields there.

Note: You can have blank pages (not sure why you’d want to), but only if there is a non-blank page after the blank one. Otherwise, Flexile will “trim” trailing blank pages. Again, not sure why you’d want to do this, but I figured it’d be good to let you know.

Note: At the moment, there is a maximum of 7 pages.

Headers (Record & Link List Views Only)

The header area is where the headers are displayed for the fields you add to list views. If there is no header section, go into the “Settings” and select “Use Header”. Note: you can tap on a header to select a field and any changes made to the “Label Options” will apply to the header.

Field Area

The field area is where you manipulate the field elements to your liking. For “Detail” views, the field area is preset. You’ve got what you’ve got. But for Record & Link List views, the field area height is actually resizable. To resize: Tap on the field area (it’ll turn blue) and “Pinch” with two fingers to resize the area. I’ll explain “Pinching” a little more below. Umm… there is a minimum/maximum to the field area height. The maximum height is about 1/3 the area height and the minimum height is about 20 pixels (very small). You should also know that you can set the height of the area smaller than any of the fields present in the field area. If you can’t resize the field area smaller, chances are you have a field (possibly on another page) that preventing you.

Field Options

Field Options will show up when you select a field (tap on it). You’ll know which field you’re editing because that field will be selected with a blue overlay. The options you’re presented with will vary, depending on the field type and whether you’re using a header. Note that the field options can scroll, especially on the iPhone. If you see a light “»>” overlay at the edge of the options, then there are more options available. I’ll go more into Field Options below.

Unused Fields

This area is scrollable and contains all the fields you haven’t used yet. It also contains some elements you can use like grouping and dividers. All of the elements can be “dragged” up-out of the Unused Fields container and deposited in the Field Area. However, since the area is scrollable horizontally, you have to drag “up” in order to grab a field. Otherwise, you’ll just end up scrolling. If you’re having trouble, you can also “tap & hold” on an item to grab it before you drag it.

Moving Stuff Around

Moving stuff around is exceptionally easy. Simply drag it. Yeah… that’s pretty much it… well, ok maybe not. There are a couple things you should know:

• Grid Lines: Flexile uses grid lines to help you align your views. Initially, grid lines are placed about 5px from the each of each side of the Field Area. For each view placed in the field area, 5 (yes, five) grid lines are generated. One grid line is generated for each side of the field (that makes 4). One extra grid line is generated between the label of the field and the field itself. This will allow you to align the values inside a field very useful for when the field labels differ in size. Of course, that 5th grid line is only generated when there are field labels. Otherwise it’s just 4 grid lines. :) Oh…also, when you drag a field, it’s original grid lines will remain active until you drop that field. This should make it easy to find it’s original position in case you want to return it.
• Out of Bounds! You can only “drop” stuff you’re dragging in the Field Area. If you drag something outside of the Field Area, it will be return to the “Unused Fields”… usually. If you’re editing a Record/Link List view, and you drop the field outside of the Field Area, but the area can be expanded to fit the field, the field area will expand itself automatically to accommodate the field. By the way, this is how you remove fields from your view: just drag it out of the field area.

  Resizing Stuff

  Aside from moving stuff around, probably the next best thing you want to do is to resize your fields. To resize a field (or object) you have to first select it. Selecting is easy: tap on it. After you’ve selected the field you can now “Pinch” to resize it. There is something very, very important you should know about pinching:

You do not need to pinch on the field itself.

Seriously, this is important. As long as the field is selected, you can pinch anywhere on the screen. This is important for a couple of reasons:

• If the field is small, trying to pinch on it can be an exercise in frustration. We don’t want you to be frustrated.
• So there’s a technical problem here regarding “gestures” (i.e. - things you do on the screen with your fingers). So, we need to detect when you’re dragging something… and we also need to detect when you’re pinching. Sometimes, if you pinch and one of your fingers is over a field (any field), we screw things up and think you’re trying to drag something instead of pinch something. This can result in undesirable results. I’ve done as much as I can think of to prioritize pinching over dragging but sometimes this still happens (especially if one finger is moving more than the other). So it can really help to pinch on a part of the screen that doesn’t contain any fields.

  Directional Locking

  When you start pinching, Flexile will attempt to determine which dimension is the “primary” dimension you’re trying to change (height or width). Once it determines this, it will “lock” the resizing to that direction so that the other dimension can’t be changed. The reason it does this is because normally we are only looking to change one dimension (increase the height/width/etc) and it can be really frustrating when you’re trying to change the height and the width also keep changing on you.

The moral is this: only attempt to change one dimension at a time. It’s easier and makes life rosy.

Options

So there’s a lot here… brace yourself. Whenever you tap on a field, you’ll be presented with toolbars to change various aspects of said field. I’m going to go over all the various options. Just note that not all of these options will be available at any particular time. It all depends on what you’ve selected. Some Fields may not have any Field Options at all (like an Image Field).

Field and Label Options

The following options are available for both fields and labels. They’re all related to the font, which makes sense.

• Font Size - This is a common option. Tap the big “A” to increase the font size and tap the little “A” to decrease the font size. Easy peasy.
• Font Alignment - Another common option, this option will allow you to align the text to the left, the center or to the right. As a small side note: this option is also available for the checkbox field and will, of course, align the checkbox.
• Font Selection - These to option boxes will allow you to select the font and the font style. The font option contains all the standards we’re used to plus a few extra. The font style will allow you to set stuff like: Bold, Italic, etc, for the particular font selected. You may note that the respective fonts of the buttons match your selection. Not shown: the selection list also displays each item in it’s respective font. This takes the guess-work out of font selection.
• Color Options - Tap on the “Colored Box” to change the color of the font. Once do, you’ll be given a set of 8 major color options to choose from. Tap on one of those options and you’ll get a set of 45 sub-options within that major color to choose from. This gives you 360 color options. Note: The color control is also used for the grouping control background color (explained below).

  Additional Label Options

  Aside from the text formatting options, there are a couple of additional options you get for labels.

• Show Info - For each field you add, you have the option to display an info bubble for that field (shown right). The info bubble is the same one Flexile uses to show help information, but instead it will display the respective field’s description. This allows you to insert instructions, hints, etc in the field descriptions and display it using the info bubble. It can be very useful since, as a rule, you don’t really want the names of your fields to be super long and yet you still want to be able to “find out” what that field is supposed to be there for. Very Cool: The info bubbles actually support full HTML, so if you know HTML feel free to format your info bubble with some tags. It can really help make it readable.
• Label Placement - First, you should be aware that the Label Placement option won’t show up if you’re using headers, since using headers will default all fields to not use labels. Label Placement allow you to select where you want the label for your field to be placed. You’ve got five options: Left, Right, Top, Bottom (shown right) and None.

  Additional Field Options

  Currently, there is only one additional field option you should be aware of (the above font options cover most controls):

• Date Format - This option is used for the Date, Time and Date & Time fields. This will allow you to specify the format you want the date/time displayed in. Mostly the options vary by how verbose you want the date displayed. It’s common to use a short format (6/4/13) for List Views and longer formats (June 4, 2013) for Detail views.

  Additional Controls

  Flexile provides a few additional controls you can use to ‘spruce’ up your custom view and make sense of all those fields you’re flinging around. These controls can be found at the beginning of the list in the Unused Fields area. They act a little differently from the standard fields in that when you grab one it is copied instead of being removed from the list. This allows you to use as many instances of these controls as you want.

• Vertical & Horizontal Dividers - The vertical and horizontal dividers are simple dividing lines that allow you to divide your fields out visually. I’ve also seen some people use them to show a field as being the “Total” of other fields. They’ve even combined the horizontal and/or vertical lines to create symbols (+, = and - signs)… not exactly what I had in mind but kudos for the creativity. The dividers can be resized, but only in the direction of the divider. So the horizontal divider will only change it’s width and the vertical will only change it’s height… which kind of makes sense.

TIP: You may notice that you can, in fact, change the “other” dimension (a vertical divider’s width). You’ll see be able to see the selection overlay change, even though the dimensions of the divider isn’t changed. This can actually be very useful as the divider is drawn in the center of it’s view. So if you want a divider to be exactly half way between two fields, you simply align the edges of the divider’s view (which you can see when you’ve selected it) to the two fields and viola! the divider will be centered.

• Grouping Containers - The very first item in the Unused Fields list is a grouping container. It’s pretty much what it sounds like: it’ll allow you to group fields together visually. You can drag, drop and resize it just as you do with the other controls. When you do drop it, it’ll insert itself behind all the other standard fields (including dividers) but over any other grouping controls. So if you plan on overlapping the grouping controls, it’s advisable to setup the bottom, larger ones first and then drop the smaller, overlapped groups on top. Grouping Containers can be colored. When you tap on one, you’ll see the “Field Options” toolbar come up with a color picker…. have fun!

  Saving & Closing

  You probably don’t need to be told this, but when you need to save all your changes, tap on the “Save” button (top-right) of the screen. When you do save, it’ll also close out of the View Creator… so small warning there. You can also “Cancel”, which will discard all your changes and exit the View Creator. It’s the big red button with “Cancel” written on it (top left).