Using Themes in iOS Screenlets

Using a Liferay Screens Theme, you can set your Screenlet’s UI components, style, and behavior. They let you focus on a Screenlet’s UI and UX, without having to worry about its core functionality. Liferay’s Screenlets come with several Themes, and more are being developed by Liferay and the community. A Liferay Screenlet’s Themes are specified in its reference documentation. This tutorial shows you how to use Themes in your iOS Screenlets.

To install a Theme in your iOS app’s Screenlet, you have two options, depending on how the Theme has been published:

1. If the Theme has been packaged as a CocoaPods pod dependency, you can install it by adding a line to your Podfile:

   pod 'LiferayScreensThemeName'
   

   Make sure to replace LiferayScreensThemeName with the Theme’s CocoaPods project name.

2. If the Theme isn’t available through CocoaPods, you can drag and drop the Theme’s folder into your project. Liferay Screens detects the new classes and then applies the new design in the runtime and in Interface Builder.

Figure 1: To install a Theme into an Xcode project, drag and drop the Theme's folder into it.

To use the installed Theme, specify its name in the Theme Name property field of the Base Screenlet in Interface Builder. The names of each Screenlet’s Themes are listed in the Themes section of the Screenlet’s reference documentation. If you leave the Theme name property blank or enter a name for a Theme that can’t be found, the Screenlet’s Default Theme is used.

Figure 2: In Interface Builder, you specify a Screenlet's Theme by entering its name in the *Theme Name* field; this sets the Screenlet's `themeName` property.

The initial release of Liferay Screens for iOS includes the following Themes for its Screenlets:

• Default: Comes standard with a Screenlet. It’s used by a Screenlet if no Theme name is specified or the named Theme can’t be found. The Default Theme can be used as the parent Theme for your custom Themes. Refer to the architecture tutorial for more details.
• Flat7: Demonstrates a Theme made from scratch. Refer to the Theme creation tutorial for instructions on creating your own Theme.
• Westeros: Customizes the behavior and appearance of the Westeros Bank demo app.

That’s all there is to it! Great! Now you know how to use Themes to dress up Screenlets in your iOS app. This opens up a world of possibilities–like writing your own Themes.

Related Topics

Preparing iOS Projects for Liferay Screens

Creating iOS Themes

Using Screenlets in iOS Apps

Architecture of Liferay Screens for iOS

Using Views in Android Screenlets