提升开发体验,预览 VirtualView

前文《天猫客户端组件动态化的方案——VirtualView 上手体验.md》都提到了自定义模板编译成二进制数据的过程,在 Android 版的 Playground 里内置了一个编译工具可以实时调测,然而业务开发过程中,不可能在手机上编译,而是在电脑或者后台去编译模板。因此这里提供了一个独立的工具来编译模板,这里介绍下它的使用方法。

前世今生

工具的源码也提交在 github 上。在一开始的设计里,编译模块是针对控件来设计的,每一个控件如 NTextNImageVHLayout 等都有自己的编译类,编译类的继承结构体系与控件本身的继承结构体系一样。它们各自会解析对应控件的属性及控件本身的类型,将其转换成整型值或索引序列化到最终输出文件里;这就带来了一个问题,当需要扩展控件属性,或者添加自定义控件的时候,需要编写一个新的编译类注册到编译工具里,这对开发者来说十分不友好,且不说还得搭建编译工具工程的本身的运行环境,还得熟悉编译器类的编写逻辑才行。从下图的原始设计图就可以看出其复杂性。

image

为了解决这一弊端,对原始设计进行了重构,重构的核心目标就是不依赖源码就能进行模板编译,思路是通过配置化的方式声明描述控件类型、属性类型、解析方式等,方案实施上是将原先针对控件编写编译类的模式改成针对属性来编译写编译类,只需要一个通用的属性编译类即可,具体行为都通过配置文件来描述。将重构后的工具模板导出可执行文件,就可以在项目中直接使用了。废话了这么多,接下来就是本文的重点了。

使用说明

独立运行模式

文件介绍

下载源码之后,可执行工具存放在目录 TemplateWorkSpace 里,包含以下几个文件/目录(或运行后产生):

文件 作用
config.properties 配置组件 ID、xml 属性对应的 value 类型
templatelist.properties 编译的模板文件列表
build 二进制文件的输出目录
template xml 的存放路径
compiler.jar java 代码编译后 jar 文件,执行 xml 的编译逻辑
buildTemplate.sh 编译执行文件
如何运行
  • 打开命令行 执行 sh buildTemplate.sh
  • 模板编译后的文件会输出到 build 路径下
配置 config.properties
  • VIEW_ID_XXXX
    • 配置 xml 节点 id
    • 如配置 VIEW_ID_FrameLayout=1,则 xml 节点中的 <FrameLayout> 在编译后会用数值1代替
    • 节点配置以 VIEW_ID_ 开头
  • property=ValueType
    • 配置属性值的类型,配置对所有模板生效,不支持在 1.xml 和 2.xml 中对相同的属性用不同的 ValueType 解析
    • 目前已经支持
      • 常规类型:String(默认,不需要配置)、FloatColorExprNumberIntBool
      • 特殊类型 FlagTypeAlignLayoutWidthHeightTextStyleDataModeVisibility
      • 枚举类型 Enum<name:value,……>
        • 枚举说明:
          • 如配置 flexDirection=Enum<row:0,row-reverse:1,column:2,column-reverse:3>
          • 在解析属性是配置 row 直接转化成 int:0row-reverse 转成 int:1
  • DEFAULT_PROPERTY_XXXX
    • 为了兼容就模板的编译,写的强制在二进制中写入一些属性类型定义,可以忽略
配置 templatelist.properties
  • 格式 xmlFileName=outFileName,Version[,platform]
    • xmlFileName 标识 template 目录下需要编译的 xml 文件名建议不带 .xml 后缀,目前做了兼容
    • outFileName 输出到 build 目录下的 .out 文件名
    • Version 表示 xml 编译后的版本号
    • platform 同时兼容 iOS 和 android 时不写,可填的值为 androidiphone
xml 文件模板编写
  • 和以前的方式一样,不需要额外写 Java 代码,只需要对新增的属性在config.properties 中配置 ValueType

接口模式

除了直接使用命令行执行工具,还可以基于此搭建完整成熟的模板工具,它可以是个客户端,也可以是个后端服务,或者是个插件,所以需要提供接口模式供宿主程序调用。

//初始化构建对象
ViewCompilerApi viewCompiler = new ViewCompilerApi();
//设置配置文件加载器
viewCompiler.setConfigLoader(new LocalConfigLoader());
//读取模板数据
FileInputStream fis = new FileInputStream(rootDir);
//调用接口,传入必备参数,此时不区分平台,如果要区分平台,使用方单独编译即可
byte[] result = viewCompiler.compile(fis, "icon", 13);

预览 VirtualView

有了编译工具还不够,我们还需要更加方便的开发体验,比如实时预览。在猫客内,我们配合模板平台,集成了扫码预览的能力。对于开发阶段,我们还需要从模板编译到预览的一条龙服务,因此封装了这么一个小工具。

工具提交在 github

简介

本脚本基于 buildTemplate.sh 脚本,整合了『编译』-『上传』-『刷新』的流程。目的在于让模板编写之后自动刷新预览。

依赖环境

  • python
  • adb
  • Java

使用方法

python buildAndPreview.py VH2Layout

参数是模板名称,也就是当前要修改、预览的模板,与 templatelist.properties 里的名称一致。

previewconfig.conf 配置参数

  • 推送编译后的 .out 文件到手机存储的路径
[path]
target = /sdcard/com.tmall.wireless.virtualviewdemo/virtualview/
  • 预览app的预览界面
[preview]
activity = com.tmall.wireless.virtualviewdemo.debug/com.tmall.wireless.virtualviewdemo.PreviewActivity

以上默认值都是基于 VirtualView-Android 的 demo 里配置的,可以自行迁移 demo 代码到自己的 app 环境中进行预览。

默认配置文件:

image

预览客户端

默认基于 VirtualView-Android 的 demo,当有自定义控件的时候,需要修改预览 app 里,添加自定义组件注册逻辑,因此建议参考 demo 配置自己的预览环境。(注意确保手机有读SD卡权限)

演示

image
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,387评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 花儿,开在远方 那是我无法触及的悲伤 夜已凉 温茶之香送远方 望你浅品尝 天知我意心向往 唯愿佳人回头看 让我温暖...
    千里禅心阅读 198评论 2 1
  • 匠人之心,情商之美! 在全国,在无锡有这样的一群人, 家庭孩子们在哪,我们在哪 我们负责情商之美, 家庭孩子们负责...
    情商教育章佳灵阅读 125评论 0 0
  • 噼里啪啦噼里啪啦 滴滴答答动次打次 巴拉巴拉 呼呼呼呼呼呼呼呼 乒乒乓乓乒乒乓乓 啊啊啊啊啊啊啊啊啊啊啊啊啊啊 啧...
    被嫌弃的X阅读 240评论 0 0