Android Question Clickable Text on WebView?

bsnqt · Aug 21, 2021

Dear All,

I have a large dictionary database with many string records like the following:

B4X:

Dim HtmlString As String ="know-how <font color=red size=+2>know-how\n</font><br><font color=black><b>ˈknow-how</b>  <font color=rosybrown>[</font><font color=darkslategray><b>know-how</b></font><font color=rosybrown>]</font> "  _
& "<i>BrE</i> <i>NAmE</i> <font color=orange> noun</font> <font color=darkgray> </font><font color=orangered>uncountable</font> <font color=darkgray> (</font><font color=rosybrown>informal</font><font color=darkgray>)</font><br>knowledge of how to do sth and experience in doing it<br><br><font color=forestgreen>• </font>" _
& "<font color=forestgreen>We need skilled workers and technical know-how. </font>  <br><br>  <font color=darkslategray><u>Example Bank:</u></font><br><br><font color=forestgreen>• </font><font color=forestgreen>know-how in various high-tech fields </font><br><br><font color=forestgreen>• </font>" _
& "<font color=darkgray> </font><font color=forestgreen>to acquire a little know-how about the job </font>\n</font><br>"

WebView1.LoadHtml(HtmlString)

Loading such a record to a "normal" Webview has no problem, it will display correctly. But I want the user can click any word of the text on webview to search further (or few words that I format before loading string to the webview). This is a normal behaviour that any dictionary app can do. But I have very little knowledge on this. I have spent a week to read hundred of posts related to Webview, WebviewExtras, FlingableWebview, AJWebKit etc. but could not figure out which kind of webview I need to use? Thank you very much for your help.

NOTE. I cannot use LabelExtras neither CSBuilder, BCText as I have to modify a lot of records and it may cause errors

Best

FrostCodes · Aug 21, 2021

Consider using WebviewExtras2 and call your b4a subs if you need to or send back the data to the webview.
You would need to understand js to implement what you want to do the way I understand it.

bsnqt · Aug 21, 2021

Hi FrostCodes,

Thank you for your quick answer... WebviewExtras2 is a great library but I could not see (did I miss something) how can I handle the click event from the webview text? I am not able to implement any JS without any hint or clue. What I thought (before my search in the forum) was that this click event would already been implemented somewhere in some library for long time ago. It is really a big need...

FrostCodes · Aug 21, 2021

Did you look at this?

WebViewExtra: Call B4A Sub from WebView

Hi All, Here with Attached simple project to demonstrate how to call B4A Sub in WebView using WebViewExtra (v1.42). I'm not play often with this lib, but found some interest on how B4A can interact with WebView via Javascript. The project will: - Load html from asset - Call Javascript...

www.b4x.com

and search the forum, there is a lot of examples as i can see

bsnqt · Aug 21, 2021

Hi FrostCodes,

Thank you for being patient with me. Yes I did have a look on the link you mentioned, and I understand that it is about injecting JavaScript with WebViewExtras library and interacting with it. I can make the sample project run and work perfectly. However my situation is different, where I just would like to handle the click of user on any word of the webview (and as result can get the word). I am doing a lot of search and still struggling with, but it seems that so far I could not get any new clue. The closest example to my situation is Selectable Webview by warwound but it was posted in 2012 which is around 10 years ago.

The other one is Custom Context Menu for Text Selection posted by Erel, it is also a great one but again it requires the user to interact with selecting menu item popup (not thru a direct click or a tap). As you can see the screenshot below, I did look at many possible samples, but could not find out any solution yet. Once again thank you.

bsnqt · Aug 21, 2021

I am trying to play with LabelExtras and SpannableStringBuilder but it seems that I need to do a lot of work to re-formatting my huge database, which is almost impossible (see example of a record in my post #1). The webview with clickable text seems better for me but I am still stuck now.

William Lancee · Aug 22, 2021

As @Erel would say: why waste your time with Webview, use BBCodeView in combination with B4xPages, it will make everything simpler.

bsnqt · Aug 22, 2021

Yes...Thanks Williams. Erel would say exactly what you advised. I also trust that BBcodeView is the king of text! My issue is I am looking for a more "natural" way of displaying my ready-to-use database which has been formatted for Webview (so need zero effort when you load to the view) by somebody else but not me, they are public shared data. They are more than one such a database and each of them have more than 300 - 400,000 records. Any change of the content may lead to incorrect display of text (and table...) and it is hard for you to fix, since it is big text files they run quite slow...For sure BBCodeView and LabelExtras will be considered as my last life saver as in that case I have to do a lot of text formatting. My case is I am not the person who build the database from zero by myself. Very appreciate your advice ?.

Best

William Lancee said:
As @Erel would say: why waste your tine with Webview, use BBCodeView in combination with B4xPages, it will make everything simpler.

William Lancee · Aug 22, 2021

Since HTML is a marked-up style and BBcodeView is a marked-up style, I don't see the problem.
Can't you simply translate one to the other? BBCodeView has clickable elements (as does HTML but it requires Javascript - doable but not simpler).

I also don't understand what you mean by " a more 'natural' way".

Is this a Web App?

bsnqt · Aug 22, 2021

"Natural" means that the database has been proccessed / formatted for displaying onto webview. What you need to do is just to loadHtml, nothing to do more. If you use other views, you would need to re-format the whole database accordingly.

bsnqt · Aug 22, 2021

In the mean time I will try again and again with WebviewExtras and BBCodeView anyway. Let you keep posted.

William Lancee · Aug 22, 2021

If you study BBCodeView, you'll see almost 100% concordance

B4X:

    Dim str As String = $"
    [color=#ff0000][TextSize=25]know-how[/TextSize][/color]
    [color=#000000][b]know-how[/b][/color]
    [color=${rosybrown}][/color]
    [color=${darkslategray}][b]know-how[/b]][/color]
"$

'etc

Hasan Ali · Aug 22, 2021

Solution (without JavaScript):

B4X:

Sub Globals
    Dim WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")

    LoadHtml($"This is an <a href="?example">example</a>.<br>"$)
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub LoadHtml(Html As String)
    WebView1.LoadHtml(Html)
End Sub

Sub WebView1_PageFinished (Url As String)
    Log("Uri: " & Url)
    If Url.Contains("?") Then
        Dim word As String = Url.SubString2(Url.IndexOf("?")+1, Url.Length)
        Log("Word: " & word)
        SearchFromDB(word)
    End If
End Sub

' For testing purposes only
Sub SearchFromDB(word As String)
    If word.EqualsIgnoreCase("example") Then
        LoadHtml($"<b>${word}</b> <font color=grey>[ ig-zam-puhl, -zahm- ]</font><br><br>a thing characteristic of its kind or illustrating a <a href="?general">general</a> rule."$)
    Else If word.EqualsIgnoreCase("general") Then
        LoadHtml($"<b>${word}</b> <font color=grey>[ jen-er-uhl ]</font><br><br>affecting or concerning all or most people or things; <a href="?widespread">widespread</a>."$)
    Else If word.EqualsIgnoreCase("widespread") Then
        LoadHtml($"<b>${word}</b> <font color=grey>[ wahyd-spred ]</font><br><br>found or distributed over a large area or number of people."$)
    End If
End Sub

FrostCodes · Aug 22, 2021

bsnqt said:
Hi FrostCodes,

Thank you for your quick answer... WebviewExtras2 is a great library but I could not see (did I miss something) how can I handle the click event from the webview text? I am not able to implement any JS without any hint or clue. What I thought (before my search in the forum) was that this click event would already been implemented somewhere in some library for long time ago. It is really a big need...

Hey i would prepare a sample code for you .. and send soon
I hope it can get you started.

FrostCodes · Aug 22, 2021

Just a quick question do you prefer the example in Vue js or jquery or normal js?

bsnqt · Aug 22, 2021

Hi FrostCodes,

Wow, you are so kind I did not expect such a kind offer with even 3 choices ?.
I don't know yet which one is easiest for me in getting the project done and what is your preference. Jquery is as good as Vue js. But I think normal js may be more suitable?

bsnqt · Aug 22, 2021

In the mean time, I am still struggling with BBCodeview and CSBuilder (I already failed with LabelExtras as it is not suitable for my case). But I am still having a problem here with BBCodeview and I think I would better to ask that question to Erel in a separate thread. I really hope you can help me, using the js solution. Thanks a lot in advance.

FrostCodes · Aug 24, 2021

bsnqt said:
Hi FrostCodes,

Wow, you are so kind I did not expect such a kind offer with even 3 choices ?.
I don't know yet which one is easiest for me in getting the project done and what is your preference. Jquery is as good as Vue js. But I think normal js may be more suitable?

Check this... i made it as a guide for you

WebViewExtras Examples for beginners

I noticed a lot of beginners are confused about how to use the WebViewExtras library so I made a detailed example. If you find it useful, kindly consider buying me a coffee. Code works on Android 4.4 to Android 13 (last tested version). It should work for the latest Android versions but I...

www.b4x.com

bsnqt · Aug 24, 2021

Hi FrostCodes,

I have tried your example and it works great. It is not a direct solution what I would expect (my expectation was to click on any work of a default webview with loadHtml) but somehow it can solve half of my problem which takes time from me. I very appreciate your help. And to express my appreciation I have sent you a small gift using the link in your signature, please check ?.

FrostCodes · Aug 24, 2021

bsnqt said:
Hi FrostCodes,

I have tried your example and it works great. It is not a direct solution what I would expect (my expectation was to click on any work of a default webview with loadHtml) but somehow it can solve half of my problem which takes time from me. I very appreciate your help. And to express my appreciation I have sent you a small gift using the link in your signature, please check ?.

Thanks so much I appreciate it. ?
You made my night a good one. Please check your DM.

Android Question Clickable Text on WebView?

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Active Member

Well-Known Member

Member

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency