Real Life Oracle MAF – Beyond the Dev Guide Luc Bors eProseed

Utrecht - Netherlands

Keywords Oracle MAF, Mobile, Howto, Real Life, Tips’n’Tricks.

Introduction Oracle Mobile Application Framework enables you to create apps for both iOS and Android. When you're building your first Oracle Mobile Application Framework app, you'll run into issues you can't solve by reading Oracle's Developer's Guide. Think of skinning, creating custom springboards and more. It can all be done, but there are many different ways. You will learn solutions for these and other real-life Oracle Mobile Application Framework challenges. You will first get an overview of Oracle MAF. In this manuscript you will learn some of the handy techniques that can help you to build your MAF apps, with tools that are not directly related to JDeveloper or Eclipse. In the presentation you will find extra information and patterns that are not discussed in this document What is Oracle MAF Oracle Mobile Application Framework (MAF) enables rapid and declarative development of rich, on-device mobile applications. Oracle MAF-based applications are built using the Oracle MAF extension in Oracle JDeveloper or by using Eclipse and the Oracle Enterprise Pack for Eclipse (OEPE). Developers only need to write an application once and then they can deploy the same application across multiple leading mobile platforms such as Android and Apple iOS. This means that MAF enables developers to build applications that are portable across devices and operating systems while still leveraging the device-specific capabilities and delivering excellent user experience. Applications developed with Oracle MAF can be designed for phone and/or tablet form factors and can be packaged for either Apple iOS or Google Android. The applications will adapt to the form factor. All of this is automatically and integrated part of the framework. MAF even ships with a skin that makes the apps look like native apps. If you want your applications to have a look and feel beyond what is deliver out of the box by Oracle, you need to skin them. In the next section you will learn a very handy technique that helps you to skin your MAF app.

Skinning There are many ways to change the look and feel of your MAF app. MAF uses cascading style sheet (CSS) language-based skins to make sure that all application components within a MAF application share a consistent look and feel. Typically you would create, or extend, a skin that changes how components display. By default, a new MAF application that you create uses the latest version of the mobileAlta skin family. If you want to know how the css for this skin looks like, you can find it on your file system in the www\css directory at the location where you deploy folder is located. Typically this would be: <your_work>\<app_name>\deploy

For iOS deployments, the www\css directory is located within the temporary_xcode_project directory. For Android deployments, this directory is located in the assets directory of the Android application package (.apk) file. However, this only gives you an idea of what Oracle uses to create the apps look and feel. What if you want to totally change the way the app looks? You need to create your own custom skin. This can be a very time consuming task. Luckily there are tools available that can help you to do this much more effective. These tools and rticks enable you to do actual ‘live’ skinning of your application. Lets start with skinning an iOS app. For that you can use Safari. Safari has a develop menu that enables you to look at your MAF app in a completely different way. When you use this option, you can actually see all HTML Javascript and CSS that is part of your app. You need to activate this from the preferences menu of Safari, in the advanced tab, as you can see from figure 1:

Figure 1: Enabling the Developmenu Once you have enabled this option, you will see the extra option in your Safari menu. In this menu you will find the iOS Simulator and within that you can select the boostrap.html file that contains your page as depicted in figure 2:

Figure 2: Develop menu This will open the Safari Web Inspector Console that shows everything regarding the active ‘page’ in your iOS Simulator, such as the DOM, the css and javascript. With access to all this information you can now start to build your own css. To make this whole process productive and effective you would create an empty css file first and add that to you MAF app. Next in the Safari Web Inspector Console, you can do live skinning and add the entries to your empty css file, thus saving them for use in your MAF app. That is in short how you setup your ‘skinning’ environment for iOS. Now how does that work for Android? Android supports more or less the same method. Instead of using Safari, you now use Chrome. In your Chrome browser, go to the following location: chrome://inspect This will open the device inspector page (figure 3). Here you should see the WebView instances on the emulator or the connected device. You could also open the page by navigating to Menu > Tools > Inspect devices.

Figure 3: Device Inspector

Note that MAF apps running on your device will only show up if you enabled Javascript debugging: # JavaScript debug settings (Android only) javascript.debug.enabled=true

Now you can start changing, for instance, the colors of the title or the font style of labels. In the CSS Pane, you can lookup the class that your component uses to get its style. You can change that and thus change the property for everything that uses this class. However a better approach would be to leave the default as is and create a new class that can be reused for this property across all your AMX views. You should try some varieties before you actually create the class, so you have it right.

You can test your styles by adding them directly to the element using the CSS window. When you select a component on your app, the corresponding css entry is shown in the ‘Styles’ pane, as can be seen from figure 4. A nice bonus is that the CSS editor gives you auto-completion help on CSS. The running app is actually mirrored in the Developer tool.

Figure 4: Live Skinning in Action

In this section you learned how to create custom skins with tools outside of JDeveloper (or Eclipse). There are some other handy tips that can really help you to kick start you MAF development. In the next section you will find a couple of them. Some more handy tips to know

While developing an MAF app, you will code in your favorite IDE, JDeveloper or Eclipse. However, as you could read in the previous chapter, there are also other tools and commands that could come in handy.

For instance, what if you want to start iOS Simulator in an easy way, that is without having to deploy from JDeveloper or without having to start XCode? In fact this can be done and is very easy. You can invoke the iOS Simulator from the command line.

You can either do it directly by invoking the command directly, or you can create an alias for that command and use that alias to invoke the iOS Simulator. Both can be seen from figure 5.

Figure 5: iOS from CommandLine

A final handy tip for iOS is related to log files. It can be very cumbersome to find the log file for the app that you are debugging. The iOS simulator creates log files per device instance per app. Unfortunately these files do not have a really logical name. The Devices can be typically found at the following location.

/Users/<yourName>/Library/Developer/CoreSimulator/Devices

A look at the filenames (figure 6) reveals the challenge:

Figure 6: Where is my device

It is difficult to find the device that you are debugging. You can order the files by time and hope that the newest one is the one that you are debugging. Once you found your device in the list, you will find yourself with the same challenge when you want to find the log file of the app that you are debugging.

The log file that you are looking for can finally be found at:

/Users/<yourName>/Library/Developer/CoreSimulator/Devices/<device>/data/Containers/Data/Application/<app>/Documents/logs

To circumvent all this trouble it is very good to know that JDeveloper has an option that enables you to tell where the log file should be stored. In the iOS run configuration in JDeveloper you can enter your preferred location of the log file (figure 7).

Figure 7: Custom Logfile Location

This is the solution to the log file challenge. The only issue with this solution is that you now have only one log file, meaning that it is overwritten when you run a new app.

Summary This manuscript shows a few tips and tricks of what can be done with tooling outside your IDE. It is not everything there is but it gives you an idea of the possibilities for skinning and development. In this manuscript I did not go into the MAF development tips and tricks. There is simply too much. In the corresponding presentation I will go into this in more detail.

Contact: Luc Bors eProseed Dijkgraafpolder, 3 3991 ZC Houten, Netherlands Telefon: +31 (0) 6 52 32 72 40 E-Mail luc.bors@eproseed.com Internet: www.eproseed.com