Extending the Google Map Component with Custom JavaScript

Posted: April 5th, 2012 | Author: | Filed under: Articles | Tags: , , ,

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 »

Manipulating Appery.io Components with jQuery Mobile

Posted: March 28th, 2012 | Author: | Filed under: Articles | Tags: , ,

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 »

New Appery.io Component: Contacts

Posted: November 29th, 2011 | Author: | Filed under: Features | Tags: ,

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.

REST API With Basic Access Authentication In Your Mobile App

Posted: November 4th, 2011 | Author: | Filed under: Features | Tags: , ,

In the context of mobile apps, basic access authentication is way for a Web browser to provide user name and password when invoking a REST service. A REST service that requires basic access authentication will look like this:


As you can see we are using https: and passing the username and password to the service.

Working with REST services (that return JSON or XML) is very easy in Appery.io Mobile Apps Builder. Appery.io comes with a service editor where you define service settings such as URL, and data format type (JSON, JSON, or XML). Request Parameters – for defining service inputs. Response Parameters – for defining service outputs.

Service properties for Twitter Search REST API:

Another very important feature of the service editor is the ability to test the service right from Appery.io. Here is an example testing Twitter search service:

From this screen you can also automatically create the service’s response parameters by clicking Populate Response Structure button.

Now, if you have a service that requires basic access authentication, you would simply enter the URL in the service settings:

The next step is usually to enter service request parameters and then test the service. But, when you test the service, the service will fail with a message like this:

Why does it fail? When you use a URL such as: https://username:password@www.host.com/products, basic access authentication is only supported by the Web browser. When you test the URL inside Appery.io, it does a regular GET request, without the basic access authentication and the service fails. When you run the actual app, everything should work, as request will be coming from the Web browser. We are looking at how to update the test feature to support basic access authentication.

What if you still want to create the service response parameters automatically? That’s still pretty easy to do. Run the service in Web browser. Copy the output. Open Response Parameters panel in service editor. Click Populate from Sample Response. Paste the response. Click Populate Response Parameters. That’s it. Again, keep in mind that when running the mobile app, everything will be working.

Setting Custom Image Background For Your Mobile App

Posted: October 24th, 2011 | Author: | Filed under: Features | Tags: , , , ,

A number of users asked us how to use a custom image as background for mobile app. We are working on this feature but a simple work around exists. We want to run a very simple jQuery CSS query when the mobile screen loads. First, add load event to the screen. Then, add Run Custom JavaScript action with the following code:

I removed the Header and Footer parts and also looking for mobilecontainer1, as this is the content where I want to set the background image.

The result (click image to view the app):

Image source: http://www.sdcblog.com/2011/06/italian-artchitecture-bellissimo/italy/

Appery.io tips: working with screens

Posted: January 13th, 2011 | Author: | Filed under: Features | Tags: ,

Appery.io makes it very simple to work with multiple screens:

  • To add a new screen, click +Add Screen button
  • To delete a screen, click X in the upper right corner in the screen. You can also delete by selecting Screen/Delete from the top menu
  • To rearrange screen, select a screen and drag it into the new position
  • To edit screen name, double click on its label. You can also change screen name in Properties
  • Once you are done editing screens, click Hide Screens to hide the panel. This way you will have more room for the prototype