Android | Tangram dynamic page Road (6) data separation

After the first five series of articles, we have a preliminary understanding of Tangram and vlaayoutCombined with business scenariosUse, explore the support that framework capabilities can bring to the business. Because the research itself is a process that needs constant stepping on the pit, the outline is also fine tuned, and the follow-up will be updated according to the problems and solutions found in the actual use process.

1. Demand background
2. Introduction to Tangram and vlayout
3. Use of Tangram
4. Vlayout principle
5. Tangram principle
6. JSON template and data separation
7. undetermined

In this paper, theTangramThe JSON template is separated from the data.

The author demo code, see the contentdemo2Bag.

Data separation

As mentioned in the previous article, it is not possible to bind the data in the template in the actual business, so the template will be bloated. What we need to do is,Describe page structure and data source with template, not the data itself, so you need to strip the data out.

Operation effect:

Data mocks play Android by themselves (it looks a bit messy, so I have time to set up a small service to get close to the business),

Focus on the page structure, remote template adjustmentCardSequence, 4 column layout is changed to 5 columns, text color and waterfall flow item background color are changed.

Then look at the page implementationShoppingHomeAct，

public class ShoppingHomeAct extends TangramActivity {
    ActivityShoppingHomeBinding mBinding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_shopping_home);
        super.onCreate(savedInstanceState);
    }

    @Override
    protected String createBizDomain() {
        return "shopping_ Home "; // return to business domain: Mall Homepage
    }

    @Override
    protected RecyclerView createRecyclerView() {
        return  mBinding.rvList ; // returns recyclerview
    }

    @Override
    protected boolean needRefreshAndLoadMore() {
        // and return to enable more downloads
    }
}

There is very little code, just inherit itTangramCapableTangramActivityTo return the object it needs.

Dynamic merge data

Referring to the official demo, the first way to think of is to merge data dynamically, that is, according to the following idea,

Data preparation,

1. Template address: Net_ shopping_ home.json
2. Aggregate data interface: Tangram / shopping / home
3. Waterfall stream data interface: playing Android – article / list / 0 / JSON

The template is as follows (with deletion), which describes the page structure and data source,

{
    //Aggregate data interface. Of course, it is not necessary to write full path in actual business, such as Tangram / shopping / home
    "requestMakeup":"http://rest.apizza.net/mock/3f233eed2d9be716a5f48fccb9c719f2/tangram/shopping/home",
    //Waterfall flow data interface
    "requestList":"https://www.wanandroid.com/article/list/%s/json",
    //Template name
    "templateName":"net_shopping_home",
    //Page structure template
    "template":[
        {
            "Type": "container fivecolumn", // five column layout
            "load":" makeup:category "// is the data source interface of", // is the aggregation field of
            "Itemtype": "imagetextview" // the specific view cell is imagetextview below the above figure
            "style":{
                "Textcolor": "FF", // extended field, text color
                "padding":[
                    9,
                    9,
                    0,
                    9
                ]
            }
        },
        {
            "Type": "container waterfall", // waterfall flow layout
            "Itemtype": "gooditemview", // the specific view cell is the product style gooditemview
            "Load": "XXX", // no need to write. As long as the requestlist is configured, the last crad will fetch waterfall data by default
            "style":{
                "Column": 2, // displays two columns
                "Hgap": "4", // gap
                "vGap":"4",
                "margin":[
                    9,
                    9,
                    0,
                    9
                ],
                "Itembgcolor": "ා 1f1f1f", // extended field, item background color
                "Textcolor": "#ffffff" // extended field, text color
            }
        }
    ]
}

The aggregate data are as follows (with deletion),

{
    "errorCode":0,
    "errorMsg":"",
    "data":{
        // Data Carousel:
            {
                "imgUrl":"https://wanandroid.com/blogimgs/942a5c62-ca87-4e7c-a93d-41ff59a15ba4.png",
                "link":"https://www.wanandroid.com/navi"
            },
            {
                "imgUrl":"https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png",
                "link":"https://www.wanandroid.com/blog/show/2"
            },
            {
                "imgUrl":"https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png",
                "link":"https://flutter.cn/"
            }
        ],
        "Bottomtitle": [// waterfall title data
            {
                "Title": guess you like it
            }
        ]
    }
}

Everything’s ready to goTangramActivityFocus on the main implementation.

Merge the aggregate data into the template field of the template object,

//TangramActivity.java
void mergeMakeupDataToTemplate(JSONObject data, JSONArray template) throws JSONException {
    //Traverse each card (layout) and fill in the fields items
    for (int i = 0; i < template.length(); i++) {
        JSONObject card = template.getJSONObject(i);
        //If the card has a load field and the field value starts with makeup: it indicates that the data source of the card is aggregate data
        if (card.has("load") && card.getString("load").startsWith("makeup:")) {
            String load = card.getString("load");
            JSONArray cells = data.getJSONArray(load.substring(load.indexOf(":") + 1));
            //Write the itemtype of the template configuration, that is, the specific view cell, into the data source
            for (int cellIdx = 0; cellIdx < cells.length(); cellIdx++) {
                cells.getJSONObject(cellIdx).put("type", card.getString("itemType"));
            }
            card.put("items", cells);
        }
    }
}

Analysis of waterfall flow data,

//TangramActivity.java
void parseListData(List<ArticleBean.DataBean.Article> list, @NonNull Card card) {
    JSONArray cells = new JSONArray();
    try {
        for (int i = 0; i < list.size(); i++) {
            JSONObject obj = new JSONObject(MyApp.gson.toJson(list.get(i)));
            obj.put("type", card.optStringParam("itemType"));
            //Due to the use of Android data structure, here manually add some parameters for demonstration
            obj.put("imgUrl", DataUtil.getImgByIdx(i + mListDataPage * list.size()));
            cells.put(obj);
        }
    } catch (JSONException e) {
        e.printStackTrace();
    }
    List<BaseCell> cs = mEngine.parseComponent(cells);
    card.addCells(cs);
    card.notifyDataChange();
    finishLoad();
}

The complete code is visible TangramActivity.java 。

Problems to be solved

• There is no solution to the local refresh problem. Previously, some partners mentioned that Tangram does not support local refresh, and then put it into practice. It is really difficult to handle. For example, after loading waterfall data,card.notifyDataChangeIs the nature ofnotifyDataSetChanged。
• Optimize to non inheritanceTangramActivityrealization. Let business activity inheritance implementation always be inflexible. Try to wrap the core engineTangramEngine。

---