All Products
Search
Document Center

Use HTML5 container

Last Updated: Feb 24, 2021

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.
    11
  2. In the custom class MyApplication, perform initialization. The initialization method is shown in the following code:

       
    1. @Override
    2. protected void attachBaseContext(Context base) {
    3. super.attachBaseContext(base);
    4. QuinoxlessFramework.setup(this, new IInitCallback() {
    5. @Override
    6. public void onPostInit() {
    7. // Start to use the mPaaS functions here.
    8. }
    9. });
    10. }
    11. @Override
    12. public void onCreate() {
    13. super.onCreate();
    14. QuinoxlessFramework.init();
    15. }
  3. In the file app/src/main/AndroidManifest.xml, add android:name=".MyApplication".

       
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    3. package="com.example.h5application">
    4. <application
    5. android:name=".MyApplication"
    6. android:allowBackup="true"
    7. android:icon="@mipmap/ic_launcher"
    8. android:label="@string/app_name"
    9. android:roundIcon="@mipmap/ic_launcher_round"
    10. android:supportsRtl="true"
    11. android:theme="@style/AppTheme">
    12. <activity android:name=".MainActivity">
    13. <intent-filter>
    14. <action android:name="android.intent.action.MAIN" />
    15. <category android:name="android.intent.category.LAUNCHER" />
    16. </intent-filter>
    17. </activity>
    18. </application>
    19. </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.

       
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. xmlns:app="http://schemas.android.com/apk/res-auto"
    4. xmlns:tools="http://schemas.android.com/tools"
    5. android:layout_width="match_parent"
    6. android:layout_height="match_parent"
    7. tools:context=".MainActivity">
    8. <Button
    9. android:id="@+id/start_url_btn"
    10. android:layout_width="match_parent"
    11. android:layout_height="wrap_content"
    12. android:layout_marginTop="40dp"
    13. android:background="#108EE9"
    14. android:gravity="center"
    15. android:text="Start an Online Web Page"
    16. android:textColor="#ffffff"
    17. app:layout_constraintEnd_toEndOf="parent"
    18. app:layout_constraintHorizontal_bias="0.0"
    19. app:layout_constraintStart_toStartOf="parent"
    20. app:layout_constraintTop_toTopOf="parent" />
    21. </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:

       
    1. findViewById(R.id.start_url_btn).setOnClickListener(new View.OnClickListener(){
    2. @Override
    3. public void onClick(View v) {
    4. MPNebula.startUrl("https://tech.antfin.com/");
    5. }
    6. });
  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. You will see the following user interface after starting the app:
    12

  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.
    13

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 Link. In a .js file of an HTML5 page, you can call these JSAPIs by using AlipayJSBridge.call. See the following sample code:

       
    1. AlipayJSBridge.call('alert', {
    2. title: 'Native Alert Dialog',
    3. message: 'This is an Alert Dialog from Native.',
    4. Button: 'OK'
    5. }, function (e) {
    6. alert("The button was tapped.");
    7. });
    Note: “ https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000000/1.0.0.1_all/nebula/fallback/h5_to_native.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.

       
    1. <Button
    2. android:id="@+id/h5_to_native_btn"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. android:layout_marginTop="20dp"
    6. android:background="#108EE9"
    7. android:gravity="center"
    8. android:text="Call Native on the Front End"
    9. android:textColor="#ffffff"
    10. app:layout_constraintEnd_toEndOf="parent"
    11. app:layout_constraintHorizontal_bias="0.0"
    12. app:layout_constraintStart_toStartOf="parent"
    13. 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:

       
    1. findViewById(R.id.h5_to_native_btn).setOnClickListener(new View.OnClickListener() {
    2. @Override
    3. public void onClick(View v) {
    4. MPNebula.startUrl("https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000000/1.0.0.1_all/nebula/fallback/h5_to_native.html");
    5. }
    6. });
  4. After compiling the project, install the app on a cell phone. You will see the following user interface after starting the app:
    15

  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.
    16

    17

    18

Call a custom JSAPI on the front end

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

       
    1. package com.example.h5application;
    2. import com.alibaba.fastjson.JSONObject;
    3. import com.alipay.mobile.h5container.api.H5BridgeContext;
    4. import com.alipay.mobile.h5container.api.H5Event;
    5. import com.alipay.mobile.h5container.api.H5EventFilter;
    6. import com.alipay.mobile.h5container.api.H5SimplePlugin;
    7. public class MyJSApiPlugin extends H5SimplePlugin {
    8. private static final String API = "myapi";
    9. @Override
    10. public void onPrepare(H5EventFilter filter) {
    11. super.onPrepare(filter);
    12. filter.addAction(API);
    13. }
    14. @Override
    15. public boolean handleEvent(H5Event event, H5BridgeContext context) {
    16. String action = event.getAction();
    17. if (API.equalsIgnoreCase(action)) {
    18. JSONObject params = event.getParam();
    19. String param1 = params.getString("param1");
    20. String param2 = params.getString("param2");
    21. JSONObject result = new JSONObject();
    22. result.put("success", true);
    23. result.put("message", API + " with " + param1 + "," + param2 + " was handled by native.");
    24. context.sendBridgeResult(result);
    25. return true;
    26. }
    27. return false;
    28. }
    29. }
  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.

       
    1. public class MyApplication extends Application {
    2. @Override
    3. protected void attachBaseContext(Context base) {
    4. super.attachBaseContext(base);
    5. // Suggestion: Check if this is the main process. Initialize only in the main process.
    6. QuinoxlessFramework.setup(this, new IInitCallback() {
    7. @Override
    8. public void onPostInit() {
    9. // Start to use the mPaaS functions here.
    10. // Call registerCustomJsapi() to complete registering the custom JSAPI.
    11. registerCustomJsapi();
    12. }
    13. });
    14. }
    15. @Override
    16. public void onCreate() {
    17. super.onCreate();
    18. QuinoxlessFramework.init();
    19. }
    20. private void registerCustomJsapi(){
    21. MPNebula.registerH5Plugin(
    22. // Class name of the plug-in.
    23. MyJSApiPlugin.class.getName(),
    24. // Just use an empty string.
    25. "",
    26. // Applicable context. Just use "page".
    27. "page",
    28. // Name of the registered JSAPI.
    29. new String[]{"myapi"});
    30. }
    31. }
  3. In a front-end page, call this custom JSAPI. See the following sample code:

       
    1. AlipayJSBridge.call('myapi', {
    2. param1: 'JsParam1',
    3. param2: 'JsParam2'
    4. }, function (result) {
    5. alert(JSON.stringify(result));
    6. });
    Note: “ https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000001/1.0.0.1_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.

       
    1. <Button
    2. android:id="@+id/custom_jsapi_btn"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. android:layout_marginTop="20dp"
    6. android:background="#108EE9"
    7. android:gravity="center"
    8. android:text="Custom JSAPI"
    9. android:textColor="#ffffff"
    10. app:layout_constraintEnd_toEndOf="parent"
    11. app:layout_constraintHorizontal_bias="1.0"
    12. app:layout_constraintStart_toStartOf="parent"
    13. 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:

       
    1. findViewById(R.id.custom_jsapi_btn).setOnClickListener(new View.OnClickListener() {
    2. @Override
    3. public void onClick(View v) {
    4. MPNebula.startUrl("https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000001/1.0.0.1_all/nebula/fallback/custom_jsapi.html");
    5. }
    6. });
  6. After compiling the project, install the app on a cell phone. You will see the following user interface after starting the app:
    18

  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.
    19

    20

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.

       
    1. package com.example.h5application;
    2. import android.content.Context;
    3. import android.view.ViewGroup;
    4. import com.alipay.mobile.nebula.provider.H5ViewProvider;
    5. import com.alipay.mobile.nebula.view.H5NavMenuView;
    6. import com.alipay.mobile.nebula.view.H5PullHeaderView;
    7. import com.alipay.mobile.nebula.view.H5TitleView;
    8. import com.alipay.mobile.nebula.view.H5WebContentView;
    9. import com.mpaas.nebula.adapter.view.MpaasDefaultH5TitleView;
    10. public class H5ViewProviderImpl implements H5ViewProvider {
    11. @Override
    12. public H5TitleView createTitleView(Context context) {
    13. return new MpaasDefaultH5TitleView(context);
    14. }
    15. @Override
    16. public H5NavMenuView createNavMenu() {
    17. return null;
    18. }
    19. @Override
    20. public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
    21. return null;
    22. }
    23. @Override
    24. public H5WebContentView createWebContentView(Context context) {
    25. return null;
    26. }
    27. }
  2. In the activity_main.xml file, create a button and set the button id to custom_title_btn.

       
    1. <Button
    2. <Button
    3. android:id="@+id/custom_title_btn_before"
    4. android:layout_width="match_parent"
    5. android:layout_height="wrap_content"
    6. android:layout_marginTop="20dp"
    7. android:background="#108EE9"
    8. android:gravity="center"
    9. android:text="Before Customizing a Title"
    10. android:textColor="#ffffff"
    11. app:layout_constraintEnd_toEndOf="parent"
    12. app:layout_constraintStart_toStartOf="parent"
    13. app:layout_constraintTop_toBottomOf="@+id/custom_jsapi_btn" />
    14. <Button
    15. android:id="@+id/custom_title_btn_after"
    16. android:layout_width="match_parent"
    17. android:layout_height="wrap_content"
    18. android:layout_marginTop="20dp"
    19. android:background="#108EE9"
    20. android:gravity="center"
    21. android:text="After Customizing a Title"
    22. android:textColor="#ffffff"
    23. app:layout_constraintEnd_toEndOf="parent"
    24. app:layout_constraintHorizontal_bias="0.0"
    25. app:layout_constraintStart_toStartOf="parent"
    26. 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:

       
    1. findViewById(R.id.custom_title_btn_before).setOnClickListener(new View.OnClickListener() {
    2. @Override
    3. public void onClick(View v) {
    4. MPNebula.startUrl("https://www.cloud.alipay.com/docs/2/49549");
    5. }
    6. });
    7. findViewById(R.id.custom_title_btn_after).setOnClickListener(new View.OnClickListener() {
    8. @Override
    9. public void onClick(View v) {
    10. // Set a custom title. You only need to set the title for once.
    11. MPNebula.setCustomViewProvider(new H5ViewProviderImpl());
    12. // Start a URL. The title changes after the URL is started.
    13. MPNebula.startUrl("https://www.cloud.alipay.com/docs/2/49549");
    14. }
    15. });
  4. After compiling the project, install the app on a cell phone. You will see the following user interface after starting the app:
    24

  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.

    • Before you customize the title bar
      25
    • After you customize the title bar
      25

Use the UC kernel

You can connect the UC SDK to your Android app. This helps address the compatibility issue among browsers of different vendors and ensure a lower crash rate and better performance than the system browser.To use the UC kernel, you must apply for an UCKey. For more information, see Add the UC kernel.

Sample code

Click here to download the sample code in this topic.