Table of Contents
Preview #
About #
GraffitiTour is a beautifully animated and powerful user training assistant that allows you to create a guided tour of your application’s interface.
Enumerations #
| Name | Values |
|---|---|
| AnimationStyles | Fade SlideUp SlideDown SlideLeft SlideRight Grow Reveal RollHorizontal RollVertical WindowShade Doors None |
Constants #
This class exposes no constants.
Events #
| Name | Parameters | Return Type | Description |
|---|---|---|---|
| Cancelled | None | None | Raised when the user has ended the tour prematurely by clicking the close button on a tour card. |
| Ended | None | None | Raised when the user completed the entire tour and clicked the “Done” button. |
| ItemPressed | item as GraffitiTourItem | None | Raised when the user has pressed on the current step’s card. |
| LinkPressed | item as GraffitiTourItem index as Integer content as String | None | Raised when the user has pressed a link on the current step’s card. index is the index of the link within the item’s card. content is the text of the pressed link. |
| MovedNext | None | None | Raised when the user moves to the next step in the tour. |
| MovedPrevious | None | None | Raise when the user has moved to the previous step in the tour. |
| Paint | g as Graphics | None | Raised when the backdrop of the tour is redrawn. |
| Started | None | None | Raised when the tour has started and the first step is fully shown. |
Methods #
| Name | Parameters | Return Type | Description |
|---|---|---|---|
| Add | item as GraffitiTourItem | None | Adds a new step to the tour. |
| AddAt | index as Integer item as GraffitiTourItem | None | Adds a new step to the tour at the specified index. |
| AddMultiple | items() as GraffitiTourItem | None | Adds multiple new steps to the tour. |
| AddMultiple | ParamArray items as GraffitiTourItem | None | Adds multiple new steps to the tour. |
| Constructor | None | None | Creates a new tour instance. Window property must be set for Tour to operate. |
| Constructor | window as DesktopWindow | None | Creates a new tour instance for the specified window. |
| ItemAt | index as Integer | GraffitiTourItem | Returns the item at the specified index. |
| LastIndex | None | Integer | Returns the index of the last step in the tour. |
| MoveNext | None | None | Moves to the next step in the tour. |
| MovePrevious | None | None | Moves to the previous step in the tour. |
| RemoveAll | None | None | Removes all steps from the tour. |
| Reset | None | None | Resets the tour state to the default. |
| Resume | None | None | Resumes a cancelled tour. |
| Start | None | None | Starts the tour from the first step. |
| StartAt | index as Integer | None | Starts the tour at the specified index. |
| Stop | None | None | Cancels the current tour. |
Properties #
| Name | Type | Default Value | Description |
|---|---|---|---|
| Active (Read Only) | Boolean | False | Returns True when the tour is in progess. |
| AllowClose | Boolean | True | Determines whether tour cards will display a close button. |
| AnimationEasing | GraffitiAnimator.Easings | GraffitiAnimator.Easings.Linear | Easing to use for animating card transitions. |
| AnimationLength | Integer | 250 | Length, in milliseconds, of animation operations. Movement between cards is two animations (in and out), so between cards would be a length of AnimationLength * 2. |
| AnimationStyle | AnimationStyles | AnimationStyles.Fade | Style applied to cards for animations. |
| BorderRadius | Integer | 10 | Corner radius of step cards. |
| ButtonsVisible | Boolean | True | When False, Next/Previous buttons will not be visible. Useful for timed progression or highlighting a single object in the user interface. |
| CaptionDone | String | “Done” | Text to display in the right-most button of the last card in the tour. |
| CaptionNext | String | “Next” | Text to display in the left button of the last card in the tour. |
| CaptionPrevious | String | “Previous” | Text to display in the left button of the tour when there are steps remaining. |
| CurrentStep | Integer | 0 | Current step in the tour regardless of active state. |
| IsAnimated | Boolean | True | Alternative to AnimationStyle.None that may be used to disable animations. Some underpowered systems may have issues with animations in UI, or users may not desire excessive screen motion, so you may wish to provide a setting to disable animations. |
| OverlayColor | ColorGroup | Nil | Colors applied to the backdrap, overrides default transparent color. |
| OverlayNextOnClick | Boolean | False | When True, clicking the modal backdrop will progress the tour to the next step. |
| StepTextFormat | String | “{current} of {max}” | Format applied to card step text. {current} token equals the current index plus one, {max} token equals the last index plus one. |
| Window | DesktopWindow | Nil | Read only once set (either directly or via the Constructor). The parent window of the tour. |
Examples #
Creating a New Tour #
tour = new GraffitiTour( self )
var steps() as GraffitiTourItem
steps.Add( new GraffitiTourItem( buttonStart, "Start Button", "You clicked this to start the tour!" ) )
steps.Add( new GraffitiTourItem( buttonStartAt, "StartAt Button", "Starts the tour a specified index. In this case, 1." ) )
steps.Add( new GraffitiTourItem( buttonResume, "Resume Button", "When a tour is cancelled by clicking the close button, you can resume it by calling the Resume method." ) )
steps.Add( new GraffitiTourItem( buttonReset, "Reset Button", "Call this method to cancel any currently running tour and reset the start point to 0." ) )
steps.Add( new GraffitiTourItem( menuAnimationStyle, "Animation Style", "There's a long list of great looking animations to choose from. Each card will animate in and out." ) )
steps.Add( new GraffitiTourItem( cardNoButtons, "A Card", "This is just a card with no buttons to show drawing." ) )
steps.Add( new GraffitiTourItem( cardSingleButton, "Another Card", "This one has a single button and is used as a point of comparison for drawing." ) )
steps.Add( new GraffitiTourItem( cardBottomButton, "Vertical Repositioning", "Just to show vertical repositiong and another way to use the GraffitiTourCard." ) )
tour.AddMultiple( steps )