本次教程學(xué)習(xí)制作時(shí)間控件選擇，根據(jù)選擇的日期，在輸入框中顯示所選擇的日期。制作內(nèi)容包括攜程網(wǎng)的酒店“入住日期”時(shí)間控件與“退房日期”時(shí)間控件。

?

部件使用：動(dòng)態(tài)面板、圖片、矩形、文本框（單行）、單行文本、垂直線；

交互事件：鼠標(biāo)點(diǎn)擊時(shí)、獲得焦點(diǎn)時(shí)；

動(dòng)作：設(shè)置面板狀態(tài)為指定狀態(tài)、設(shè)置部件顯示/隱藏、設(shè)置文本；

時(shí)間控件交互描述：常用于選擇日期。如酒店入住與退房日期選擇，旅游出發(fā)日期，日程安排等場景。

?

步驟1：新建文檔

新建文檔，并點(diǎn)擊“文件>保存”，保存為“時(shí)間控件”（文件名自定義），如圖1

? ? ? ? ? ? ? ? ? ? ? ? ??

圖1

?

第一部分：

制作“入住日期”時(shí)間控件?

在制作之前，先了解一下“入住時(shí)間”這個(gè)時(shí)間控件是由以下部分構(gòu)成的：單行文本框、日歷，點(diǎn)擊單行文本框彈出的日歷面板有2個(gè)月的日歷，可以點(diǎn)擊左上角的切換按鈕向左切換，點(diǎn)擊右上角的向右切換按鈕向右切換。這次制作的時(shí)間控件的日歷會(huì)包括1月與2月，3月與4月，5月與6月。

步驟2：添加標(biāo)題“入住日期”事件

在部件庫找到“線框圖>公共”選擇“單行文本”，然后拖曳到線框圖中，雙擊“單行文本”修改為“入住日期”；如圖2、圖3：

圖2

圖3

步驟3：添加文本框（單行）事件

在部件庫中找到“線框圖>窗體”選擇“文本框（單行）”拖曳到線框圖中“入住時(shí)間”的右邊（如圖3）；選中該文本框，在文本框中輸入當(dāng)前日期：2014-03-29，并在“部件交互和注釋”中把該文本框（單行）命名為“入住時(shí)間”，如圖4、圖5：

圖4

圖5

步驟4：添加表格事件

在部件庫>線框圖>菜單和表格中選擇“表格”拖曳到線框圖中“入住日期”文本框的下方。如圖6：

圖6

步驟5：日歷制作

每周7天，故在3列的原基礎(chǔ)上添加4列：選中任意一個(gè)表格右擊拉出右擊菜單，選擇“在右側(cè)插入列（R）”，重復(fù)3次；如圖7：

圖7

?

2014年3月份有5周，并有一行用來顯示星期，故在原3行的基礎(chǔ)上添加3行：選中任意表格，右擊拉出右擊菜單選擇“在下方插入行（B）”，添加3次，如圖8：

圖8

步驟6：調(diào)節(jié)表格樣式

調(diào)節(jié)表格大小，選中表格，在工具欄中調(diào)節(jié)其大小為寬(W)：25px；高（h）：25px;把每一行表格、每一列的表格都調(diào)節(jié)成這樣的尺寸，如圖9：

圖9

?

在表格中第一行輸入星期名稱，第一個(gè)為“日”，依次是“一”、“二”、“三”、“四”、“五”、“六”，其中“日”和“六”用不同顏色區(qū)分，這里用的顏色是：#FF9900；然后把3月份的日歷填好；如圖10：

圖10

?

步驟7：調(diào)節(jié)表格樣式

為了區(qū)分當(dāng)前日期與已過去日期等需要調(diào)節(jié)日歷表格的樣式，顏色可以自定義。這里第一行的星期名稱填充顏色：#ECECEC，邊框顏色：#ECECEC；日歷表格邊框顏色：#ffffff；已過去的日期字體顏色為：#DFDBDB；當(dāng)前日期及以后的日期字體顏色為：#005EAD；當(dāng)天日期表格填充顏色：#FFF5D1；邊框顏色：#FFE4A9。如圖11

圖11

步驟8：添加日歷表格交互樣式事件

已過去的日期是不能選擇的，所以只需要給當(dāng)前日期和未來日期添加交互樣式即可。選中需要添加樣式的表格，右擊打開右擊菜單，選擇“交互樣式”，打開交互樣式窗口。如圖12

圖12

在交互樣式對話窗口中，選擇鼠標(biāo)懸停時(shí)線框顏色：#71B0E6；填充顏色：#E6F4FF；選擇鼠標(biāo)按鍵按下時(shí)也為線框顏色：#71B0E6；填充顏色：#E6F4FF；全部設(shè)置好了之后，點(diǎn)擊“確定”，關(guān)閉對話窗。如圖13：

圖13

步驟9：添加4月份日歷

可以從部件庫中拖曳一個(gè)表格到線框圖中，然后分別增加行與列，制作成一個(gè)6行7列的表格。也可以復(fù)制一個(gè)3月份的表格來得到一個(gè)表格。制作表格完成后，把4月份的日期輸入到表格里，記得給字體添加顏色以做區(qū)分哦。如圖14

圖14

?

步驟10：添加4月份日歷交互樣式事件

可以選中整個(gè)4月份日期，右擊打開右擊菜單，選擇“交互樣式”，在打開的交互樣式對話窗口中，選擇鼠標(biāo)懸停時(shí)線框顏色：#71B0E6；填充顏色：#E6F4FF；選擇鼠標(biāo)按鍵按下時(shí)也為線框顏色：#71B0E6；填充顏色：#E6F4FF；全部設(shè)置好了之后，點(diǎn)擊“確定”，添加交互樣式完成。

?

步驟11：添加日歷月份事件

制作完成3月份與4月份的日歷后，還需要把對應(yīng)的月份進(jìn)行說明。

在部件庫中，選擇“線框圖>公共>矩形”，把矩形拖曳到3、4月份日歷的上面，設(shè)置矩形長度與兩個(gè)月的日歷等寬，即寬（w）=350px，高（h）=25px;如圖15；

圖15

給矩形添加顏色，此處填充顏色：#004FB8，線框顏色：#004FB8。從部件庫中“線框圖>公共>單行文本”拖曳到矩形上面，并對應(yīng)著3月份的日歷，修改文字為“2014年3月”，同樣從部件庫中拖曳一個(gè)單行文本到4月份的日歷上方，修改文字為“2014年4月份”。如圖16

圖16

?

步驟12：添加月份切換按鈕事件

接著，在矩形左右兩端分別添加一個(gè)向左、向右切換的按鈕，按鈕可以用圖片。此處圖片來源是攜程網(wǎng)上的截圖。

在選擇部件庫>公共>圖片，拖曳到2014年3月份的左邊，雙擊圖片部件，打開目標(biāo)文件夾，選擇目標(biāo)圖片文件，將可將圖片導(dǎo)入。如圖17：

圖17

使用同樣方法，導(dǎo)入一個(gè)向右切換的圖片，最后完成如圖18：

圖18

為了給3月份與4月份做區(qū)分，從部件庫>線框圖>垂直線，拖曳一條垂直線放在3月份與4月份的日歷中間。最后可以在部件庫>線框圖>矩形中，拖曳一個(gè)矩形到兩個(gè)日歷的下面，寬和高的參數(shù)可以分別比兩個(gè)月的日歷略大。如圖19：

圖19

步驟13：創(chuàng)建日歷動(dòng)態(tài)面板事件

選中前面創(chuàng)建的兩個(gè)月份的日歷，右擊>轉(zhuǎn)化為動(dòng)態(tài)面板，如圖20：

圖20

?

雙擊剛剛轉(zhuǎn)換得來的動(dòng)態(tài)面板，打開動(dòng)態(tài)面板狀態(tài)管理對話框，給動(dòng)態(tài)面板命名為“月份”，選中“狀態(tài)1”，右擊使得狀態(tài)1處于可編輯狀態(tài)，修改為“3月與4月”，并分別點(diǎn)擊“+”按鈕2次，添加兩個(gè)面板狀態(tài)，分別修改面板名稱為“1月與2月”和“5月與6月”，點(diǎn)擊“確定”完成設(shè)置。如圖21

圖21

?

步驟14:添加1月與2月、5月與6月日歷事件

雙擊動(dòng)態(tài)面板“月份”，打開動(dòng)態(tài)面板狀態(tài)管理對話窗，雙擊面板狀態(tài)“1月與2月”，打開該動(dòng)態(tài)面板，在該動(dòng)態(tài)面板里創(chuàng)建1月與2月的日歷，方法參考步驟4至步驟21。需要注意的1月與2月的日歷中，只需要?jiǎng)?chuàng)建日歷日期即可，不用給日歷日期添加交互樣式。完成如圖22：

圖22

利用同樣的方法創(chuàng)建5月與6月的日歷，需要注意的是，在5月與6月的日歷中需要像3月與4月的日歷一樣添加日歷日期交互樣式。完成如圖23：

圖23

步驟15：添加鼠標(biāo)點(diǎn)擊事件

在面板狀態(tài)“3月與4月”中，由于3月29日之前的日期都是已經(jīng)過去的日期，故不用添加交互事件，只需要給3月29日——31日的日期添加交互事件即可。選中一個(gè)日期，如“30日”，雙擊部件交互和注釋下的“鼠標(biāo)單擊時(shí)”，打開用例編輯器，如圖24：

圖24

在用例編輯器中，點(diǎn)擊“設(shè)置文本”,選中“入住時(shí)間（文本框（單行））”，將文本設(shè)置為“2014-03-30”，如圖25：

圖25

編輯完上一步后，繼續(xù)選擇：部件>顯示/隱藏，選中“月份”面板，點(diǎn)擊“確定”關(guān)閉完成設(shè)置，如圖26：

圖26

按照同樣的步驟給日期“31”添加同樣的鼠標(biāo)點(diǎn)擊交互事件，但是要注意在即在用例編輯器對話窗口里，第三步時(shí)將文本設(shè)置為“2014-03-31”。

?

步驟16：添加其他月份日歷交互事件

此步參考步驟17，方法相同，需要注意的兩點(diǎn)：第一，1月與2月由于不可選擇，故不需要添加鼠標(biāo)點(diǎn)擊事件；第二，4月、5月、6月的日歷，在用例編輯器在第三步時(shí)將文本設(shè)置為對應(yīng)的日期即可。完成如圖27、圖28：

圖27

圖28

?

步驟17：創(chuàng)建月份向左切換事件

雙擊打開動(dòng)態(tài)面板“月份”管理窗口，雙擊面板“3月與4月”，打開該面板，選中左上角的向左切換按鈕，部件屬性窗口交互標(biāo)簽下，雙擊鼠標(biāo)點(diǎn)擊時(shí)事件，打開用例編輯器，如圖29：

圖29

在打開的用例編輯器，添加鼠標(biāo)單擊時(shí)（OnClick）事件動(dòng)作：選擇“設(shè)置面板狀態(tài)”，選中“月份”面板，選擇狀態(tài)“1月與2月”，點(diǎn)擊“確定”，完成事件，如圖30

圖30

步驟18：創(chuàng)建月份向右切換事件

在打開的 “3月與4月” 面板中，選中右上角的向右切換按鈕，在部件屬性窗口交互標(biāo)簽下，雙擊OnClick（點(diǎn)擊時(shí)）事件，打開用例編輯器，如圖31:

圖31

在打開的用例編輯器，添加鼠標(biāo)單擊時(shí)（OnClick）事件動(dòng)作：選擇“設(shè)置面板狀態(tài)”，選中“月份”面板，選擇狀態(tài)“5月與6月”，點(diǎn)擊“確定”，完成事件，如圖32

圖32

步驟19：創(chuàng)建月份向左、右切換事件

參考步驟17給面板狀態(tài)“5月與6月”添加向左切換事件，并切換到 “3月與4月”狀態(tài)；如圖33

圖33

參考步驟18給面板狀態(tài)“1月與2月”添加向右切換事件，并切換到“3月與4月”狀態(tài)，如圖34

圖34

步驟20：添加動(dòng)態(tài)面板“月份”隱藏事件

選中動(dòng)態(tài)面板“月份”，右擊打開右擊菜單，選擇“設(shè)為隱藏”，如圖35

圖35

步驟21：添加文本框（單行）獲取焦點(diǎn)時(shí)事件

選中文本框（單行）部件，在部件屬性窗口交互標(biāo)簽下獲取焦點(diǎn)時(shí)事件，打開用例編輯器，如圖36：

圖36

在打開的用例編輯器里，選擇部件>顯示/隱藏，在“配置動(dòng)作”選中“月份”動(dòng)態(tài)面板；如圖37：

圖37

選擇部件>至于頂層/底層，在“配置動(dòng)作”選中“月份”動(dòng)態(tài)面板，點(diǎn)擊“確定”，完成事件添加。如圖38：

圖38

至此已完成了入住日期的時(shí)間控件制作，接下來是要開始制作“退房日期”時(shí)間控件了。

?

第二部分

?制作“退房日期”時(shí)間控件元宵?

在制作之前，先了解一下“退房日期”這個(gè)時(shí)間控件是由以下部分構(gòu)成的：單行文本框、日歷，點(diǎn)擊單行文本框彈出的日歷面板有2個(gè)月的日歷，可以點(diǎn)擊左上角的切換按鈕向左切換，點(diǎn)擊右上角的向右切換按鈕向右切換。這次制作的時(shí)間控件的日歷會(huì)包括1月與2月，3月與4月，5月與6月。

步驟23：制作“退房日期”時(shí)間控件

“退房日期”時(shí)間控件請參考步驟2至步驟22，方法一樣，也可以制作進(jìn)行復(fù)制，將“入住”修改為“退房”即可。

第三部分

?交互測試?

步驟24：生成原型

生成原型，測試交互效果。當(dāng)首頁載入時(shí)，點(diǎn)擊“入住日期”右邊的單行文本框，彈出日歷面板，點(diǎn)擊向左或向右切換按鈕，切換月份，選擇日期，日歷面板隱藏，單行文本框顯示所選擇的日期。點(diǎn)擊“退房日期”右邊的單行文本框，彈出日歷面板，點(diǎn)擊向左或向右切換按鈕，切換月份，選擇日期，日歷面板隱藏，單行文本框顯示所選擇的日期。

- End -

標(biāo)簽：