(11-07-2022, 07:17 PM)bplus Wrote: 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:
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:
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
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
The first thing I noticed was... Hey, why the hell am I second on that email list?
Kidding aside, my hope is you are mostly working on integration rather than reproduction. I've never found HTML or CSS coding to be very different than coding in BASIC. Easy to learn, and as you mentioned, tons of stuff to work with. So to make a way to call all of those functions more QBasicy would be a huge investment in time, I would think. To make a way to interact with them, not so much and the same functionality would still be achieved.
Personally I'm looking forward to trying a simple project later today. I want to make a css/html page with 9 input boxes to handle a front 9 golf scorecard. Put in a submit button to add up the scores and figure out a place or separate window to display the results. I don't need anything other than HTML/CSS to make the page, just the interaction of QBJS to make it so the submit button returns the added values of the 9 filled in fields.
(11-08-2022, 07:34 PM)Pete Wrote: The first thing I noticed was... Hey, why the hell am I second on that email list?
Kidding aside, my hope is you are mostly working on integration rather than reproduction. I've never found HTML or CSS coding to be very different than coding in BASIC. Easy to learn, and as you mentioned, tons of stuff to work with. So to make a way to call all of those functions more QBasicy would be a huge investment in time, I would think. To make a way to interact with them, not so much and the same functionality would still be achieved.
Personally I'm looking forward to trying a simple project later today. I want to make a css/html page with 9 input boxes to handle a front 9 golf scorecard. Put in a submit button to add up the scores and figure out a place or separate window to display the results. I don't need anything other than HTML/CSS to make the page, just the interaction of QBJS to make it so the submit button returns the added values of the 9 filled in fields.
Just my 2-cents, and a day-old box of donuts.
Pete
Then you may want to take an approach that is more like this:
Code: (Select All)
Import Dom From "lib/web/dom.bas"
Dim container As Object
container = Dom.Create("div")
container.innerHTML = "<p>Pete is already good at HTML.<br/>Click the button below if you agree.</p><button id='agree-button'>I Agree</button>"
This is pretty cool, including the large mass of characters after "qbjs.org" that I found while quoting your post LOL.
These might be the beginnings of OOP supported in QB64PE. More or less like Lua -- don't force it on people that don't want to, but it's there if special abilities are needed.
hello @dbox, you have a very high level of competence. why not consider producing a code editor with javascript executable generation encapsulated in an independent web browser totally multi-platform while taking into account the syntax of the basic language. this kind of project will surely have a great success and the support of many opensource developers and it will solve the problem of adapting programs to many systems or hardware architectures. javascript is executable everywhere...
(11-09-2022, 11:25 AM)Coolman Wrote: hello @dbox, you have a very high level of competence. why not consider producing a code editor with javascript executable generation encapsulated in an independent web browser totally multi-platform while taking into account the syntax of the basic language. this kind of project will surely have a great success and the support of many opensource developers and it will solve the problem of adapting programs to many systems or hardware architectures. javascript is executable everywhere...
Hey @Coolman, thanks for the kind words. If I understand what you are asking, this is exactly why I started this project. In fact, what is QBJS today started from work I was doing on the game engine project GX. One thing that I have always loved about QB64 is its multi-platform nature. This is very nice for building games for a larger audience. So, I thought wouldn't it be cool if you could convert the game to HTML/javascript and share it online on sites like itch.io. The result was a command line tool (qb2js) that could convert the QB code to Javascript. The GX game examples on itch.io were all built with this method: coded entirely in QB64 and then converted to HTML/JS.
- https://boxgm.itch.io/the-legend-of-gx
- https://boxgm.itch.io/sleighless
- https://boxgm.itch.io/enemy-space
That utility is still available in the QBJS and GX projects and could potentially be used by build tools like vscode to "Compile for Web". This feature is also available today in the QBJS IDE. Once your program is complete you can create a stand-alone web application using the Export feature.
You can do this by clicking the < Share > Button. This will display a pop-up dialog with the various share options. If you change "Launch Mode" to "Play" or "Auto" it will display an < Export > button. Clicking this will package up the "compiled" javascript version of your program along with the necessary js, html, and css dependencies into a single zip that is ready to upload to itch.io (or your site of choice), or unzip and run locally.
I didn't bother to I.D. the form, just added the most bare bones stuff for the concept sake.
So the 9 named forms fields, which user inputs scores, with a server PERL script could be added up and sent to a database file with the total. How difficult /easy would doing this be with QBJS, and not over the web, just in the local browser. No TCP/IP involved.
(11-09-2022, 11:25 AM)Coolman Wrote: hello @dbox, you have a very high level of competence. why not consider producing a code editor with javascript executable generation encapsulated in an independent web browser totally multi-platform while taking into account the syntax of the basic language. this kind of project will surely have a great success and the support of many opensource developers and it will solve the problem of adapting programs to many systems or hardware architectures. javascript is executable everywhere...
Hey @Coolman, thanks for the kind words. If I understand what you are asking, this is exactly why I started this project. In fact, what is QBJS today started from work I was doing on the game engine project GX. One thing that I have always loved about QB64 is its multi-platform nature. This is very nice for building games for a larger audience. So, I thought wouldn't it be cool if you could convert the game to HTML/javascript and share it online on sites like itch.io. The result was a command line tool (qb2js) that could convert the QB code to Javascript. The GX game examples on itch.io were all built with this method: coded entirely in QB64 and then converted to HTML/JS.
- https://boxgm.itch.io/the-legend-of-gx
- https://boxgm.itch.io/sleighless
- https://boxgm.itch.io/enemy-space
That utility is still available in the QBJS and GX projects and could potentially be used by build tools like vscode to "Compile for Web". This feature is also available today in the QBJS IDE. Once your program is complete you can create a stand-alone web application using the Export feature.
You can do this by clicking the < Share > Button. This will display a pop-up dialog with the various share options. If you change "Launch Mode" to "Play" or "Auto" it will display an < Export > button. Clicking this will package up the "compiled" javascript version of your program along with the necessary js, html, and css dependencies into a single zip that is ready to upload to itch.io (or your site of choice), or unzip and run locally.
thank you for these precisions @dbox. i was thinking more of a project of this type:
AOZ language is based on AMOS Basic written in 1989, cross-platform works on windows macos and linux. the programs created are converted to JavaScript and work on all web browsers of any compatible machine PC MAC smartphones or as a native executable on Windows, MacOS, Linux, Android and iOS, on any computer, smartphones. this is in my opinion the most interesting function.
