本篇體驗做一個登錄界面的原型。
登錄頁
首先在Page Style里為頁面設置背景色。
如果想在頁面中加圖片，就把Image部件拖入頁面，並設置x和y軸。雙擊頁面中的Image部件可以導入圖片。在Image部件對應的Widget Properties and Style面板中還提供了裁剪功能，裁剪完雙擊可保存圖片。還提供了切割圖片的功能。圖片部件的Preserve Corners屬性用來縮小圖片尺寸的時候保持一定的清晰度。
把一個Rectangle部件拖動到頁面中，通過工具欄中的Line Color修改邊框的顏色。
界面上的文字用Label部件。通過工具欄中的Text Color設置文字顏色。
把Text Field拖動到界面中作為文本框，調整部件的寬度、高度以及位置，並可以修改文本框內字體高度。
按住ctrl鍵拖動部件可以復制某個部件。
拖動Checkbox部件到頁面。
現在要做一個登錄按鈕，因為Html Button這個按鈕是改變不了樣式的，所以拖動一個Round Rectangle部件，調整其大小，雙擊輸入文字，調整文字大小，改變文字顏色，設置Rectangle部件的背景色，設置邊框顏色。
現在希望把鼠標懸停在按鈕上，按鈕顏色加深，該怎么做呢？
在Rectangle部件對應的Widget Properties and Style面板下的Interation Styles中有一個MouseOver項，點擊MouseOver，在彈出的Set Interation Style窗口中，勾選Fill Color，設置鼠標懸停時的背景色。
如果想對多個部件設置懸停效果，就需要同時選中多個部件，一起設置懸停效果。
如果想給某個部件添加Tooltip，即移動上去會出現文字提示。就在該部件對應的Widget Properties and Style面板下的Tooltip中設置。
效果如下。
在Rectangle部件下添加一些文字，使用Label部件。
給這些Label部件添加懸停效果。同時選中需要添加效果的部件，點擊Widget Properties and Style面板中Interation Styles下的MouseOver，在彈出的Set Interaction Styles窗口中勾選Font Color，並選擇鼠標懸停時的字體顏色。
在Sitemap面板中，把剛才制作的登錄頁名稱修改為登錄。
注冊頁面
注冊頁有很多和登錄頁相似的地方，所以可以從登錄頁復制一個頁面。右鍵Sitemap面板中的登錄頁，點擊Duplicate下的Page，然后給新創建的頁面命名為注冊頁。
拖動一個Rectangle到頁面，放置於現有Rectangle正上方，設置Line Color。再復制一個Rectangle,調整到與源Rectangle重合，設置該復制Rectangle的寬度為6，並填充顏色。
注冊頁預覽效果如下：
找回密碼頁
通過復制的方式，從注冊頁復制出一個頁面，重命名為"找回密碼"。
找回密碼頁預覽效果如下：
觸發事件
點擊登錄頁的"注冊"跳轉到注冊頁。
選中登錄頁的注冊鏈接文字，雙擊Widget Interations and Notes面板中OnClick，彈出Case Editor窗口，配置如下：
這里可以體會到事件、用例、動作之間的關系：事件是整個過程的起因，是通過事件觸發整個過程的。用例是我要做的事情名稱，相當於if…else if語句，一個事件下可以有多個用例。動作是在執行某個用例時的具體實施，一個用例可以有多個動作，按照從上到下的順序依次執行。
其它同理。
登錄頁光標自動到文本框
比如說，點擊用戶名，讓光標到用戶名文本框中去，頁面打開時讓用戶名文本框獲得焦點。
在Widget Interations and Notes面板下的Text Field Name中為文本框設置名稱。
選中用戶名，編輯OnClick事件。
雙擊Page Interactions下的OnPageLoad事件進行設置，讓頁面打開時用戶名文本框獲得焦點。
密碼文本框輸入時打上黑點
在密碼文本框對應的Widget Properties and Style的Type屬性中設置為Password。Type屬性中還有其它屬性項：
● Number，在文本框中會顯示帶調整數字的上下箭頭
● Search,當文本框輸入搜索內容，右側會出現一個叉號
● File,點擊可以打開文件對話框
● Date,點擊文本框彈出一個萬年歷
● Month,精准到月份
● Time, 精准到秒
按登錄按鈕設置條件
需要實現的效果是：點擊登錄時，只要用戶名或密碼文本框中有一個是空的就報錯，2個都為空更需要報錯。
拖入一個Label，自定義名稱為"msg"。
當用戶名和密碼都為空時讓焦點在用戶名框中，設置OnClick事件的用例。
當用戶名為空，需要做3件事情：出現錯誤提示，焦點放到用戶名框上，清空密碼框。
為登錄按鈕的OnClick事件增加一個用例。
當密碼為空，需要做2件事情：出現錯誤提示，焦點放到密碼框上。
為登錄按鈕的OnClick事件再增加一個用例。
如果以上條件都滿足，就提示登錄驗證。
為登錄按鈕的OnClick事件再增加一個用例。
使用動態面板
什么是動態面板？能夠實現動態效果的多空間(不同狀態State)部件容器。動態面板在頁面中雖然看不見，但它是存在的，會占據空間。當需要對很多部件采取相同的動作時，可以考慮把部件放入動態面板。
雙擊Dynamic Panel能看到不同的狀態，點擊狀態能進入到某個狀態。可以在每個狀態中添加不同的部件和內容。
在Widget Manager面板中可以看到某個Dynamic Panel的所有狀態。
當需要對很多部件采取相同的動作時，可以考慮把部件放入動態面板。比如，需要隱藏多個部件，那就把這些部件放到動態面板中，然后讓動態面板隱藏。但這里需要注意一個問題：如果有事件中引用了這些部件，一旦把這些部件放到一個Dynamic Panel中去了之后，事件語句就會找不到這些部件。解決這個問題的方法是：選中這些部件，右鍵，點擊Convert to Dynamic Panel，把這些部件統一放入動態面板中而不影響實現的事件代碼。
既然把錯誤顯示的信息放到了動態面板中了，那登錄按鈕的事件代碼要修改下，在設置錯誤信息后，要讓動態面板顯示(可以先設置為隱藏)。比如在用戶名為空的情況下，修改登錄按鈕的用例如下：
其它類同。如果願意的話，還可以Show動作上加動畫效果。
另外，在登錄按鈕的用例1中，在設置完焦點后還要隱藏動態面板，所以應該還要加一個隱藏動作。
另外，右鍵動態面板還有一個Fit to Content的功能，能讓里面的內容自適應動態面板的大小。
現在還想實現這樣的一個效果：當用戶名或密碼為空的時候，讓登陸界面所在的矩形區域左右抖動一下，該如何做呢？
先選中矩形區域，轉換成動態面板，並給它取名。
找到用戶名為空的那個用例，編輯如下：
預覽會有抖動效果。