B4J Library [Web][BANano] Website/App/PWA library with Abstract Designer support

Public IPAddress As String = "10.0.2.2" ' ip address of bluestacks
    Public PhpPath As String = $"http://${IPAddress}/BANanoJQMDemo/"$

this._ipaddress="10.0.2.2";

this._phppath="http://" + self._ipaddress + "/BANanoJQMDemo/";

Uncaught TypeError: obj[xmlhttp.returnMethod] is not a function
    at XMLHttpRequest.xmlhttp.onreadystatechange (app.js:7)

Dim aEvt As Object
Dim request As BANanoXMLHttpRequest
request.Initialize
request.Open("GET", "https://reqres.in/api/users?page=1")
request.AddEventListenerOpen("onreadystatechange", aEvt)
   If request.ReadyState = 4 Then
       If request.Status = 200 Then
           Shared.Ajaxresult = request.ResponseText
           MiniCSS.Content("#r4c1", "contajax", request.ResponseText)
       Else
           Log("Error loading")
       End If
   End If
request.CloseEventListener
request.Send

'get all ids
Sub GetAll() As String
    Dim bo As BANanoObject = tree.RunMethod("getAll","")
    Return Banano.ToJson(bo)
End Sub

'set background color
Sub SetBackgroundColor(pk As String, color As String)
    Dim node As BANanoObject = tree.RunMethod("getNodeById", Array(pk))
    If node <> Null Then
        Dim el As BANanoElement = Banano.ToElement(node)
        Dim els As String = $"{"background-color":"${color}"}"$
        el.SetStyle(els)
    End If
End Sub

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '#u(par)' is not a valid selector.

Sub FillExData() 'ignore
   Dim aEvt As Object
   Dim request As BANanoXMLHttpRequest
   request.Initialize
   request.Open("GET", "assets/movies.json")
   request.AddEventListenerOpen("onreadystatechange", aEvt)
   If request.ReadyState = 4 Then
       If request.Status = 200 Then           
           JQ.Initialize2(request.ResponseText)
           ' get number of records
           Log(JQ.Count)
           ' get the movie name in the first record
           Log(JQ.First.Get("name"))
           ' get the movie name in the last record
           Log(JQ.Last.Get("name"))
           
           ' group all movies by rating
           Dim ratings As Map = JQ.GroupBy("rating").All
           ' list per rating how many movies
           For Each rat As String In ratings.Keys
               Dim Lst As List = ratings.Get(rat)
               Log(rat & " = " & Lst.Size)               
           Next
           ' get new records with only the actors name and the movie rating
           Dim Lst As List = JQ.SelectFields(Array("actor", "rating")).All
           ' show from the first record the actor
           Log(JQ.SelectFields(Array("actor", "rating")).First.Get("actor"))
           
           ' get a subset of the records (.toJQ)
           Dim tmpJQ As BANanoJSONQuery = JQ.Where($"{'actor.$eq': 'Al Pacino', 'year.$gt': 1970 }"$) _
                   .OrWhere($"{'rating': 8.4}"$) _
                   .SelectFields(Array("name", "runtime")) _
                   .Order("{'rating': 'desc'}") _
                   .toJQ
           ' show from the subset the name of the movie with a runtime of 126 minutes (it will show the first found)
           Log(tmpJQ.Find("runtime", 126).Get("name"))
           
       Else
           Log("Error loading")
       End If
   End If
   request.CloseEventListener
   request.Send
End Sub

Dim Document As BANanoObject
Document.Initialize("document")

Dim DocumentObserver As BANanoMutationObserver
DocumentObserver.Initialize("DocumentObserver")

DocumentObserver.ChildList = True
DocumentObserver.Attributes = True
DocumentObserver.AttributeOldValue = True
DocumentObserver.CharacterData = True
DocumentObserver.CharacterDataOldValue = True
DocumentObserver.SubTree = True

DocumentObserver.Observe(Document)
...
Sub DocumentObserver_CallBack(records() As BANanoMutationRecord, observer As BANanoMutationObserver)
   Log(records)
End Sub

Dim TextBox As BANanoElement
TextBox.Initialize("#sktextbox1")
   
Dim TextBoxObserver As BANanoMutationObserver
TextBoxObserver.Initialize("TextBoxObserver")
TextBoxObserver.Attributes = True ' style is an attribute
TextBoxObserver.AttributeOldValue = True ' and we want to log the old value too
       
TextBoxObserver.Observe(TextBox.ToObject)
...

' on keyup make red
Sub SKTextBox1_KeyUp (event As BANanoEvent)
   SKTextBox1.Style = $"{"background-color": "red"}"$
End Sub

' observer, log the old value and change to green
Sub TextBoxObserver_CallBack(records() As BANanoMutationRecord, observer As BANanoMutationObserver)
   Dim record As BANanoMutationRecord = records(0)
   Select Case record.TypeRecord
       Case "attributes"
           Log("Previous value: " & record.OldValue)
           Dim tmpObj As BANanoElement
           tmpObj = BANano.ToElement(record.Target)
           Log("New value: " & tmpObj.GetAttr(record.AttributeName))
           SKTextBox1.Style = $"{"background-color": "green"}"$
   End Select   
End Sub

app.js:96 Previous value:
app.js:102 New value: background-color: red;
app.js:96 Previous value: background-color: red;
app.js:102 New value: background-color: green;

<style type="text/css" media="screen,print" />
    JSONQUERY:false .sweet-modal-box.alert .sweet-modal-content {color:black !important}  @media (max-width: 768px){ .parallax .parallax-image{ width: 100%; height: 640px; overflow: hidden; } .parallax .parallax-image img{ height: 100%; width: auto; } } .img-container{ width: 100%; overflow: hidden; } .img-container img{ width: 100%; } .lightbox img{ width: 100%; } .lightbox .modal-content{ overflow: hidden; } .lightbox .modal-body{ padding: 0; } @media screen and (min-width: 991px){ .lightbox .modal-dialog{ width: 960px; } } .badgenumber { position: absolute; right: -10px; top: -15px; z-index: 100; border-radius: 9px; min-width: 18px; height: 18px; text-align: center; padding: 3px 5px; font-weight: 400; font-family: 'Lato', sans-serif; font-size: 11px; } .profile-ava img { border-radius: 50%; -webkit-border-radius: 50%; border: 2px solid #688a7e; display: inline-block; min-height: 35px; height: 35px; width: 35px; min-width: 35px; }  .italic { font-style: italic }  .pointer {cursor: pointer;}

JSONQUERY:false

Sub Process_Globals
   Private BANano As BANano 'ignore           
   ' dim our websocket
   public ws As BANanoWebSocket
End Sub

...

Sub BANano_Ready()   
   BANano.LoadLayout("#body","test")
   
   ' does the browser support websockets?
   If ws.IsSupported Then
       ' last param true = use a Reconnecting WebSocket
       ws.Initialize("ws", "ws://localhost:51042/login", "", True)
   End If   
End Sub

public Sub BrowserWriteLog(message As String)
   ' here for example we'll get the response to our question further: "Who are you?"
   Log(message)
End Sub

public Sub BrowserWriteLogWithResult(message As String) As String
   ' the server is waiting for a response....
   Log(message)
   Return message & " OK"
End Sub

Sub ws_OnOpen(event As BANanoEvent)
   Log("Websocket opened")   
End Sub

Sub ws_OnError(event As BANanoEvent)
   Log("Websocket error")
End Sub

Sub ws_OnMessage(event As BANanoEvent)
   Log("Websocket message " & event.data)   
End Sub

Sub ws_OnClose(event As BANanoEvent)
   Log("Websocket closed")
End Sub

Sub SKButton1_Click (event As BANanoEvent)
   ' special Send for B4J servers
   ' Use .Send for non-B4J servers
   ws.B4JSend("AServerFunction_BAN", CreateMap("message": "Who are you?"))
End Sub

'WebSocket class
Sub Class_Globals
   Private ws As WebSocket 'ignore   
End Sub

Public Sub Initialize
   
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
   Log("Connected")
   ws = WebSocket1   
End Sub

Private Sub WebSocket_Disconnected
   Log("Disconnected")
End Sub

' a method that can be called from the browser: must end with _BAN and have only one parameter: Params as Map
public Sub AServerFunction_BAN(Params As Map)
   ' access to the UpgradeRequest object
   Log(ws.UpgradeRequest.FullRequestURI)
   
   ' is the connection secure?
   Log("Is secure? " & ws.Secure)
   
   ' is the connection open?
   Log("Is open? " & ws.Open)
   
   Log(Params.Get("message"))
   ' run a function, no return value
   ws.RunFunction("BrowserWriteLog", Array("I'm server!"))
   ws.Flush
   
   ' running a method in the browser and expect a return value. It must be a method in Main.
   Dim res As Future = ws.RunFunctionWithResult("BrowserWriteLogWithResult", Array("TestWithResult"))
   ' flush to browser
   ws.Flush
   ' print the return value
   Log(res.Value)
   
   ' run a piece of javascript, no result expected
   Dim script As String = $"window.alert('Hello!');"$
   ws.Eval(script, Null)
   ws.Flush
   
   ' run a piece of javascript, with a result from the browser
   ' here we ask what the users browser is
   Dim script2 As String = $" var ua= navigator.userAgent, tem,
       M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
       if(/trident/i.test(M[1])){
           tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
           return 'IE '+(tem[1] || '');
       }
       if(M[1]=== 'Chrome'){
           tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
           if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
       }
       M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
       if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
       return M.join(' ');"$
       
   Dim res As Future = ws.EvalWithResult(script2, Null)
   ws.Flush
   Log(res.Value)
   
   ' access to the session
   Log(ws.Session.CreationTime)
   
   ' show an alert
   ws.Alert("Alert from the server!")
   
   ' also supported
   'ws.Close
End Sub