Gyroscope / Running Sample Projects

The previous chapter describes the user interface in abstract terms because Gyroscope is a versatile visualization layer that applies to many industries.

A sample application helps put the abstract concepts in context.

The standard Gyroscope package comes with two code bases: "template" and "sample".

The template project is the bare minimum starting point. This folder is usually copied as the initial deployment of a new Gyroscope project.

The sample project demonstrates the components of a property management system.

Each project folder contains a data subfolder, where a SQL dump file can be found and imported. The connection string is defined in connect.php.

Files in htdocs can be directly copied to web folders. For example, to enable Gyroscope for a website that's hosted in C:\Apache2\htdocs\helloworld, copy the files to C:\Apache2\htdocs\helloworld\admin; then the site can be accessed through http://localhost/helloworld/admin/.

A public demo is hosted at:

http://www.antradar.com/demos/gyroscope/

The default login is admin, and the password is demo.

Set up the demo app in the sample folder. Once signed in, click on each of the icons on the top left. The sample app is based on a rental property database where there's a collection of tenants, landlords, properties and leases.



In database terms, landlord-property is a one-to-many (1-n) relationship. A landlord can have multiple properties. This is implemented by having a Landlord ID in the Properties table. This ID is called a "foreign key".



The relationship between tenants and properties are many-to-many (n-n). A property could be occupied by multiple tenants, and a tenant could be renting multiple places, although realistically not all at the same time.

Many-to-many relations are implemented with a "bridging table". In this example, the Leases table bridges Tenants and Properties on two foreign keys: Tenant ID and Property ID. In addition, the Leases table contains additional fields such as the lease start and end date, rent amount, etc.

Clicking on the menu icons displays the records of each entity, i.e. list of tenants, properties, landlords and leases. Click on a landlord record to see the details in a tab.

The first section in the landlord view has information that's directly stored in the Landlords table. The "Property Ownership" section lists out all the properties that are owned by this landlord. Clicking on a property record will pivot from the landlord view to the property view.

Record pivoting is a signature feature in Gyroscope.

The property view has a list of leases - another one-to-many relationship. New leases can be created by clicking on the "add lease" button. Note how the property and landlord information is carried over to the lease.



Click on the "start" field in the new lease tab. A calendar shows on the left. Enter "2012" to switch the calendar to 2012. Enter "2010 7" to flip the calendar to July, 2012. Click on a date on the calendar and observe how the date is inserted in the form field.

Once a lease is created, tenants can be attached to the lease. You may want to create a few tenant records first. Note how a list of cities shows up when the city field in the new tenant form is in focus. The cities are populated from existing tenant and landlord records. As you type in the field, the city list will refine its result.

When the database has a few tenant records, you can attach them to a lease. The tenant lookup works similarly to the city- or calendar lookup. However, this is more than just inserting a text string. Clicking on the lookup result also attaches the identity of the record to the form field.



Another common type of lookup is the search filter inside the left panel. Click on the Leases menu icon. Start typing in the first few letters of a landlord's name and see how the record list is filtered.



Now open a lease in a tab; then view the record of a tenant that's associated to this lease in a different tab. Take note of the lease start date in the Leases section in the tenant view. Go to the lease view and modify the end date of the lease. Save the changes. Go to the tenant tab and see how the u pdate is already reflected in the view.

By now, you've seen the core UI features of a Gyroscope application: pivoting relational navigation with tabs, context-aware auto complete and tab content synchronization.