MAFEditText

The MAFEditText control extends the capabilities of the android.widget.EditText native button. MAF adds styling capabilities to the EditText UI component. Use MAFEditText for password input fields or mandatory input fields.

To create and present a default SAP style instance of MAFEditText, use:

MAFEditText customText = new MAFEditText(this);

To create MAFEditText through the Android layout XML:

<com.sap.maf.uicontrols.view.MAFEditText
               android:layout_width="wrap_content"
               android:layout_height="40dp"
               android:hint="@string/hint_edit_text" />

To create MAFEditText for a password field, use:

MAFEditText passwordText = MAFUIFactory.getInstance().getPasswordEditText(this, false, true);

To create MAFEditText for a mandatory field, use:

MAFEditText customText = MAFUIFactory.getInstance().getMandatoryEditText(this);

MAFMandatoryEditText is an extension of MAFEditText: it adds an indicator that shows that the field requires an entry from the user. Use its API to set an error message that you can present on the screen. The component does not perform any validation; however, it shows an error if the setError API is called.

The MAF skinning engine customizes the MAFEditText. This is the XAML content for the default style of the TextBox TargetType:

<Style TargetType="TextBox" Key="DefTextBox" platform="android">
                 <VisualStates>                       
                       <VisualState Name="Unfocused_Enabled">                             
                             <Setter Property="Background" Value="#ff999999" />                             
                             <!-- base line color -->                             
                             <Setter Property="Foreground" Value="#ff333333" />                             
                             <!-- text color -->                             
                             <Setter Property="DetailsForeground" Value="#ff333333" />                             
                             <!-- hint color -->                             
                             <Setter Property="FontFamily" Value="sans_serif" />                             
                             <!-- font type -->                             
                             <Setter Property="FontSize" Value="14" />                             
                             <!-- font size -->
                       </ VisualState >

MAFEditText supports skinning of different visual states. To set visual states, use the <VisualStates></VisualStates> tag:

<Style TargetType="TextBox" Key="DefTextBox" platform="android">
                 <VisualStates>
                        <VisualState Name="Unfocused_Enabled">                             
                              <Setter Property="Background" Value="#ff999999" />                             
                              <!-- base line color -->                             
                              <Setter Property="Foreground" Value="#ff333333" />                             
                              <!-- text color -->                             
                              <Setter Property="DetailsForeground" Value="#ff333333" />                             
                              <!-- hint color -->
                        </VisualState>
                        <VisualState Name="Unfocused_Disabled">                             
                               …                        
                        </VisualState>
                        <VisualState Name="Focused_Disabled">                             
                               …
                        </VisualState>
                        <VisualState Name="Focused_Enabled">                             
                               …
                        </VisualState>
                        <VisualState Name="Pressed">                             
                               …
                        </VisualState>
                 </VisualStates>
           </ Style >

You can also inherit the style definition from the standard MAFEditText and create a flavored button. Here is an example for a red styled MAFEditText flavor:

<Style TargetType="TextBox" Key="RedTextBox" BasedOn="DefTextBox" 
platform="android">
                 <VisualStates>
                        <VisualState Name="Unfocused_Enabled">                             
                              <Setter Property="Background" Value="#0091E0" />                             
                              <!-- base line color -->                             
                              <Setter Property="Foreground" Value="#ff0000" />                             
                              <!-- text color -->                             
                              <Setter Property="DetailsForeground" Value="#F50742" />                             
                              <!-- hint color -->
                        </VisualState>
                 </VisualStates>

                             <Setter Property="FontFamily" Value="sans_serif" />
                             <!-- font type -->
                             <Setter Property="FontSize" Value="14" />
                             <!-- font size -->           
</ Style >

To create flavored EditText from code, use:

MAFEdittext customText = new MAFEditText(this, "RedTextBox");

You can change the following properties in the skinning XML:

Background	Base line color
Foreground	Text color
FontFamily	Font type
DetailsForeground	Hint color
FontSize	Font size