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.
General view
In General
view, for all Appery.io project versions (jQuery Mobile and AngularJS), you can:
- 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 inProject
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 toInherit
. - Select one of the default page sizes or set the custom page size – if the
Custom Size
box is checked, theDefault 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 itsPROPERTIES
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
andDirectives
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 uncheckedRelease
box will be probably rejected by Play Store with theYou 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)/
tab:Resources (AngularJS)
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.
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.
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 theSplashscreen
(Cordova Splashscreen Plugin
) under theCore 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.