SFDC：Lightningアプリ開発『ui:input / ui:output』タグについて

Visualforce開発には『apex:inputText』や『apex:outputText』など入出力用のタグが用意されていますが、Lightning Componentにも『ui:inputText』と『ui:outputText』のようなタグが用意されています。このタグを使うことで、controller.js側と値の受け渡しを簡単に行えるようになります。

現在使用できるのはおそらく次のタグです。

INPUT系

ui:inputText
ui:inputNumber
ui:inputDate
ui:inputDateTime
ui:inputCheckbox
ui:inputEmail
ui:inputPhone

OUTPUT系

ui:outputText
ui:outputNumber
ui:outputDate
ui:outputDateTime
ui:outputCheckbox
ui:outputEmail
ui:outputPhone

ui:inputで表示できる入力フォームはこんな感じです。

f:id:tyoshikawa1106:20141215222240p:plain

実際に使用する際にはCSSで見た目を整える必要がありそうです。Bootstrapなどと組み合わせるといいかもしれません。

controller.jsでui:inputタグに入力された値を取得したい場合は次のように記載します。

<ui:inputText aura:id="my-text" label="inputText = " value="" placeholder="Text" />

var i_textField = component.find("my-text");
var i_text = i_textField.get("v.value");
console.log('text = ' + i_text);

まず、component.find()でui:input項目の情報を取得します。findで指定しているのはui:inputタグのaura:idに指定しているID名です。get("v.value");の処理で対象の値を取得できます。これでui:inputに入力された値をcontroller.js側で取得することができます。

f:id:tyoshikawa1106:20141215224232p:plain

ui:outputに値をセットしたい場合は次のような感じです。

<ui:outputNumber aura:id="my-number-output" value="0" />

var o_textField = component.find("my-text-output");
var o_text = o_textField.set("v.value", i_text);

component.findは先ほどと同じです。値を取得するときは『get()』ですしたが、値をセットしたい場合は『set()』を使用します。第一引数に"v.value"を指定して、第二引数にはセットする値を指定します。これでui:inputに入力した値をui:outputにセットすることができます。

f:id:tyoshikawa1106:20141215225351p:plain