Extension Development Help For Related HTML

Extensions Extensions IDE
, ,
#1

Hello,

I need help understanding how I can insert HTML code into a extension code for Kodular and display it within a layout. Could anyone guide me on how to do this? Any tips or examples would be highly appreciated!

This is my example HTML preview:

HTML Example
HTML Example1080×741 57.6 KB
#2

Use WebView to show HTML inside a layout.

#3

Can you share the example extension code that you tried to make? I was trying to use the WebView library, but I can’t understand it properly.

#4

You can take a look here :point_down:

1 Like
#5

Its not working with long html code. Can I put the html file in extension assets and view it in web view?

#6

I made this in java but this is only for simplehtml

package com.ayan.CuatomPager;

import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.content.Context;
import android.view.ViewGroup;
import android.widget.FrameLayout;

import com.google.appinventor.components.annotations.*;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.runtime.AndroidViewComponent;
import com.google.appinventor.components.runtime.ComponentContainer;
import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;
import com.google.appinventor.components.runtime.util.YailList;

@DesignerComponent(
        version = 1,
        description = "An extension to render a predefined HTML inside an arrangement",
        category = ComponentCategory.EXTENSION,
        nonVisible = true,
        iconName = "https://cdn-icons-png.flaticon.com/512/3417/3417252.png")
@SimpleObject(external = true)
public class CuatomPager extends AndroidNonvisibleComponent {

    private final Context context;

    // Default HTML code
    private final String defaultHTML = 
        "<html>" +
        "<body>" +
        "<h1 style='background-color: red;'>Hello World!</h1>" +
        "<p>This is a paragraph.</p>" +
        "</body>" +
        "</html>";

    public CuatomPager(ComponentContainer container) {
        super(container.$form());
        this.context = container.$context();
    }

    @SimpleFunction(description = "Render the predefined HTML inside an arrangement")
    public void RenderDefaultHTML(AndroidViewComponent arrangement) {
        // Get the view of the arrangement
        ViewGroup viewGroup = (ViewGroup) arrangement.getView();

        // Create a WebView
        WebView webView = new WebView(context);
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);

        // Load the predefined HTML content
        webView.loadData(defaultHTML, "text/html", "UTF-8");

        // Add the WebView to the arrangement
        viewGroup.addView(webView, new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
        ));
    }
}

Can you tell me how to load the index.html I have placed in the assets of the extension

/aiwebres/index.html