Building a mobile app using custom components

In this tutorial, you’ll learn how to build an app where input entered on the first page is saved into browser’s local storage. It can then be pasted on other pages to get a definition or to show a location on a map.

Tutorial level: intermediate.

Prerequisites (recommended): practice building a words definition app with the Wordnik API and building an app with Google Maps.

Create a new app from the Apps page, and enter the app name (use any name). Click “Create.”

Open startScreen, and create the following UI: [img=305,487]https://devcenter.appery.io/wp-content/uploads/2015/01/FirstScreen.jpg[/img]

1. For the header, change the Text property to Home.

2. Drag and drop the Input component and set the following properties:

• Text – Remove the text.
• Placeholder – Input a word or location.
• Name – wordinput.

3. Drag and drop the Button component and set the following properties:

• Text – Copy.
• Name – copybutton.

4. Drag and drop the Navbar component and click “Save as custom component”:[img=845,497]https://devcenter.appery.io/wp-content/uploads/2014/12/SaveAsCustomComp.jpg[/img]

In the popup, enter the component name MyNavbar, and category name MyComponents. Click “Save”: [img=657,330]https://devcenter.appery.io/wp-content/uploads/2014/12/SaveNewCustomComp.jpg[/img]

Then swith to Model and Storage under Project. Switch to the Storage tab and create a new storage variable:[img=845,62]https://devcenter.appery.io/wp-content/uploads/2014/12/WordVariable.jpg[/img]

You’ve just created your first custom component. We will edit it later. First, we need to work with the other components on the page.

Select the button, and open the EVENTS tab. Add the following event and save:

• Component – copybutton.
• Event – Click.
• Action – Set storage variable.
• Variable name – word.
• Check “Bind to component.”
• Target component – wordinput.
• Property name – Text.

[img=845,87]https://devcenter.appery.io/wp-content/uploads/2014/12/Copybutton.jpg[/img]

Editing the MyNavbar custom component

Create two more pages: Dictionary and Map. For each page, set the header’s Text property the same as the page name.

On the Project panel, in the list of custom components, click “MyNavbar” to edit it. A custom component tab opens:[img=845,213]https://devcenter.appery.io/wp-content/uploads/2015/01/MyNavbar.jpg[/img]

For each item, make the following changes:

1. For the first item, set the properties:

• Icon – home
• Text – home
• Name – home_navbaritem

Add the event:

• Event – click
• Action – navigate to page
• Page – startScreen

2. For the second item set the properties:

• Icon – info
• Text – dictionary
• Name – dictionary_navbaritem

Add the event:

• Event – click
• Action – navigate to page
• Page – dictionary

3. For the third item, set the properties:

• Icon – search
• Text – map
• Name – map_navbaritem

Add the event:

• Event – click
• Action – navigate to page
• Page – map

Upon clicking each item, the appropriate page opens. Let’s add some export properties to make different items active on different pages.

Click any place on the mobile screen (away from the component), and on the PROPERTIES panel, click “Export properties.” In the open popup, enter the following properties:

• Add Home item active, select the home_navabaritem component and the Active attribute.
• Add Dictionary item active, select the dictionary_navabaritem component and the Active attribute.
• Add Map item active, select the map_navabaritem component and the Active attribute.

[img=665,421]https://devcenter.appery.io/wp-content/uploads/2015/01/ExportPropertiesAutomatically2.jpg[/img]

Now your Navbar component is ready to be used. You can drag and drop it on the pages of your project (you already have it on yourstartScreen).

On each page, check the appropriate checkbox on the PROPERTIES panel: “Home item active” on startScreen, “Dictionary item active” onDictionary,and“Map item active” on Map:[img=845,407]https://devcenter.appery.io/wp-content/uploads/2014/12/MapScreen.jpg[/img]

This page’s UI is similar to the UI described in the tutorial “Build a Words Definition App with the Wordnik API.” You can read about signing up for the Wordnik API there.

On the Dictionary page, drag and drop the Button component and click “Save as custom component.” Enter the name PasteComponent. You don’t need to create a new category for this component. Click “Save”:[img=662,326]https://devcenter.appery.io/wp-content/uploads/2014/12/PasteComp.jpg[/img]

A new custom component is created. Click “Edit source,” and the PasteComponent tab opens:[img=845,382]https://devcenter.appery.io/wp-content/uploads/2014/12/PasteCompTab.jpg[/img]

Drag and drop an Input component. Set the following properties:

• Text – remove the text
• Placeholder – input the word
• Name - pastedinput

Select the Button and set the Text property – Paste the word, and the Name property – pastebutton. Open the EVENTS tab, and for the button click, add the following event and save:

• Action - Set property
• Component name – pasteinput
• Property name – Text
• Check “Read from storage variable”
• Value – word

[img=845,87]https://devcenter.appery.io/wp-content/uploads/2014/12/ButtonAction.jpg[/img]

You may want to edit the text for the button and the input field. Let’s export these properties. Click any part of the mobile screen away from the components, and click “Export properties.” The Text properties are standard for these components, so you can click “Populate automatically” and they’ll appear in the list: [img=655,380]https://devcenter.appery.io/wp-content/uploads/2015/01/ExportProperties.jpg[/img]

When you switch to the Dictionary tab, you can find all the changes made for the PasteComponent.

Add the following components to the UI:

• Button – set the Text property to Get definition.
• Grid – set 1 column and 2 rows. The grid can be used to display the results. Each cell includes a Label component (the first label has italics turned off; the second label is set to size 12).

[img=302,477]https://devcenter.appery.io/wp-content/uploads/2015/01/DictionaryTab.jpg[/img]

To create a REST service that works with the Wordnik API:

1. Create a new REST service.

2. For the service URL, enter:

3. Switch to the Request tab, and create three parameters:

• api_key – set it to the API key you received from Wordnik.
• word - the user entered this value; it will be inserted into the URL.
• sourceDictionaries – set it to default value all.

4. Switch to the Test tab, enter any value for word, and click “Test.” Once you see the result (JSON) returned from the service, click “Import as Response.” The service response is created automatically.

5. Go back to the Dictionary page and switch to the DATA tab. Add the Wordnik service to the page. Create the following Before sendevent mapping and save:

[img=845,149]https://devcenter.appery.io/wp-content/uploads/2015/01/Mapping11.jpg[/img]

And the Success event mapping: [img=845,319]https://devcenter.appery.io/wp-content/uploads/2015/01/Mapping2.jpg[/img]

6. Switch to the DESIGN tab, and for the “Get definition” button, add the Invoke service event:[img=845,51]https://devcenter.appery.io/wp-content/uploads/2015/01/InvokeServiceEvent.jpg[/img]

Note: This page’s UI is similar to the UI described in the tutorial “Building a mobile app with Google Maps and Geolocation.”

Create the following UI:

• PasteComponent -you may edit the Text properties for the button and for the input (e.g., Paste the location and Input the location). Click “[url=]Break Apart Custom Component[/url].” Rename the Input component from pastedinputto input.
• Button - change the Text property to Show on map. Rename it to mapbutton.
• Map - rename the component to map. Check “Show marker.”

[img=302,477]https://devcenter.appery.io/wp-content/uploads/2015/01/MapScreen11.jpg[/img]

Add the event:

• Component – mapbutton
• Event – Click
• Action – Run JavaScript: [backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]Code to show the location on the map [color=rgb(102, 102, 102) !important]JavaScript [/tr]

  [color=rgb(170, 170, 170) !important]1 [color=rgb(170, 170, 170) !important]2 [color=rgb(170, 170, 170) !important]3 [color=rgb(170, 170, 170) !important]4 [color=rgb(170, 170, 170) !important]5 [color=rgb(170, 170, 170) !important]6 [color=rgb(170, 170, 170) !important]7 [color=rgb(170, 170, 170) !important]8

  [color=rgb(128, 0, 128) !important]var[color=rgb(0, 111, 224) !important] location[color=rgb(0, 111, 224) !important] [color=rgb(0, 111, 224) !important]=[color=rgb(0, 111, 224) !important] [color=teal !important]Appery[color=rgb(0, 111, 224) !important] [color=rgb(51, 51, 51) !important]([color=rgb(221, 17, 68) !important]'input'[color=rgb(51, 51, 51) !important])[color=rgb(51, 51, 51) !important].[color=teal !important]val[color=rgb(51, 51, 51) !important]([color=rgb(51, 51, 51) !important])[color=rgb(51, 51, 51) !important]; if[color=rgb(0, 111, 224) !important] [color=rgb(51, 51, 51) !important](location[color=rgb(0, 111, 224) !important] [color=rgb(0, 111, 224) !important]==[color=rgb(0, 111, 224) !important] [color=rgb(221, 17, 68) !important]''[color=rgb(51, 51, 51) !important])[color=rgb(0, 111, 224) !important] [color=rgb(51, 51, 51) !important]{ [color=rgb(0, 111, 224) !important] alert[color=rgb(0, 111, 224) !important] [color=rgb(51, 51, 51) !important]([color=rgb(221, 17, 68) !important]'Please enter a location.'[color=rgb(51, 51, 51) !important])[color=rgb(51, 51, 51) !important]; [color=rgb(0, 111, 224) !important] return[color=rgb(51, 51, 51) !important]; [color=rgb(51, 51, 51) !important]} [color=rgb(128, 0, 128) !important]var[color=rgb(0, 111, 224) !important] [color=rgb(0, 45, 122) !important]map[color=rgb(0, 111, 224) !important] [color=rgb(0, 111, 224) !important]=[color=rgb(0, 111, 224) !important] [color=teal !important]Appery[color=rgb(51, 51, 51) !important]([color=rgb(221, 17, 68) !important]'map'[color=rgb(51, 51, 51) !important])[color=rgb(51, 51, 51) !important]; [color=rgb(0, 45, 122) !important]map[color=rgb(51, 51, 51) !important].[color=rgb(0, 45, 122) !important]options[color=rgb(51, 51, 51) !important][[color=rgb(221, 17, 68) !important]'address'[color=rgb(51, 51, 51) !important][color=rgb(0, 111, 224) !important] [color=rgb(0, 111, 224) !important]=[color=rgb(0, 111, 224) !important] location[color=rgb(51, 51, 51) !important]; [color=rgb(0, 45, 122) !important]map[color=rgb(51, 51, 51) !important].[color=teal !important]refresh[color=rgb(51, 51, 51) !important]([color=rgb(51, 51, 51) !important])[color=rgb(51, 51, 51) !important];

Now you can test the app. Navigate from one page to another. Input a word on the Home page and copy it, then go to the Dictionary page, and paste it. Click “Get definition,” and you’ll see the result. Return to the Home page, and enter a location, then go to any other page and paste the word. Read the definition in the dictionary, and find it on the map: [img=288,478]https://devcenter.appery.io/wp-content/uploads/2015/01/RomeDefinition.jpg[/img][img=290,478]https://devcenter.appery.io/wp-content/uploads/2015/01/RomeMap.jpg[/img]