You can use the HTML5 container to perform the following operations:
Open an online web page within an app
Add a custom class
MyApplication
, which inherits fromApplication
, to the project.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); }
In the file
app/src/main/AndroidManifest.xml
, addandroid: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>
In the file
activity_main.xml
, set the style of the button again and change the id of the button tostart_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>
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/"); } });
Add the following configurations to
build.gradle(:app)
in the main module of the project.After compiling the project, install the app on a cell phone.
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
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 usingAlipayJSBridge.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.
In the file
activity_main.xml
, add a button and set the button id toh5_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" />
In the class
MainActivity
, define the behavior after the buttonh5_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"); } });
After compiling the project, install the app on a cell phone.
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
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; } }
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 inMyApplication
.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"}); } }
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.
In the file
activity_main.xml
, add a button and set thebutton id
tocustom_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" />
In the class
MainActivity
, define the behavior after the buttoncustom_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"); } });
After compiling the project, install the app on a cell phone.
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.
Construct an
H5ViewProvider
implementation class. Set your customH5TitleView
as the return result of thecreateTitleView
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; } }
In the
activity_main.xml
file, create a button and set thebutton id
tocustom_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" />
In the
MainActivity
class, specify the system behavior upon a tap on thecustom_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"); } });
After compiling the project, install the app on a cell phone.
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.