The basic prerequisites for remote debugging MAF applications on the Android platform is to use :
- Chrome browser version 32 or above on your workstation.
- Android device or Emulator based on Android version 4.4 or above
If using a hardware device, the device should be connected to the workstation with a USB cable and USB debugging should be enabled on the device. To enable USB debugging on your Android device, go to Settings > Developer options. On Android 4.2 and newer, the developer options are hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Then, return to the previous screen to find Developer options. The Android documentation can be found here.
Debugging your MAF application
On your Chrome browser on your workstation, go to the location about://inspect or chrome://inspect to open the device inspector page. Here you should see the WebView instances on the emulator or the connected device. Alternatively you can open the page by navigating to Menu > Tools > Inspect devices This opens up the device inspector page shown below. The page lists all emulators and connected devices that have debuggable browser windows or webViews opened. The list refreshes automatically when devices or WebViews/Browser windows are opened or closed.
If the application’s web view does not show up on this page, then try the following :
Make sure that ADB is running by executing adb start-server from a command line
Make sure that USB debugging is enabled on the device and make sure that you accept the RSA fingerprint of the computer.
Make sure that the checkbox for Discover USB devices is enabled on the Chrome inspect page on your workstation.
Editing the Markup on the fly
I can directly edit the HTML and the Styles and get real time feedback on how my my UI design would look and behave on a device to achieve pixel perfect styling on my MAF application. To demonstrate the versatility and power of this approach, I pick the DOM element representing my Title in the app, and edit the HTML directly inside Chrome tools. I edit the Title text as ‘Realtime Editing’ and my device’s UI immediately reflects the change. Note that the highlight on the device is due to me selecting the DOM element in Chrome tools.
Real time CSS Styling
CSS styling is something that takes a lot of refinement to get right. Using the approach you can style MAF applications easily and refine your CSS quickly and easily saving you time and effort. To demonstrate this, we can change the color of the title and the font style. In the CSS Pane, I see that the present color is coming from a class named ‘appIcon’. I could change this and change the color for everything that uses this class, but thats not really what I need. I need to create a new class that I can reuse for title text across my AMX views. Before creating the class though, I need to try out my Styling on this element to tweak it until I get it right. I add the styles directly to the element using the CSS window. I could have also done this by editing the DOM node like before, but the CSS editor pane gives me auto-completion help on CSS. Like before, the UI on my device updates in real time. Notice the red color on the title and the italic styling of the font. The next logical step would be to define this as a class so that I can reuse the style definition elsewhere. To do this, I can edit the downloaded CSS files and define new classes here. For the purposes of this article, I have defined a custom CSS style-sheet that I included in my MAF feature, and I had named it notification.css. Looking back to the earlier screenshot, you can see that the class alertIcon, we saw earlier was defined in notification.css. I switch over to the ‘Sources’ tab in by tools window, and locate the CSS file. This file is opened inside the tools window, which gives me a rudimentary CSS editor with syntax completion. Once I’ve defined the CSS class, I can go back to the source and use this class on the DOM node. Note that changes made to the CSS file are made on the file present in the deployed package. You need to copy over the CSS back to your design time, once the styles are complete.
All site content is the property of Oracle Corp. Redistribution not allowed without written permission