App settings

When, in the Appery.io builder, you go Project > App settings, you’ll have the ability to configure many parts of the app:

The App settings tab has the following views:

• General – general information about the project: its name and description, start page, page size and color scheme.
• External resources (jQuery Mobile) / Resources (AngularJS) – built-in and user-added resources.
• Android binary – all necessary Android .apk properties to prepare your app for the Android Market.
• Android permissions – list of selectable permissions.
• iOS binary – developer information and certificates needed to build an iOS binary.
• iOS keys – list of keys, for which you can choose the value.
• Cordova plugins (AngularJS only) – settings to manage Core and Imported Cordova plug-ins.

jQuery Mobile:

AngularJS:

General view

In General view, for all Appery.io project versions (jQuery Mobile and AngularJS), you can:

• See the project name – this is the name that you can see at the top of the Project view:
  

• Edit the app description – the input field may be resized:
  

  Description field supports styling markup.

• Enable Weinre debugging – debug your app while testing in-browser or on device.

Though, there are some differences in the views of the General tab for AngularJS and jQuery Mobile projects:

AngularJS projects offer managing the custom tags table on their General tab, while jQuery Mobile projects have the following options for defining:

• Select the start page – the first page to be launched when running the app; it may be selected from the list of all app pages.
• Select the theme – set the color scheme of the app; the list is the same as in the Themes section in Project view.
• Select the default swatch – based on the selected theme, this swatch will be default for project pages and components if their Swatch property is set to Inherit.
• Select one of the default page sizes or set the custom page size – if the Custom Size box is checked, the Default Page Size list becomes disabled. The selected size will be applied to all newly created pages. Additionally, a screen size can be set for each page separately, in its PROPERTIES panel.
• Check or uncheck the jQuery Mobile multi-page option – multi-page templates allow all app pages to be placed inside one HTML file.

Learn more about this feature via the link.

External resources view (jQuery Mobile)

The External resources view has the following fields:

• Libraries version drop-down – as you create the project, the latest version is used by default. You may set any earlier version from the list.

Learn more about libraries versioning via the link.

• Built-in resources – the list of libraries and their versions that are used in Appery.io.
• User-defined resources – enter the URL of the external library you want to load, and click Add. The library will appear in the following field.

Resources view (AngularJS)

Like in jQuery Mobile projects, the Resources view in AngularJS apps has the following fields:

• Libraries version drop-down – as you create the project, the latest version is used by default. You may set any earlier version from the list.

Learn more about libraries versioning via the link.

• Built-in resources – the list of libraries and their versions that are used in Appery.io.

But, AngularJS projects also have the so-called Dependency manager under the Resources tab, consisting of two sections:

• External resources – here, in the URL, you can choose to use a relative path or a .js URL from third-party domains.
• Internal resources – contains a table with .js assets, Services and Directives that have been added to the app.

More information on Appery.io Dependency manager can be found here.

Android binary

In this section you can configure Android binary file settings, upload icons and splash screens, and manage certificates.

In the Android binary view, you can set the properties necessary for generating an Android release binary version of your app that can be published to the Google Play Store:

• Set your app name and icon to be displayed on the device.
• Set your app version code and name (important when you publish your app on the Google Play Store).
• Select the SDK versions to be supported.
• Check the Release box to stop debugging. Builds with unchecked Release box will be probably rejected by Play Store with the You uploaded an APK that is not zip aligned message.
• Set the launch images for different screen sizes.
• Set the key parameters.

Android permissions

In this section you can set Android permissions that your app requires.

Read more about Android permissions. Be careful when adding/removing permissions. It’s not a good practice to give your app permissions which it doesn’t require. On the other hand, make sure to check permissions that your app requires or it won’t work properly.

Custom Cordova plugins

When you install a custom Cordova plug-in, additional permissions might be checked automatically that are required for the plug-in to work properly.

iOS binary

In the iOS binary view, you can set all developer information and certificates you need to generate an iOS App Store package:

• Set the app label and version.
• Upload the icons and launch images of standard sizes.
• Upload the distribution certificate and provisioning profile.

You can specify several different icons for use in different situations. Appery.io allows you to upload icons for apps running on iPad, iPhone and iPod touch. Small icons are used when displaying search results, high-resolution icons are used for devices with Retina displays.

iOS keys

In iOS keys view, you can configure the appearance of your app at launch time, and the behavior of your app once it’s running.

Read more about iOS keys via the link.

Push notifications

Here you were able to edit push settings, now there is a link to a new push notifications settings page:

Library versioning

Versioning support is available in Appery.io. This means that project sources stay independent to library (jQuery Mobile, PhoneGap, or AngularJS) updates during maintenance. All versions are available for code generation, but only the latest version is supported by the UI builder.

When JQuery, jQuery Mobile, PhoneGap, or AngularJS libraries are updated, a new version is created. You can see the current version of libraries and choose between the old and new version. When you create a new project, the latest version is chosen automatically. An existing project that has been created with the old version retains the old version. At any time, you may switch code generation to the latest libraries version on the App Settings tab.

In Project view, open the Project > App settings > External Resources (jQuery Mobile)/Resources (AngularJS) tab:

There are several libraries versions for jQuery Mobile projects.

For AngularJS projects, there are currently only two versions: v1.0 and v.1.1.

To switch to the latest library version, in Project > App settings> Resources, select v1.1 in the Library versions section and click Apply:

The users with Angular v1.0 will also need to re-import the Apperyio Ionic Push plug-in to be able to send pushes.

To view what version you have, switch to the Source tab in Project view. For Android, you’ll find the information in [your_project_name] > pom.xml. You can also find it in the folder with this library: [your_project_name] > repo > apache > cordova > cordova:

For iOS, you’ll find it in file [your_project_name] > [your_project_name] > Cordova Lib > VERSION:

Switch the version to the older one, and save the project. New files have been generated.

Android:

iOS:

Launch images

A splash screen is a screen that appears after a user starts an app and before the app has loaded.

If you want a special image to appear while your app starts, you can upload launch images for Android and iOS devices on the Android binary and iOS binary tabs. As the screen size on devices vary, you can set launch images of different sizes.

Launch images for Android:

Launch images for iOS:

When you click Browse, the Media Manager opens, where you can upload and/or select the image.

Only the images of the indicated size, and only those in .jpg, .jpeg, .png, or .gif format can be selected. Images not complying with these requirements will not appear in the Media Manager.

You can’t see the launch images from the Appery.io App Tester. Export the application as binary, and install it on the device to see it.

To use launch images in JQM projects with libraries version 3.0 or angular projects, go to: Project > App settings > Cordova plugins and check the Splashscreen (Cordova Splashscreen Plugin) under the Core Cordova plugins tab.

Using 9-patch images

Creating Android splash screens can be more complicated and time consuming than their iOS counterparts due to the wide variety of screen ratios. You should use a 9-patch image for your splash screen.

A 9-patch image is a stretchable bitmap image that contains extra information to define what parts can be stretched and what remains as it was originally designed. This way you can have a content appear without distortion whatever aspect ratio the target device screen has.

Official sites about 9-patch:
http://developer.android.com/tools/help/draw9patch.html
http://developer.android.com/reference/android/graphics/NinePatch.html

Sites where 9-patch is explained in more details:

http://developer.android.com/guide/practices/screens_support.html#support
http://radleymarx.com/blog/simple-guide-to-9-patch/
http://9-patch.com/

9-patch images can be created in many graphic editors. There are also some online tools (for example, try draw9patch or Simple Nine-patch Generator ) which can show you how your image would look like on devices with different screens.

Use a nine-patch editor you like more to create a 9-patch image with the .9.png file name.

To use 9-patch for splash screens in your project, upload.9.png images in App Settings>Android binary using the media manager, then refresh Android resources and save the app.

iOS does not support the use of 9-patch images. One reason for this is the reduced number of variations of sizes.

For the best quality, create splash images for every dimension available in Appery.io. Use a simple picture (for example, white background with small good quality picture in the center).

9-patch images don’t scale down – they only scale up. So it’s best to start as small as possible.

Markup guide

You can use styling in the Appery.io Visual Builder:

• Links– To add a link to your app, project, template or plug-in description, you should create a link with the following structure: [link_url link_name]. For example, the markup [http://appery.io/ Appery.io main page] creates the following link: Appery.io main page. All text after the space is used as the text for the link name.