B4J Tutorial B4J Codeviewer with simple search supporting multiple file extensions.

In this tutorial you can learn how to make a codeviewer application.
The application uses a webview for the viewing part and a textarea for the search part.
In the webview the code is presented with the help of prism.css and prism.js (link: Prism) or with w3.css (link: W3Schools).
In the textarea the occurences of the search word list are displayed using the setselection method. This means that each occurence is selected one at a time. You can go to the next or previous occurence using the buttons. If the search is done on a non-html text then you can select the language 'html' and the css 'w3css' and press the view button to see all the occurences of the search.
The content of the 0_app_description html text will first be shown in the viewer (using language 'html' and css 'w3css'). If you change the css to 'prism' then the markup of the text will be shown.
The reset button takes the first filename in the combobox list and shows the code (or the content if it's the app_description text).
This is what it looks like:

Searching for 'container' in the 0_app_description.html text... 8 occurences found...

Searching for 'File' (case sensitive!) in the codeviewer.b4j file text showing all the occurences in the webview...

Download the attached zip-file and unpack it to study how everything is done.
Assignment question: there are 2 extensions in the code that are not described. Can you find out which 2 and what is so special about those 2 extensions?
Happy coding!
Paul.

 

[jahswant]

Thanks for this tool. What are the supported languages.

 

[PaulMeuris]

Thanks for this tool. What are the supported languages.

With this tool you can look at the content of text files.
In the app_description file you can find a table of supported extensions.
These extensions are well known for certain programming languages.
B4X = Basic for Android/iOS/Java, php = php language, html = html language, markup = any markup language, css = cascading style sheets, js = javascript,
json = JSON object notation, sql = SQL language, java = java language.
You can add extensions to the application and find the corresponding prism language on the prism website. Add that language to the language list and you are good to go!

 

[jahswant]

You can add extensions to the application and find the corresponding prism language on the prism website. Add that language to the language list and you are good to go!

I will try soon.

 

[PaulMeuris]

In the Open dialog of the Codeviewer application you can see some PDF files. Opening such a PDF file will give you the “This file extension is not supported” message.
The previous tutorial about the PDFbox_test was build to show PDF files.
Wouldn’t it be great if you can launch the PDFbox_test application from within the Codeviewer application? We can do just that.
Here’s how you can make the changes in the code from the two applications.
Let’s start with the Codeviewer application.

In the subroutine is_supported_file you add the extension “.pdf”:

Private Sub is_supported_file(fn As String) As Boolean
    Dim file_ext As List = Array As String(".bas",".b4a",".b4j",".b4i",".txt", _
                           ".php",".html",".htm",".xml",".css",".js", _
                           ".json",".sql","java",".tpl",".var",".pdf")

In the subroutine show_file_content you add a test for the PDF extension:

Private Sub show_file_content(path As String,fname As String)
    reset_UI
    lblfilename.Text = path & fname
    Dim strtxt As String = File.ReadString(path,fname)
    extension = fname.SubString(fname.LastIndexOf("."))
    If extension = ".pdf" Then
        Dim shl As Shell
        Private arguments() As String = Array As String(path & fname)
        shl.Initialize("shl", "E:\B4J\pdfbox_test\B4J\Objects\temp\build\pdfbox_test.exe", arguments)
        shl.WorkingDirectory = "E:\B4J\pdfbox_test\B4J\Objects\temp\build"
        shl.Run(10000) 'set a timeout of 10 seconds
        B4XPage_Appear
        Return
    End If

Make sure you add the jShell library to the Library Manager panel in the IDE.
You have to change the paths to your situation of course.
We are using a shell command with a command line argument. This command will start the pdfbox_test.exe application with the PDF file argument.
Run the Codeviewer application to see if it still works. Build a standalone package (menu Project / Build Standalone Package) that will give you the Codeviewer.exe file.

On to the second application, the PDFBox_test project.

In this application we need to check if there is a command line argument provided or not.
Open the project in the IDE and go to the Main tab.
In the Process_Globals subroutine add a declaration for a Public variable (param1):

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Public param1 As String
End Sub

In the AppStart subroutine add the test for the command line arguments:

Sub AppStart (Form1 As Form, Args() As String)
    If Args.Length > 0 Then
        param1 = Args(0)
    Else
        param1 = ""
    End If
    MainForm = Form1
    MainForm.Show
    Dim PagesManager As B4XPagesManager
    PagesManager.Initialize(MainForm)
End Sub

Go to the B4XMainPage tab in the IDE and change the following line:

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    B4XPages.SetTitle(Me,"PDFBox test")
    fchoose.Initialize
    devwidth = B4XPages.GetNativeParent(B4XPages.MainPage).RootPane.Width
    pdffile = Main.param1

Run the PDFBox_test application to see if it still works. You should see the message "Please load a PDF file first!". Unless of course you commented that line.
Build the standalone package and you can start testing.
Start the Codeviewer application and open a PDF file. See if the PDFBox_test application is started with the selected PDF file loaded. And that’s it.
On to the next project… maybe a dashboard application that starts all kinds of applications…
Happy coding!
Paul

 

[PaulMeuris]

One more improvement to the Codeviewer code...
Changes to the display of search results in the webview (View click with html and w3css)
In htmlclass module:

    If lang = "html" And csstype = "w3css" Then
        If extension <> ".html" And extension <> ".htm" Then
            strtext = strtext.Replace(Chr(10),"<br>")
            strtext = strtext.Replace(Chr(9),"&nbsp;&nbsp;&nbsp;&nbsp;")
        End If
    End If

In the B4XmainPage module:

Private Sub btnsearch_Click
    htmlshow = False

This resets the boolean variable so the new search words will show up in the webview.
If you are making the changes from message # 5 then you can also implement these changes.