All Products
Search

This Product

    Mobile Platform as a Service:Use HTML5 container

    Document Center

    Mobile Platform as a Service:Use HTML5 container

    Last Updated:Mar 12, 2024

    You can use the HTML5 container to perform the following operations:

    Open an online web page within an app

    1. Add a custom class MyApplication, which inherits from Application, to the project.

    2. In the custom class MyApplication, perform initialization. The initialization method is shown in the following code:

      @Override
public void onCreate() {
    super.onCreate();
    
    MP.init(this);
}

    3. In the file app/src/main/AndroidManifest.xml, add android:name=".MyApplication".

       <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.example.h5application">

     <application
         android:name=".MyApplication"
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/AppTheme">
         <activity android:name=".MainActivity">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
     </application>

 </manifest>

    4. In the file activity_main.xml, set the style of the button again and change the id of the button to start_url_btn.

       <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity">

     <Button
         android:id="@+id/start_url_btn"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="40dp"
         android:background="#108EE9"
         android:gravity="center"
         android:text="Start an Online Web Page"
         android:textColor="#ffffff"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

 </androidx.constraintlayout.widget.ConstraintLayout>

    5. In the class MainActivity, rewrite the code for the clicking button event to implement the function to open the official website of Ant Group Financial Technology. The following code shows how this can be implemented:

       findViewById(R.id.start_url_btn).setOnClickListener(new View.OnClickListener(){
             @Override
             public void onClick(View v) {
                 MPNebula.startUrl("https://tech.antfin.com/");
             }
         });

    6. Add the following configurations to build.gradle(:app) in the main module of the project.

      34

    7. After compiling the project, install the app on a cell phone.

    8. You will open the home page of the official website of Ant Group Financial Technology within the app when you click the button. This means the API operation was successful. Now, you have completed opening an online web page within an app.

    Call the Native APIs on the front end

    1. When implementing a front-end page, through the bridge provided by the Nebula container, you can communicate with Native by using the JSAPI method to obtain the related information or data processed by Native. The Nebula container provides some basic preset JSAPIs. For more details, see JSAPI capabilities. In a .js file of an HTML5 page, you can call these JSAPIs by using AlipayJSBridge.call. See the following sample code:

       AlipayJSBridge.call('alert', {
   title: 'Native Alert Dialog',
   message: 'This is an Alert Dialog from Native.',
   Button: 'OK'
 }, function (e) {
   alert("The button was tapped.");
 });
      Note

      “https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/20200121/0.0.0.8_all/nebula/fallback/mPaaSComponentTestWebview.html“ is a fully functional front-end page. You can use this page to try out calling the Native APIs on the front end.

    2. In the file activity_main.xml, add a button and set the button id to h5_to_native_btn.

      <Button
     android:id="@+id/h5_to_native_btn"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="20dp"
     android:background="#108EE9"
     android:gravity="center"
     android:text="Call Native on the Front End"
     android:textColor="#ffffff"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintHorizontal_bias="0.0"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/start_url_btn" />

    3. In the class MainActivity, define the behavior after the button h5_to_native_btn is tapped, to implement the function of opening a front-end page. The following code shows how this can be implemented:

       findViewById(R.id.h5_to_native_btn).setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         MPNebula.startUrl("https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000000/1.0.XX.XX_all/nebula/fallback/h5_to_native.html");
     }
 });

    4. After compiling the project, install the app on a cell phone.

    5. Tap the button to open the front-end page. Then tap the button “Show Native Alert Dialog” and a Native alert dialog box will appear. The title of this alert dialog box is “Native Alert Dialog” and the content of it is “This is an Alert Dialog from Native.”. If you tap the OK button in this alert dialog box, another alert dialog box with no title will appear and its content is “The button was tapped.”. This means the API operation was successful. Now, you have completed calling the Native APIs on the front end.

    Call a custom JSAPI on the front end

    1. Create a custom class MyJSApiPlugin to define a custom JSAPI.

       package com.example.h5application;

 import com.alibaba.fastjson.JSONObject;
 import com.alipay.mobile.h5container.api.H5BridgeContext;
 import com.alipay.mobile.h5container.api.H5Event;
 import com.alipay.mobile.h5container.api.H5EventFilter;
 import com.alipay.mobile.h5container.api.H5SimplePlugin;

 public class MyJSApiPlugin extends H5SimplePlugin {
     private static final String API = "myapi";
     @Override
     public void onPrepare(H5EventFilter filter) {
         super.onPrepare(filter);
         filter.addAction(API);
     }
     @Override
     public boolean handleEvent(H5Event event, H5BridgeContext context) {
         String action = event.getAction();
         if (API.equalsIgnoreCase(action)) {
             JSONObject params = event.getParam();
             String param1 = params.getString("param1");
             String param2 = params.getString("param2");
             JSONObject result = new JSONObject();
             result.put("success", true);
             result.put("message", API + " with " + param1 + "," + param2 + " was handled by native.");
             context.sendBridgeResult(result);
             return true;
         }
         return false;
     }
 }

    2. Register the custom JSAPI named MyJSApiPlugin in the project. We recommend that you register it when the app starts. In this example, we register it in MyApplication.

       public class MyApplication extends Application {
         @Override
         protected void attachBaseContext(Context base) {
             super.attachBaseContext(base);
             // Suggestion: Check if this is the main process. Initialize only in the main process.
             QuinoxlessFramework.setup(this, new IInitCallback() {
                 @Override
                 public void onPostInit() {
                     // Start to use the mPaaS functions here.
         // Call registerCustomJsapi() to complete registering the custom JSAPI.
                     registerCustomJsapi();
                 }
             });
         }

     @Override
     public void onCreate() {
         super.onCreate();
         QuinoxlessFramework.init();
     }

     private void registerCustomJsapi(){
         MPNebula.registerH5Plugin(
                 // Class name of the plug-in.
                 MyJSApiPlugin.class.getName(),
                 // Just use an empty string.
                 "",
                 // Applicable context. Just use "page".
                 "page",
                 // Name of the registered JSAPI.
                 new String[]{"myapi"});
     }
 }

    3. In a front-end page, call this custom JSAPI. See the following sample code:

       AlipayJSBridge.call('myapi', {
   param1: 'JsParam1',
   param2: 'JsParam2'
 }, function (result) {
   alert(JSON.stringify(result));
 });
      Note

      “https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000001/1.0.XX.XX_all/nebula/fallback/custom_jsapi.html“ is a fully functional front-end page. You can use this page to try out calling a custom JSAPI on the front end.

    4. In the file activity_main.xml, add a button and set the button id to custom_jsapi_btn.

       <Button
 android:id="@+id/custom_jsapi_btn"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp"
 android:background="#108EE9"
 android:gravity="center"
 android:text="Custom JSAPI"
 android:textColor="#ffffff"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintHorizontal_bias="1.0"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/h5_to_native_btn" />

    5. In the class MainActivity, define the behavior after the button custom_jsapi_btn is tapped, to implement the function of calling a custom JSAPI on the front end. The following code shows how this can be implemented:

       findViewById(R.id.custom_jsapi_btn).setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         MPNebula.startUrl("https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000001/1.0.XX.XX_all/nebula/fallback/custom_jsapi.html");
     }
 });

    6. After compiling the project, install the app on a cell phone.

    7. Tap the Custom JSAPI button and a front-end page containing a button named Custom JSAPI will appear. If you tap the Custom JSAPI button on this page, an alert dialog box with no title will appear. This dialog box shows the handled parameters that were passed in while the API was called on the front end, based on the function defined by the custom API. Now, you have called the custom JSAPI from the front end.

    Customize the title bar for an HTML5 page

    The HTML5 container provides you with methods to configure a custom title bar. You can use the default title bar MpaasDefaultH5TitleView that is provided by mPaaS. You can rewrite some of these methods based on your needs. You can also implement H5TitleView. This section describes how to use MpaasDefaultH5TitleView to configure a title bar.

    1. Construct an H5ViewProvider implementation class. Set your custom H5TitleView as the return result of the createTitleView method.

       package com.example.h5application;

 import android.content.Context;
 import android.view.ViewGroup;

 import com.alipay.mobile.nebula.provider.H5ViewProvider;
 import com.alipay.mobile.nebula.view.H5NavMenuView;
 import com.alipay.mobile.nebula.view.H5PullHeaderView;
 import com.alipay.mobile.nebula.view.H5TitleView;
 import com.alipay.mobile.nebula.view.H5WebContentView;
 import com.mpaas.nebula.adapter.view.MpaasDefaultH5TitleView;

 public class H5ViewProviderImpl implements H5ViewProvider {
     @Override
     public H5TitleView createTitleView(Context context) {
         return new MpaasDefaultH5TitleView(context);
     }
     @Override
     public H5NavMenuView createNavMenu() {
         return null;
     }
     @Override
     public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
         return null;
     }
     @Override
     public H5WebContentView createWebContentView(Context context) {
         return null;
     }
 }

    2. In the activity_main.xml file, create a button and set the button id to custom_title_btn.

       <Button
 <Button
 android:id="@+id/custom_title_btn_before"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp"
 android:background="#108EE9"
 android:gravity="center"
 android:text="Before Customizing a Title"
 android:textColor="#ffffff"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/custom_jsapi_btn" />

 <Button
 android:id="@+id/custom_title_btn_after"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp"
 android:background="#108EE9"
 android:gravity="center"
 android:text="After Customizing a Title"
 android:textColor="#ffffff"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintHorizontal_bias="0.0"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/custom_title_btn_before" />

    3. In the MainActivity class, specify the system behavior upon a tap on the custom_title_btn button: specify the custom View Provider for the container and open an online page. The following code shows how this can be implemented:

       findViewById(R.id.custom_title_btn_before).setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         MPNebula.startUrl("https://www.cloud.alipay.com/docs/2/49549");
     }
 });
 findViewById(R.id.custom_title_btn_after).setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         // Set a custom title. You only need to set the title for once.
         MPNebula.setCustomViewProvider(new H5ViewProviderImpl());
         // Start a URL. The title changes after the URL is started.
         MPNebula.startUrl("https://www.cloud.alipay.com/docs/2/49549");
     }
 });

    4. After compiling the project, install the app on a cell phone.

    5. Tap the Before Customizing a Title and After Customizing a Title buttons in order. The same online page appears after you tap either of the two buttons. You can find that both the color of the title bar and font color are changed. Now, you have customized the title bar for an HTML5 page.

    Sample code

    Click here to download the sample code in this topic.