任務(wù)3.1登錄頁(yè)面設(shè)計(jì)Java物聯(lián)網(wǎng)應(yīng)用程序開(kāi)發(fā)01020304任務(wù)描述任務(wù)分析任務(wù)實(shí)施任務(wù)小結(jié)任務(wù)描述任務(wù)描述任務(wù)描述登錄頁(yè)面是應(yīng)用程序中的一個(gè)重要部分,它為用戶(hù)提供了進(jìn)入應(yīng)用程序的入口。本任務(wù)要求完成智慧商場(chǎng)應(yīng)用的登錄頁(yè)面設(shè)計(jì)。頁(yè)面要求簡(jiǎn)單清晰、醒目的標(biāo)題和Logo頁(yè)面的設(shè)計(jì)使用JavaFX結(jié)合SenceBuilder完成。任務(wù)分析任務(wù)分析任務(wù)分析頁(yè)面分析：1、左上角有一個(gè)圖標(biāo)和文本；2、背景為一張圖片；3、中心區(qū)域?yàn)榈卿浿黧w，布局使用錨布局，可以使用SceneBuilder進(jìn)行拖拽設(shè)計(jì)，按照頁(yè)面的要求拖入對(duì)應(yīng)的控件，設(shè)計(jì)合理美觀(guān)即可；任務(wù)實(shí)施任務(wù)實(shí)施任務(wù)實(shí)施實(shí)施步驟：1、使用SceneBuilder設(shè)計(jì)頁(yè)面2、創(chuàng)建控制器并綁定頁(yè)面3、設(shè)置應(yīng)用程序顯示的默認(rèn)頁(yè)面和樣式4、運(yùn)行應(yīng)用程序任務(wù)實(shí)施實(shí)施步驟1、使用SceneBuilder設(shè)計(jì)頁(yè)面（1）創(chuàng)建頁(yè)面文件在智慧商超工程IntelligentSupermarket包目錄com.newland.supermarket.view下創(chuàng)建LoginView.fxml文件任務(wù)實(shí)施實(shí)施步驟1、使用SceneBuilder設(shè)計(jì)頁(yè)面（2）導(dǎo)入圖片資源將工程要用到的圖片，導(dǎo)入到images文件夾中。任務(wù)實(shí)施實(shí)施步驟1、使用SceneBuilder設(shè)計(jì)頁(yè)面（3）使用SceneBuilder打開(kāi)LoginView.fxml進(jìn)行頁(yè)面設(shè)計(jì)按照頁(yè)面的要求，在SceneBuilder左側(cè)選擇合適的布局和控件，通過(guò)拖拽進(jìn)行設(shè)計(jì)，并通過(guò)加載CSS樣式的方式設(shè)置頁(yè)面背景，頁(yè)面合理美觀(guān)即可。任務(wù)實(shí)施實(shí)施步驟2、創(chuàng)建控制器并綁定頁(yè)面（1）創(chuàng)建控制器在com.newland.supermarket.controller包下創(chuàng)建LoginController控制器，并在控制器中使用@FXML聲明控件和事件回調(diào)函數(shù)。任務(wù)實(shí)施實(shí)施步驟2、創(chuàng)建控制器并綁定頁(yè)面（2）將LoginController控制器與LoginView.fxml綁定在SceneBuilder左側(cè)的Document->Controller菜單下，將控制器的路徑名復(fù)制到輸入框內(nèi)，保存文件。任務(wù)實(shí)施實(shí)施步驟3、設(shè)置應(yīng)用程序顯示的默認(rèn)頁(yè)面和樣式打開(kāi)Main.java文件，修改應(yīng)用程序的默認(rèn)頁(yè)面和樣式。任務(wù)實(shí)施實(shí)施步驟4、運(yùn)行應(yīng)用程序在運(yùn)行應(yīng)用程序前，記得刷新工程內(nèi)容。運(yùn)行應(yīng)用程序，即可看到應(yīng)用程序顯示的默認(rèn)頁(yè)面為登錄頁(yè)面。任務(wù)小結(jié)任務(wù)小結(jié)任務(wù)小結(jié)設(shè)計(jì)一個(gè)登錄頁(yè)面是用戶(hù)體驗(yàn)設(shè)計(jì)中的一項(xiàng)重要任務(wù)，它需要考慮易用性、安全性和視覺(jué)吸引力。本次任務(wù)登錄頁(yè)面設(shè)計(jì)簡(jiǎn)潔，主要提供賬號(hào)、密碼輸入框，供