<ui:button>と<ui:button>の操作

ui:buttonでやってみたモロモロのことをまとめていきます。

##<ui:button>のソースコード
公開されているforcedotcom/auraのコードを見て見ると、意外にもいろいろな属性が定義されています。

<ui:button aura:id="normal" label="submit me!"/>に書くと、以下のとおりhtmlが展開されます。
labelは必須の属性になります。

展開される.html

<button class="default uiBlock uiButton" accesskey="" type="button" data-aura-rendered-by="11:2.a">
    <!---->
    <span class=" label bBody truncate" dir="ltr" data-aura-rendered-by="14:2.a">submit me!</span>
     <!---->
</button>

##ボタン押下時の処理を設定する。
press属性にコントローラの処理を割り当てます。
<ui:button aura:id="callBackEnabled" label="callBackEnabled" press="{!c.callBackEnabled}"/>

##buttonのtitle属性を設定する。
<ui:button aura:id="tooltip" label="tooltipも表示できる" buttonTitle="tool tipで表示される submit me!"/>
buttonTitle属性に文字を設定します。

##buttonのtype属性を設定する。
<ui:button aura:id="submit" label="buttonにreset or submitも設定できる" buttonType="reset"/>

##buttonのスタイルを変更する。
<ui:button aura:id="btnStyle" label="余計な[default] classのせいでボタンの色が変えられないな" class="btnRed"/>
buttonのスタイルを変更したい場合、デフォルトで埋め込まれる「default」クラスのおかげで、うまく設定したいスタイルを設定できません。

以下のとおり、セレクタの優先度を上げて、defaltで定義されているスタイルより優先して読み込まれるようにして上げる必要があります。

.uiButton.default.btnRed{
	background: red;
 }

そうすると・・・

こんな感じで、スタイルを設定することが出来ます。

##ボタンのラベルのスタイルを変更する。

<style>
    	.text-large{font-size:30px;}
<style>
<div>
    <ui:button aura:id="labelStyle" label="文字が大きく表示されるボタン" labelClass="text-large"/>
</div>

こんな具合で大きくなります。

##せっかくだからBootstrapのスタイル使いたい。
Bootstrapはこちら。
BootstrapをSalesforce1の規約に合わせたものがbootstrap-sf1です。

    <link href="/resource/adventResource/staticResource/style/bootstrap.min.css " rel="stylesheet"/>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <ui:button  aura:id="delDefaultClass" 
                            label="Bootstrapのボタン" 
                            press="{!c.pressButton}" 
                            class="btn-primary btn-lg btn-block" />
            </div>
        </div>
    </div>

「buttonのスタイルを変更する。」で書いたように「default」クラスがあると、うまくスタイルがあたらないのでとりあえずrenderのタイミングで削除しています。

render.js

  ele = component.get('delDefaultClass').getElement();
  $A.util.removeClass(ele,'default');

こんな感じに表示されます。（レスポンシブです）

##ボタン押下時にdisabledに変更する＆コールバックでdisabledを元に戻す。

<div>
	<ui:button aura:id="callBackEnabled" label="callBackEnabled" press="{!c.callBackEnabled}"/>
</div>

コントローラでdisabledを設定する。

controller.js

callBackEnabled : function(component, event, helper) {
        component.get('callBackEnabled').set('v.disabled',true); //ここでdisabledに設定
        helper.callBackEnabled(component);
	},

コールバックで、enabledに戻す。

helper.js

	callBackEnabled : function(component) {
        var action = component.get("c.getResult");
        action.setCallback(this,function(a){
            component.get('callBackEnabled').set('v.disabled',false); //disabledを削除する。
        });
        $A.enqueueAction(action);
	},

##ボタン押下時にdisabledに変更する＆rerenderでdisabledを元に戻す。
やってみたので、参考までに書いています。
rerenderの処理はコンポーネントの属性の値が更新されないと動作しないので、ボタンから呼ばれたサーバのアクションが完了したタイミングで必ず動作するわけではありません。あくまでも再描画されるタイミングで動作するようです。必ずdisaled属性を削除する場合には、アクションのコールバックの中で、ボタンの属性を操作したほうが良いです。

rendererのjsに処理を追加します。
rerenderでは、コンポーネントの操作ができないようなので、要素を操作して表示を変更しています。

renderer.js

    rerender:function(component,helper){
        var v = this.superRerender();
		var ele = component.get('rerenderEnabled').getElement();
		ele.removeAttribute('disabled'); //disabled属性を削除する。
    }