Creating a MobileFirst hybrid application for your portal | HCL Digital Experience
You can create a hybrid application to add native device capabilities to your portal with IBM MobileFirst.
Before you begin
Procedure
- Create your MobileFirst® Hybrid Application in the MobileFirst® Eclipse development environment by selecting .
- In the Name field, name your project. In this example, name your project MFPortal. In the Project Templates field, select Hybrid Application, which is the default, and click Next.
-
In the Application Name field, name your application. In this example,
name your application MFPortalApp. Check the JavaScript libraries that you
want your application to use if any and click Finish.
The project and application artifacts are created. You can see your project_name\apps\app_name folder in the Project Explorer. Your application descriptor, application-descriptor.xml, is in the Application Descriptor Editor.
-
In application-descriptor.xml,
you can change the basic settings of your
application, such as your
application id
,displayName
,description
, andauthor
details. -
In application-descriptor.xml, change
mainFile
to your HCL Portal URL with the uri=wl:id parameter appended to the end.For example, enter http://localhost:port/wps/portal?uri=wl:id:MFPortalApp. Replace localhost with your host name andMFPortalApp
with your application name. -
In the common/images folder, replace the icon.png and
thumbnail.png files with the custom images that you want for your application.
The
thumbnailImage
shows that the icons used for your application are in the common/images folder. - Save your changes.
- Create a MobileFirst® environment to build the native part of the hybrid application. Right-click your project_name\apps\app_name folder and then select .
-
In the New MobileFirst Environment dialog, select any native environments
that you want your application to support, such as iPhone, iPad, Windows Phone, and Android phones
and tablets. Click Finish.
Your Project Explorer window is updated with a native application in a folder named project_name\app_name\platform. In this example, the folder for Android is MFPortal\MFPortalApp\Android. For iOS, it is MFPortal\MFPortalApp\iphone or MFPortal\MFPortalApp\ipad for iOS. For Windows Phone, it is MFPortal\MFPortalApp\windowsphone8. For Windows Phone applications, set the URI entered for the mainFile value of the application-descriptor.xml as the StartPageUri value in MainPage.xaml. MobileFirst® manages the lifecycle of these folders. When the web application you initially created in the project is built and deployed, the native applications are overwritten with any application changes.
-
To test your application, right-click the
project_name\apps\app_name folder and
select .
-
To test an Android hybrid application, you must have an Android Virtual Device created. Then,
right-click on your native Android application
folder, and select
MFPortalMFPortalAppAndroid
is in your MobileFirst® project. . The native Android application is a peer to your project. In this example, a project that is named - To test an iPhone and iPad hybrid application, you must use a Mac with Xcode installed. Right-click on your native iPhone or iPad application folder, which is project_name\apps\app_name\iphoneor project_name\apps\app_name\ipad, and select . Then, in Xcode, select your emulator and run the application.
- To test a Windows Phone hybrid application, you must have Windows 8 with Windows Phone 8 SDK installed. Right-click your native Windows Phone application folder, which is project_name\apps\app_name\windowsphone8, and select . Then, in Visual Studio, select your emulator and run the application.
-
To test an Android hybrid application, you must have an Android Virtual Device created. Then,
right-click on your native Android application
folder, and select