There is a rich assortment of themes available for the Bootstrap UI framework. By adding one or more of them, you can quickly change your Bootstrap-based app’s appearance and add cool animation effects! Luckily, adding these themes to your Bootstrap projects in Appery.io is really easy.
jQuery Mobile has an amazing “themeroller” for creating custom themes. Because of the openness of Appery.io, you can easily develop an incredible theme with this outside tool and then just import it into Appery.io.
Appery.io provides a Google Maps component. It’s easy to add into your app: simply drag it on the page and configure it via the properties panel like any other UI component. Then, use the Google Maps API on the component via JavaScript to show directions, place markers, add layers (such as the traffic layer), retrieve user location via Geolocation, etc.
Appery.io Proxy can be used for testing in desktop browsers to avoid cross-domain security problems. The proxy reroutes requests to services, so cross-domain security isn’t triggered. But, there’s more! You can use an advanced option in this feature to protect your secret keys, credentials, etc. from being accessed by app users.
The breadcrumb represents the sequence of components containing components leading up to the currently selected component in the screen you’re working on in the App Builder (for example, “outermost component name > name of component inside the outermost component > name of the component you’ve selected that’s inside this component inside the outermost component“). It’s displayed above the screen. When you select the name of any listed component in the breadcrumb, that component becomes the selected component. As you can imagine, this is a very useful feature for working within complex screens.
Two common ways to upload files in Appery.io apps are via the browser’s FormData API and via the Cordova file-transfer plug-in. To make it really easy to add file upload to your app, we package the “wiring” for both methods in a standard Appery.io plug-in. Once you load the plug-in, you can choose which method to use.
Need to make your app’s UI available in different languages? Sounds hard? It isn’t. Just use the i18n JavaScript library. With Appery.io’s open architecture, you can easily add it in to your app; with Appery.io’s deep documentation, we can show you exactly how easy it is to incorporate i18n with Appery.io.
You can extend the functionality of any Appery.io component by adding custom JavaScript. Today, we’ll see how the Google Map component in Appery.io can be used to display driving directions both visually and as text.
With the help of the Google Directions service, we’ll create a mobile page similar to the directions example listed on the examples page for the Google Maps API. Read the rest of this entry »
Do you know how to take advantage of custom JavaScript when working with Appery.io visual components? You can easily access any Appery.io component in JavaScript via the Appery.io JavaScript API and manipulate it with the jQuery Mobile API. Here is an example of how to dynamically add items to a list using JavaScript. Read the rest of this entry »
Appery.io Mobile Apps Builder recently added a number of new components: Contacts, Geolocation, and Google Map. Contacts and Getlocation are new native components and are located in Device palette:
This post is going to show you how to use the Contacts component. Once a new mobile app project is created (make sure to select Blank Mobile App, from Native tab), simply drag and drop Palette > Device > Contacts component into the mobile screen. Once the component is added, it will be shown on the left-hand side.
To keep the example simple, we are only going to display name and phone number of a contact. To display the contacts, we are using a List component and placing two Labels inside it, one for name and one for phone number. It looks like this:
Notice that we also mapped the collection of all contacts (top most $) to the list component itself.
Next is we need to map the component output to the UI. Output mapping looks like this:
As you can see above, we are only mapping the contact name and contact email. Just a few more things left to do.
Add a button to load the contacts:
Add click event to the button and attach Invoke Service action, selecting the contacts service (contacts1).
We are ready to test. Because this is a device component, we would need to test the app on the actual device. But, there is an easier way to test this service. Open Project > Services > Contact service, then open Echo Service panel. You will see some sample date. Click Enable Echo.
This is a sample contact data and a very simple way to test the app. Using this data we can now test this in the browser.
Click the big Test button to launch the app, the result will look like this:
Now we are ready to try this using the contacts on the device. Simply turn off Enable Echo. Save. Now when you ran the app, it will load contacts from your device. The easiest way to run the app on the device is using Appery.io Mobile Tester.