My history about B4X

Im Alejandro "Alejivo" con social media, i started programming on my 13 yo when i found an forgotten program called qbasic on the win32 folder of windows98, after it continue with Gambas on linux. After school i got a degree on system analysis plus one in business management and now i'm studiying to get my certificate of qualification in capital markets, as i recently discover that love financial systems.

What are you using B4X for?
To build the app front-end as freelancer and create a new product for systems anaysis.

How did you discover B4X?
Looking an RAD alternative to JS and HTML, the options was XOJO, B4X, Genexus and Windev, i choosen B4X because has the videocourses and i felt as home with the sintaxis. I had a short trip on genexus because made slow apps and gave me painful compilation times plus non private tool have the good community as B4X.

What were you using before B4X?
Before B4X i was using VB.net, Python, and Genexus

What have you learnt while developing with B4X?
How android handle the process, and the Wait for (i loved the idea instead promises or anything like that, it haves more sense)

What would be a great?
What would be a great? A4W a merged version of wysiwygwebbuilder with B4X core to develop full front-end pages i currently using it with jquery.

This post was updated, for more information about me check www.alejivo.com (sure this ps is just for the google crawler)
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
@Alejandro Moyano Have you checked out my BANano library?

It is a library that Transpiles B4J code to Javascript. I did a quick test with the Trial version of WYSIWYG Web Builder and I had no problem using it with BANano for B4J.

What I did. I wrote this step by step, but most things will look familiar to you.

I'm sure I could expand BANano more to make this process easier, but I would need some input from you as you know the tool better:
1. Build a simple page in the WYSIWYG Web Builder
2. Saved it to HTML
3. For all the images, I replace the paths to "./assets/" in the html because this is where BANano gets its assets
4. Made a new B4J non-UI project
B4X:
'Non-UI application (console / server application)
#Region Project Attributes
    #CommandLineArgs:
    #MergeLibraries: True
    #IgnoreWarnings: 16, 10, 14, 15   
#End Region

Sub Process_Globals
    Private BANano As BANano 'ignore
   
    ' dim some elements we will work with
    Private Button1 As BANanoElement
    Private Editbox1 As BANanoElement
End Sub

Sub AppStart (Args() As String)
    BANano.Initialize("BANano", "BANanoWYSIWYG",1)
   
    BANano.Header.AddCSSFile("index.css")   
    BANano.Header.AddCSSFile("Untitled1.css")   
       
    BANano.Build(File.DirApp)   
   
    ExitApplication
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

' HERE STARTS YOUR APP
Sub BANano_Ready()
    ' get the body element
    Dim body As BANanoElement
    body.Initialize("#body")
   
    ' loading the body from the html file that the WYSIWYG Web Builder generated
    Dim init As BANanoFetchOptions
    init.Initialize
    init.Mode = "no-cors"
   
    Dim response As BANanoFetchResponse
    Dim Text As String
   
    ' fetch it with a promise
    Dim getHTML As BANanoFetch
    getHTML.Initialize("./assets/index.html", init)
    getHTML.Then(response)
        ' got the response, now get the content
        Return response.Text 'ignore
    getHTML.Then(Text) 'ignore
       ' got the content, extract the body part and add it to the body tag
        body.SetHTML(ExtractBodyPart(Text))
       
        ' get the Button1 and the Editbox1 (id = case sensitive)
        Button1.Initialize("#Button1")
        Editbox1.Initialize("#Editbox1")
       
        '  add a click event to the button
        Button1.On("click", Me, "HandleButton1")
    getHTML.end
End Sub

public Sub HandleButton1(event As BANanoEvent)
    ' set the text value of the Editbox to something
    Editbox1.SetValue("Alain Bailleul")
End Sub

' helper method to extract the body part of the html
public Sub ExtractBodyPart(html As String) As String
    Dim bodyBegin As Int = html.IndexOf("<body>")
    html = html.SubString(bodyBegin + 6)
    Dim bodyEnd As Int =  html.IndexOf("</body>")
    html = html.SubString2(0,bodyEnd)   
    Return html
End Sub

5. copied all the assets to the B4J Files folder and synced (css files, images and the html file WYSIWYG Web Builder generated)

assets.jpg


6. Run the project to Transpile the B4J code to Javascript
7. Started a Web Server in Chrome (the Fetch does need a real server as it does not allow CORS calls). I use this because it is very simple for development: https://www.b4x.com/android/forum/threads/banano-tip-running-a-test-server.100180/
8. In the browser, went to http://127.0.0.1:8887 and I got this:

wysiwyg.jpg


When I click the button, Alain Bailleul was put in the Editbox.

Alwaysbusy
 
Last edited:

Alejandro Moyano

Member
Licensed User
Hey @alwaysbusy i will try it and give you the feedback!
WYSIWYG Web Builder is amazing to make kick responsive web layouts this page with animations fade, etc i did in 3 hours, i even started an small online-course of graphical design to make prettier stuff, the generated code is readable and clean, the builtin verification form can run functions of JavaScript and could run Brython code (https://brython.info/) then would work with BANANO.

1584978404027.png
 
Top