Name Recipes/Visualization/InteractiveBoxHeight

Synopsis Control the height of a box with user input.

Description The challenge is to create a user interface that consists of

• A text entry field to enter numbers.
• A box, whose height is controlled by the numer entered in the text field.

Examples Here is a solution:

@license{
  Copyright (c) 2009-2013 CWI
  All rights reserved. This program and the accompanying materials
  are made available under the terms of the Eclipse Public License v1.0
  which accompanies this distribution, and is available at
  http://www.eclipse.org/legal/epl-v10.html
}
module demo::vis::Higher

import vis::Figure;
import vis::Render;

public bool intInput(str s){
	return /^[0-9]+$/ := s;
}

public Figure higher(){
	int H = 100;
    return vcat( [ textfield("<H>", void(str s){H = toInt(s);}, intInput),
	               box(width(100), vresizable(false), vsize(num(){return H;}), fillColor("red"))
	             ], shrink(0.5), resizable(false));
}

The auxiliary function intInput checks that a strings consists solely of digits. Function higher can be understood as follows:

• A local variable H is used to maintain the current height.
• It returns a vertical concatenation of two elements: a Rascal:textfield and a Rascal:box.
• The textfield has three arguments:
  • A string that is the initial value of the text field.
  • A call back function void(str s){H = toInt(s);} that is called when text entry is complete: argument s is the text entered and the effect is to convert that text to a number and assign it to H.
  • Function intInput that checks that only numbers are entered.
  • The box has
  • a fixed width
  • it is not vertically resizable.
  • It has a vertical size that that depends on an anonymous function vsize(num(){return H;}) that returns the value of H.
  • Its color is red.

Rendering this figure:

import demo::vis::Higher;
render(higher());

gives



Unfortunately we cannot show the interaction here, so run this example from the demo directory and watch how the height of the box changes when you enter a new number in the text field.

[Edit] | [New Subconcept] | [Recompile Course] | [Warnings]