Edit text or number in a label interactively with filters
Scott Ferguson
Changes Log: 2016-02-07
Removed zip file project.
Added converted (untested) aia project.
---
Though the blocks pictures show AI Classic blocks, this project was converted to AI2.
This project is a spinoff of another project where I want the users to be able to enter:
a whole number, counting number, integer or decimal number or alphanumeric text.
In addition I want them to be able to sometimes enter more than one value separated by commas.
My solution was to create a custom keyboard that allows the user to edit the values in a label.
It either disables keys that are not available (minus and decimal point for whole numbers, counting numbers and integers) or hides keys (letters when a number or set of numbers is expected). This is an extension of what the default keyboard can do where it displays a numeric keypad when a textbox is set to numeric or all keys otherwise.
If you are using the Emulator, press Cmd/Ctrl + F11 to rotate the emulator device to landscape orientation for this project.
Since there are no event handlers for the Label component, I added a keyboard button to enter edit mode which appears to the right of the label. Clicking that button will display the custom keyboard. On the keyboard is a settings button where you can choose the keyboard layout for a specific type of data. That setting remains selected until it is changed. All keys are visible by default (same as selecting 'AlphaNumeric').
Bug fix: The result of editing will be saved in the LeftBTN.Text property. Prior to this revision the text could have been split between the left and right labels. In the DoneBTN.Click block below the circled blocks correct this.
The editing is handled with three labels. The left and right labels hold text that varies with the 'position' of the middle label during editing. The middle label is just a one pixel wide label that appears to flash as an insertion point between the left and right labels when a clock component changes it's background color every 250 ms. As You can see in the blocks image, when there is text in the left label and the backspace button is pressed, then the last character in the left label's text is removed. The effects are pretty convincing :)
Challenge:
Can you make this work with Buttons, ListPickers or any other component that has a Text property?
Dread 88 Seller
Tamas
This project is a spinoff of another project where I want the users to be able to enter:
a whole number, counting number, integer or decimal number or alphanumeric text.
In addition I want them to be able to sometimes enter more than one value separated by commas.
My solution was to create a custom keyboard that allows the user to edit the values in a label.
It either disables keys that are not available (minus and decimal point for whole numbers, counting numbers and integers) or hides keys (letters when a number or set of numbers is expected). This is an extension of what the default keyboard can do where it displays a numeric keypad when a textbox is set to numeric or all keys otherwise.
If you are using the Emulator, press Cmd/Ctrl + F11 to rotate the emulator device to landscape orientation for this project.
Since there are no event handlers for the Label component, I added a keyboard button to enter edit mode which appears to the right of the label. Clicking that button will display the custom keyboard. On the keyboard is a settings button where you can choose the keyboard layout for a specific type of data. That setting remains selected until it is changed. All keys are visible by default (same as selecting 'AlphaNumeric').
The editing his handled with three labels. The left and right labels hold text that varies with the 'position' of the middle label during editing. The middle label is just a one pixel wide label that appears to flash as an insertion point between the left and right labels when a clock component changes it's background color every 250 ms. As You can see in the blocks image, when there is text in the left label and the backspace button is pressed, then the last character in the left label's text is removed. The effects are pretty convincing :)
Challenge:
Can you make this work with Buttons, ListPickers or any other component that has a Text property?
--
(you have received this message from the App Inventor Developers Library)
---
You received this message because you are subscribed to the Google Groups "App Inventor Developers Library" group.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-develope...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.