Creating Reusable Components

When used effectively, components can greatly improve workflow efficiency by allowing you to combine and save model elements as reusable assets that can be used throughout your project. The tediousness of recreating similar model elements, such as menu buttons, can be eliminated by creating one menu button control with actions and variables already attached, and saving that control as a component that can be replicated whenever needed.

The full usefulness can be hard to imagine from just an explanation, so the following tutorial will aim to provide a window into an effective workflow involving components through the creation of a standard button that can be reused and modified throughout your application.

Create a Button Object

  1. Create a new control with a fill or image render extension as your base button background.
  2. Add a text render extension with some default text for the button.

Screen_Shot_2019-05-15_at_1.58.02_PM.png

Add Functionality to Your Button

  1. Add a press event to your button that triggers a data change action to change the button background to a pressed colour or image.
  2. Add a release event that changes the background back to its default state.
  3. Duplicate your release event and change it to be triggered by an outbound event.
  4. Add a touch event that triggers a screen change (or whatever other default functionality you want the button to have).

Screen_Shot_2019-05-15_at_2.04.19_PM.png

Now you have a fully functional button with up and down states, as well as a standard action that you will be able to change to suit your needs for each instance of the component that you create. 

Create a Component

  1. Right click on your button control.
  2. Click Components > Create New Component.
  3. Name your component and click OK.

Screen_Shot_2019-05-15_at_2.05.04_PM.png

You now have a button component saved that you can use throughout your project to easily replicate its functionality and modify to suit your new needs.

Reuse Your Component

  1. Open the Component View (Window > Show View > Components).
  2. Locate your button component in the Component View and drag it into the Application View or the Application Model.

Screen_Shot_2019-05-15_at_2.05.38_PM.png

Now you have a new instance of the button component in your project. If you want to change the screen that it transitions to or the action itself, you can find the action in the Actions View and edit it to your desired functionality.

Screen_Shot_2019-05-15_at_2.06.45_PM.png

Animations on Components

You may want to include an animation on the button component instead of just a simple data change. Animations are typically performed on specific controls or groups of controls, but what if you want to create many buttons with identical animations? A future post will go over how to use context-based animations in a variety of ways, but the following is a brief explanation of how to create a generic animation to add animated effects to components. 

Create a Fading Animation

We will create animations to fade the button alpha when pressed and return it to full alpha when released.

  1. Toggle animation recording on using the icon at the top: 

          Screen_Shot_2019-05-15_at_2.jpg

     2. Change the button background alpha to 100.

     3. Take a snapshot of the change:

          Screen_Shot_2019-05-15_at_2__1_.jpg

     4. Toggle the animation recording off and name the new animation.

Make the Animation Generic

  1. Open the animation in the animation editor.
  2. Select the alpha animation step and click “Change Variable” in the Properties View:Screen_Shot_2019-05-15_at_2.49.22_PM.png
  3. Check the “Custom Key” checkbox and change the key to ${control:alpha}:Screen_Shot_2019-05-15_at_2.50.50_PM.png
  4. Click OK

Now your animation is context_control-based and will try to change an alpha variable on whatever control the animation is triggered on. This way, the press event on the button component will trigger that specific instance of the component to fade and not the base button that was initially specified.

Create a Reversed Animation

  1. Go back to the animation list:
  2. Right click on the new animation and select “Add Reversed Animation”. Now you have a button release animation to set the alpha back to full.

         Screen_Shot_2019-05-15_at_2__2_.jpg

Change the Press and Release Events and Create a New Component

Change the press and release events on the button to call the appropriate animations and test out the button. The alpha should now fade when pressed and return to normal when released. Once that is complete, you can create a new component and insert a new instance of it into the project. Both the original button and the new button should fade and return to normal when pressed and released.

These are just some simple ways to use components, but there are many more ways you can use them to plan strategically and improve your workflow. Once you are comfortable with thinking in terms of reusability, more creative uses for this tool will open up to you and greatly increase your productivity.







Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.