Android Question How to use WebView to embed an entire local or offline website?

[luisftv]

Quick question:


Is there a way to have WebView embed an entire local or offline website (a folder containing all the html files, images, pdf files, java scrip add-ons, etc.) into my app? Webview cannot do it? Is there another way?


I do not mean accessing a local folder. I mean importing a folder containing my entire web site (with all its structure) into my app, and then compiling my app (end size of the app does not matter to me).


For example, I have an app for which I made a help “activity module”. In that “Help” activity, I imported an html file with some graphics using WebView. To make the html file open the jpg file, I had to manually add the “assets” folder image location within the future compiled app into the html code for that one image. Can you imagine how troublesome would it be if I have more than 100 images? And I do for my next project. I would have to manually add the image location of the assets folder into the html code for each image…


I design websites as one of my duties at work, but now, I have to embed the whole website (folder with images, pdf files, zip files, java add ons, etc) into my app.


Here is the code I used for the Help activity module of one of my apps using WebView, and it works flawlessly (just the wrap around when zooming beyond the image size is not as I desire…), but this way would be too painful if importing a whole website folder:

Sub Process_Globals
End Sub

Sub Globals

    Dim HelpWebView1 As WebView

End Sub

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

    myHTML = File.ReadString(File.DirAssets, "Help.html")
    HelpWebView1.LoadHTML(myHTML)
   
    HelpWebView1.Color = Colors.Transparent 'Makes page background transparent in the Virtual Designer

End Sub

Thank you, in advance.

 

[Erel]

Yes, it is possible. Put the folder under the Files tab and load it with:

WebView.LoadUrl(WebViewAssetFile("index.html"))

WebViewAssetFile code is available here: http://www.b4x.com/android/forum/th...g-rapid-”-b4a-3-50-version.38981/#post-230988

I recommend you to use lower case only for the folder and files names.

 

[warwound]

You could try running an HttpServer within your app: http://www.b4x.com/android/forum/th...in-your-android-application.25984/#post150349.
Your existing HTML code might then load without having to modify any paths to resources.

Martin.

 

[Erel]

I don't see why HttpServer should be used here. If the paths are relative then it should work as is.

 

[luisftv]

Erel,

Thank you. It works (but you knew that!)... except for two things:

1. How do I get it to show images that are stored in a sub-folder? The code you gave will display all the images as long as they are linked/located withing the same folder as the index.html However, it will not show them if they are contain in a sub-folder within the same main/root folder where the index.html file is. Many websites are design that way, to use sub-folder for images, pdf, assets, javascript addons, etc. and, my jobs website depends on those sub-folders... I would have to redesign the entire website from scratch! Importing the images to the Assets does not work since after compiled the html files are looking for a sub-folder, and I was not able to add the sub-folder to the assets, it wouldn't let me.

2. Also, I cannot get it to show websites that contain "inline-frames" also known as "iframes". Half my website uses it. Can it be done?

But if I design a webpage and I store all the images (and other files) in the same folder as the "index.html" then it works almost perfectly... still it will not show iFrames though.



By the way, for those who are new to B4A, as I am, here is the way it works so far (most threads in the forum just give you a line of code implying/thinking you know the rest of the code...):

I made a new Activity Module and named it "Help1" (for my example, or, you can do it in the Main activity - the default one, etc.). Then, I open the "Visual Designer" and added a "WebView" box holder and named it "WVHelp" and enabled JavaScript and Zoom. I re-sized the WebView box to use most of the screen. Then I switch to the B4A code window and used the code below. I used Mozilla Komposer to make the "index.html" file which contains images and links, as well as tables and different font formatting. All the files (images, pdf, etc.) are contained withing the same folder where the "index.html" file is located. If you open this index file with any web browser it shows as intended in Komposer. Finally, I added the "index.hmtl" and all the other files to the assets window withing the B4A with the "Files" tool (located on the right lower corner of the main window, next to "Modules" and followed by "Logs" and "Libs". Also, if you have to rename all your files from your existing website to use lowercase and you don't want to do one by one, I'm happy to tell you that "Total Commander" file manager does it within seconds as a batch job with just two click after selecting them!!!

Then I compiled the app and voila! Done!

Here is the code:

Sub Globals
    Dim WVHelp As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Help1")
    WVHelp.LoadUrl(WebViewAssetFile("index.html"))
    WVHelp.Color = Colors.Transparent 'Makes page background transparent
End Sub

Sub WebViewAssetFile (FileName As String) As String
  Dim jo As JavaObject
  jo.InitializeStatic("anywheresoftware.b4a.objects.streams.File")
  If jo.GetField("virtualAssetsFolder") = Null Then
    Return "file:///android_asset/" & FileName.ToLowerCase
  Else
    Return "file://" & File.Combine(jo.GetField("virtualAssetsFolder"), _
      jo.RunMethod("getUnpackedVirtualAssetFile", Array As Object(FileName)))
  End If
End Sub

 

[Erel]

Try to disable the virtual assets folder feature. Add this line to the main activity:

#DebuggerForceStandardAssets: true

 

[luisftv]

Erel,

Thank you for replying.

The code #DebuggerForceStandardAssets: true had no effect. I added it, obviously, to the #Region Project Attributes.

In other words, the Basic4Android built-in "Files" option to add files to the assets did not let me add a Subfolders AND its contests. Instead, it opens the subfolder so that I can choose the files to open. I'm hoping that it will be implemented in a future version, as well as, apk full encryption.


That being said, I got it to work... By adding the actual subfolder(s) to the real hard drive project's "Files" folder.

For those like me who need baby steps:

I made a folder on the root of my Hard Drive and I called it "myfirstapp". I opened Basic4Android and save my project file into that folder. This created two subfolders within the root "myfirstapp" folder which are "Files" and "Objects" and also the ".b4a" file. Well, with Windows Explorer or another file manager, I simply copied the subfolders I needed for my website to that hard drive "Files" subfolder inside "myfirstapp" and after compiling the app it worked like a charm. My website is contained inside a folder called "website" and that's where the index.html file is also located. Inside that "website" folder I also have three other subfolders: backgrounds, wpimages, and wpscripts. All the files within "website" were added to the Assets folder using the Basic4Android built-in "Files" option (which ignores the subfolders, as you know), and the subfolders were added to the hard drive "Files" folder manually with Windows Explorer. I hope this makes sense. The only thing still not working is the iFrames, specially if nested iFrames are being used.

Erel, again, thank you.