The original link

In the previous article “Cat guest Tangram page component dynamic scheme”, VirtualView Android implementation details (a) introduced the VirtualView scheme, but the content is focused on the design and implementation principle, before further introducing other details, Let’s get a feel for what it is, what it can do, and how it can be used.

VirtualView profile

What is a VirtualView

Basically, we implemented a set of custom controls, built a UI view by referring to them in custom XML, and then used the engine to parse the XML data and render it out of the interface. It’s like writing an XML layout file in Android and rendering it, or writing an HTML file and rendering it in a browser.

Why is it VirtualView

Among the customized controls we have implemented, in addition to some controls based on system control encapsulation, there is also a class of controls based on Canvas drawing, which depend on the existence of the host control of an entity, and there is no entity View corresponding to the final rendering, which is called virtual controls. Hence the name VirtualView.

How is the layout file different from Android

To some extent, the design of the whole program draws on the Android platform to build an interface through XML. The biggest difference is that it simplifies a lot of processing and breaks away from the platform restrictions. A program is also implemented on iOS, where you can write a template to run on both platforms. In addition, with the ability of dynamic loading of customized XML data, the interface view can be dynamically adjusted on the peer end.

Key features of VirtualView

  • A template that runs on both Android and iOS.
  • Provides basic atomic and container controls, supports adding custom controls, see documentation for details;
  • Support writing data binding expressions in XML templates to dynamically bind data;
  • Support virtualization control, mixed use of virtual control and entity control;
  • Dynamic loading of XML template data and dynamic updating of interface structure;
  • Register event handlers to respond to business logic;

VirtualView source code

The solution is open source and can be viewed on Github:

  • Virtualview-Android
  • Virtualview-iOS

This solution can be used alone or in conjunction with Tangram, which is also available on Github:

  • Tangram-Android
  • Tangram-iOS

VirtualView use

Develop a component using VirtualView

There are several processes: write template – compile template – send to client – render;

  1. Start by writing a template, which we provide with the first version of the toolvirtualview_toolsWrite, as shown aboveFrameLayout,NImage,NTextAre built-in controls, set up a variety of properties, can be written to death or through the expression binding a data field reference.
  2. Instead of loading the raw XML file, virtualView_tools first compiles it into a binary file with the suffix OUT.
  3. To the client, the first two steps are carried out outside the client runtime. Here, to the client has two meanings: one is to directly package the compilation result to the client for loading; the other is to release the compilation result to the CDN for the client to download.
  4. Render, the solution engine will load this binary data, and bind the data to render.

Playground

In order to facilitate hands-on experience, WE made a Playground to experience the ability of built-in basic controls and real components used in several business scenarios. We also built the ability of compiling templates into the APP. XML templates can be compiled in the APP and the effect can be seen.

Source code address:

Github.com/alibaba/Vir…

Here are some of the interfaces drawn on the Playground using the VirtualView scheme:

Basic control demo

Business Scenario Demonstration

Overhand experience

Download Playground and run it as follows:

  • Parse XML on the left to go to the right;
  • Clicking on the “Compile /sdcard/ VirtualView.xml file” button will compile a copy of the raw XML in real time and load it into memory, then render a View and paste it underneath, as illustrated in the green box on the right.

If the /sdcard/ virtualView. XML file does not exist, a copy of the Playground’s asset will be created. You can upload an XML file to /sdcard/ virtualView. XML, or build on the changes in the Playground and run them.

Default template code

The template file and data source in the figure above are as follows :(a horizontal linear layout with a graph and a text, in addition to a fixed width and height, dynamic data is retrieved from the JSON data by expression)

<? xml version="1.0" encoding="utf-8"? > <VHLayout flag="flag_exposure|flag_clickable"
        orientation="H"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
    <NImage
            id="1"
            src="${logoUrl}"
            layoutMarginLeft="8"
            layoutMarginRight="8"
            layoutMarginTop="8"
            layoutMarginBottom="8"
            layoutWidth="32"
            layoutHeight="32"/>
    <NText
            id="2"
            text="${title}"
            layoutGravity="v_center"
            gravity="${style.text-align}"
            textSize="${style.font-size}"
            textColor="${style.color}"
            layoutWidth="match_parent"
            layoutHeight="wrap_content"/>
</VHLayout>
Copy the code
{
  "style": {
    "text-align": "h_center"."font-size": "20"."color": "#FF5000"
  },
  "title": "Ultra high 99.9% of users feel fast."."logoUrl": "https://gw.alicdn.com/tfs/TB1yGIdkb_I8KJjy1XaXXbsxpXa-72-72.png"
}
Copy the code

Virtual Control Demo

<? xml version="1.0" encoding="utf-8"? > <VHLayout flag="flag_exposure|flag_clickable"
        orientation="V"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
    <VHLayout
            flag="flag_exposure|flag_clickable"
            orientation="H"
            layoutWidth="match_parent"
            layoutHeight="wrap_content">
        <NImage
                id="1"
                src="${logoUrl}"
                layoutMarginLeft="8"
                layoutMarginRight="8"
                layoutMarginTop="8"
                layoutMarginBottom="8"
                layoutWidth="32"
                layoutHeight="32"/>
        <NText
                id="2"
                text="${title}"
                layoutGravity="v_center"
                gravity="${style.text-align}"
                textSize="${style.font-size}"
                textColor="${style.color}"
                layoutWidth="match_parent"
                layoutHeight="wrap_content"/>
    </VHLayout>
    <VHLayout
            flag="flag_exposure|flag_clickable"
            orientation="H"
            layoutWidth="match_parent"
            layoutHeight="wrap_content">
        <VImage
                id="1"
                src="${logoUrl}"
                layoutMarginLeft="8"
                layoutMarginRight="8"
                layoutMarginTop="8"
                layoutMarginBottom="8"
                layoutWidth="32"
                layoutHeight="32"/>
        <VText
                id="2"
                text="${title}"
                layoutGravity="v_center"
                gravity="${style.text-align}"
                textSize="${style.font-size}"
                textColor="${style.color}"
                layoutWidth="match_parent"
                layoutHeight="wrap_content"/>
    </VHLayout>
</VHLayout>
Copy the code

As shown in the figure above and the template code, the first line of content image (NImage) and text (NText) are solid Views, while the second line of content image (VImage) and text (VText) are virtualized implementations that are displayed by drawing on the Canvas of the host container.

Application in tmall client

Experience the

Talk more, it is better to personally use the experience, click download source code to try it 🙂

  • Virtualview-Android
  • Virtualview-iOS

One day

Added an independent compilation tool introduction: Tmall client component dynamic scheme — VirtualView tool update