[Free] The ExtraComponents Extension (Beta)

components
design
extension

#57

@Mark But the problem is when a user creates more than one toggle button, we dont know which toggle was used in the event.


#58

Whoop whoop extra components, how nice!!!


#59

The CreateToggle block would return the ID that the extension generated. The user can then save that and use it to identify the toggle.

-Mark


#60

Amazing idea. I’ll surely work on it. I’m hoping that the new create toggle method will return the id of the toggle, similar to adding markers in the maps component.

Cheers


#61

Great work @Helios !! Thank You


#62

Update 1.2

The Designer’s Brainchild


This update brings along plenty of new features along with a few changes to previous blocks. Feel free to provide your valuable feedback!


:warning:This update may break apps using the older versions. Continue at your own risk and discretion.


The CreateToggle block has been changed in accordance with @Mark 's suggestions. The id of the toggle will be generated automatically and will be returned as a number. This works similar to the markers in the Maps component. The same approach has been carried over to other methods as well.


New method: CreateDeterminateProgress
This method creates a horizontal progress bar on the screen. Similar to the CreateToggle method, the id is returned as an integer. The progress bar scales according to the width of the horizontal arrangement.

The current progress can be obtained from the CurrentProgress block. To change the progress, use the UpdateProgress block.

Screenshot:

The following methods will surely be a boon to app designers and those keen on decent UX/UI.

New method: ChangeCheckBoxColour
Gone are the days when teal was the only colour for components. With this method, you can change the colour of the checkbox to your app’s theme, all while maintaining the smooth animations.


New method: ChangeTextBoxColour

Similar to the previous method, this one allows you to change the colour of the border line of the textbox.


New method: ChangeButtonBackground
One of Thunkable’s strengths is its integration of Material Design. Unfortunately, changing the button’s background would ruin the shape and effect of the button. Fret no more! With this method, you can change the colour of the button while retaining the effects and sizing.

Screenshot:

New method: ChangeInputType
With this method, you can dynamically change the type of the text box. The method expects an integer from 1 to 7 with the legend as follows:

1: Normal text input, suits most purposes
2: Text password input, for entering masked text
3: Name input, capitalises the first letter of each word.
4: Email address input, changes keyboard layout for ease of input
5: Number input, self explanatory
6: Numerical password input, to enter masked numbers
7: Date/time input, changes keyboard layout to facilitate entry of dates and time.


New method: AddEnterPressListener
This is something that has been asked for a lot. While there are workarounds with clocks and timers, it is usually a long and tiresome process. This method adds a listener to a text box such that an event is fired when the user pressed the enter key. Extremely beneficial if you are making forms or login screens.
(The method expects an intger id, which can be any unique number. The id is just for reference and isn’t the actual id of the textbox.)

When the user presses the enter key, this event is invoked:

The id is returned as an integer. As sample use, I’ve set it to hide the keyboard when the event fires. You may also request focus to another textbox so that the user can continue the input. (Best example: Two textboxes to input first and last names separately. When the user presses enter on the first, the second text box gains focus.)


Please let me know what you think about each of these methods. Feedback is greatly appreciated.

Download: com.vishwas.ExtraComponents.aix (34.5 KB)

Cheers
Helios


How do I trigger an event when the user is done typing?
RippleEffect Extension
Dynamic components extension
[Free] Switch Button (Toggle Button)
Textbox and label border
Change hint color
Textbox Extension
How do I trigger an event when the user is done typing?
Default button color?
Material design using Materialize
Go to next textbox when "Enter" is pressed
Buttons lose material properties upon editing
#63

Great work! Lots of new components.


#64

Thank you Helios. Amazing skills, you are a real Dev-programmer :grimacing:


#65

Automatic id is not a good idea because it often changes and then my system is no longer working


#66

Hi Helios,
Excellent work.
1 question for you,
does the CreateToggle block support make color block for thumb colour and track colour options?
Thank you.
MMB.


#67

It doesn’t work the way you are currently using it. You should store the ID in a TinyDB and then retrieve it whenever you want to perform a method relating to a toggle. Since the IDs are created dynamically, they are bound to change and aren’t constant.


#68

Unfortunately, it doesn’t. All colours are currently input as Hex codes. I will surely fix this in the next version.
Apologies.

Helios


#69

WoW! This is one of the most amazing extensions I’ve ever seen for Thunkable. This is very much needed! Thank you! :grinning:

Now all we need is cards…


#70

I prefer to use my own IDs than automade ones. But still, dope (very good) extension.


#71

This is amazing, thank you very much, I’m using the AddEnterPressListener method and it works great whit numbers


#72

It is always better to leave the dirty job to the compiler. Even in Android Studio, view IDs are automatically generated and are referenced to as R.id.button1 or something similar.

In Thunkable, you can store the ID of the component in a global variable, say, toggle1ID. When there is an event related to the toggle, you can reference its ID from the variable. It’s almost similar to creating your own IDs.


#73

Hi Does not compile in AppyBuilder…

AppyBuilder is unable to compile this project.
The compiler error output was
________Preparing application icon
________Creating animation xml
________Creating fragment xml
________Generating manifest file
________Attaching native libraries
________Attaching component assets
________Compiling source files
(compiling com/appybuilder/werner/Masskot_Data_Entry/Screen1.yail to com.appybuilder.werner.Masskot_Data_Entry.Screen1)
(compiling /tmp/runtime6587957236434921872.scm to com.google.youngandroid.runtime)
Kawa compile time: 4.733 seconds
________Invoking DX
YAIL compiler - DX execution failed.

Any Suggestions?


#74

Please don’t double post.

Also, this is a Thunkable forum.

As the extensions work fine on Thunkable, it must be a problem with AppyBuilder. Try asking on the AppyBuilder forums instead.


#75

Upcoming features:

A more sophisticated slider component
Cards (YAY!!!)
A possible integration of a progressbar on to the action bar, so as to achieve native UI while making loading animations.

Keep your fingers crossed! :joy:
Helios


#76

Like chrome?