面向多方式交互模型的DPL應(yīng)用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18、y召回，最終返回到端上產(chǎn)生效果。回顧一下在云端交互中，通過監(jiān)聽上報的UserEvent事件，返回ExecuteCommands的情況。有一種類型的Command叫SendEvent，UserEvent這個事件就是和SendEvent對應(yīng)的，如果組件綁定了SendEvent類型的Command，當組件有事件被觸發(fā)的時候，就會上報UserEvent事件到云端，如果組件不綁定SendEvent就不會上報UserEvent。在開發(fā)中，綁定SendEvent的組件一般都要指定當前組件的ComponnetId，并且保證它在當前DPL文檔中的唯一性，這樣UserEvent組件在下發(fā)的時候同樣會帶上這個Com

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