Quick Start Documentation for Rodeo v2.0.

xb
The Rodeo Editor for the Macintosh (BETA)! 3

Signing Up! 3

Logging In! 4

Logging Out! 4

Rodeo 2.0 Window! 5

Tree, Toolbars, Workspace! 5
The Top Toolbar! 5
The Bottom Toolbar! 6

Rodeo Views! 6
The Web View! 6
The Defs View! 7
The HTML View! 8

Rodeo Modes! 8
The View Mode! 8
The Edit Mode! 9

Adding and Deleting Objects! 9

Adding an Object! 9
Naming and Renaming Objects! 10
Deleting an Object! 10

Locking a Definition! 11

Saving, Restoring, and Closing! 11

Hiding, Showing, and Re-sizing the Tree! 11

The Rodeo Menu Bar! 12

Working Between Versions of Rodeo! 12

The Rodeo Data Object! 12

How to Make an App Data-Aware! 12

Adding the Data Object! 13

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 1

Adding the Table Object! 13

Adding a Display Object! 14

Adding Built-in Data Services! 14

Linking to an Image! 16

Publishing Your Rodeo App! 17

Building Your Own Viewer! 18

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 2

Quick Start Documentation for Rodeo v2.0.xb
The Rodeo Editor for the Macintosh (BETA)

Rodeo 2.0.x BETA is a Desktop app for the Mac that lets you create and edit definitions that
our server converts into Rodeo apps, pages, and objects for the Web. The aim of this short
document is to get our BETA users up and running with Rodeo 2.0.xb, and is not intended as full
documentation.
Join Rodeoapps.com to discuss questions and issues not covered here.

Signing Up
If you haven’t already signed up for the Rodeo BETA offer:
• Go to http://rodeoapps.com/limited-pre-release-offer.
• Scroll down to the blue CLICK HERE link and click it.
• Fill in and submit the Sign-up form.
• Check your Inbox for an email verifying receipt of your form, and containing a PayPal
link.
IMPORTANT: You must click the PayPal link to pay for your license before we can register
you on our server.
• Within 24 hours of payment, you’ll receive a “Welcome to the Rodeo” confirming that
the User Name and Password you supplied in your sign-up form has been registered with
our server — and containing two links:

One for downloading the Rodeo.zip file containing version 1.0.x.

One for downloading another zip file containing the new BETA version 2.0.xb.
• Since this early release of 2.0.xb does not yet incorporate all of the niceties of the 1.0x
pre-release version, we recommend that you familiarize yourself with both versions.
• You can run these two versions of Rodeo simultaneously, moving back and forth between
them at will.
• Several Pickers are available in the Rodeo 1.0.x’s Definitions editor that have not yet
been migrated to 2.0.xb — and you might find it more efficient to set certain properties of
objects in the old version, such as:
URL links
Background Images

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 3

 Icons
Colors
• If you are new to Rodeo, since this Quick Start only documents features that are currently
available in the BETA version — you should also review the 1.0.x Quick Start to learn
about features in the old editor like the Pickers mentioned above that will be migrated to
2.0 as soon as possible.

Logging In
• Unzip the downloaded file and double-click the
Rodeo 2.0.xb app icon to go to the Login
screen.
• Enter your registered User Name and Password
and click the Log In button (or type Return or
Enter) to open the editor.
• After successful login, the Rodeo Tree with its
hierarchical list of objects will be loaded on the
left — and the Rodeo Home page will appear
on the right. (It may take a few seconds for the
Tree to populate.)

NOTE: Once you are logged into the Rodeo server, your session will persist until you log out.
So if you quit Rodeo without logging out, when you open it again, login is bypassed — and the
Tree and the Rodeo Home page are loaded right away.

Logging Out
• Click the Logout button on the right side of the top toolbar (or choose
‘Logout” from the Go menu), and you’ll be returned to the login screen.
• You can either login again from this screen, leave the application in this
state and return later to login again — or quit the application.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 4

 Rodeo 2.0 Window
Tree, Toolbars, Workspace
• Like all professional applications on
the Mac, the Rodeo 2.0 Editor now
has top and bottom toolbars.
• The Rodeo Tree still appears on the
left, with a hierarchical listing of
your apps, pages, and objects.
• The workspace on the right changes,
depending on your chosen view:
Web View
Definitions View
HTML View
The Top Toolbar
This toolbar houses general navigational operations, plus printing, logout, and customization.

The Navigational toolbar behaves like all standard Mac toolbars:

• Click any icon on this bar to execute its related function.
• Choose ‘Hide Toolbar’ from the View menu to hide the bar; or ‘Show Toolbar’ to show it.
• Click the Customize button (or choose ‘Customize Toolbar...’ from the View menu) to
open the semi-transparent Toolbar Editor dialog and set-up the toolbar to your liking:

Drag tools and bar graphics on and off the toolbar to add or remove them.

Use the Show menu and its associated checkbox to specify whether icons appear large
or small, and with or without text.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 5

 Drag the default set from the dialog to the toolbar to reinstate Rodeo default options.

Click Done to dismiss the Toolbar Editor dialog.

The Bottom Toolbar

This is toolbar houses basic Editing functions:

• Click the + button to add an object to the Tree.

• Click the - button to delete an object.
• Click the Edit Mode button to make the currently displayed page editable.
NOTE: More on these editing operations later in this document.

Rodeo Views
Three Ways to View Your Apps
• The Web View
• The Definitions View
• The HTML View

The Web View

When you first open Rodeo and select an item from the Tree on the left, its associated page
will display in the right-hand workspace just as it would appear in any web-kit enabled browser.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 6

 • While an app is in Web view, it behaves just as it would in any browser:

Clicked buttons will execute their internal behaviors.

Editable fields will accept typing.

Radio buttons and checkboxes can be selected and deselected.

Pop-up menu items can be selected.

Tables can be sorted, scrolling fields scrolled, line items in lists selected, etc.
• If you have navigated away from this view and wish to restore it:

Click the Web button on the top toolbar (or choose Web View from the View menu).

Alternatively, if you are in edit mode, click the View mode button.

The Defs View

The Defs View displays the definition for any object or action currently selected in the Tree.

• Once you select a target item in the hierarchical Tree list, there are three ways to view its
definition (example shown above):

Click the Defs icon on the top toolbar (or choose Defs View from the View menu).

Double-click the item in the Tree.

Click the Edit Mode button that appears on the right side of the bottom toolbar, then
click the item on that page whose definition you wish to view. (More on working in
edit mode later in this document.)

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 7

The HTML View
The HTML View lets you review your definitions in their converted HTML5, CSS3, and
JavaScript format.

• Click the HTML icon in the toolbar (or choose HTML View from the View menu).
• The HTML script for the currently selected page will be displayed in the workspace. This
script includes revised code for the app-level definitions, the page’s definitions, and the
definitions for all of the objects on that page.
• Select all or part of the HTML to copy and paste it into any text or html editor.

Rodeo Modes
The Rodeo workspace has two operational modes:
• The View Mode
• The Edit Mode

The View Mode

You’ve already seen this mode in the previous
section on the Web View.
• Use this View to test the behavior of your
app and its objects.
• You can also view and test your apps inside
any web-kit enabled browser — but the
internal Rodeo browser view is a great
convenience while you’re building your app.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 8

The Edit Mode

• To put your app into edit mode, simply click the Edit Mode button on the right side of the
bottom toolbar.
• When you do this, two things happen:

The name of the Edit Mode button changes to View Mode (which you can click at
any time to return to Web View).

The background of the displayed page is replaced by the checkerboard transparency

background used by so many other editors, such as Photoshop.

NOTE: In Rodeo 1.0.x, the edit mode is identified by rainbow gradients in the
window’s header and footer. But it was too easy to forget that you were in this mode,
click an item to test its behavior — and end up in that item’s definition instead. So
we’ve adopted the checkerboard background to make the window’s editable state
much more obvious.

Adding and Deleting Objects

Adding an Object
•To add objects to your Tree via the Add Object popup
menu:
Click the + button in the bottom toolbar below the
Rodeo Tree (or choose ‘Add a New Definition’
from the Definitions menu).
The ‘Add a New Object’ popup window shown left
will appear.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 9

 • Use the Object Type popup menu to select an object according to the current object level:

If you have Rodeo selected in the Tree, you can add an app.
If an app is selected in the Tree, you can add a page to that app.
If a page is selected in the Tree, you can add an action or a listed UI item to that page.
NOTE: The list of supported objects for pages is growing daily, so keep an eye on the
Rodeoapp.com site for news of updates.

Naming and Renaming Objects

• When you add an object, you’ll need to type its name into the Object Name field in the
Add a New Object window and click the Add button.
• Your new button will appear selected in the Tree, and an appropriate default definition
will appear in the Source field of the Definitions View (partial example shown below).

• To change its name, view its Definition and:

Select the old name (which is ‘Ask Name’ in
the example on the left).
Type the new name.
Click the Save Edits button.
• Your object’s name will be updated in the Tree.
IMPORTANT NOTE: If the object is referenced by its old name in other definitions, be sure to
update the name in every instance. Eventually, Rodeo 2.0 will have search and replace; but in
these early days, you use this feature in Rodeo 1.0 to accomplish this vital task.

Deleting an Object
• Click any item in the Tree.

• Click the ‘-’ button on bottom

toolbar (or choose Delete Definition
from the Definitions menu).

• Click the Delete button in the Delete

dialog to permanently remove the
item from your Rodeo account.
WARNING! This action is not undoable! Deleted items are permanently removed from the
Rodeo server. So be sure that you’re removing the right object — and that you really want to
remove it and its definition — before you click the Delete button

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 10

Locking a Definition
Rodeo has been built from the ground-up to support simple team collaboration — yet it’s so
unobtrusive that single users will hardly notice that it’s there. Here’s how it works:
• The first person to open an item in the Rodeo Defs View owns it until he or she goes to
another definition or another view. Everyone else is locked out for the duration.
• Others can still see it the Tree View’s Source field, but they can’t access that definition in
the editor. And as long as the definition remains locked, its name will be displayed in
everyone else’s Tree as red.
• If you’ve been locked out of a definition, double-click its reddened name in the Tree to
open a popup showing the current owner, and how long the item has been checked out.
NOTE: More locking options will be added soon. Meanwhile, these extra options are available
in the 1.0.x version. Find out more in the Rodeo Quick Start for this version.

Saving, Restoring, and Closing

• As you edit a definition, saving is automatic. When you’re done, you can click the Save
Edits button below the Definitions window — or go to any other view to trigger the save
mechanism on the Rodeo server.
• Definitions are also automatically saved if you close the Rodeo window.
• There is currently no way to restore a definition in Rodeo 2.0. So if you wish to restore
an edited definition, move over to Rodeo 1.0, and choose ‘Restore Definition’ from that
app’s Edit menu to revert the definition to the previously-saved version.

Hiding, Showing, and Re-sizing the Tree

To modify the width of the Tree:
• Put the pointer over the right side of the
scrollbar to turn it into a dragger.
• Drag left or right to re-size in either
direction.
• Drag all the way to the left to completely
hide the Tree.
• To show the Tree again:
Put the pointer over the left edge of
the window til it turns into a dragger.
Drag it to the right and hold until the
Tree re-appears.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 11

The Rodeo Menu Bar
All of the standard Mac menu bars and few extras are included on the Rodeo menu bar, and
you’ll be familiar with most. Others have already been mentioned earlier in this document. There
are just a few additional notes to add here:
• The Edit menu now includes the standard spelling and grammar checking tools which can
be used, for instance, to check spelling in any text field, including the Definitions field.
• None of the options on the Format menu are enabled yet.
• The ‘Smaller Text’ and ‘Larger Text’ options on the View menu only apply to regular
Web pages loaded into the Rodeo workspace; not the apps that you are building.

Working Between Versions of Rodeo

Since this is an early version of the Rodeo 2.0 BETA, there are several features that have not
yet been migrated from the Rodeo 1.0 environment that you will find very useful — and even
necessary — to your development efforts. These include:
• Uploading images, backgrounds, and icons to the Rodeo server
• Using Rodeo’s existing library of backgrounds and icons
• Using a Color Picker to set the R,G,B of an element
• Auto-setting standard properties such as object types and styles
• Unlocking an object that’s been checked out by someone else for more than one hour
These are just a few of the reasons for working between the two versions, and reading the
Quick Start documents for both. And since all of these features will be migrated to 2.0 in due
time, learning about these features and using them will certainly not be a waste of your time. On
the contrary, you’ll be a Rodeo expert by the time the product is released in August — and your
license period actually begins.

The Rodeo Data Object

How to Make an App Data-Aware
With Rodeo’s built-in data object, you can easily set-up a table and connect it to records of
stored data. Here is a quick summary of the basic procedure:

• Add a new app to your Rodeo workspace.

• Add a data object to the page that was generated when you added the new app. (If you are
adding the data object to an existing app, you can add the data object to any page.)

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 12

 • Add a table object either to the same page or any other page associated with your app,
and give it the same name as the data object.
• Add all of the fields and other objects that will be displaying your data to the same page
as the table object — or to a secondary page if you wish to separate the table from the
record.
• Name your display objects after their column names in the table object. (You don’t have
to display all of these object in the table for the data to be saved and re-displayed.)
• Set the data property of each display object to the name of the data object.
• Add buttons that execute built-in data-object services for adding, saving, deleting and
navigating your records.

Adding the Data Object

You can only add one data object to an app. Although, for now, Rodeo will actually let you
create more, subsequent data objects won’t work.
• To add a data object to a new or existing app:

Select the target page in your tree where you want your app’s table object to appear,
then click the + button.

For the moment, this data object is just a placeholder — but it will soon allow you to
upload data files. For now, just create it and leave it.

Adding the Table Object

• Create a table object on the data-object page, or any other page in your app.

Set the table’s data property to the name of your data object:

set the data of me to "the name of your data object"

Set the title of column 1 to ID, then set its visible property to false if you want to hide
it:

set the title of column 1 of me to "ID"

set the visible of me to false -- or true

NOTE: Do not use the ID field for any of your data. This field belongs to the data
object, which maintains it internally.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 13

 Set the other columns of the table to display all or some of your data fields and
objects. This does not have to include every piece of data in your database records.

Remove the default line in the table definition that sets it’s filename.

Since the table does not know what sort of data it will be displaying, set the text
alignment of columns manually. Your table object will appear empty on the page —
except for its column titles.

Adding a Display Object

Display objects are the items that will display your data. These objects can be editable fields,
checkboxes, radio buttons, popups, or images. An example would be fields to display the first
and last names of a person in your database. Using the first name field as an example, you would
need to do the following:
• Add a field to the page where you want the data about this person to appear.

This field can be on the same page as the table object (so that your record would
display next to the table, for instance) — or on a different page in the app.

Each object that is to display a portion of the data must have its data property set to
the name that you gave your data object when you added it to the app. In our
example, you would add the following to the definition of your first name field:

set the data of me to "the name of your data object"

The name of any object whose data is also displayed in the table MUST be the same
as the table’s column name for that item. So, if the table displays the first name of
each person in your database under a column titled “first” — then you would also
name the field “first.” You can create a label for the field that says “First Name,” if
you wish — but the field that displays the name must be called “first.”
NOTE: Do not set a data property for any static information or decorative objects
used merely for design or instructional purposes, etc. — and whose data you don’t
need or wish to save.

Adding Built-in Data Services

The data object has five built-in actions for manipulating your records:
• “New” allows you to create a new record.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 14

 • “Save” allows you to save a new or an edited record.
• “Delete” allow you to delete the current record.
• “Next” goes to the next record in your table’s currently displayed list.
• “Previous” goes to the previous record in your table’s currently displayed list.
NOTE: The Next and Previous actions will navigate the records according to how they
were last sorted in the table list. So if a list whose default sort is, say, Last Name — and
you re-sort it by First Name — these buttons will navigate the records by First Name.

To build these actions into your app:

• Add a button to the page where you are displaying your record of data.

You can name the button whatever you like.

You can set the button’s definition to show or hide the name.

You can link the button to an icon.

Set the data property of your button to the name of your data object:

set the data of me to "the name of your data object"

Set the action of the button according to the built-in action you wish it to perform:

set the link of me to action "new" -- to add a new record

set the link of me to action "save" -- to save the current record
set the link of me to action "delete" -- to delete the current record
set the link of me to action "next" -- to go to the next record in the list
set the link of me to action "previous" -- to go to the previous record in the list

Once you do this, you are done. The action for each of these buttons is built into the
data object, so you do not need to define any of these actions in your app.

If your record appears on a separate page from your table, you may also find it useful
to create a button on the record page that returns the user to the table list. This button
should not be linked to the data object — but it must be linked to an action which you
WILL have to add. However, all you have to state in the action is:

go to page “the name of your table page”

• Once you have created and saved your first record, your table will be automatically
populated with whatever parts of that record you have set it to display. As you continue
saving records, this list automatically grows.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 15

Linking to an Image
Although images cannot be stored in your database, the URLs to those images can be stored.
Those images are linked to the appropriate record in the following way:

• Add a field to your record page to house your URL.

Call it anything you want, but for an example, we’ll call it “image.”

Set the data property of the field to the name of the data object.
• Add an image to your record page to page.

Give the image the same name as your URL field. In this example, that would be
“image.”

Set the top and left properties according to where you want the image to display on
the page.

Set the size properties according to the size of the largest image you wish to display.

Set the data property of the image to the name of the data object.

You do not need to set the filename property for the image, since the data object will
reference the URL in your “image” field, instead.
• Each time you create record, enter the URL to its associated image into the “image” field
and save the record.

The next time the record is displayed, the image will display in the linked image
object.

Once you have finished creating your database, if you don’t want users to edit the
database, you can optionally hide this field, along with the New, Save, and Delete
buttons. But to add any new records, or modify the URLs for existing records, you’ll
need to show it again.

That’s all you have to do to create a data-aware application. Have fun!

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 16

Publishing Your Rodeo App
Once you’ve finished defining your Rodeo App, the next step is to publish it to your Rodeo
server space where others may view it via a web-kit enabled browser. The process is so simple,
it’s hardly worth documenting — but, here goes:
• Open Rodeo and click the button for your target app on the Home page.
• When your app appears in the Rodeo window, make sure that it is also chosen in the
Rodeo Tree. Not a page or an object associated with your app, but the app itself:

• From the ‘Publish Content’ menu, choose ‘On Rodeo Server...’ (The two additional
options that are currently disabled will be available soon.)

• Click the Publish button in the resulting dialog to complete the publishing operation:

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 17

 app in your default browser so you can capture its URL for distribution to others whom
you would like to view or use your app:

That’s it. Your app is LIVE and you’re all done — unless, of course, you’d like to build your
own self-contained viewer for your application.

Building Your Own Viewer

Before you can build a viewer for your app, you must first publish its content to your Rodeo
server space (discussed in the previous section).
Once you’ve published your content, with your target app still selected
in the Rodeo Tree:
• Select ‘For Mac...’ from the ‘Build Viewer’ menu. (This menu also
has two currently disabled options coming soon.)

• Click the Build button in the resulting dialog to create a native Mac app to house your
content (i.e., pages, images, data, logic, etc.):

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 18

 • The Mac browser will open so that you can choose a destination on your Mac for your
new Rodeo-built app.
• Once you’ve chosen a destination, a second dialog confirms that your app has been built.

Click ‘Show in Finder’ to go to the place in your Mac where your application
has been stored.

Click ‘Run App’ to open and view your app in your proprietary viewer:

Your new app comes complete with:

• Toolbar
• Close, Minimize, and Maximize buttons
• Growable window
• Standard Mac menu bar:

Standard Mac Applications menu, named after your app. In our illustrated example,
the app is called ‘Portfolio.’ Its built-in options include:

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 19

 • About... — which opens an About Box for your app:

• Plus the standard options that let users hide your app, hide other apps, show all
currently open application, or quit your app.

The File menu offers the standard ‘Page set-up...’ and Print options for your app’s
current page.

The Edit menu offers the standard edit options, including Undo, Cut, Copy, and Paste
— and lets users do things like check spelling as they type in an editable field.

The View menu lets users Refresh, Stop [refreshing], Hide or Show the toolbar, and
Customize the toolbar. In the picture below, since the Portfolio app already has its
own Previous and Next buttons, as an example we removed these items from the
toolbar — along with Print, since it is also readily available from the File menu:

The Help menu offers the standard search field for general Mac help information.

Rodeo builds all of these menus, options, and behaviors into your proprietary viewer for you
— so that you don’t have to write a single line of code to implement any of these standard Mac
application features.

Rodeo 2.0 BETA Quick Start Docs — Revised 8/3/10 Page 20