---
# System prepended metadata

title: 行事曆關卡流程

---

# 行事曆關卡流程

## 第一關-初始頁面 
### 關卡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物件的任務是，按下這個刪除按鈕後，就可以從資料庫將這個行程的內容刪掉！

## 頁面
### 主頁(無事件)
![](https://i.imgur.com/P2VXdVm.jpg)
### 主頁(有事件)
![](https://i.imgur.com/d9zyR1i.jpg)
### 主頁(開啟月份選單)
![](https://i.imgur.com/HnsVseb.jpg)
### 行程列表Popup頁面
![](https://i.imgur.com/OT9pi5l.jpg)
### 行程列表Popup頁面(有事件)
![](https://i.imgur.com/aZEMtCG.jpg)
### 新增行程Popup頁面
![](https://i.imgur.com/3bdqTM4.jpg)
### 時間選擇器
![](https://i.imgur.com/h1z4WfH.jpg)
### 編輯行程Popup頁面
![](https://i.imgur.com/adYxIgt.jpg)
### 確認刪除
![](https://i.imgur.com/aqXI7ba.jpg)
### 錯誤_結束時間早於開始時間
![](https://i.imgur.com/DFyyq49.jpg)
