Debugging Oracle ADF Mobile Applications - Part I

I've been involved with the Oracle Mobile Application Framework (a.k.a. ADF Mobile) lately and one of the things developers typically ask me during my talks is how to debug mobile applications created with the Oracle framework.

To give you a little bit of context, the Oracle Mobile Application Framework does generate a hybrid app (native container + HTML/JavaScript) so standard debugging techniques apply here. The Oracle Mobile Application Framework has some other capabilities like running Java code on the device but that's a topic for another post.

So, there is more than one way for debugging Oracle-generated (read hybrid) applications depending on the platform your are own and the target device you are working on. I'll try to isolate specific use cases on different posts so you don't get distracted with irrelevant stuff.

The first one on the list is debugging Oracle Mobile Applications on iOS and Mac OS X.

The ingredients are:

- Oracle JDeveloper 11.1.2.4.0
- XCode 5.1 (for the Simulator)
- Apple Safari

The setup is pretty straightforward and here is what you have to do:

On the iOS Simulator (works on iOS +6.x), go to Settings > Safari > Advanced > and make sure Web Inspector is turned ON.

Open up the Safari web browser and enable the Develop features. To do that, go to Preferences > Advanced and check the Show Develop menu in the menu bar.

If you don't have an app deployed to the simulator yet, this is a good time to do so. Open up JDeveloper and deploy a simple application to the simulator (you can use the same approach with a real device but I'd rather start debugging on the simulator).

Once you have the app installed/deployed and running on your iOS simulator go to Safari and select the Develop menu.   

You should see something similar to the picture below where you select the iPhone Simulator and then the name of your application (in my case - MyWeatherChannel). The below HTML pages are part of your application and highlighting one of them in the Safari menu will also highlight them on the iOS simulator.

Selecting that highlighted page will bring Safari's Web Inspector up. Click on the first icon on the left (Resources) and that should show you the DOM for the page you selected.

At this point, you have many options but you may want to try enabling the Styles (click on the Styles button on the top menu) and make changes to the existing components on the page. That would give a good idea on what to look for when doing further debugging.

You can also manipulate the DOM to change the name or size of the labels and see how they are going to look like.

What is also very interesting are the Timelines (click on the Timelines button on the top menu) where you can see how long it takes to make a network request, to load different components of your application and the details of JavaScript calls.

The last thing I'd like to show you here is the option to enable the Console (click on the Console button on the top menu) and you can many other things like triggering commands or watching the console output. You can also reload the application by pressing Cmd + R.

In the test above, I just fired an alert command (alert("My Test Message");) from the console and saw the JavaScript alert on the simulator.

You can also change the current values (by also manipulating the DOM) in the app like the example below where the command: document.getElementById("ot3").innerHTML=72; changes the value of one the fields in the app.

Happy debugging!

Searching for the same thing over and over again...

I have to admit that I very often run queries on Google for things I've searched before and many times I end up with the exact same results. I'm also a big fan of Evernote where I keep my notes organized per project, topic, event, place, etc...

Luckily, the Evernote Web Clipper has a feature that seems to solves the issue above allowing you to simultaneously search on Google and also on your Evernote notes.

To enable that capability all you have to do is to right-click in the Web Clipper and then make sure you have the Related Results checkbox enabled. I believe this is available only in Google Chrome and Apple Safari for now.

Evernote Web Clipper Related Results to add simultaneous search capabilities with Google

On your next Google search, you should be able to see results similar to the following picture (with the Evernote results boxed in to the right).

Removing Click Delays on Mobile Browsers

If you ever wanted to get rid of the 300ms delay between a physical tap and the the firing of a click event introduced on mobile browsers then the polyfill those guys from Financial Times created is the answer you are looking for.

Available on GitHub, FastClick is a simple, easy-to-use library for eliminating that delay and make your application feel more responsive to, for example, the touch of a button.

Have a look and fork the project at: https://github.com/ftlabs/fastclick 

You can also give it a try running one of the demos on your mobile device pointing your browser to: http://ftlabs.github.com/fastclick/examples/layer.html (it won't work on your desktop browser as the library doesn't attach any listeners to them).

Fascinating and job well done...

Quick Access to Mac Dictionary

Sometimes you want to know the word definition but don't want to navigate to a website to know what it really means. So, here is keyboard shortcut that will help you a lot faster to get what you need.

1) Hover your mouse pointer over the word you wish to be defined (works in Safari, Mail and other Apple apps). I haven't tried in all of them yet.

2) Press control + Apple Command + D. The word will be highlighted and a Dictionary pop up box will show in the screen with the word definition.

3) Click anywhere in the screen to get rid of that pop up box.

There is also another approach to this using a very cool app called Alfred. Alfred is a must-have productivity tool that lets you automate a lot of things. You can also use Alfred to give you the word definition by just calling the Alfred utility (I use control + space bar) and then typing define and the word you want. The word definition should be presented on the screen for you.

Alfred has so many functions (no need to say that I'm a big Alfred fan already) but that would be a topic for another post.