卡片的交互
卡片数据的初始化
当用户添加或者查看卡片内容时，它是有一个基本的数据的。所以，我们需要在java中获取图片以及文本然后传递给卡片。代码如下（WidgetImpl）：
public class WidgetImpl extends FormController { private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, WidgetImpl.class.getName()); private static final int DEFAULT_DIMENSION_2X2 = 2; private String url = "https://harmony-1300376177.cos.ap-shanghai.myqcloud.com/europeancup.json"; private int size=0; public WidgetImpl(Context context, String formName, Integer dimension) { super(context, formName, dimension); } //获取网络数据 private ZSONArray getData() { LYJHttps lyjHttps = new LYJHttps(); String response = lyjHttps.doGet(url); ZSONObject jsonStr = ZSONObject.stringToZSON(response); ZSONObject result = jsonStr.getZSONObject("result"); ZSONArray data = result.getZSONArray("data"); this.size=data.size(); return data; } //卡片的初始化 @Override public ProviderFormInfo bindFormData() { HiLog.info(TAG, "bind form data"); ProviderFormInfo providerFormInfo = new ProviderFormInfo(); if (dimension == DEFAULT_DIMENSION_2X2) { ZSONObject zsonObject = new ZSONObject(); HiLog.info(TAG, "update form data: formId" + ((ZSONObject) (getData().get(0))).getString("img")); zsonObject.put("imageUrl", ((ZSONObject) (getData().get(0))).getString("img")); zsonObject.put("titleName", ((ZSONObject) (getData().get(0))).getString("title")); providerFormInfo.setJsBindingData(new FormBindingData(zsonObject)); } return providerFormInfo; } //卡片的更新 @Override public void updateFormData(long formId, Object... vars) { HiLog.info(TAG, "update form data: formId" + formId); } //卡片的事件处理 @Override public void onTriggerFormEvent(long formId, String message) { HiLog.info(TAG, "onTriggerFormEvent."); } //卡片的界面跳转 @Override public Class<? extends AbilitySlice> getRoutePageSlice(Intent intent) { HiLog.info(TAG, "set route page slice."); ZSONObject zsonObject = ZSONObject.stringToZSON(intent.getStringParam("params")); if (zsonObject.getString("message").equals("button")) { return WidgetSlice.class; } return null; } }
这里就是获取数据，然后传递到js卡片当中。
通过providerFormInfo.setJsBindingData()方法进行数据的初始化，而基础数据在ZSONObject中进行添加。
到这一步，读者可以运行App添加卡片，其已经具有展示的效果了。但是卡片不会自动替换数据，因为我们没有设置定时替换数据的代码。
卡片的定时更新
所以，我们需要给卡片设置定时的数据替换，让其轮播当前的所有欧洲杯赛事资讯。这样，新鲜资讯就可以通过这么一个2*2卡片全部显示出来。
代码如下（WidgetAbility）：
public class WidgetAbility extends Ability { private ZSONArray zsonArray; // 定时器，每秒执行一次 private void startTimer(long formId) { this.zsonArray= LYJUtils.getData("https://harmony-1300376177.cos.ap-shanghai.myqcloud.com/europeancup.json"); Timer timer = new Timer(); timer.schedule( new TimerTask() { @Override public void run() { updateForms(formId); } }, 0, 5000); } //更新卡片 private void updateForms(long formId){ int max=this.zsonArray.size()-1,min=0; int ran2 = (int) (Math.random()*(max-min)+min); ZSONObject zsonObject=new ZSONObject(); zsonObject.put("imageUrl", ((ZSONObject) (zsonArray.get(ran2))).getString("img")); zsonObject.put("titleName", ((ZSONObject) (zsonArray.get(ran2))).getString("title")); FormBindingData bindingData=new FormBindingData(zsonObject); try { if(!updateForm(formId,bindingData)){ HiLog.error(TAG,"updateForm error"); } }catch (FormException e){ HiLog.error(TAG,"updateForm error"); } } @Override protected ProviderFormInfo onCreateForm(Intent intent) { HiLog.info(TAG, "onCreateForm"); long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID); String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY); int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2); HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName); FormControllerManager formControllerManager = FormControllerManager.getInstance(this); FormController formController = formControllerManager.getController(formId); formController = (formController == null) ? formControllerManager.createFormController(formId, formName, dimension) : formController; if (formController == null) { HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName); return null; } //启动定时任务 this.startTimer(formId); return formController.bindFormData(); } }
这里，我们通过定义定时器任务每5秒进行更新卡片，同时在onCreateForm()函数中，启动定时任务。至于卡片的数据，通过随机数自动获取。
权限设置
除此之外，我们还需要设置网络权限等基本的数据代码。
"module": { "reqPermissions": [ { "name": "ohos.permission.INTERNET" }, ], }
到这里，我们卡片的交互以及卡片的布局都已经设计完成，运行之后的效果也与首图一摸一样。
