QBJS v0.6.0 Release

[dbox]

Yeah to my most pleasant surprise that calculator was done with GUI!

Is that QB64 source or something geared for JS and the HTML / Internet?

Hey @bplus thought I'd post another web GUI example and try to elaborate a bit.  The web API in QBJS is an extension library that comes pre-installed.  You can include it with the Import keyword in QBJS:

Code: (Select All)

Import Dom From "lib/web/dom.bas"

The Import keyword is similar in nature to the QB $Include keyword.  They both allow you to include code from an external module. With Import you specify an alias for the imported library.  In the example above I used "Dom" since that is the common abbreviation used with talking about the document object model in Javascript. This is the underlying API that gives you access to interact directly with the HTML page.

Once you have imported the library you can reference any of its exported methods with this prefix.  So, for example, if I want to use the Create method which makes a new HTML element on the page the call would look something like:

Code: (Select All)

Dom.Create "div"

The Dom library provides a number of methods which allow you to interact with the web page in a more QBasic-y way.  The example below takes advantage of just three of these methods: Create, Event and Remove. 

And really, most of it is accomplished with the Create method.  This method allows you to create any HTML element.  And there are a lot these days:
https://www.w3schools.com/TAGS/default.asp

It returns a reference to the created HTML element which you can then use to manipulate properties of that element.  For example, we could create a button like so:

Code: (Select All)

Dim btn As Object
btn = Dom.Create("button")

We could then set the text of the button by setting the appropriate attribute:

Code: (Select All)

btn.innerText = "Push Me"

This also gives you access to all of the styling properties that are available... and there are a lot:
https://www.w3schools.com/cssref/index.php

So, say we want a really big button.  Any of those listed attributes are available to set on the button object that was returned from create.  For example, we could set the height and width properties like so:

Code: (Select All)

btn.style.width = "200px"
btn.style.height = "200px"

That covers a lot of the basics.  Perhaps at some point I'll create a web specific tutorial.  Here is another example of a web GUI that is the starting point for a simple contact management program.  It has a basic form on the left and you can see an example of how to handle the button click event, take the values entered on the web form and add it both to a custom type array and display an HTML table that lists out the entered contacts.

Code: (Select All)

Import Dom From "lib/web/dom.bas"

Type Contact
    name As String
    email As String
    comments As String
End Type

ReDim Shared contacts(0) As Contact

Dim Shared As Object layout, panel, buttonPanel, listPanel, table
Dim Shared As Object txtLastName, txtFirstName, txtEmail, txtComments, btnAdd

_Title "QB Contact Manager"
InitUI

Sub OnAddContact
    Dim c as Contact
    c.name = txtName.value
    c.email = txtEmail.value
    c.comments = txtComments.value
   
    Dim size As Integer
    size = UBound(contacts) + 1
    ReDim _Preserve contacts(size) As Contact
    contacts(size) = c
   
    RefreshTable
   
    ' Clear the values
    txtName.value = ""
    txtEmail.value = ""
    txtComments.value = ""
End Sub

Sub InitUI
    Dom.Container().style.backgroundColor = "#999"
    Dom.GetImage(0).style.display = "none"
    layout = Dom.Create("div")
    layout.style.backgroundColor = "#f6f6f6"
    layout.style.margin = "auto"
    layout.style.padding = "20px"
    layout.style.width = "75%"
    layout.style.letterSpacing = "normal"
    layout.style.color = "#666"
    layout.style.display = "grid"
    layout.style.gridTemplateColumns = "auto auto"

    panel = Dom.Create("div", layout)
    panel.style.textAlign = "left"

    Dom.Create "div", panel, "Name"
    txtName = Dom.Create("input", panel)
    txtName.style.width = "250px"
    txtName.style.marginBottom = "5px"

    Dom.Create "div", panel, "Email"
    txtEmail = Dom.Create("input", panel)
    txtEmail.style.width = "250px"
    txtEmail.type = "email"
    txtEmail.style.marginBottom = "5px"

    Dom.Create "div", panel, "Comments"
    txtComments = Dom.Create("textarea", panel)
    txtComments.style.width = "250px"
    txtComments.style.height = "75px"


    Dim buttonPanel As Object
    buttonPanel = Dom.Create("div", panel)
    buttonPanel.style.marginTop = "10px"

    btnAdd = Dom.Create("button", buttonPanel, "Add Contact")
    Dom.Event btnAdd, "click", sub_OnAddContact

    ' Create output table
    listPanel = Dom.Create("div", layout)
    listPanel.style.marginLeft = "20px"

    RefreshTable
End Sub

Sub RefreshTable
    Dim As Object tr, th, td

    If table.style Then Dom.Remove table
    table = Dom.Create("table", listPanel)

    ' Create the table header
    tr = Dom.Create("tr", table)
    tr.style.backgroundColor = "#ccc"
    tr.style.color = "#333"
    th = Dom.Create("th", tr, "Name") : th.style.padding = "4px"
    th = Dom.Create("th", tr, "Email")     : th.style.padding = "4px"
    th = Dom.Create("th", tr, "Comments")  : th.style.padding = "4px"
   
    If UBound(contacts) = 0 Then
        ' No values present, display a message
        tr = Dom.Create("tr", table)
        td = Dom.Create("td", tr, "No contacts found.")
        td.colSpan = 4
    Else
        ' Add a new row to the table for each contact
        Dim i As Integer
        For i = 1 To UBound(contacts)
            tr = Dom.Create("tr", table)
            AddTableCell tr, contacts(i).name, i
            AddTableCell tr, contacts(i).email, i
            AddTableCell tr, contacts(i).comments, i
        Next i
    End If
End Sub

Sub AddTableCell(tr, value, row)
    Dim td As Object
    td = Dom.Create("td", tr, value)
    td.style.padding = "4px"
    td.style.color = "#666"
    If row Mod 2 = 0 Then
        td.style.backgroundColor = "#efefef"
    End If
End Sub

View in QBJS