B4J Question CodeMirror wrapper : Display issue

[zed]

I'm using a dark theme.
The problem is that the background remains white. it's like there's a flash every time we use SetCode("").
I tried with CSS on the webview without any results.
Attached is a small project to see the problem.
Can you help me ?

 

[PaulMeuris]

After the startup:

After the click on the long button (a flash to white and then back to black):

The "seti" theme is used. The combobox is still at default.
After combobox change:

The "dracula" theme selected:

So the application behaves as expected.
The stylesheet links are in the file "codemirrorwrapper.HTML" in the CodeEditor defaultfolder (...\Roaming\CodeEditor)

 

[PaulMeuris]

In my Try-it-yourself tutorial i use CodeMirror in a much simpler way and without extra libraries.
You can also extend the CodeMirror settings to provide autocomplete lists, folding/unfolding code blocks, colored active line, extra keys support and a drag and drop feature. It is possible to create a b4x javascript file for the autocomplete lists.

 

[zed]

Hi,
It is not the selection of the theme that poses a problem. But the background remains white.
With the information you gave me, I was able to resolve this little problem by modifying the CSS of codeMirror.
I didn't know there was this CSS file.

It is possible to create a b4x javascript file for the autocomplete lists.

For autocomplete lists, if you have an example, that would be very helpful.
Thank you so much.

 

[PaulMeuris]

Here's a modified version of the html_header subroutine from the tryityourself application:
[CODE lang="b4x" title="Add css and js files" highlight="7,18-24"]Private Sub html_header(sb As StringBuilder,theme As String,mode As String) As StringBuilder
sb.Append("<html>")
sb.Append("<head>")
sb.Append("<meta name='viewport' content='width=device-width, initial-scale=1'>")
sb = add_stylesheet(sb,"codemirror.css")
sb = add_stylesheet(sb,"eclipse.css")
sb = add_stylesheet(sb,"show-hint.css")
If theme <> "" And theme <> "default" Then sb = add_stylesheet(sb,theme & ".css")
sb = add_javascript(sb,"codemirror.js")
sb = add_javascript(sb,"javascript.js")
sb = add_javascript(sb,"htmlmixed.js")
sb = add_javascript(sb,"css.js")
sb = add_javascript(sb,"clike.js") 'needed for php
sb = add_javascript(sb,"php.js")
sb = add_javascript(sb,"vb.js")
sb = add_javascript(sb,"sql.js")
sb = add_javascript(sb,"xml.js")
sb = add_javascript(sb,"show-hint.js")
sb = add_javascript(sb,"anyword-hint.js")
sb = add_javascript(sb,"css-hint.js")
sb = add_javascript(sb,"html-hint.js")
sb = add_javascript(sb,"javascript-hint.js")
sb = add_javascript(sb,"sql-hint.js")
sb = add_javascript(sb,"xml-hint.js")
Return sb
End Sub
[/CODE]
Of course you have to add the files in the highlighted lines in the Files Manager.
(the files can be found in the CodeMirror source code folders mode, theme, addon/hints, ...)
And then you need to change the html_body subroutine.
I'm using the smart string literal to make the code more readable and editable.
[CODE lang="b4x" title="autocomplete additions" highlight="3-7,11-30"]Private Sub html_body(sb As StringBuilder, strtext As String,pn As Pane,mode As String,theme As String) As StringBuilder
'Log("mode argument: " & mode)
Dim strmode As String = mode
If mode = "vb" Then strmode = "text/x-vb"
If mode = "php" Then strmode = "application/x-httpd-php"
If mode = "sql" Then strmode = "text/x-sql"
Log(mode)
If pn = B4XPages.MainPage.pnright Then
sb.Append("</head><body style='background-color:#DDDAFF;'>")
sb.Append("<textarea id='editor'>").Append(strtext).Append("</textarea>").Append(CRLF)
Dim strcm As String = $"
<script> var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
mode:'${strmode}',
theme:'${theme}',
styleActiveLine:true,
lineNumbers:true,
lineWrapping:true,
dragDrop:true,
indentUnit:4,
indentWithTabs:true,
tabMode:'indent',
enterMode:'indent'
});
editor.setSize('null','100%');
editor.setOption('extraKeys', {
"Ctrl-Space": "autocomplete",
});
</script>
"$
sb.Append(strcm)
Else
'sb = add_stylesheet(sb,"w3.css") 'use stylesheet from file
sb.Append("</head><body>")
sb.Append("<div>").Append(strtext).Append("</div>").Append(CRLF)
End If
'Log(sb.ToString)
Return sb
End Sub
[/CODE]
You can find an example of the words that are in the autocomplete list for vb in the vb.js file.
Tip: you can create a b4x.js file and put all the b4x words in it... and use a b4x mode...
If you want the autocomplete to start when you start typing then you can consult the CodeMirror documentation for a 'keydown' function.
Add such a function to the script in the html_body <script> section from the editor.
And this should do the job...

 

[zed]

Excellent. I'll try that.
Thank you again for all this information.

 

[zed]

It works well. THANKS

 

[zed]

Response too fast.
It doesn't work with CSS. Everything else works.
I don't understand.

 

[PaulMeuris]

Between the brackets it works...

 

[zed]

I made a mistake. It's my fault.
It works correctly

 

[max123]

Just for information, I ported some time ago Codemirror on Android with B4A.
It works, I even implemented all themes, all code languages, on Javascript and HTML I've implemented Automatic Error recognition.. using code lints
It works but I had some issues.

I started from @stevel05 B4J code but after that I completely rewrote it because B4A WebView implementation is completely different than B4J JavaFX WebView.

 

[zed]

I also used @stevel05 code. But I modified it to suit my needs. Now everything is working properly.

 

[max123]

@zed I will release next the full code for B4A, but it have some issues that are not solved, need to be improved, may users can help to improve it.

I have to implement code copy, paste and some small that are needed to use it as code editor, on Android there are code collassable but the indicator is too small, may need to edit some css files.

Because I have all files on my old computer, next days I will resume it, copy to my new computer, do some tests on last B4A release, and then post it in the forum.
More things are changed now, I tried this on Windows XP, Java8 and SDK26, now I use Windows 11, Java11 and SDK33, so may I have to readapt some things.

 

[stevel05]

This is great. When I wrote the original wrapper, as with most of them, it was as a proof of concept. A lot of these kind of libraries are too large to get a fully working example that will cover everyone's needs. This shows what can be done when the forum works together.

I have only used code mirror in a couple of projects when I first published it. So I am sure others have a better understanding of using it than I do. That is as it should be. And sharing that knowledge only improves the original attempt and the forum and B4X as a whole.

 

[max123]

Dear @stevel05 , I'm about to tell you words that probably you will like...

Your B4J example code was crucial to me, without it I couldn't have done the rest.

Furthermore, if you remember, I really wanted to do it, also because I need it for some of my Android applications,
but then when I saw that the implementation of the WebView was completely different from B4J to B4A, I asked you for advices and you gave it to me.

Many Many Thanks for this..... ?
This makes the difference.

Please always post interesting code, even if they are not perfect, this will be a starting
point for some users like me that probably if interested will try to improve it.

You will like this even more...

By following and studying your code and adapted to B4A, I did the same thing with the threejs 3D library, I managed to get incredible 3D things, like create 3D scenes, import 3D models, apply textures and more.... I created a small JS IDE for Android with 2 screens, in one screen there is the code editor, where to write the JS code, in the other there is the 3D view that shows what the edited code does.

For now the code editor I use is a simple EditText, and no colored syntax, next I will put Codemirror with colored syntax, autocomplete and automatic error recognition.
These things already works, but I had some small issues and need a revision of some more expert users.

So I'll put the two things together to make one.
In my country they say 'Kill 2 birds with one stone'.

Thanks

 

[max123]

@zed I tried your code on Windows 11, I've no your issue, when app start the backround is dark.

If I set the code I see the 'test' string and backround remain dark
If I change the theme with one that have light background and then set the code, the background remains light
If I change to another theme that have dark background, then set the code, the code shows and the backgound remains dark.

I don't see any issue here.

One important note, you can add collassable subs and loops like while, for etc., I don't have my code here but is not complitated.
Another important thing are to add keyboard shortcuts, eg you press Alt + W and it print on the code the while loop.

Please can you post the full project with AutoComplete ? I want to study the code.

Thanks

 

[stevel05]

Yep that's great @max123 , I will always try to help where I can. Sometimes we just need to find things that interest us or give us an idea and then we can work on them to get to what we actually want it to do.

If some of my posts give someone an idea that they then follow up and create what they want, that's what it's about. That is why I post some of these "proof of concept" threads. Some of them I may not even use myself for anything other than learning and seeing what is possible.

 

[zed]

Thanks Stevel05. Please post concept codes or other tests.
This is not the first time I have modified the codes you post. I used and modified the sound a lot with B4J. By adding FFMPEG.
Obviously this gives a big boost to our own code. It is certain that if I had not had these codes, I probably would not have made a certain application.
Regarding CodeMirror, I had no idea how it worked. PaulMeuris gave me some explanations and that's how I was able to adapt certain things.
Thanks to you, I can say that now I know CodeMirror well.
Regarding autocomplete, I haven't integrated it yet. The tests are working perfectly, but I need to release a beta version as soon as possible.
Once completed, I will post the full code of the app since this is an app aimed at B4X users. This application is simply a Visual jfx CSS editor. A bit of patience.

 

[max123]

I resumed my old Codemirror wrapper for B4A, originally it use SDK 26.
Here I use the WebView URL like this:

file:///data/user/0/b4a.example.codemirror/files/codemirrorwrapper.HTML

using this to encode the URL:

'Returns a file URI. This can be used with WebView to access local resources.
'The URI depends on the compilation mode.
'The FileName parameter will be URL encoded.
'
'Note that this is the same as XUI.FileUri. You can use this if you do not plain to use XUI in your project.
'
'Example: <code>
'WebView1.LoadHtml($"<img src="${FileURI(File.DirAssets, "smiley.png")}" />"$)
''or:
'WebView1.LoadUrl($"${FileURI(File.DirAssets, "smiley.png")}"$)
'</code>
Public Sub FileURI(Dir As String, FileName As String) As String
    If Not(Dir = "AssetsDir") Then  ' AssetsDir = File.DirAssets
        Return "file://" & File.Combine(Dir, EncodeUrl(FileName, "UTF8"))
    End If
 
    Dim jo As JavaObject
    jo.InitializeStatic("anywheresoftware.b4a.objects.streams.File")
 
    If jo.GetField("virtualAssetsFolder") = Null Then
        Return "file:///android_asset/" & EncodeUrl(FileName.ToLowerCase, "UTF8")
    Else
        Return "file://" & File.Combine(jo.GetField("virtualAssetsFolder"), _
            EncodeUrl(jo.RunMethod("getUnpackedVirtualAssetFile", Array As Object(FileName)), "UTF8"))
    End If
End Sub

This not longer works on SDK 33, the WebView refuses to load the codemirror page.
I test with Android emulator SDK 33.

I even tried to use rp.GetSafeDirDefaultExternal, it works with SDK 26, 28, 29, does not works on SDK 30+
I even tried xui.FileUri

But from dir assets this works and load an html page:

    Dim url As String = xui.FileUri(File.DirAssets, "simple.html")  ' Does work
    Log(url)
    WebView1.LoadUrl(url)

Please can someone explain where I'm wrong ?
I want to load html file from File.DirInternal

So this I wrote may do not longer works:
https://www.b4x.com/android/forum/threads/file-uri-and-url.140255/#content