How to Lightning Components - Part 2: Input & Output

01_LightningInputForm.app

<aura:application>
    <link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/docs.min.css" />
    <script type="text/javascript" src="/resource/jQuery" />
    <script type="text/javascript" src="/resource/BootstrapSF1/dist/js/bootstrap.min.js" />
    <script type="text/javascript" src="/resource/BootstrapSF1/js/docs.js" />
    <!-- Header Component -->
    <devjp:LightningBootstrapSF1Header header="How to Lightning Component" detail="- Sample Application -"  />
    <!-- Input Component -->
    <devjp:LightningInputComponent />
</aura:application>

02_LightningInputComponent.cmp

<aura:component>
    <div class="padding">
        <form>
            <fieldset>
                <ui:InputText aura:Id="ui-inputText" label="Input Text" value=""
                                                    placeholder="Input Text" class="form-control" />
            </fieldset>
            <fieldset>
                <label for="ui-outputText">Output Text</label>
                <ui:outputText aura:Id="ui-outputText" value="" class="form-control" />
            </fieldset>
            <div class="btnMargin">
                <ui:button label="Submit" press="{!c.myAction}" />
            </div>
        </form>
    </div>
</aura:component>

03_LightningInputComponentController.js

({
    myAction : function(component, event, helper) {
        helper.helperMethod(component);
    }
})

04_LightningInputComponentHelper.js

({
    helperMethod : function(component) {
        var inputTextField  = component.find("ui-inputText");
        var inputText = inputTextField.get("v.value");
        
        var outputTextField = component.find("ui-outputText");
        var outputText = outputTextField.set("v.value", inputText);
    }
})

05_LightningInputComponent.css

.THIS {
}
.THIS.padding {
    padding: 10px;
}
.THIS .btnMargin {
    margin-top: 20px;
}