B4J Tutorial [BANanoWebix] Lesson 30 WixHints


Licensed User


The webix system has built int hints system that one can use to provide hints on the usage of the app as demonstrated. To be able to use this widget, one needs to create the hints, link the to element ids and add these in sequence of appearance and then execute the hints.

The example in this demo is based on the form designer and the hints are activated from a button click event.

In Process_Globals we defined a hint object..

Private hints As WixHint
We then continued to add hints as and when we created the elements on our page.

    hints.AddStep("heading","Welcome","Welcome to the BANanoWebix - Form Designer","click")
    hints.AddStep("menuopen","Side Bar","You can toggle the side bar menu to access elements that you can design","click")
    hints.AddStep("smp","Side Bar", "This lists all elements that you can design with the BANanoWebix-FD. First you need to create a form. To create a form, select Layouts and select Form, this will add the form properties on the bag.","click")
    hints.AddStep("propform","Property", "The form details will appear here, update the settings you need for the form","click")
    hints.AddStep("propsave","Save Form/Element", "After you have updated the properties of the design element you are working with, select Save here to save the element's properties for later updating.","click")
    hints.AddStep("propdelete","Delete Design", "You can delete a saved design element by selecting this option. You are unable to undo changes if you delete","click")
    hints.AddStep("tree","Tree", "After you save your element in the property bag, it will be listed under the parent element you chose for it here and you can select and update its properties again if you want.","click")
    hints.AddStep("formholder","Preview & Source Code", "The result of your design element during design will be shown here & the source code to use in your BANanoWebix project","click")
    'hints.AddStep("multi", "Multi Elements", "Select here to add multi elements, you provide the names of the elements separated by a comma","click")
    hints.AddStep("refresh","Refresh","To refresh the tree, select this option","click")
    'hints.AddStep("clearform","Clear Form", "To create a new form, first clear any existing form by selecting this option","click")
    hints.AddStep("help","Hints", "You can access the hints from here too","click")
    'hints.AddStep("avatar","Avatar", "Here is your profile picture, you can click to change the settings","click")
One can move from one hint to another via a click / an enter event. Thus at the end of each call above, we used mostly the click event, i.e. on click we move to the next hint.

Starting the hints system.

One start the hints from a button click event of anywhere in the app, we decided to start ours when the app is started.

'start hints