DOCSEARCHbyAlgolia
Submit Docs

VirtualView Android Library

repository·master·Indexed 23 days ago

https://github.com/alibaba/virtualview-android

An Android library by Alibaba that enables dynamic updates of business component structures by compiling XML templates into binary data. It allows UI updates without full App releases through XML-based UI construction, layout virtualization for improved drawing efficiency, and support for data binding and logic expressions. It can be used independently or within the Tangram framework.

Tokens
2.2K
Snippets
7
Records
11
Agent score
31%

What's inside VirtualView

  1. What is VirtualView?

    master

    VirtualView is a framework designed to enable dynamic updates of business components in mobile applications. While page structures can be updated dynamically in systems like Tangram, business components are typically implemented in Native code and cannot be updated without a new release.

    VirtualView solves this by:

    1. XML-based UI Construction: Using XML templates to define business components, which are compiled into binary data.
    2. Dynamic Updates: Allowing the client to download and parse these binary templates to update component views at runtime.
    3. Virtualization: Flattening and virtualizing the layout hierarchy and view nodes described in XML to reduce the number of actual entity components rendered, thereby improving drawing efficiency.
    4. Data Binding & Expressions: Supporting data binding and logic expressions within the templates to integrate seamlessly with dynamic data.

  2. Build and bind data to a VirtualView instance

    master

    To display a component, request a container by its name from the ContainerService, add it to your layout, and then bind JSON data to it using setVData on the IContainer interface.

    // 1. Build final view instance and add to layout
View container = vafContext.getContainerService().getContainer(name, true);
mLinearLayout.addView(container);

// 2. Set data to bind to views
IContainer iContainer = (IContainer)container;
JSONObject json = getJSONDataFromAsset(data);
if (json != null) {
    iContainer.getVirtualView().setVData(json);
}

  4. Install VirtualView via Gradle or Maven

    master

    To use VirtualView independently, add the dependency to your Android project. Ensure you have jcenter and MavenCentral configured in your repositories. Check the releases page for the latest version.

    Gradle dependency:

    compile ('com.alibaba.android:virtualview:1.0.5@aar') {
	transitive = true
}

    Maven dependency:

    <dependency>
  <groupId>com.alibaba.android</groupId>
  <artifactId>virtualview</artifactId>
  <version>1.0.5</version>
  <type>aar</type>
</dependency>

  6. Initialize VirtualView for Independent Use

    master

    To use VirtualView in an Android application without Tangram, follow these initialization steps:

    1. Create a VafContext: This is the main entry point.
    2. Initialize Image Loader: If using built-in components like NImage or VImage, call VafContext.loadImageLoader. In production, you typically register your own image component.
    3. Initialize ViewManager: Required to manage view creation and template loading.
    4. Load Binary Templates: Load the compiled binary files (generated by VirtualView Tools) using either byte arrays (recommended) or file paths.
    5. Register Custom Components: If you have custom business components, register their builders via ViewManager.
    6. Register Event Handlers: Register processors for events like clicks or exposure.

  7. Use VirtualView within Tangram

    master

    When using VirtualView inside the Tangram framework, many initialization steps are handled automatically. You only need to:

    1. Register VirtualView components in the Tangram.Builder.
    2. Load templates into the TangramEngine.
    3. Register custom builders and event handlers as you would in independent use.
    // 1. Register component types
Tangram.Builder builder = Tangram.newBuilder(activity);
builder.registerVirtualView("tmallcomponent1");
builder.registerVirtualView("tmallcomponent2");

// 2. Load templates into engine
tangramEngine.setVirtualViewTemplate(TMALLCOMPONENT1.BIN);

// 3. Register custom builders and events (via services)
ViewManager viewManager = tangramEngine.getService(ViewManager.class);
viewManager.getViewFactory().registerBuilder(BizCommon.TM_PRICE_TEXTVIEW, new TMPriceView.Builder());

VafContext vafContext = tangramEngine.getService(VafContext.class);
vafContext.getEventManager().register(EventManager.TYPE_Click, new IEventProcessor() {
    @Override
    public boolean process(EventData data) {
        return true;
    }
});

  8. Instantiate and Bind Data to VirtualView Components

    master

    Once initialized, you can create component instances by their name and bind data to them if they use data-binding expressions.

    Create a component instance: Use vafContext.getContainerService().getContainer(name, true) to get a View.

    Bind data: Cast the container to IContainer and use setVData(JSONObject) to provide the data required by the template's expressions.

    // Create instance
View container = vafContext.getContainerService().getContainer(name, true);
mLinearLayout.addView(container);

// Bind data
IContainer iContainer = (IContainer)container;
JSONObject json = getJSONDataFromAsset(data);
if (json != null) {
    iContainer.getVirtualView().setVData(json);
}

  9. Load compiled XML template binary data

    master

    VirtualView uses binary data compiled from XML templates. You can load this data into the ViewManager using either a byte array (recommended) or a file path.

    // Load byte-array directly (recommended)
viewManager.loadBinBufferSync(TMALLCOMPONENT1.BIN);
viewManager.loadBinBufferSync(TMALLCOMPONENT2.BIN);

// Load from file
viewManager.loadBinFileSync(TMALLCOMPONENT1_PATH);
viewManager.loadBinFileSync(TMALLCOMPONENT2_PATH);

  10. Register event handlers for Click and Exposure

    master

    To handle user interactions like clicks or component exposure, register an IEventProcessor with the EventManager via the VafContext.

    vafContext.getEventManager().register(EventManager.TYPE_Click, new IEventProcessor() {

    @Override
    public boolean process(EventData data) {
        //handle here
        return true;
    }
});

vafContext.getEventManager().register(EventManager.TYPE_Exposure, new IEventProcessor() {

    @Override
    public boolean process(EventData data) {
        //handle here
        return true;
    }
});

  11. Register custom component builders

    master

    If you have developed custom basic components, you must register their builders with the ViewManager's ViewFactory.

    viewManager.getViewFactory().registerBuilder(BizCommon.TM_PRICE_TEXTVIEW, new TMPriceView.Builder());
viewManager.getViewFactory().registerBuilder(BizCommon.TM_TOTAL_CONTAINER, new TotalContainer.Builder());