MAF 2.2.1 has changed the manner in which
you define a “launch screen” or “splash screen” for apps deployed to iOS
devices. Static images are no longer
supported, meaning that if you previously used custom splash screen images in
your app, you will need to create your own custom HTML launch screen for iOS
when using MAF 2.2.1.
This post explains the reasons for the change
and describes how to create a custom HTML launch screen for iOS.
Android splash screen images remain the
same in MAF 2.2.1. For information about
how to create a 9-patch image that stretches across different device screen sizes,
refer to this blog post.
When a user launches an app on iOS, the
operating system displays a launch image while the app is loading. The purpose is to give the user the
impression that the app has launched immediately.
Prior to iOS 8, app developers were
required to provide static launch images for every device screen size,
resolution and orientation supported by the app.
This approach has been supported by all MAF
versions up to and including MAF 2.2.0. In fact, MAF extends this approach and continues to display the
appropriate launch image while the framework is being initialized within the
Since iOS 8, Apple has encouraged use of a
new approach, which is to use a single storyboard to define the launch image.
iOS 9 has introduced the concept of
multitasking, meaning that apps can now be launched into a window that does not
fill the device’s entire screen. To support
multitasking, an app must use a storyboard to define the launch image as
fixed-sized images will not work.
MAF 2.2.1 accommodates iOS 9 multitasking
by allowing app developers to specify a single HTML-based launch screen, which
has the added benefits of removing the onerous task of creating and maintaining
a number of static launch images and reducing the size of the app.
a custom HTML launch screen
If your app previously used the default MAF
splash screen images, then there’s nothing you need to do when you uptake MAF
2.2.1, as MAF 2.2.1 provides a default HTML launch screen that contains the
Oracle logo and copyright similar to the previous default images.
If you previously used custom splash screen
images in your app, then you will need to create a custom HTML launch screen
for iOS, as follows:
- Open the Application page of the maf-application.xml file's Overview editor.
- Select the "Custom" option under the Launch Screen section.
- Enter the location of an existing HTML page relative to the ApplicationController/public_html directory of your MAF application, or create a new page.
Since the launch screen is based on HTML,
To get ideas about how to scale images and
text across different window sizes, you can refer to the default HTML launch
screen included in MAF 2.2.1.
the default HTML launch screen
To view the default HTML launch screen:
- Deploy any MAF 2.2.1 application to an iOS simulator or package.
- Navigate to the deploy/<iOS deployment profile>/temporary_xcode_project/FARs/OracleStandardADFmfUiComponents/public_html directory.
- Open maf-launch-screen.html in a text editor.
Without analyzing every line of code, let’s
take a look at some of the important parts of this file..
file are used to show and hide a loading indicator and a busy message based on
a MAF event. You can include the same
logic in your HTML launch screen if you wish to display a loading indicator
and/or busy message.
If you don’t want a loading indicator or
sections described below.
The page is divided into the following
- loadingWrap and loadingBox
The background and logo sections
work together to display a small scalable vector graphic (SVG) image on a solid
background color, which is the recommended approach for both performance and
The launch screen will only be displayed
for a short amount of time, so there’s not much time for a high-definition
image to be loaded and displayed. In
addition, a background image will be stretched and/or cropped to fit various
window sizes, which may result in an unnatural-looking image.
If you would prefer something fancier than
a solid background color, CSS supports linear and radial gradients. Online sites such as w3schools describe
the syntax and provide examples. You can
even find online CSS gradient generators at sites such as ColorZilla.
A small SVG image can stretch in a natural
fashion to any window size without loss of quality, with the background color
filling in the rest of the window. In
the default launch screen, the image is embedded in the CSS as a data URI, but
you could also co-locate the image file with your HTML launch screen and
reference its location in the CSS.
The copyright section contains plain
text that is displayed at the bottom of the page. The CSS determines the font size based on the
available width of the window in which the launch screen is displayed. You could emulate this approach to display
any text you want on your launch screen.
The loadingWrap and loadingBox
sections are used to display an animated GIF loading image and a busy
the file controls the visibility of these sections and the displayed message.
With MAF 2.2.1 you no longer need to create
and maintain a number of splash screen images for iOS and your app size will be
If you previously used custom splash screen
images for iOS, you must now create an HTML launch screen and the default HTML launch
screen within MAF 2.2.1 can be used as a guide, as described above.