1、 面向多方式交互模型的DPL應(yīng)用什么是DPL？DPL能夠做什么？DPL是由什么組成的？有哪些特點(diǎn)呢？talk is cheap, show me the codes, 公開課上通過一些實(shí)際的例子展示了DPL的頁(yè)面構(gòu)建和如何實(shí)現(xiàn)頁(yè)面交互。什么是DPL呢？DPL全稱是Dueros Presentation Language即Dueros展現(xiàn)語言，是度秘面向開發(fā)者提供的一種可以自定義模版展現(xiàn)與交互方式的一種描述語言。它主要包括2個(gè)部分：組件和指令。那么，如何去理解DPL的組件和指令呢？可以類比HTML來理解DPL。在HTML中有DOM和事件監(jiān)聽的概念，那么，DPL中的組件就相當(dāng)于HTML中DOM，

2、DOM通過嵌套構(gòu)成HTML的視圖，DPL的組件也是通過互相嵌套構(gòu)成了DPL的視圖。同樣的，HTML中可以綁定事件監(jiān)聽，DPL中也是可以綁定事件監(jiān)聽的。在與后端服務(wù)交互時(shí)， HTML可以發(fā)送request請(qǐng)求， DPL發(fā)送的則是UserEvent事件。在沒有DPL之前，在DuerOS 有屏音箱上是如何展現(xiàn)技能的呢？一般使用模版來完成有屏展現(xiàn)，比如左側(cè)各種類型的BodyTemplate和ListTemplate等。在使用這些模版的過程中，會(huì)發(fā)現(xiàn)這些模版的布局相對(duì)固定，可以做調(diào)整的地方比較少，頁(yè)面的交互方式也相對(duì)較少。使用DPL開發(fā)就會(huì)靈活很多，用戶可以自定義頁(yè)面的樣式布局。交互上也可以通過Comm

3、and實(shí)現(xiàn)更加豐富的頁(yè)面交互效果。下面是一個(gè)圖文混排的樣例：這個(gè)屏幕是一個(gè)左文右圖的頁(yè)面，左邊有4段文本描述，右邊有一張圖，這些文本的樣式和整體布局都是自定義實(shí)現(xiàn)的。再看一個(gè)縱向列表的示例：這個(gè)列表樣式的頁(yè)面，列表項(xiàng)是由序號(hào)、圖片、文本組成的，呈現(xiàn)方式也是自定義的。同樣的，類似的橫向列表也是可以通過DPL實(shí)現(xiàn)。圖中的每一個(gè)列表項(xiàng)，都是上圖下文，圖片有圓角，左上有小圖標(biāo)，下面是文字。這些使用DPL的Container容器組件都實(shí)現(xiàn)起來比較容易。列表的嵌套也是如此上圖是一個(gè)嵌套列表的結(jié)構(gòu)，它可以上下滑動(dòng)，然后每個(gè)單個(gè)的橫向list 也是可以滑動(dòng)的。這是使用DPL的list 嵌套來實(shí)現(xiàn)的。其實(shí)，只要

4、熟練了DPL的組件和布局方法，就可以像HTML那樣來開發(fā)DPL的頁(yè)面。在公開課上，葉老師演示了一個(gè)復(fù)雜一點(diǎn)的完整示例，包含了頁(yè)面樣式布局和交互的實(shí)現(xiàn)。這個(gè)demo里面用到了Text、Image、Container、ScrollView、 Frame、 Video、Header 等組件， Text和Image比較容易理解，就是展示圖片和文本，然后Container是容器組件，可以嵌套其他組件，能夠控制展現(xiàn)方向，常用來布局。SrcollView是滑動(dòng)窗口組件，就是當(dāng)內(nèi)容的尺寸超出規(guī)定的寬高時(shí)，會(huì)產(chǎn)生滾動(dòng)條，滑動(dòng)可以看見隱藏的內(nèi)容。Frame可以理解成是一種可以設(shè)置邊線樣式的Container，就比

5、如說設(shè)置邊線寬度，顏色或者圓角這些。Video是視頻播放組件，Header是復(fù)合組件，是頁(yè)面的頭部。指令可以理解成端上的一些動(dòng)作邏輯，比如控制列表上下滑動(dòng)的Command，可以左右翻頁(yè)的Command，可以產(chǎn)生動(dòng)畫的Command，可以控制視頻播放暫停的Command等等。有的Command必須綁定在特定組件上才能執(zhí)行，比如ControlMedia必須作用在視頻或者音頻組件上。對(duì)視頻演示的簡(jiǎn)要說明如下：首先打開技能，進(jìn)入到首頁(yè)，首頁(yè)左邊是一個(gè)ScrollView，右邊是一個(gè)Pager嵌套Frame組件。然后通過視頻相冊(cè)的Query進(jìn)入到相冊(cè)頁(yè)面，相冊(cè)頁(yè)面使用pager實(shí)現(xiàn)，現(xiàn)在看到的是Page

6、r的第一頁(yè)。接著，通過Query向左翻頁(yè)進(jìn)入Pager的第二頁(yè)，這個(gè)翻頁(yè)是通過返回SetPage指令進(jìn)行控制的，然后這個(gè)是通過播放Query返回媒體指令，開始播放視頻。通過播放第幾個(gè)來切換視頻，這個(gè)是通過UpdateComponent指令實(shí)現(xiàn)。向上滑動(dòng)列表也是通過command 控制List組件的滑動(dòng)，然后回到列表頂部。點(diǎn)擊了第一個(gè)，切換視頻。通過query收藏視頻，也是通過Command實(shí)現(xiàn)。點(diǎn)擊了左下角的收藏圖片，顏色變成紅色，同時(shí)有動(dòng)畫效果。右下角這個(gè)白心變紅，是組件事件監(jiān)聽實(shí)現(xiàn)的。通過Query“播放第幾個(gè)”來切換視頻，它返回的也是Command。通過點(diǎn)擊切換視頻，與頁(yè)面組件的事件監(jiān)聽

7、實(shí)現(xiàn)類似。向上滑動(dòng)列表可以通過query操作List 滑動(dòng)，使用Scroll實(shí)現(xiàn)?；氐搅斜眄敳恳彩峭ㄟ^ScrollToIndex實(shí)現(xiàn)的。那么，DPL 有哪些特點(diǎn)呢？首先呢，DPL是使用JSON的格式來進(jìn)行編寫的，支持自定義布局的，可以將頁(yè)面中重復(fù)的組件進(jìn)行抽取，然后在需要的地方進(jìn)行引用，組件之間支持嵌套。同時(shí)，支持自定義樣式和常量，也是可以在組件和布局中進(jìn)行引用，這樣可以對(duì)樣式進(jìn)行集中管理。數(shù)據(jù)綁定的目的是拆分布局樣式和展示的數(shù)據(jù)，做到模版與數(shù)據(jù)分離，可以通過表達(dá)式在組件、布局以及樣式中進(jìn)行引用。 這就是DPL的6個(gè)特點(diǎn)。上代碼：示例代碼主要分為：resources，dataSource，st

8、yles）， layouts 和mainTemplate5個(gè)部分。其中mainTemplate是模版的解析入口，Resources和styles就是自定義的常量和樣式，然后這些常量和樣式會(huì)在mainTemplate中被引用，在dataSource綁定數(shù)據(jù)源，數(shù)據(jù)源在mainTemplate中使用$花括號(hào)形式的表達(dá)式來進(jìn)行引用，最后layouts是自定義的布局。只有mainTemplate是非空的，其他都可以為空，也就是可以把所有的內(nèi)容都直接寫在mainTemplate，不去拆分，但是從開發(fā)的角度還是建議合理的使用這些特性，不要都寫在mianTemplate中。以一個(gè)簡(jiǎn)單圖片展示為例上圖的布局比

9、較簡(jiǎn)單，首先有一個(gè)背景圖片，就是這個(gè)看著像地板的這個(gè)背景。然后有一個(gè)Header，主體的部分就是一張圖，下面來看下它的DPL代碼。從意圖處理的代碼看起， this.geDPLDirective()中引用的DPL描述文件。mainTemplate這個(gè)字段下的items， 第一個(gè)是Image組件，是一張絕對(duì)布局的背景圖。主體的部分是一個(gè)Container組件，Container是一個(gè)容器組件，容器組件是描述頁(yè)面布局結(jié)構(gòu)的重要組件，可以設(shè)置它的寬高、展現(xiàn)方向和背景顏色，描述展現(xiàn)方向的屬性為：flex-direction, 默認(rèn)是垂直方向展現(xiàn)-column，如果需要設(shè)置為水平展現(xiàn)-row，需要明確指定

10、flex-direction的屬性值為 row。在Container代碼的內(nèi)部，上面是一個(gè)Header復(fù)合組件，下面是一個(gè)Image組件，image組件設(shè)置了寬高，通過margin-left， margin-top使圖片呈現(xiàn)居中效果。當(dāng)然，實(shí)現(xiàn)居中效果還有其他的方式，比如通過設(shè)置它外層Container的內(nèi)邊距padding-left 和padding-top，也可以達(dá)到這樣的呈現(xiàn)效果，還可以使用絕對(duì)布局的方式去實(shí)現(xiàn)， 通過left top的屬性去實(shí)現(xiàn)。再看一下演示視頻中的DPL實(shí)現(xiàn)這個(gè)頁(yè)面的布局是上面有個(gè)Header，然后左邊是一個(gè)List列表，右邊是一個(gè)包含視頻組件的嵌套容器，在這個(gè)容器里

11、，上面是一個(gè)視頻組件，下面是視頻title 和收藏狀態(tài)的圖片。該頁(yè)面布局整體上是一個(gè)上下垂直的結(jié)構(gòu)，然后主體部分是一個(gè)水平橫向的結(jié)構(gòu)，然后左邊是list，右邊又是一個(gè)上下垂直的結(jié)構(gòu)，然后右下“葡萄酒”所在的布局它是一個(gè)水平橫向的結(jié)構(gòu)。通過這樣的層層嵌套就呈現(xiàn)了所展示的頁(yè)面布局。上代碼同樣從意圖處理部分開始，重點(diǎn)看mainTemplate部分，最上面是使用Image組件實(shí)現(xiàn)的背景圖，然后下面一個(gè)總體Container組件，寬高100%鋪滿全屏，沿垂直方向展現(xiàn)。它的里面是一個(gè)Header加上一個(gè) Container，這個(gè)子Container沿水平方向展現(xiàn)，然后左邊是一個(gè)List組件，右邊又是一個(gè)嵌

12、套的Container，右邊這個(gè)Containe沿垂直方向展現(xiàn)。上面是Video，下面又是一個(gè)包含左文右圖的Container，左文右圖呈現(xiàn)的是水平的結(jié)構(gòu)，然后它和上面這個(gè)video組成一個(gè)垂直的結(jié)構(gòu)。從代碼分析來看：通過設(shè)置Container的寬高和展現(xiàn)方向?qū)崿F(xiàn)了頁(yè)面的結(jié)構(gòu)布局，然后每個(gè)Container再填充TextImage 或者其他Container，呈現(xiàn)出最終效果。通過對(duì)這個(gè)DPL進(jìn)行改造，可以介紹一下自定義布局、自定義樣式以及數(shù)據(jù)綁定和語法表達(dá)式的使用。在這個(gè)DPL文檔中包含了 resources， dataSource， styles和layouts 的部分，resources就

13、是自定義的常量集合，這里定義了一個(gè)顏色的常量。Styles是用戶自定義的樣式集合， 樣式支持繼承, 這里面它是繼承一個(gè)baseStyle的樣式。layouts部分定義了2個(gè)layout，他們互相之間進(jìn)行了嵌套，并且通過params進(jìn)行參數(shù)傳遞。然后， dataSource就是引用的數(shù)據(jù)源，在mainTemplate中通過$花括號(hào)的表達(dá)式進(jìn)行了引用，表達(dá)式除了支持這種點(diǎn)值運(yùn)算還支持支持其他的運(yùn)算符語法。其實(shí)表達(dá)式的用法很靈活多樣，常見的操作符和運(yùn)算符:如算術(shù)運(yùn)算符、關(guān)系運(yùn)算符、邏輯運(yùn)算、位運(yùn)算符、點(diǎn)值/條件運(yùn)算符等。為什么要使用這些高級(jí)的特性呢？如果一個(gè)文檔直接平鋪的寫下來，屬性樣式數(shù)據(jù)都直接寫

14、在組件上，會(huì)導(dǎo)致無法重用代碼，結(jié)構(gòu)混亂臃腫，而且不利于后期維護(hù)。DPL目前支持的所有的組件，包括9種基礎(chǔ)組件和2種復(fù)合組件，還在更新中。DPB平臺(tái)有專門的DPL調(diào)試模擬器，可以輔助開發(fā)者診斷頁(yè)面視圖，使用模擬器來進(jìn)行調(diào)試，修改組件樣式以后可以立馬看到展現(xiàn)的效果，比使用真機(jī)調(diào)試要快很多。回歸主題，交互是DPL的另一個(gè)核心。DPL的交互分為2種：一種是本地交互，通過給組件預(yù)先綁定事件監(jiān)聽屬性，然后通過點(diǎn)擊等事件來觸發(fā)對(duì)應(yīng)的Command動(dòng)作。另一種是云端交互，可以通過Query返回包含ExecuteCommands指令的意圖來觸發(fā)端上的Command動(dòng)作，還有一類是通過監(jiān)聽UserEvent事件以

15、后返回包含ExecuteCommands指令的意圖,這個(gè)UserEvent是SendEvent類型的Command在被點(diǎn)擊的時(shí)候下發(fā)的事件，返回的結(jié)果都是相同的?；貧w視頻中展示的例子，先介紹端上的本地交互。在DPL文檔中，綁定的事件監(jiān)聽屬性是自定義布局listItemLayout中的onClick屬性。onClick這個(gè)事件屬性綁定了一系列的Command，這里綁定了6個(gè)Command，第一個(gè)SetState指定了需要作用的ComponnetId，然后替換了它的src的值，這個(gè)就是更換播放url的動(dòng)作。需要特別強(qiáng)調(diào)的一點(diǎn)是：Comamnd的使用需要和ComponnetId一一對(duì)應(yīng)，這樣Comm

16、and才能找到目標(biāo)作用的組件，另外，在事件屬性中如果不指定ComponentId的值，默認(rèn)為當(dāng)前組件, 如果是意圖返回，就必須指定ComponentId，否則找不到組件就不會(huì)執(zhí)行Command動(dòng)作。接下來，第二個(gè)Command還是SetState，它把視頻組件的autoplay這個(gè)屬性設(shè)置為true。然后是一個(gè)動(dòng)畫Animation的command，它指定的動(dòng)畫效果是把height屬性從90dp放大到120dp，repeatCount=1指定了動(dòng)畫只執(zhí)行一次，這樣的效果就是類似一個(gè)圖片被放大后又恢復(fù)原樣。剩下的2個(gè)SetState的作用是替換視頻下方的title和收藏狀態(tài)圖標(biāo)。最后是一個(gè)媒體指

17、令，動(dòng)作是讓視頻開始播放。這一系列的動(dòng)作綜合下來，效果是一個(gè)圖片放大，視頻切換，同時(shí)視頻title以及收藏圖片的顏色發(fā)生了變化。本地交互是在組件上直接綁定事件監(jiān)聽來實(shí)現(xiàn)的，整個(gè)過程都是在當(dāng)前的頁(yè)面上完成的，沒有與后端產(chǎn)生數(shù)據(jù)的交互。而云端交互是通過意圖返回ExecuteCommands來實(shí)現(xiàn)的意圖的實(shí)現(xiàn)代碼對(duì)應(yīng)的Query是：“播放第幾個(gè)？”。返回的結(jié)果是ExecuteCommands指令，ExecuteCommands同樣包含了6個(gè)Command，它返回的Command和前面所說的本地交互所綁定的Command是一樣的。所不同的是云端交互的Command是包含在指令當(dāng)中的，并且是通過Quer

18、y召回，最終返回到端上產(chǎn)生效果?；仡櫼幌略谠贫私换ブ校ㄟ^監(jiān)聽上報(bào)的UserEvent事件，返回ExecuteCommands的情況。有一種類型的Command叫SendEvent，UserEvent這個(gè)事件就是和SendEvent對(duì)應(yīng)的，如果組件綁定了SendEvent類型的Command，當(dāng)組件有事件被觸發(fā)的時(shí)候，就會(huì)上報(bào)UserEvent事件到云端，如果組件不綁定SendEvent就不會(huì)上報(bào)UserEvent。在開發(fā)中，綁定SendEvent的組件一般都要指定當(dāng)前組件的ComponnetId，并且保證它在當(dāng)前DPL文檔中的唯一性，這樣UserEvent組件在下發(fā)的時(shí)候同樣會(huì)帶上這個(gè)Com

19、ponentId，那么云端就可以依據(jù)上報(bào)的ComponnetId做邏輯判斷。通過監(jiān)聽返回的UserEvent事件與Query的返回UserEvent事件對(duì)比，唯一不同的地方是，云端監(jiān)聽到這個(gè)UserEvent事件以后返回了ExecuteCommands，返回的數(shù)據(jù)格式都是一致的，最終產(chǎn)生的動(dòng)作效果也是一樣的。通過DPL的交互實(shí)現(xiàn)方式，可以頁(yè)面的異步更新。在本地交互和云端交互中，用到了3種Command，分別是SetState，Animation，ControlMedia。為了實(shí)現(xiàn)切換視頻的功能，多次使用了SetState這個(gè)Command。實(shí)際上，有更加合適的Command可以實(shí)現(xiàn)這個(gè)功能，那就是異步更新指令-UpdateComponent，它的作用是使用指定的DPL文件來替換目標(biāo)組件的的內(nèi)容，在上面的代碼中，就使用了update.json中的布局樣式替換了指定組件的樣式，在這里，它返回了一個(gè)布局樣式相同，但是播放地址不一樣，視頻title也不一樣的DPL文檔，這一新的DPL文檔替換了原有的組件也實(shí)現(xiàn)了切換視頻的目的。異步更新指令是常用指令，在異步刷新一些布局復(fù)雜的樣式時(shí)經(jīng)常用到。它對(duì)應(yīng)的語法格式和DPL是一樣的，具有很強(qiáng)的靈活性。那么，DPL 有多少種指