B4J Library [BANano] Got it! - Easy Hints

Mashiane

Expert
Licensed User
Ola

For a while I have been fascinated by the curved hints when one visits website. They seem so cool. So here is one for BANano.

Nicely so, at the last step, I hide the skip button and change the text to Got it!


The original post in terms of creating this Contact Us form is discussed here.

https://www.b4x.com/android/forum/t...-an-email-with-inline-php.105983/#post-663498

For this exercise, we need to run the easy hints for our form. To do this we need the css and js files and the nice font files. The font files are zipped into a fonts.zip folder that is added to the Files Tab, after the BANano.Build method, this zip file is unzipped using SD_ZipLibrary and the content placed in the fonts file of the root folder for the app.

UOEEasyHint
  • AddStep (eID As String, eDescription As String) As UOEEasyHint
    add a step for an element with a description
  • AddClick (eID As String, eDescription As String) As UOEEasyHint
    add a click step for an element with a description. For example a button, the expection will be that it will be clicked.
  • AddKeyPress (eID As String, eDescription As String) As UOEEasyHint
    add a key press event for an element, the expectation will be the user to type content and press enter
  • EndsOn (eID As String)
    indicate the ending element for the hints
  • HideSkip (eID As String) As UOEEasyHint
    hide the skip button for an element
  • SetNextButton (eID As String, Text As String) As UOEEasyHint
    change the text for the next button of this element
  • SetSkipButton (eID As String, Text As String) As UOEEasyHint
    change the skip button text for the element
  • SetCircle (eID As String, radius As Int) As UOEEasyHint
    set a hint to be a circle for an element
  • Run
    run the easyhint plugin
 

Attachments

Last edited:

Mashiane

Expert
Licensed User
Let's ensure that the needed css and js files are added to the header.

B4X:
BANano.Header.AddJavascriptFile("jquery.min.js")
    BANano.Header.AddCSSFile("skeleton-all.min.css")
    BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.all.js")
    BANano.Header.AddCSSFile("enjoyhint.css")
    BANano.Header.AddJavascriptFile("enjoyhint.min.js")
We also need fonts, so, lets unzip the fonts file added in our Files tab... this code is executed after BANano.Build()

B4X:
'unzip fonts folder
    Dim AssetsPath As String = "assets"
    Dim zf As String = File.Combine(Publish,$"${ShortName}/${AssetsPath}/fonts.zip"$)
    Dim zo As String = File.Combine(Publish,$"${ShortName}"$)
    Dim UnZL As SD_ZipLibray
    UnZL.Initialize
    UnZL.unZip(zf,zo)
    'delete zip File
    File.Delete("",zf)
 

Mashiane

Expert
Licensed User
Let's run the easy hints...

We want the hints to run as soon as the page is loaded. We change out Init method to ensure that all hints are added and then executed.

B4X:
Sub Init
    BANano.LoadLayout("#body","vContact")
    easyHelp.Initialize
    easyHelp.AddStep("txtfullname","Enter your full name here!")
    easyHelp.AddStep("txtEmail","Enter your email address here!")
    easyHelp.AddStep("txtTelephone","Enter your cellphone number here starting with country code!")
    easyHelp.AddStep("txtMessage","Enter your enquiry here here!")
    easyHelp.AddStep("chkrobot","Check here to confirm you are not a robot!")
    easyHelp.AddStep("btnSend","Click here to send the message!")
    easyHelp.EndsOn("btnSend")
    easyHelp.SetCircle("btnSend",70)
    easyHelp.Run
End Sub
For each element in the page, we use its unique id and then add the description. For the btnSend button, we wanted a circle hint, we use SetCircle with a radius of 70 (see as depicted in the video).

Ta!

#HelpingOthersToSucceed
 

Cableguy

Expert
Licensed User
I really like your enthusiasm about BANano, and I like reading your posts... But this thread title just had me thinking, "he/she got it! 1M$!!"...
So, please edit your thread title to something more meaningful!
 
Top