B4J Question ABMaterial TextArea component

walterf25 · Mar 21, 2023

Hi all, i've already searched in the forums but wasn't able to find something close enough to what I need.

Is there any component in the ABMaterial framework that can be used similar to a TextArea in B4J, I am working on a web app that needs to display logs from a device connected through Serial Port, the problem with the ABMEditor is that I don't see a way to make the component fixed height so that when the logs reach the end of the max height of the component, the component won't keep increasing it's height to continue showing the logs, does anyone have any idea on how to create something like the TextArea in B4J, preferably something that will have scroll bars so that the user can scroll up or down to see the logs.

MichalK73 · Mar 22, 2023

You can use ABMList. Consecutive records from the serial port should be inserted into ABMList as successive rows of the list. When the component size is fixed and the list box is full, a scroll bar will appear.

walterf25 · Mar 22, 2023

MichalK73 said:
You can use ABMList. Consecutive records from the serial port should be inserted into ABMList as successive rows of the list. When the component size is fixed and the list box is full, a scroll bar will appear.

I thought about that but decided not to go with it, I need an actual text area.

alwaysbusy · Mar 22, 2023

As the ABMInput and ABMEditor component's heights are regulated internally by javascript, it would be hard to override this. You are probably better of making a simple custom component where you have full control over it.

CustomLog class:

Code: Copy

' Class module
Sub Class_Globals
    Dim ABM As ABMaterial 'ignore
    Dim ABMComp As ABMCustomComponent
    Dim myID As String 'ignore
    Private mText As String
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(InternalPage As ABMPage, ID As String, height As String)
    Dim CSS As String = $".abmlog {
        background-color: #000;
        color: #f0f0f0;
        height: ${height};
        overflow-y: auto;    
        overflow-wrap: break-word;
        font-family: monospace;        
    }"$
    
    ABMComp.Initialize("ABMComp", Me, InternalPage, ID, CSS)        
End Sub

Sub ABMComp_Build(InternalPage As ABMPage, internalID As String) As String
    Dim varID As String = internalID.Replace("-", "_")
    myID = varID
    Return $"<div id="${internalID}content" class="abmlog"></div>"$
End Sub

public Sub SetText(value As String)
    ' you may have to do other replaces, e.g. with quotes
    mText = value.Replace(CRLF, "<br>")
End Sub

' Is useful to run some initalisation script. 
Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
    Dim varID As String = internalID.Replace("-", "_") 'ignore
    Dim script As String = $"$('#${varID}content').parent().css("width", "100%");
    $('#${varID}content').html('${mText}');"$
    InternalPage.ws.Eval(script, Null)
End Sub

' runs when a refresh is called
Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
    Dim varID As String = internalID.Replace("-", "_")    
    
    Dim script As String = $"$('#${varID}content').parent().css("width", "100%");
    $('#${varID}content').html('${mText}');"$
    InternalPage.ws.Eval(script, Null)
End Sub

' do the stuff needed when the object is removed
Sub ABMComp_CleanUp(InternalPage As ABMPage, internalID As String)
    
End Sub

Usage:

Code: Copy

' in Class_Globals
Dim custLog As CustomLog

' in ConnectPage
custLog.Initialize(page, "custLog", "300px")    
page.Cell(2,1).AddComponent(custLog.ABMComp)

' somewhere where you change to content of the log
custLog.SetText($"0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:00:45 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:00:45 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:00:46 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:01:48 +0000] "GET /ws/Work2020/PageRegistration0101?id=gffODhvKrYCu8rp3yN7Kinq0MG6ylfvFrHzKVOtwp4hPYnszLebhhA%3D%3D HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:04:51 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:04:51 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:04:52 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:07:22 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/PageTimeline0201/?id=i9ak0w%2FD7u1JYz2bYWOzYYwtp5GsntALGj5zQZtz4oerP3qGEGBRbA%3D%3D" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:07:41 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/PageReportBarcodesProject0101/?id=Bo%2B7zuGsubCmWZSLKPX3hu1%2FspbqutoF%2FYNOFL2jxQ%2FG3P4jnQls9Q%3D%3D" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.46"
127.0.0.1 - - [20/Feb/2023:00:10:42 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/PageRegistration0101/?id=gffODhvKrYCu8rp3yN7Kinq0MG6ylfvFrHzKVOtwp4hPYnszLebhhA%3D%3D" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:10:55 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:10:55 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:10:56 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:12:22 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/PageRegistration0101/?id=OqeIlDtDZm6iR5o6C4EtAAFU8TJraa6SuzmrmTlBNLKJgSsUQ2kBHw%3D%3D&date=UJcaWDojTh9X99WdUjCEce6gA40t9%2BDZK%2BhnmicFSrbShWn8F4GV%2Fg%3D%3D&ex=VYkS%2BLPzoRjuA9T6OWdtYD3IzRthzxbPWpM4gDWRESO3GYgSUZDNSw%3D%3D" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:15:01 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:15:01 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:15:02 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:17:09 +0000] "GET /robots.txt HTTP/1.1" 302 0 "-" "Mozilla/5.0 (compatible;PetalBot;+https://webmaster.petalsearch.com/site/petalbot)"
127.0.0.1 - - [20/Feb/2023:00:17:09 +0000] "GET /Work2020 HTTP/1.1" 302 0 "-" "Mozilla/5.0 (compatible;PetalBot;+https://webmaster.petalsearch.com/site/petalbot)"
127.0.0.1 - - [20/Feb/2023:00:17:10 +0000] "GET /Work2020/ HTTP/1.1" 200 3458 "-" "Mozilla/5.0 (compatible;PetalBot;+https://webmaster.petalsearch.com/site/petalbot)"
127.0.0.1 - - [20/Feb/2023:00:21:05 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.78"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:05 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:05 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:06 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:06 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.78"
127.0.0.1 - - [20/Feb/2023:00:21:06 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.78"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:07 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.78"
127.0.0.1 - - [20/Feb/2023:00:21:38 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:40 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:40 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:41 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:42 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:43 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:43 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:44 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:46 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:47 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:47 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:48 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:51 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:52 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:53 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)"$)

custLog.ABMComp_Refresh(page, custLog.myID)

Result is something like this:

Alwaysbusy

walterf25 · Mar 22, 2023

alwaysbusy said:

As the ABMInput and ABMEditor component's heights are regulated internally by javascript, it would be hard to override this. You are probably better of making a simple custom component where you have full control over it.

CustomLog class:

Code: Copy

' Class module
Sub Class_Globals
    Dim ABM As ABMaterial 'ignore
    Dim ABMComp As ABMCustomComponent
    Dim myID As String 'ignore
    Private mText As String
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(InternalPage As ABMPage, ID As String, height As String)
    Dim CSS As String = $".abmlog {
        background-color: #000;
        color: #f0f0f0;
        height: ${height};
        overflow-y: auto;   
        overflow-wrap: break-word;
        font-family: monospace;       
    }"$
   
    ABMComp.Initialize("ABMComp", Me, InternalPage, ID, CSS)       
End Sub

Sub ABMComp_Build(InternalPage As ABMPage, internalID As String) As String
    Dim varID As String = internalID.Replace("-", "_")
    myID = varID
    Return $"<div id="${internalID}content" class="abmlog"></div>"$
End Sub

public Sub SetText(value As String)
    ' you may have to do other replaces, e.g. with quotes
    mText = value.Replace(CRLF, "<br>")
End Sub

' Is useful to run some initalisation script.
Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
    Dim varID As String = internalID.Replace("-", "_") 'ignore
    Dim script As String = $"$('#${varID}content').parent().css("width", "100%");
    $('#${varID}content').html('${mText}');"$
    InternalPage.ws.Eval(script, Null)
End Sub

' runs when a refresh is called
Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
    Dim varID As String = internalID.Replace("-", "_")   
   
    Dim script As String = $"$('#${varID}content').parent().css("width", "100%");
    $('#${varID}content').html('${mText}');"$
    InternalPage.ws.Eval(script, Null)
End Sub

' do the stuff needed when the object is removed
Sub ABMComp_CleanUp(InternalPage As ABMPage, internalID As String)
   
End Sub

Usage:

Code: Copy

' in Class_Globals
Dim custLog As CustomLog

' in ConnectPage
custLog.Initialize(page, "custLog", "300px")   
page.Cell(2,1).AddComponent(custLog.ABMComp)

' somewhere where you change to content of the log
custLog.SetText($"0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:00:45 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:00:45 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:00:46 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:01:48 +0000] "GET /ws/Work2020/PageRegistration0101?id=gffODhvKrYCu8rp3yN7Kinq0MG6ylfvFrHzKVOtwp4hPYnszLebhhA%3D%3D HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:04:51 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:04:51 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:04:52 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:07:22 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/PageTimeline0201/?id=i9ak0w%2FD7u1JYz2bYWOzYYwtp5GsntALGj5zQZtz4oerP3qGEGBRbA%3D%3D" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:07:41 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/PageReportBarcodesProject0101/?id=Bo%2B7zuGsubCmWZSLKPX3hu1%2FspbqutoF%2FYNOFL2jxQ%2FG3P4jnQls9Q%3D%3D" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.46"
127.0.0.1 - - [20/Feb/2023:00:10:42 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/PageRegistration0101/?id=gffODhvKrYCu8rp3yN7Kinq0MG6ylfvFrHzKVOtwp4hPYnszLebhhA%3D%3D" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:10:55 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:10:55 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:10:56 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:12:22 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/PageRegistration0101/?id=OqeIlDtDZm6iR5o6C4EtAAFU8TJraa6SuzmrmTlBNLKJgSsUQ2kBHw%3D%3D&date=UJcaWDojTh9X99WdUjCEce6gA40t9%2BDZK%2BhnmicFSrbShWn8F4GV%2Fg%3D%3D&ex=VYkS%2BLPzoRjuA9T6OWdtYD3IzRthzxbPWpM4gDWRESO3GYgSUZDNSw%3D%3D" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:15:01 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:15:01 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:15:02 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:17:09 +0000] "GET /robots.txt HTTP/1.1" 302 0 "-" "Mozilla/5.0 (compatible;PetalBot;+https://webmaster.petalsearch.com/site/petalbot)"
127.0.0.1 - - [20/Feb/2023:00:17:09 +0000] "GET /Work2020 HTTP/1.1" 302 0 "-" "Mozilla/5.0 (compatible;PetalBot;+https://webmaster.petalsearch.com/site/petalbot)"
127.0.0.1 - - [20/Feb/2023:00:17:10 +0000] "GET /Work2020/ HTTP/1.1" 200 3458 "-" "Mozilla/5.0 (compatible;PetalBot;+https://webmaster.petalsearch.com/site/petalbot)"
127.0.0.1 - - [20/Feb/2023:00:21:05 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.78"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:05 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:05 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:06 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:06 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.78"
127.0.0.1 - - [20/Feb/2023:00:21:06 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.78"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:07 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.78"
127.0.0.1 - - [20/Feb/2023:00:21:38 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:40 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:40 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:41 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:42 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:43 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:43 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:44 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:46 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:47 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:47 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:48 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:51 +0000] "HEAD /Work2020/session.heartbeat HTTP/1.1" 200 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
[0:0:0:0:0:0:0:1] - - [20/Feb/2023:00:21:52 +0000] "GET /ws/Work2020 HTTP/1.1" 101 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
127.0.0.1 - - [20/Feb/2023:00:21:53 +0000] "GET /Work2020/ HTTP/1.1" 304 0 "https://work.one-two.com/Work2020/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)"$)

custLog.ABMComp_Refresh(page, custLog.myID)

Result is something like this:

View attachment 140503

Alwaysbusy

Thanks for this code @alwaysbusy unfortunately i am not seeing the element on my page, i copied your code into a custom component class and i am not seeing any errors, but i don't see the element either, not sure if it makes a difference but the element is actually being added inside a container.

This is what my screen looks like, is there anything I must be missing?

This is the code inside my custom component class

Code: Copy

' Class module
Sub Class_Globals
    Dim ABM As ABMaterial 'ignore
    Dim ABMComp As ABMCustomComponent
    Dim myID As String 'ignore
    Private mText As String
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(InternalPage As ABMPage, ID As String, height As String)
    
    Dim CSS As String = $".abmlog {
        background-color: #000;
        color: #f0f0f0;
        height: ${height};
        overflow-y: auto;   
        overflow-wrap: break-word;
        font-family: monospace;       
    }"$
    
    ABMComp.Initialize("ABMComp", Me, InternalPage, ID, CSS)
End Sub

' runs when an object is created for the first time. Expects a valid html string
' will get surrounded by a div automatically
' in the html file:
'<div ID="mycomp" class="">
'    <h1 ID="testh1">This Is a test</h1>
'</div>
Sub ABMComp_Build(InternalPage As ABMPage, internalID As String) As String
    '''    Return $"<div id="${internalID}"></div><script>var _${internalID};</script>"$
    Dim varID As String = internalID.Replace("-", "_")
    myID = varID
    Log("myID: " & myID)
    Return $"<div id="${internalID}content" class="abmlog"></div>"$
End Sub

public Sub SetText(value As String)
    ' you may have to do other replaces, e.g. with quotes
    mText = value.Replace(CRLF, "<br>")
    Log("mText: " & mText)
End Sub

' Is useful to run some initalisation script.
Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
    'Dim script As String = $""$
    
    'InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
    
    'flush not needed, it's done in the refresh method in the lib
    Dim varID As String = internalID.Replace("-", "_") 'ignore
    Dim script As String = $"$('#${varID}content').parent().css("width", "100%");
    $('#${varID}content').html('${mText}');"$
    
    Log("firstRun: " & script)
    InternalPage.ws.Eval(script, Null)
End Sub

' runs when a refresh is called
Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
    ' use these methods to adjust the object
    ' ABM.HasClass
    ' ABM.AddClass
    ' ABM.RemoveClass
    
    ' ABM.AddHTML
    ' ABM.InsertHTMLAfter
    ' ABM.RemoveHTML
    
    ' ABM.GetProperty
    ' ABM.SetProperty
    ' ABM.RemoveProperty
    
    ' ABM.GetStyleProperty
    ' ABM.SetStyleProperty
    
    ' do some script stuff like you do in RunJavaScript
    
    'Dim script As String = $""$
    'InternalPage.ws.Eval(script, Null)
    
    Dim varID As String = internalID.Replace("-", "_")
    Log("refresh varID: " & varID)
    Dim script As String = $"$('#${varID}content').parent().css("width", "100%");
    $('#${varID}content').html('${mText}');"$
    InternalPage.ws.Eval(script, Null)
End Sub

' do the stuff needed when the object is removed
Sub ABMComp_CleanUp(InternalPage As ABMPage, internalID As String)
    
End Sub

Thanks again!

alwaysbusy · Mar 22, 2023

What do the logs show? (especialy check if the id matches with what you can see in the browser).
How are you adding it to your container?
How is the content filled?

walterf25 · Mar 22, 2023

Another question, how can I scroll the scroll bar to the bottom, so the last log messages can be seen?

alwaysbusy · Mar 22, 2023

I can probably write some script to do so, but that will cause problems if you want the user to be able to scroll up (he scrolls up, you update the log and bam he's at the bottom again. If this only happens say once a minute he will be able to live with that, but if it happens every second, he will never be able to see what cam before.

As you did not answer any of my questions, may I assume all the rest is working now?

walterf25 · Mar 22, 2023

alwaysbusy said:
What do the logs show? (especialy check if the id matches with what you can see in the browser).
How are you adding it to your container?
How is the content filled?

If I add the component directly to the page then it shows just fine, look at this picture below

But if I directly to the container then it doesn't show.
Here's the code in the ConnectPage where I add all the components you see on the screen.

B4X: Copy

public Sub ConnectPage()           
    '    connecting the navigation bar
    ABMShared.ConnectNavigationBar3(page)
    
    
    Container1.Initialize(page, "nrfcontainer", "snaptable")
    
    Dim lblTitle As ABMLabel
    lblTitle.Initialize(page, "nrftitle", "Select COM Port to Connect To", ABM.SIZE_H4, True, "centro")
    
    
    btnUp.InitializeRaised(page, "btnUp", "", ABM.ICONALIGN_CENTER, "App Up", "centre")
    
    btnDown.InitializeRaised(page, "btnDown", "", ABM.ICONALIGN_CENTER, "App Down", "centre")
    
    btnHalt.InitializeRaised(page, "btnHalt", "", ABM.ICONALIGN_CENTER, "Halt", "centre")
    
    txtCommand.Initialize(page, "nrfCommand", ABM.INPUT_TEXT, "NRF Commands", True, "centre")
    
    '''txtLogs.Initialize(page, "txtLogs", "", ABM.SIZE_PARAGRAPH, True, "centre")
    txtLogs.Initialize(page, "custLog", "100px")
    ''txtLogs.FixedWidth = True
    btnUp.Enabled = False
    btnDown.Enabled = False
    btnHalt.Enabled = False
    
    Dim cmbBox As ABMCombo
    cmbBox.Initialize(page, "nrfCombo", "Select Com Port", 200, "centre")
    
    ports = Main.serial.ListPorts
    If ports.Size > 0 Then
        For Each comport As String In ports
            Dim lblport As ABMLabel
            lblport.Initialize(page, "lbl-"&comport, comport, ABM.SIZE_H6, True, "centre")
            cmbBox.AddItem(comport, comport, lblport)
        Next
    End If

#Region NOT SAVED: 2023-03-20T11:46:16
    'PHONE

    'TABLET

    'DESKTOP
    Container1.AddRowsV(1,True,ABM.VISIBILITY_ALL,"centre").AddCellsOSV(1,2,2,2,8,8,8,ABM.VISIBILITY_ALL,"centre")
    Container1.AddRowsV(1,True,ABM.VISIBILITY_ALL,"centre").AddCellsOSV(1,3,3,3,2,2,2,ABM.VISIBILITY_ALL,"centre").AddCellsOSV(2,0,0,0,2,2,2,ABM.VISIBILITY_ALL,"centre")
    Container1.AddRowsV(1,True,ABM.VISIBILITY_ALL,"centre").AddCellsOSV(1,3,3,3,6,6,6,ABM.VISIBILITY_ALL,"centre")
    Container1.AddRowsV(1,True,ABM.VISIBILITY_ALL,"centre").AddCellsOSV(1,3,3,3,2,2,2,ABM.VISIBILITY_ALL,"centre").AddCellsOSV(1,2,2,2,2,2,2,ABM.VISIBILITY_ALL,"centre")
    Container1.AddRowsV(100,True,ABM.VISIBILITY_ALL,"centre").AddCellsOSV(1,3,3,3,6,6,6,ABM.VISIBILITY_ALL,"centre")
    Container1.SetBorder(ABM.COLOR_BLACK, ABM.INTENSITY_DARKEN4, 2, ABM.BORDER_OUTSET)
    Container1.SetFixedHeight("650px")
    Container1.BuildGrid ' IMPORTANT!
#End Region
    Container1.Cell(1, 1).AddComponent(lblTitle)
    Container1.Cell(2, 1).AddComponent(btnUp)
    Container1.Cell(2,2).AddComponent(btnDown)
    Container1.Cell(2,3).AddComponent(btnHalt)
    Container1.Cell(3,1).AddComponent(cmbBox)
    Container1.Cell(5, 1).AddComponent(txtCommand)
    Container1.Cell(6,1).AddComponent(txtLogs.ABMComp)
    ''page.Cell(1,1).AddComponent(txtLogs.ABMComp)
    page.Cell(1,1).AddComponent(Container1)
    '''page.Cell(2, 1).AddComponent(cmbBox)
    ' refresh the page
    page.Refresh
    
    ' Tell the browser we finished loading
    page.FinishedLoading
    ' restoring the navigation bar position
    page.RestoreNavigationBarPosition   
End Sub

Also here's the logs where I print the from the custom component class

initialize: .abmlog {
background-color: #000;
color: #f0f0f0;
height: 100px;
overflow-y: auto;
overflow-wrap: break-word;
font-family: monospace;
}

myID: custlog
firstRun: $('#custlogcontent').parent().css("width", "100%");
$('#custlogcontent').html('');

walterf25 · Mar 22, 2023

alwaysbusy said:
I can probably write some script to do so, but that will cause problems if you want the user to be able to scroll up (he scrolls up, you update the log and bam he's at the bottom again. If this only happens say once a minute he will be able to live with that, but if it happens every second, he will never be able to see what cam before.

As you did not answer any of my questions, may I assume all the rest is working now?

It's fine, the user won't have to scroll up, what's important is to see the last line of the logs.

Please see previous post.

walterf25 · Mar 23, 2023

I finally got the text area working, all I had to do was remove the following part from the code you shared

B4X: Copy

Dim varID As String = internalID.Replace("-", "_")

with the following

B4X: Copy

Dim varID As String = internalID

now I can see the text area and the logs as well, now I am trying to get the scroll bar to go to the bottom so I can see the last logs.

all I need now is to get the scroll bar to go to the bottom so I can see the last logs.
I started playing with this part

B4X: Copy

    Dim varID As String = internalID''.Replace("-", "_")
    Log("refresh varID: " & varID)
'''    Dim script As String = $"$('#${varID}content').parent().css("width", "100%");
'''    $('#${varID}content').html('${mText}');"$
    Dim height As Int = 300
    Dim script As String = $"$('#${varID}content').parent().css("width", "100%");
        $('#${varID}content').html('${mText}');
        $('#${varID}content').scrollTop(${height});"$
    height = height + 300
    InternalPage.ws.Eval(script, Null)

This seems to work but I am only providing a fixed value of 300, I can see the scroll bar move to the bottom when there aren't too many logs, but when I start receiving continuous logs then it doesn't work for obvious reasons,

I know there's a scrollHeight parameter, but having trouble getting the actual value so I can pass the value to the .scrollTop parameter.

I am trying with the following, but the value is always null.

B4X: Copy

    Dim script2 As String = $"var mycomp = $('#${varID}content');
        return mycomp.scrollHeight;"$
    Dim height As Future
    height = InternalPage.ws.EvalWithResult(script2, Null)
    InternalPage.ws.Flush
    Log("isvalid value: " & height.Value)

Any thoughts on this.

alwaysbusy · Mar 23, 2023

The TargetID.Replace is indeed in this case not needed (wanted). It is needed if you are wrapping an existing .js component as then it does not work directly on the div as in this one but is using the .js script instead.

Try this for the scroll:

Code: Copy

Dim script As String = $"$('#${varID}content').parent().css("width", "100%");
    $('#${varID}content').html('${mText}');
    $('#${varID}content').animate({ scrollTop: 9999999 }, 0);"$

B4J Question ABMaterial TextArea component

walterf25

Expert

MichalK73

Well-Known Member

walterf25

Expert

alwaysbusy

Expert

walterf25

Expert

alwaysbusy

Expert

walterf25

Expert

alwaysbusy

Expert

walterf25

Expert

walterf25

Expert

walterf25

Expert

Attachments

alwaysbusy

Expert

Similar Threads