文字輸入也是很重要的使用者界面。
NativeScript 提供兩種輸入框元件標籤:
- <TextField/>: 單行輸入框
- <TextView/>: 多行輸入框
為了讓 iOS 使用者能清楚辨認文字輸入的位置,上面兩個元件還需要加入 hint 屬性提示,像這樣:
<TextField hint="在此輸入文字"/>
上面的提示文字在使用者輸入第一個字後會自動消失,如果清除文字又會自動顯示出來。
首先參考第9節在 about.xml 最後再加上一個『與我聯絡』的按鈕。
接著當然要寫一個對應的 about.js 來處理這個按鈕,內容就跳轉到聯絡表單 contact.xml.
再來就是要設計這個聯絡表單,我們新學的文字輸入元件標籤就要上場了:
<Page>
<StackLayout>
<Label textWrap="true" text="歡迎填寫下面的表單與我聯絡,我會盡快回覆:" />
<TextField hint="訊息主題" />
<TextView hint="訊息內容" />
<Button text="送出" tap="onTap" />
</StackLayout>
</Page>
最後的重頭戲 contact.js 登場了:
var dialogsModule = require("ui/dialogs");
function onTap() {
console.log("送出按鈕已被按下");
dialogsModule.alert("您的訊息已送出");
}
exports.onTap = onTap;
正常情況下,這裡應該要把使用者的訊息透過簡訊或電子郵件發送給我們,但這抄出了我們目前的程度,
所以現在只能暫時先用簡單的程序處理:
之前我們跳轉畫面用的是 frame 模組,這次我們用到的是 dialogs 模組。
在 onTap 函數裡我們作兩件事:
console.log 是內建函數,用來顯示訊息在終端機視窗。
當您使用 tns preview 或 tns run 來測試程式,按下『送出』按鈕就會在終端機視窗上看到『送出按鈕已被按下』的訊息,
開發者往往也用這種方式來找出程式碼的錯誤所在。
dialogsModule.alert 函數的作用則是在使用者的畫面上跳出一個訊息框。