Rodeo 2.0 Quick Start

8/9/2019 Rodeo 2.0 Quick Start

1/20

Quick Start Documentation for Rodeo v2.0.xb

The Rodeo Editor for the Macintosh (BETA)! 3Signing Up! 3Logging In! 4Logging Out! 4Rodeo 2.0 Window! 5

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

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

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

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

Locking a Definition! 11Saving, Restoring, and Closing! 11Hiding, Showing, and Re-sizing the Tree! 11The Rodeo Menu Bar! 12Working Between Versions of Rodeo ! 12The Rodeo Data Object! 12How to Make an App Data-Aware! 12Adding the Data Object! 13

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


2/20

Adding the Table Object! 13Adding a Display Object! 14Adding Built-in Data Services! 14Linking to an Image! 16Publishing Your Rodeo App! 17Building Your Own Viewer! 18



3/20

Quick Start Documentation for Rodeo v2.0.xb

The Rodeo Editor for the Macintosh (BETA)

Rodeo2.0.x BETA is a Desktop app for the Mac that lets you create and edit definitions thatour 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 havent already signed up for the RodeoBETA 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, youll receive a Welcome to the Rodeo confirming thatthe 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 ofRodeo simultaneously, moving back and forth between

them at will.

Several Pickers are available in the Rodeo 1.0.xs 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

http://rodeoapps.com/limited-pre-release-offerhttp://rodeoapps.com/http://rodeoapps.com/limited-pre-release-offerhttp://rodeoapps.com/limited-pre-release-offerhttp://rodeoapps.com/http://rodeoapps.com/


4/20

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 to2.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 youll 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.



5/20

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 ViewThe 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.



6/20

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 ToolbarThis 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.



7/20

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.)



8/20


9/20

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

windows 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 items definition instead. So

weve adopted the checkerboard background to make the windows editable state

much more obvious.

Adding and Deleting Objects

Adding an Object

To add objects to your Tree via the Add Object popupmenu:

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.



10/20

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, youll 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 objects name will be updated in the Tree.

IMPORTANT NOTE: If the object is referenced by its old name in other definitions, be sure toupdate 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 yourRodeo account.

WARNING! This action is not undoable! Deleted items arepermanently removedfrom the

Rodeo server. So be sure that youre removing the right object and that you really want to

remove it and its definition before you click the Delete button

http://rodeoapp.com/http://rodeoapp.com/


11/20

Locking a Definition

Rodeo has been built from the ground-up to support simple team collaboration yet its so

unobtrusive that single users will hardly notice that its there. Heres how it works:

The first person to open an item in the Rodeo Defs View owns ituntil 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 Views Source field, but they cant access that definition in

the editor. And as long as the definition remains locked, its name will be displayed in

everyone elses Tree as red.

If youve 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 youre 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

apps 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.



12/20

The Rodeo Menu Bar

All of the standard Mac menu bars and few extras are included on the Rodeo menu bar, and

youll 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 canbe 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 Rodeos 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 thats 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 theQuick 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, youll 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 Rodeos 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 yourRodeo 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.)



13/20

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 dont 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 ObjectYou can only add one data object to an app. Although, for now, Rodeo will actually let you

create more, subsequent data objects wont work.

To add a data object to a new or existing app:

Select the target page in your tree where you want your apps 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 tables 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 hideit:

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.



14/20

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 its 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:


The name of any object whose data is also displayed in the table MUST be the same

as the tables 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 dont

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.



15/20

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 tables currently displayed list.

Previous goes to the previous record in your tables 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 buttons 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 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.



16/20

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, well 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 imageobject.

Once you have finished creating your database, if you dont 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, youll

need to show it again.

Thats all you have to do to create a data-aware application. Have fun!



17/20

Publishing Your Rodeo App

Once youve finished defining yourRodeo App, the next step is to publish it to yourRodeo

server space where others may view it via a web-kit enabled browser. The process is so simple,

its 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:



18/20

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:

Thats it. Your app is LIVE and youre all done unless, of course, youd 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 yourRodeo

server space (discussed in the previous section).

Once youve 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.):



19/20

The Mac browser will open so that you can choose a destination on your Mac for your

new Rodeo-built app.

Once youve 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 applicationhas 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:



20/20

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 appscurrent 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 dont 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

Rodeo 2.0 Quick Start

Documents

Transcript of Rodeo 2.0 Quick Start