Skip to content

Niliev/text field #260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 22, 2018
Merged

Niliev/text field #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c67fcb
refactor: Update TextField article and example(feedback form)
NickIliev Jan 22, 2018
be4fff0
chore: runtime version to next
NickIliev Jan 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions app/ui-category/text-field/basic-text-field/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
HTML
TextField provides multiple properties and several events for handling the user input and interaction.
To submit a value use the `returnPress` event along with the `returnKeyType` property.
To handle a TextFiled being focused use the `focus` event.
To handle an interaction when the user leaves TextField use the `blur` event.
To explicitly show and hide a keyboard, we can call the methods `focus` and `dismissSoftInput`.

<snippet id='sample-ui-textfield-html'/>

Handle TextField returnPress event
<snippet id='textfield-handle-submit-event'/>
177 changes: 85 additions & 92 deletions app/ui-category/text-field/basic-text-field/basic-text-field.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,86 @@
<!-- >> sample-ui-textfield-html -->
<GridLayout rows="*" columns="*" sdkExampleTitle sdkToggleNavButton>
<ScrollView row="0" col="0">
<GridLayout rows="*" columns="*">
<StackLayout class="form">
<StackLayout class="input-field">
<Label class="label" text="Focused TextField" row="1" col="0" textWrap="true"></Label>
<TextField class="input input-border" id="firstTextFieldId" hint="Focused TextField" text="" row="1" col="1"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Autocapitalization" row="2" col="0" textWrap="true"></Label>
<TextField class="input input-border" #stf hint="allCharacters" autocorrect="false" text="" autocapitalizationType="allCharacters"
row="2" col="1"></TextField>
<TextField class="input input-border" #stf hint="none" autocorrect="false" text="" autocapitalizationType="none" row="3"
col="1"></TextField>
<TextField class="input input-border" #stf hint="sentences" autocorrect="false" text="" autocapitalizationType="sentences"
row="4" col="1"></TextField>
<TextField class="input input-border" #stf hint="words" autocorrect="false" text="" autocapitalizationType="words" row="5"
col="1"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Passwords field" row="6" col="0" textWrap="true"></Label>
<TextField class="input input-border" hint="Default" autocorrect="false" secure="true" text="" row="6" col="1" returnKeyType="next"></TextField>
<TextField class="input input-border" hint="With text color" hintColor="#cc0000" color="#cc0000" autocorrect="false" secure="true"
text="" row="7" col="1" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Keyboard types" row="8" col="0" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="false" hint="done" text="" row="8" col="1" returnKeyType="done"></TextField>
<TextField class="input input-border" autocorrect="false" hint="go" text="" row="9" col="1" returnKeyType="go"></TextField>
<TextField class="input input-border" autocorrect="false" hint="next" text="" row="10" col="1" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="search" text="" row="11" col="1" returnKeyType="search"></TextField>
<TextField class="input input-border" autocorrect="false" hint="send" text="" row="12" col="1" returnKeyType="send"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Auto-correct" row="13" col="0" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="true" hint="With auto-correct" text="" row="13" col="1" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="Without auto-correct" text="" row="14" col="1" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Setting Max text length(max 3 characters)" textWrap="true"></Label>
<TextField class="input input-border" maxLength="3" hint="With maxLength" text="" returnKeyType="done"></TextField>
<Label class="label" text="Setting Max text length(max 3 characters) with secure='true'" textWrap="true"></Label>
<TextField class="input input-border" maxLength="3" hint="maxLength with secure='true'" text="" secure="true" returnKeyType="done"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Colors and Border style" row="15" col="0" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="" row="15" col="1" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" style.placeholderColor="#0066cc" hint="Hint text color" text="" row="16"
col="1" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="Default text color" row="17" col="1"
returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint=" Blue Text Color" color="#0066cc" text="Text color" row="18"
col="1" returnKeyType="next"></TextField>
<TextField class="input" autocorrect="false" hint="Set Border Width" text="Set Border Width" borderWidth="5" borderColor="#6666ff"
row="19" col="1" returnKeyType="next"></TextField>
<TextField class="input" autocorrect="false" hint="Green Border Color" text="Green Border Color" borderWidth="2" borderColor="#339933"
row="20" col="1" returnKeyType="next"></TextField>
<TextField class="input" autocorrect="false" hint="Set Border Radius" text="Set Border Radius" borderWidth="2" borderRadius="40"
borderColor="#6666ff" row="21" col="1" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="TextAlignment" row="22" col="0" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="false" hint="left" text="left" textAlignment="left" row="22" col="1" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="center" text="center" textAlignment="center" row="23" col="1"
returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="right" text="right" textAlignment="right" row="24" col="1"
returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="FontSize" row="25" col="0" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="false" hint="Set FontSize" text="" fontSize="27" row="25" col="1" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="FontFamily" row="26" col="0" textWrap="true"></Label>
<TextField autocorrect="false" fontFamily="serif" hint="serif" text="serif" class="input input-border" row="26" col="1" returnKeyType="next"></TextField>
<TextField autocorrect="false" fontFamily="sans-serif" hint="sans-serif" text="sans-serif" class="input input-border" row="27" col="1" returnKeyType="next"></TextField>
<TextField autocorrect="false" fontFamily="monospace" hint="monospace" text="monospace" class="input input-border" row="28" col="1" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Date" row="29" col="0" textWrap="true"></Label>
<TextField class="input input-border" id="textFieldBDate" hint="Enter date" [text]='birthDate | date:"MM/dd/yy"' (tap)="showDatePicker()"
row="29" col="1" returnKeyType="done" (returnPress)="submit()"></TextField>
</StackLayout>
</StackLayout>
</GridLayout>
</ScrollView>
<StackLayout backgroundColor="white" [visibility]="isItemVisible ? 'visible' : 'collapsed'" row="0" col="0">
<DatePicker class="m-15" id="datePicker" #dp [visibility]="isItemVisible ? 'visible' : 'collapsed'"></DatePicker>
<Button class="btn btn-primary btn-active" text="Tap to enter the date" (tap)="enterDate()" [visibility]="isButtonVisible ? 'visible' : 'collapsed'"></Button>
<ScrollView sdkExampleTitle sdkToggleNavButton>
<StackLayout class="form">
<StackLayout class="input-field">
<Label class="label" text="Focused TextField" textWrap="true"></Label>
<TextField class="input input-border" (loaded)="firstTfLoaded($event)" hint="Focused TextField" text=""></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Autocapitalization" textWrap="true"></Label>
<TextField class="input input-border" #stf hint="allCharacters" autocorrect="false" text="" autocapitalizationType="allCharacters"></TextField>
<TextField class="input input-border" #stf hint="none" autocorrect="false" text="" autocapitalizationType="none"></TextField>
<TextField class="input input-border" #stf hint="sentences" autocorrect="false" text="" autocapitalizationType="sentences"></TextField>
<TextField class="input input-border" #stf hint="words" autocorrect="false" text="" autocapitalizationType="words"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Passwords field" row="6" col="0" textWrap="true"></Label>
<TextField class="input input-border" hint="Default" autocorrect="false" secure="true" text="" returnKeyType="next"></TextField>
<TextField class="input input-border" hint="With text color" hintColor="#cc0000" color="#cc0000" autocorrect="false" secure="true"
text="" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Keyboard types" row="8" col="0" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="false" hint="done" text="" returnKeyType="done"></TextField>
<TextField class="input input-border" autocorrect="false" hint="go" text="" returnKeyType="go"></TextField>
<TextField class="input input-border" autocorrect="false" hint="next" text="" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="search" text="" returnKeyType="search"></TextField>
<TextField class="input input-border" autocorrect="false" hint="send" text="" returnKeyType="send"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Auto-correct" row="13" col="0" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="true" hint="With auto-correct" text="" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="Without auto-correct" text="" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Setting Max text length(max 3 characters)" textWrap="true"></Label>
<TextField class="input input-border" maxLength="3" hint="With maxLength" text="" returnKeyType="done"></TextField>
<Label class="label" text="Setting Max text length(max 3 characters) with secure='true'" textWrap="true"></Label>
<TextField class="input input-border" maxLength="3" hint="maxLength with secure='true'" text="" secure="true" returnKeyType="done"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Colors and Border style" row="15" col="0" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" style.placeholderColor="#0066cc" hint="Hint text color" text=""
returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="Default text color" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint=" Blue Text Color" color="#0066cc" text="Text color" returnKeyType="next"></TextField>
<TextField class="input" autocorrect="false" hint="Set Border Width" text="Set Border Width" borderWidth="5" borderColor="#6666ff"
returnKeyType="next"></TextField>
<TextField class="input" autocorrect="false" hint="Green Border Color" text="Green Border Color" borderWidth="2" borderColor="#339933"
returnKeyType="next"></TextField>
<TextField class="input" autocorrect="false" hint="Set Border Radius" text="Set Border Radius" borderWidth="2" borderRadius="40"
borderColor="#6666ff" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="TextAlignment" row="22" col="0" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="false" hint="left" text="left" textAlignment="left" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="center" text="center" textAlignment="center" returnKeyType="next"></TextField>
<TextField class="input input-border" autocorrect="false" hint="right" text="right" textAlignment="right" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="FontSize" textWrap="true"></Label>
<TextField class="input input-border" autocorrect="false" hint="Set FontSize" text="" fontSize="27" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="FontFamily" row="26" col="0" textWrap="true"></Label>
<TextField autocorrect="false" fontFamily="serif" hint="serif" text="serif" class="input input-border" returnKeyType="next"></TextField>
<TextField autocorrect="false" fontFamily="sans-serif" hint="sans-serif" text="sans-serif" class="input input-border" returnKeyType="next"></TextField>
<TextField autocorrect="false" fontFamily="monospace" hint="monospace" text="monospace" class="input input-border" returnKeyType="next"></TextField>
</StackLayout>
<StackLayout class="input-field">
<Label class="label" text="Date" textWrap="true"></Label>
<!-- >> sample-ui-textfield-html -->
<TextField hint="Enter date"
[text]='birthDate | date:"MM/dd/yy"'
secure="false"
keyboardType="datetime"
returnKeyType="done"
(returnPress)="onReturnPress($event)"
autocorrect="false"
maxLength="10"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
class="input input-border"></TextField>
<!-- << sample-ui-textfield-html -->
</StackLayout>
</StackLayout>
</GridLayout>
<!-- << sample-ui-textfield-html -->
</ScrollView>
95 changes: 45 additions & 50 deletions app/ui-category/text-field/basic-text-field/basic-text-field.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,62 @@
// >> textfield-handle-submit-event
import { Component, OnInit } from "@angular/core";
import { DatePicker } from "ui/date-picker";
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { TextField } from "ui/text-field";
import { Page } from "ui/page";
import { setTimeout } from "timer";

@Component({
moduleId: module.id,
// >> (hide)
styleUrls: ["./../text-field.style.css"],
// << (hide)
templateUrl: "./basic-text-field.component.html"
})
export class BasicTextFieldComponent implements OnInit {
export class BasicTextFieldComponent {

public birthDate;
public isButtonVisible = false;
public isItemVisible = false;

constructor(private page: Page) {
}

ngOnInit() {
let datePicker = this.page.getViewById<DatePicker>("datePicker");
datePicker.year = 1980;
datePicker.month = 2;
datePicker.day = 9;
datePicker.minDate = new Date(1975, 0, 29);
datePicker.maxDate = new Date(2045, 4, 12);

let firstTextfield: TextField = <TextField> this.page.getViewById("firstTextFieldId");
firstTextfield.focus();

}

enterDate() {
let datePicker = this.page.getViewById<DatePicker>("datePicker");
let selectedDate = new Date(datePicker.year, datePicker.month - 1, datePicker.day);
this.birthDate = selectedDate;
this.isButtonVisible = false;
this.isItemVisible = false;
// >> textfield-handle-submit-event
firstTfLoaded(args) {
let firstTextfield = <TextField>args.object;
setTimeout(() => {
firstTextfield.focus(); // Shows the soft input method, ususally a soft keyboard.
}, 100);
}

showDatePicker() {
let textFielsBDate = this.page.getViewById<TextField>("textFieldBDate");
this.isButtonVisible = true;
this.isItemVisible = true;

setTimeout(function() {
textFielsBDate.dismissSoftInput();
onReturnPress(args) {
// returnPress event will be triggered when user submits a value
let textField = <TextField>args.object;

// Gets or sets the placeholder text.
console.log(textField.hint);
// Gets or sets the input text.
console.log(textField.text);
// Gets or sets the secure option (e.g. for passwords).
console.log(textField.secure);

// Gets or sets the soft keyboard type. Options: "datetime" | "phone" | "number" | "url" | "email"
console.log(textField.keyboardType);
// Gets or sets the soft keyboard return key flavor. Options: "done" | "next" | "go" | "search" | "send"
console.log(textField.returnKeyType);
// Gets or sets the autocapitalization type. Options: "none" | "words" | "sentences" | "allcharacters"
console.log(textField.autocapitalizationType);

// Gets or sets a value indicating when the text property will be updated.
console.log(textField.updateTextTrigger);
// Gets or sets whether the instance is editable.
console.log(textField.editable);
// Enables or disables autocorrection.
console.log(textField.autocorrect);
// Limits input to a certain number of characters.
console.log(textField.maxLength);

setTimeout(() => {
textField.dismissSoftInput(); // Hides the soft input method, ususally a soft keyboard.
}, 100);

}

submit() {
let textFielsBDate = this.page.getViewById<TextField>("textFieldBDate");
this.isButtonVisible = true;
this.isItemVisible = true;

setTimeout(function() {
textFielsBDate.dismissSoftInput();
}, 100);
onFocus(args) {
// focus event will be triggered when the users enters the TextField
let textField = <TextField>args.object;
}

onBlur(args) {
// blur event will be triggered when the user leaves the TextField
let textField = <TextField>args.object;
}
// << textfield-handle-submit-event
}
// << textfield-handle-submit-event
Loading