B4J Library [BANano] Got it! - Easy Hints

Discussion in 'B4J Libraries & Classes' started by Mashiane, May 21, 2019.

  1. Mashiane

    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
     

    Attached Files:

    Last edited: May 21, 2019
  2. Mashiane

    Mashiane Expert Licensed User

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

    Code:
    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()

    Code:
    '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)
     
    joulongleu and Johan Hormaza like this.
  3. Mashiane

    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.

    Code:
    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
     
    joulongleu likes this.
  4. Cableguy

    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!
     
    Mashiane and DonManfred like this.
  5. Mashiane

    Mashiane Expert Licensed User

    That was the point, lol. :D:D:D
     
  6. Kiffi

    Kiffi Active Member Licensed User

    joulongleu and Mashiane like this.
  7. Mashiane

    Mashiane Expert Licensed User

    This is sooo cool! people are really creative hey!
     
    joulongleu likes this.
  8. Mashiane

    Mashiane Expert Licensed User

    My son just showed me Thanos' gauntlet here (far right of screen), https://g.co/kgs/z6Ex6Q, cool effects when you click it and then the snap disintegrates the google search results.
     
    joulongleu likes this.
  9. joulongleu

    joulongleu Active Member

    Very good function, feels very cool.
     
    Mashiane likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice