- Open the world menu via control-click or right-click
- Choose Tools => open PartsBin
- The Rectangle is in the basics category
In the example right we have modified the fill and border properties.
Step 2: Change the appearance of the rectangle.
Open an inspector via the halo. The inspector gives you access to properties of objects. For specific "types" of properties the inspector provides customized tooling, e.g. a color picker for color related properties such as fill or borderColor.
Step 3: Get a label, input line and button from the PartsBin and drop them into the rectangle so that the reactangle becomes the parent object for the new items.
Step 5: Define the form behavior
Open an object editor via the wrench halo item and click on the + button in the lower left. This will add a new, object specific subclass.
Then define a method checkName. For now it will only notify the user about the text in the text input. (We will add more complex behavior later).
Note that establishing connections via the halo items is an alternative to doing it programmatically via
Step 6: Hook up the button to the form's checkName method.
The result so far
Step 4: Change the labels to make the widgets more descriptive.
This tutorial describes how to create a form widget. This includes:
1. Assembling a GUI with lively.morphic using the PartsBin and inspector
2. Creating custom behavior with the object editor
3. Connecting graphical components via data bindings (connect)
Step 7: Working with real data
For the example we will use the API that propublica (https://projects.propublica.org) provides. For the name we enter into our form field we will try to find a house representative or senator of the current U.S. house or senat using propublica's congress members API.
The API requires us to register an API key that we have to send along with our requests. It is recommended that you use your own key instead of reusing our tutorial key listed below.
To use the API in its simplest form we open a workspace (world menu => Tools => open workspace) and enter:
// use lively.next network abstraction to do HTTP communication
When you select and evaluate all the code (text menu => doit) the data variable will be defined. Inspect it:
As you can the the data structure we get back has a couple of properties not important for us. We are mostly interested in the data.results.members list. It includes names and descriptions of senators and representatives, especially note the first_name and last_name attributes.
Step 8: Combining the API with the form
We can now extend the form so that on button press we query the propublica API, get a list of senators and representatives and try to find one whose name matches our form input.
First we will extend our HTTP request to fetch all desired data. We will directly add this in the form's object editor as a new method: