核心common 互动

• 1 Feature Overview
• 2 Usage Demo
• 3 API Introduction
• 4 Implementation Overview
  • 4.1 Initialization
  • 4.2 Setting Interactive Apps
  • 4.3 Implementation of Interactive Apps
    • 4.3.1 Introduction to Interactive App Classes
    • 4.3.2 Specific Interactive App Implementation Logic and Custom UI
  • 4.4 SDK Core Class Introduction
    • 4.1.1 PLVInteractWebView
    • 4.1.2 PLVInteractAppAbs
      • Abstract Methods:
      • Encapsulated Common APIs for Subclasses:
      • Methods Used by Subclasses:

1 Feature Overview

Interactive apps are a functional module shared across multiple scenarios, including the following interactive apps: quizzes, questionnaires, announcements, lotteries, and check-ins.

They are integrated via the IPLVInteractLayout interface as the core class.

2 Usage Demo

//构造
ViewStub interactLayoutViewStub = findViewById(R.id.plvlc_ppt_interact_layout);
IPLVInteractLayout interactLayout = (IPLVInteractLayout) interactLayoutViewStub.inflate();
//初始化
interactLayout.init();
//显示公告
interactLayout.showBulletin();
//销毁
interactLayout.destroy();

For specific usage, refer to the calls to the IPLVInteractLayout interface in PLVLCCloudClassActivity.

3 API Introduction

IPLVInteractLayout, as the interface for interactive apps, defines the following methods that need to be used in an Activity:

/**
 * date: 2020/10/9
 * author: HWilliamgo
 * 针对互动应用封装的Interface，可以在各个场景使用，定义了：
 * 1. 外部直接调用的方法
 */
public interface IPLVInteractLayout {
    // <editor-fold defaultstate="collapsed" desc="1. 外部直接调用的方法">
    /**
     * 初始化
     */
    void init();

    /**
     * 显示公告
     */
    void showBulletin();

    /**
     * 销毁
     */
    void destroy();

    /**
     * 点击返回
     *
     * @return 返回true表示拦截事件
     */
    boolean onBackPress();
    // </editor-fold>
}

4 Implementation Overview

PLVInteractLayout is the implementation class of the IPLVInteractLayout interface. It internally implements the logic for interactive apps:

4.1 Initialization

@Override
public void init() {
    if (interactWebView == null) {
        return;
    }
    //加载互动应用资源
    if (LOAD_WEB_URL) {
        interactWebView.loadWeb();
    } else {
        interactWebView.loadUrl("file:///android_asset/index.html");
    }
    //设置要显示的互动应用
    setupInteractApp();
}

1. Load Resources

   During initialization, choose whether to load online or local interactive app resources based on current needs, i.e., based on the variable LOAD_WEB_URL. The default is true, meaning online resources are loaded. To load local resources, change LOAD_WEB_URL to false.

2. Set Interactive Apps

   Call the setupInteractApp() method to set specific interactive apps, adding the desired ones.

4.2 Setting Interactive Apps

Setting interactive apps means adding the desired ones. See method: setupInteractApp()

//通用控制
PLVInteractCommonControl commonControl = new PLVInteractCommonControl();
//互动答题
PLVInteractAnswer interactAnswer = new PLVInteractAnswer();
//互动问卷调查
LVInteractQuestionnaire interactQuestionnaire = new PLVInteractQuestionnaire();
//互动抽奖
interactLottery = new PLVInteractLottery(commonControl);
//互动签到
PLVInteractSignIn interactSignIn = new PLVInteractSignIn();
//互动公告
interactBulletin = new PLVInteractBulletin();


interactWebView.addInteractApp(commonControl);
interactWebView.addInteractApp(interactAnswer);
interactWebView.addInteractApp(interactQuestionnaire);
interactWebView.addInteractApp(interactLottery);
interactWebView.addInteractApp(interactSignIn);
interactWebView.addInteractApp(interactBulletin);

The logic of the setupInteractApp() method is divided into two steps:

1. Instantiate specific interactive apps and set corresponding callbacks. Note that the common control is not a business interactive app; it is a general class used to control all interactive apps and must be added.

2. Add all interactive apps to the interactive app webView.

4.3 Implementation of Interactive Apps

4.3.1 Introduction to Interactive App Classes

The specific implementation of interactive apps is in the interact/app directory, with a total of 5 interactive apps, each class representing:

1. PLVInteractAnswer: Quiz
2. PLVInteractBulletin: Announcement
3. PLVInteractLottery: Lottery
4. PLVInteractQuestionnaire: Questionnaire
5. PLVInteractSignIn: Check-in

Other classes in this directory:

1. PLVInteractCommonControl: Common control class, encapsulating logic shared by all interactive apps.
2. IPLVInteractSendServerResultToJs: Listener for sending results from the interactive app to the server and then to JS.

4.3.2 Specific Interactive App Implementation Logic and Custom UI

1. Implementation Logic

   Let's look at a simpler interactive app to understand the implementation logic, such as interactive check-in.

   The implementation of the PLVInteractSignIn class is divided into two key methods.

   1. processSocketMsg(String msg, String event) is used to handle socket messages.

      Determine the event type based on the event, filter out check-in messages, process the data in the msg variable, and then call the sendMsgToJs method to send the corresponding event and data to the webView, which then makes the corresponding UI response.

   2. registerMsgReceiverFromJs(IPLVInteractJSBridge interactJSBridge) is used to handle JS messages.

      Use the IPLVInteractJSBridge interface method to register JS event listeners. When a check-in event is received from JS (i.e., the user clicks check-in on the webView), process the data and send the result to the server.

   3. sendResultToServer(PolyvSignIn2SocketVO socketVO) is used to send results to the server.

      Call the corresponding method to send the result to the server.

2. Custom UI

   There are two ways to customize the UI, using check-in as an example:

   1. Override the PLVInteractSignIn method:
      1. Override the logic in the processSocketMsg method. After extracting the data sent from the server, instead of calling sendMsgToJs() to send the event to the webView, render the data on your custom UI.
      2. Clear the body of the registerMsgReceiverFromJs method. Since the webView is no longer needed to render the UI, there is no need to listen for events sent from the webView.
      3. Send data to the server: When your UI responds to the corresponding event, directly call sendResultToServer and send the data to the server.
   2. Inherit the PLVInteractAppAbs class, implement your own logic, and add it to the webView in PLVInteractLayout.

4.4 SDK Core Class Introduction

4.1.1 PLVInteractWebView

Interactive app WebView, responsible for rendering the UI of interactive apps and managing multiple interactive apps.

API as follows:

/**
*  加载webView页面
*/
public void loadWeb() ;

/**
 * 添加互动应用
 *
 * @param interactAppAbs 互动应用
 */
public void addInteractApp(PLVInteractAppAbs interactAppAbs);


/**
 * 移除互动应用
 *
 * @param interactAppAbs 互动应用
 */
public void removeInteractApp(PLVInteractAppAbs interactAppAbs);

/**
 * 销毁
 */
public void destroy();

4.1.2 PLVInteractAppAbs

PLVInteractAppAbs is the base class for interactive apps. All interactive apps extend this class as a parent to implement their respective business logic.

Abstract Methods:

Methods that need to be overridden by specific subclass interactive apps.

/**
 * 处理socket消息
 *
 * @param msg   消息
 * @param event 事件
 */
protected abstract void processSocketMsg(String msg, String event);
/**
 * 注册JS发到原生的消息接收器
 */
protected abstract void registerMsgReceiverFromJs(IPLVInteractJSBridge interactJSBridge);

Encapsulated Common APIs for Subclasses:

/**
 * 设置显示隐藏监听器
 *
 * @param onInteractAppShowListener listener
 */
public void setOnShowListener(OnInteractAppShowListener onInteractAppShowListener);

Methods Used by Subclasses:

/**
 * 通知UI显示
 */
protected void notifyShow();

/**
 * 发送消息到JS
 *
 * @param handlerName 事件名字
 * @param data        数据
 * @param callBack    回调
 */
protected void sendMsgToJs(String handlerName, String data, CallBackFunction callBack);