OpenSource: Build a guided Step-by-Step tutorial into your app (web and desktop)

[Lars_Lehmann]

@Dean_Huntley asked some days ago if theres a way to implement a guided tour in your Xojo app.

Create a guided tour of Xojo App through series of tasks

Just curious if there are any resources, plugins that will quickly help \create a short wizard, tutorial or guided tour that prompts users through various menus/buttons in a XOJO app. So click on floating menu of topics and then it prompts user for each action to complete with pointing/highlighting buttons etc. Yes… I could build but wondering if there is a generic scripting tool, along with supporting text that can be built as template to reuse portions.

I’ve done something like that already on the (old) Webframework.

But I was curious if I can bring some the functionality to desktop apps. It turned out, that it isn’t so hard, so I made this little project called “Intro”.

Result is a very easy to use set of classes, which you can simply drag onto your project. After that you’ll be able to develop your own tours though your app.

It is very rough and simple, but maybe someone has more patience and time to give to improve this little library.

GitHub - VanDerLars/xojo-intro: A simple class to create step-by-step intros...

Usage as multiple step intro

Multiple step intros provide a simple UI to step-by-step describe your controls and functionalities.

1. copy the folder “Intro” into your project
2. Drag the class Intro->Classes IntroHandler onto your Window
3. Add in the window open event your steps (code see below)
4. Call your intro with Self.introHandler1.start

SampleCode:

Usage as multiple step intro

Multiple step intros provide a simple UI to step-by-step describe your controls and functionalities.

1. copy the folder “Intro” into your project
2. Drag the class Intro->Classes IntroHandler onto your Window
3. Add in the window open event your steps (code see below)
4. Call your intro with Self.introHandler1.start

SampleCode:

Sub ShowMultipleIntro()
// you can use every regular Control (which inherits from RectControl)
Self.introHandler1.addStep(New introStep(Self.ComboBox1, "Combobox", "The combobox combines a textarea and a listbox"))
Self.introHandler1.addStep(New introStep(Self.GroupBox1, "Groupbox", "Groupboxes are used to group multiple controls"))
Self.introHandler1.addStep(New introStep(Self.PushButton1, "PushButton", "This is a button which fires some code."))

// you can also use a Window
Self.introHandler1.addStep(New introStep(Self, "Window", "Windows are the basic user interface structures where you can place your controls onto"))

// also embedded ContainerControls are possible
Self.introHandler1.addStep(New introStep(Self.TestContainer1, "ContainerControl", "ContainerControls are structures to be embedded into a layout. You can nest Controls."))

// and also controls inside embedded ContainerControls
Self.introHandler1.addStep(New introStep(Self.TestContainer1.Label2, "Nested Controls", "With this library you can even focus on controls which are placed inside Containers."))

// And new: You can also highlight multiple controls at once, by using an array of controls:
Var rArr() As RectControl
rArr.Add(Self.ComboBox1)
rArr.Add(Self.PushButton2)
Self.introHandler1.addStep(New introStep(rArr, "ControlArray", "You can also highlight multiple Controls at once"))



Self.introHandler1.start
End Sub

Usage as single

Single steps simply show your description next to your control.

Sub ShowSingleStep()
  Var d As New introStep(GroupBox1, "hallo", "yay")
  d.showSingle
  
End Sub

See the test project, this should give you everthing you need.

[Lars_Lehmann]

Release v1.1:
you can now also change the colors and the message field looks a bit nicer.

[Lars_Lehmann]

Release v1.2:

The messages now have a status bar which displays the current step number and how much there are in total.

Also the test window is a bit less confusing.

Allright, thats all for now. I’ll leave it as it is now. Seems to be stable and easy to use, so maybe someone find it helpful.

Feedback is still welcome though.

[Sergio_Ciordia]

Thank you very much @Lars_Lehmann for “discovering” intro.js and for your Xojo projects, Both look great. You have given me some ideas and I have started to work with your web project.

I have two questions:

1. Is the use of intro.js free or do you need to pay any of the licenses listed on your web site?.
2. I have tried to change the theme (to Modern) of the web dialogs by including this code in the HTML Header:

But it doesn’t work, What do you think?.

Thanks again for your two projects (Web and Desktop) and for sharing .

Best regards,
Sergio