EnterText #

On this page you find the documentation for the GUI Component EnterText.

Introduction #

The EnterText component is a view in which the user can enter some text.

class StartPage extends Page{
	createGui(){
		return EnterText
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}

The user can go to the next page in the app by pressing the enter key (↵) in the EnterText component.

class StartPage extends Page{
	createGui(){
		return Rows(
			Space,
			Text(`What's your name?`),
			Space,
			Cols(
				EnterText.size(1).placeholder(`Enter name...`),
				Button(`⇒`),
			),
		)
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}

Adding an initial text #

The text passed as the main content to EnterText will be used as the initial text in the component.

class StartPage extends Page{
	createGui(){
		return EnterText(`Write here!`)
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}

Adding a placeholder text #

The configuration method placeholder() can be used to show a text in EnterText when it's empty. Try typing some text in the example below, and see that the placeholder text disappears.

class StartPage extends Page{
	createGui(){
		return EnterText.placeholder(`Enter name`)
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}

Adding Directions #

Use configuration method pages() to specify which Pages the user should come to depending on what text she enters. The value should be an object, where the key represents the text the user can enter, and the value for each key indicate which Page the user should come to if that text has been entered.

Use the configuration method page() to specify which Page the user should come to if none of the keys in pages() matches what the user has entered.

EnterText
	.placeholder(`Enter name`)
	.page(UglyNamePage)
	.pages({
		Peter: NiceNamePage,
		Lily: () => new BeautifulNamePage(),
	}

Handling entered text #

If you want to store what the user has entered in EnterText in the current Page, you can use the configuration method pVar() to indicate the name of the variable in the current Page that should be used.

class StartPage extends Page{
	createGui(){
		return EnterText.placeholder(`Enter city`).pVar(`city`)
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}

In the example above, what the user has entered will be stored in p.city.

If you instead want to store it in the App, use the configuration method aVar() in the same way.

class StartPage extends Page{
	createGui(){
		return EnterText.placeholder(`Enter city`).aVar(`city`)
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}

In the example above, what the user has entered will be stored in a.city.

If you want to do something more complicated than just storing the text the user has entered, use the configuration method handler() to specify a function that will be called to handle the text the user has entered. In the example below, try entering some text, and then press the enter key.

class StartPage extends Page{
	createGui(){
		return EnterText
			.placeholder(`Enter city`)
			.handler(enteredText => alert(enteredText))
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}