Blog

We just published a new step-by-step tutorial: Building Weather App.

Want more? You can also try our Building Twitter Search App step-by-step tutorial.

(Cross-posted on Maxa Blog)

We now have a large number of tutorials how-to’s, and getting started guides. Everything from the basic to advanced such as using creating interactive prototype with events/actions and creating and using templates. Just visit our Help page to see them all.

This tutorial will show you how to build and use a custom component. Custom components (or composite components) are very useful because you can combine any components together, create a custom component, and reuse it through out the application. Using custom components will save a lot of time.

To start, let’s build a small prototype which we will then save a custom component.

1. Drag and drop a Panel container, change header label to Deliver options
2. Then, drag and drop 4 radio buttons and set their labels as shown:
   
3. One last thing we want to do is a button. Drag and drop a Button component and change its label to look like this:
   
4. Let’s test what we have created so far. Click Web Preview button on the top menu to open a browser window. Looks nice? Let’s now make this a custom component.
5. To create a custom component, select both the panel and button on the page. You can do it with the mouse (“stretch rectangle”), by selecting the container and button as shown here:
   
6. Now, go to Properties windows on the right-hand side and click Save As Custom Component button.
7. For Template Name enter: DeliveryComponent
8. For Palette Name select: My components
9. Click Create.
10. Go to Components tab on the left-hand side and open My components palette (you might have to close other palettes). There you will see (see screen shot) the custom component we just created: DeliveryComponent.
    
11. Open any screen and drag and drop this component into the page as any other component. That’s it. You now have a custom component which can be reused anywhere.

Editing a custom component

1. To edit a custom component, select the component, then click Edit Source in Properties panel.
2. If you need to separate individual components inside a custom component, select the custom component, then click Break Apart Template. This will break or unlink the components inside and let you use them as any other components individually. Note: this will not affect the custom component. It will still be listed under My components palette
3. To delete a custom component, select Project/Assets, then select Custom Components tab. Select the custom component. From there you can edit, rename or delete the custom component.

If you are not familiar with Appery.io, this is the place to start. We will create a two page prototype and add navigation between pages. Let’s start, all it takes is 5 minutes to build it!

If you are new to Appery.io, create a new Appery.io account and build your first prototype.

1. In Projects page, create a new Appery.io project, let’s call it: MyCoolPrototype
   
2. Once the project has been created, click the project name to open Appery.io editor.
3. Select Components tab on the left, and then open Container palette
4. Select the Panel container and drag and drop it into the editor
5. Double click on Panel title and change it to Login. Your screen should look like this:
   
6. Let’s now change the layout inside this panel. Go to Properties, Custom section and then Layout property, change the layout to Absolute
7. From Components palette on the left-hand side, drag and drop Text component into the Login panel. Set label name to Email. Adjust component name if needed.
8. From Components palette, insert Text input component, to the right of Email label. Your screen should look like this:
   
9. Now, let’s repeat the same steps and add Password label and input field. Your screen should look like this:
   
10. One of the cool things in Appery.io is that you can quickly view the prototype in a browser. Let’s do that. Click the big Web Preview button on the top menu. A browser window will open with the prototype we have created so far. Note: make sure you allow pop-ups for *.appery.io
11. Now let’s add a button.  From Components palette, insert a Button component under the password input field. Change button label to Sign In, to look like this:
    
12. Let’s now create a second screen (page).
13. Switch to Explorer tab on the left
14. Click on Add Screen button. A dialog will appear asking you to select a template. Web Screen should already be selected as default value and that’s what we want. Click OK. You should now see screen1 and screen2 under Screens.
15. Let’s rename to screens as we will use them later. Select screen1 and go to Properties, Common section and then Name property. Change the name to Login. Repeat the same for screen2, set its name to Welcome.
16. You should have Welcome screen open. Switch to Components tab and open Containers palette.
17. Insert  Drag and drop a Panel container and change its label to Welcome
18. Insert a Text component inside the panel and change the text to: You are now logged in!
19. Insert a Link component, right under the text and change its label to Sign Out. The result should look like this:
    
20. Let’s view the second page of our prototype in a web browser. Click Web Preview button. A new window will open with the prototype.
21. You will also see an orange arrow at the top of the page. Click on the arrow, a menu will appear where you can select a different page to view from the prototype. It looks like this:
    
22. Let’s make the prototype interactive by adding navigation. Switch to Explorer tab on the left and select Login page and then select Sign In button.
23. Switch to Events tab in the right panel.
24. Click Add Event and select click. A Click event will appear. It looks like this:
    
25. To add an action to this event, click + icon on Click event and select Navigate to Page action.
26. From the menu shown, select Welcome.  It should look like this:
    
27. Click OK. When Sign In button is clicked, we are going to navigate to Login page.
28. Let’s test how this works. Click Web Preview and click the Sign In button. Pretty cool, right?
29. Let’s now add navigation to Sign Out link on Welcome page.
30. Select Welcome page
31. Select Sign Out link and switch to Events tab in the right panel
32. Click Add Event, add Click event
33. Add an action to this event by clicking + icon and select Navigate to Page action
34. From the menu shown, select Login as we are navigating back to Login page (when we Sign Out)
35. We are done. Now, select Login page and click Web Preview. Try your first interactive prototype!
36. To close this project, from the menu bar select File/Save and Close.