# 行事曆關卡流程 ## 第一關-初始頁面 ### 關卡1-1 * #### 建立頁面 (主頁) (1)建立物件 PageFragment > 元件說明:這個頁面物件的用途是提供初始頁面元件放的空間! * #### 關卡說明 在這個關卡,我們要做的事就是建立一個==PageFragment物件==! 這個概念就像是,當我們要畫畫時,需要一個畫布來放我們所畫的東西,而PageFragment物件就是我們的畫布。 所以建立APP的第一個步驟,就是建立PageFragment物件,這樣才可以繼續加入我們需要的功能物件。 ## 第二關-初始頁面的文字框與按鈕 ### 關卡2-1 * #### 建立年份文字框 (主頁) (1)建立物件 TextField (年份) >元件說明:這個物件的用途是讓使用者可以編輯(輸入)年份 * #### 關卡說明 接下來我們要在跳出的視窗中新增==TextField物件==,讓我們可以更改要看到哪一年的日曆。 這個物件是一個元件類別,概念就像是一張小卡,我們會在小卡上面寫上一些文字;而我們會在文字輸入框(TextField)中輸入文字,就像寫字一樣。 這裡的TextField要讓使用者可以輸入他想檢視的年份,我們就會把初始頁面上的日曆更新為使用者輸入那個年份的日曆。 ### 關卡2-2 * #### 建立月份按鈕 (主頁) (1)建立物件 Button (2)建立Button點擊事件:建立並開啟月份選單 >元件說明:這個按鈕的用途就是讓使用者開啟選單選擇當前月份 * #### 關卡說明 再來我們需要建立一個按鈕來打開月份選單。這個按鈕就是我們要建立的==Button物件==。 我們會給每個Button物件該執行的任務,當我們按下按鈕,這個按鈕就會執行任務! 這個Button物件的任務就是讓使用者可以選擇要看哪一個月的日曆! ## 第三關-初始頁面的日曆 ### 關卡3-1 * #### 建立星期表頭 (主頁) (1)建立物件 Label (一) (1)建立物件 Label (二) (1)建立物件 Label (三) (1)建立物件 Label (四) (1)建立物件 Label (五) (1)建立物件 Label (六) (1)建立物件 Label (日) >元件說明:這七個物件是要做為日期按鈕的表頭,區分該列按鈕為星期幾 * #### 關卡說明 接下來我們要在畫面中加入七個標籤,來區分使用者下一關要建立的日期按鈕分別是星期幾。 就像商品的標籤,會告訴大家這個商品的用途是什麼。而在這裡,Label物件就是用來告訴大家,哪一列按鈕是星期幾! ### 關卡3-2 * #### 建立日曆按鈕 (主頁) (1)取得當前月份日曆 (2)依據日曆上的日期建立物件 Button (3)建立Button點擊事件:建立並開啟物件 Popup (行程列表Popup頁面) >元件說明:這些按鈕各自代表一天,透過點擊按鈕來檢視那一天行程 * #### 關卡說明 再來我們需要將日曆上的日期製作成按鈕來開啟當天的行程列表。這些按鈕就是我們要建立的Button物件。 我們會給每個Button物件該執行的任務,當我們按下按鈕,這個按鈕就會執行任務! 這個Button物件的任務是,讓使用者開啟那一天的事件列表!只要點下這個按鈕,就會跳出視窗讓我們可以看到那天有哪些行程。 ## 第四關-行程列表頁面彈跳視窗 ### 關卡4-1 * #### 建立彈出視窗 (行程列表頁面) (1)建立物件 Popup >元件說明:這個物件的用途是放置編輯頁面會用到的元件 * #### 關卡說明 ==Popup物件==的概念跟前面建立的PageFragment物件很像,只是這個物件要出現的方式,是透過別的元件的呼叫。在這裡就是透過點選關卡3-2所製作的日曆按鈕,來打開這個Popup物件。 ### 關卡4-2 * #### 設定標題 (行程列表頁面) (1)將Popup物件中內建的title參數設置為: XXXX年XX月XX日(依點擊日期而異) > 元件說明:這個物件的用途是設定頁面的標題! * #### 關卡說明 在跳出的==Popup物件==中,有一個屬性是"title", 屬性的概念就像是,一個機器會由很多零件組成,而這些零件就是機器的屬性。 所以這關我們要做的事情就是設定彈跳視窗的標題,讓使用的人知道他現在正在看哪一天的行程列表! ### 關卡4-3 * #### 建立滾動式列表-1 (行程列表頁面) (1)建立ScrollView物件 > 元件說明:這個物件的用途是讓記事列表可以滾動! * #### 關卡說明 行事曆需要有一個放行程列表的地方,當我們有很多事件的時候,就需要用滾動的顯示方式來秀出列表。這個滾動式列表就像大樓的電梯一樣,可以利用上下移動來找到要的列表! 所以這關我們要建立一個==ScrollView物件==來放置列表,讓行程列表可以上下滾動! ### 關卡4-4 * #### 建立滾動式列表-2 (行程列表頁面) (1)建立List物件 (2)點擊List物件的行為:建立Popup物件並開啟(編輯事件視窗) > 元件說明:這個物件的用途是列出存在的記事本! * #### 關卡說明 上個關卡我們建立了讓滾動式列表滾動的ScrollView物件,這個關卡我們要接著建立列表本身,也就是==List物件==!這個物件就像是書櫃一樣存放著所有行程列表中的資訊。 當我們點擊行程列表之後,就會建立彈跳視窗,讓我們編輯行程的內容。 ## 第五關-行程列表頁面上的按鈕 ### 關卡5-1 * #### 建立新增按鈕 (1)建立物件 Button (2)建立Button點擊事件:建立Popup物件並開啟(新增行程視窗) >元件說明:這個按鈕的用途就是讓使用者新增行程 * #### 關卡說明 再來我們需要建立一個按鈕來新增行程。這個按鈕就是我們要建立的Button物件。 我們會給每個Button物件該執行的任務,當我們按下按鈕,這個按鈕就會執行任務! 這個Button物件的任務是,讓使用者可以新增行程!只要點下這個按鈕,就會跳出視窗讓我們可以輸入事件內容來新增一個行程。 ### 關卡5-2 * #### 新增返回按鈕 (1)建立物件 Button (2)建立Button點擊事件:關閉物件 Popup (行程列表Popup頁面) >元件說明:這個按鈕的用途就是讓使用者可以回到初始頁面(結束檢視行程) * #### 關卡說明 這關我們要建立一個==Button物件==,來讓我們可以返回前一頁。 這個Button物件的任務是,讓使用者可以關閉行程列表的視窗,回到初始頁面! ## 第六關-新增行程頁面彈跳視窗與文字框 ### 關卡6-1 * #### 建立彈出視窗 (1)建立物件 Popup (新增行程頁面) >元件說明:這個物件的用途是放置編輯頁面會用到的元件 * #### 關卡說明 ==Popup物件==的概念跟前面建立的PageFragment物件很像,只是這個物件要出現的方式,是透過別的元件的呼叫。在這裡就是透過點選關卡5-1所製作的新增按鈕,來打開這個Popup物件。 ### 關卡6-2 * #### 設定標題 (新增行程頁面) (1)將Popup物件中內建的title參數設置為: 新增行程 > 元件說明:這個物件的用途是設定頁面的標題! * #### 關卡說明 在跳出的==Popup物件==中,有一個屬性是"title", 屬性的概念就像是,一個機器會由很多零件組成,而這些零件就是機器的屬性。 所以這關我們要做的事情就是設定彈跳視窗的標題,讓使用的人知道他現在正在新增一個新的行程! ### 關卡6-3 * #### 建立兩個文字框 (新增行程頁面) (1)建立物件 TextField (標題) (2)建立物件 TextField (地點) >元件說明:這兩個物件的用途是讓使用者可以輸入文字 (標題為必填) * #### 關卡說明 接下來我們要在跳出的視窗中新增==TextField物件==,來讓我們可以輸入行程標題跟地點,作為行程的內容。 這個物件是一個元件類別,概念就像是一張小卡,我們會在小卡上面寫上一些文字;而我們會在文字輸入框(TextField)中輸入文字,就像寫字一樣。 這裡的TextField要讓使用這個APP的人,可以輸入他想創立的行程,我們再把文字輸入框中的文字,記下後存起來。 ## 第七關-新增行程頁面上的時間選擇 ### 關卡7-1 * #### 建立兩個標籤 (新增行程頁面) (1)建立物件 Label (開始時間) (2)建立物件 Label (結束時間) >元件說明:這兩個物件的用途是區分開始時間和結束時間兩個按鈕 * #### 關卡說明 接下來我們要在畫面中加入兩個標籤,來提示使用者後面要建立的開始和結束的按鈕分別是哪一個。 就像商品的標籤,會告訴大家這個商品的用途是什麼。而在這裡,Label物件就是用來告訴大家,哪個按鈕是開始時間和哪個按鈕是結束時間! ### 關卡7-2 * #### 建立開始時間按鈕 (新增行程頁面) (1)建立物件 Button (2)將按鈕設為當下的時間 (3)建立Button點擊事件:建立並開啟時間選擇器 >元件說明:這個按鈕的用途就是讓使用者開啟時間選擇器選擇行程的開始時間 * #### 關卡說明 再來我們需要建立一個按鈕來打開時間選擇器。這個按鈕就是我們要建立的==Button物件==。 我們會給每個Button物件該執行的任務,當我們按下按鈕,這個按鈕就會執行任務! 這個Button物件的任務就是讓使用者可以選擇行程的開始時間! ### 關卡7-3 * #### 建立結束時間按鈕 (新增行程頁面) (1)建立物件 Button (2)將按鈕設為當下的時間 (3)建立Button點擊事件:建立並開啟時間選擇器 >元件說明:這個按鈕的用途就是讓使用者開啟時間選擇器選擇行程的結束時間 * #### 關卡說明 再來我們需要建立一個按鈕來打開時間選擇器。這個按鈕就是我們要建立的==Button物件==。 我們會給每個Button物件該執行的任務,當我們按下按鈕,這個按鈕就會執行任務! 這個Button物件的任務就是讓使用者可以選擇行程的結束時間! ## 第八關-新增行程頁面上的按鈕 ### 關卡8-1 * #### 新增返回按鈕 (新增行程頁面) (1)建立物件 Button (2)建立Button點擊事件:關閉物件 Popup (新增Popup頁面) >元件說明:這個按鈕的用途就是讓使用者可以回到行程列表頁面(結束新增) * #### 關卡說明 這關我們要建立一個==Button物件==,來讓我們可以返回前一頁。 這個Button物件的任務是,讓使用者可以關閉新增的視窗,回到行程列表頁面! ### 關卡8-2 * #### 建立儲存按鈕 (新增行程頁面) (1)建立物件 Button (2)建立Button點擊事件:將資料上傳到資料庫 >元件說明:這個按鈕的用途就是讓使用者可以把資料儲存到資料庫 * #### 關卡說明 接著我們要再建立一個==Button物件==,來讓我們把新加入的行程新增在資料庫裡面。 這個Button物件的任務是,按下這個儲存按鈕後,就可以將新的資料加進資料庫! ## 第九關-編輯行程頁面的彈跳視窗與文字框 ### 關卡9-1 * #### 建立彈出視窗 (編輯行程頁面) (1)建立物件 Popup >元件說明:這個物件的用途是放置編輯頁面會用到的元件 * #### 關卡說明 ==Popup物件==的概念跟前面建立的PageFragment物件很像,只是這個物件要出現的方式,是透過別的元件的呼叫。在這裡就是透過點選關卡4-4所製作的List物件,來打開這個Popup物件。 ### 關卡9-2 * #### 設定標題 (編輯行程頁面) (1)將Popup物件中內建的title參數設置為: 編輯行程 > 元件說明:這個物件的用途是設定頁面的標題! * #### 關卡說明 在跳出的==Popup物件==中,有一個屬性是"title", 屬性的概念就像是,一個機器會由很多零件組成,而這些零件就是機器的屬性。 所以這關我們要做的事情就是設定彈跳視窗的標題,讓使用的人知道他現在正在編輯一個行程的內容! ### 關卡9-3 * #### 建立兩個文字框 (編輯行程頁面) (1)建立物件 TextInput (標題) (2)建立物件 TextInput (地點) >元件說明:這兩個物件的用途是讓使用者可以輸入文字 (標題為必填) * #### 關卡說明 接下來我們要在跳出的視窗中新增==TextField物件==,來讓我們可以輸入行程標題跟地點,作為行程的內容。 這個物件是一個元件類別,概念就像是一張小卡,我們會在小卡上面寫上一些文字;而我們會在文字輸入框(TextField)中輸入文字,就像寫字一樣。 這裡的TextField要讓使用這個APP的人,可以輸入他想創立的行程,我們再把文字輸入框中的文字,記下後存起來。 ## 第十關-編輯行程頁面上的時間選擇 ### 關卡10-1 * #### 建立兩個標籤 (編輯行程頁面) (1)建立物件 Label (開始時間) (2)建立物件 Label (結束時間) >元件說明:這兩個物件的用途是區分開始時間和結束時間兩個按鈕 * #### 關卡說明 接下來我們要在畫面中加入兩個標籤,來提示使用者後面要建立的開始和結束的按鈕分別是哪一個。 就像商品的標籤,會告訴大家這個商品的用途是什麼。而在這裡,Label物件就是用來告訴大家,哪個按鈕是開始時間和哪個按鈕是結束時間! ### 關卡10-2 * #### 建立開始時間按鈕 (編輯行程頁面) (1)建立物件 Button (2)建立Button點擊事件:建立並開啟時間選擇器 >元件說明:這個按鈕的用途就是讓使用者開啟時間選擇器更改行程的開始時間 * #### 關卡說明 再來我們需要建立一個按鈕來打開時間選擇器。這個按鈕就是我們要建立的==Button物件==。 我們會給每個Button物件該執行的任務,當我們按下按鈕,這個按鈕就會執行任務! 這個Button物件的任務就是讓使用者可以更改行程的開始時間! ### 關卡10-3 * #### 建立結束時間按鈕 (編輯行程頁面) (1)建立物件 Button (2)建立Button點擊事件:建立並開啟時間選擇器 >元件說明:這個按鈕的用途就是讓使用者開啟時間選擇器更改行程的結束時間 * #### 關卡說明 再來我們需要建立一個按鈕來打開時間選擇器。這個按鈕就是我們要建立的==Button物件==。 我們會給每個Button物件該執行的任務,當我們按下按鈕,這個按鈕就會執行任務! 這個Button物件的任務就是讓使用者可以更改行程的結束時間! ## 第十一關-編輯行程頁面上的按鈕 ### 關卡11-1 * #### 新增返回按鈕 (編輯行程頁面) (1)建立物件 Button (2)建立Button點擊事件:關閉物件 Popup (編輯Popup頁面) >元件說明:這個按鈕的用途就是讓使用者可以回到行程列表頁面(結束編輯) * #### 關卡說明 這關我們要建立一個==Button物件==,來讓我們可以返回前一頁。 這個Button物件的任務是,讓使用者可以關閉編輯的視窗,回到行程列表頁面! ### 關卡11-2 * #### 建立儲存按鈕 (編輯行程頁面) (1)建立物件 Button (2)建立Button點擊事件:將資料庫中的資料內容更新 >元件說明:這個按鈕的用途就是讓使用者更改資料的內容 * #### 關卡說明 接著我們要再建立一個==Button物件==,來讓我們把資料庫中的行程更改成編輯後的行程內容。 這個Button物件的任務是,按下這個儲存按鈕後,就可以將資料庫中的行程內容更新! ### 關卡11-3 * #### 建立刪除按鈕 (編輯行程頁面) (1)建立物件 Button (2)建立Button點擊事件:刪除該筆行程 >元件說明:這個按鈕的用途就是讓使用者可以刪除行程 * #### 關卡說明 這關我們要建立編輯視窗中的最後一個==Button物件==,讓我們可以把不需要的行程刪除。 這個Button物件的任務是,按下這個刪除按鈕後,就可以從資料庫將這個行程的內容刪掉! ## 頁面 ### 主頁(無事件)  ### 主頁(有事件)  ### 主頁(開啟月份選單)  ### 行程列表Popup頁面  ### 行程列表Popup頁面(有事件)  ### 新增行程Popup頁面  ### 時間選擇器  ### 編輯行程Popup頁面  ### 確認刪除  ### 錯誤_結束時間早於開始時間 
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up