I wrote a couple of blogs in the past that talked about creating dynamic UIs based on a model layer that changes (example1 example2). Well in 12c there is a new ADF Faces component af:dynamicComponent that makes dynamic forms even more powerful. This component can be displayed as various UI components at runtime. This allows us to create Forms and tables with full functionality in a dynamic way.
In fact, we use this when you create either a form or a table component in your JSF page dragging over a data control. We now allow you to not specify each field in your UI but just say that you want to show all the fields in the data control.
In the demo below I show you how this is done, and then review how your UI automatically updates when you add fields in your model layer. For example if your DB changed and you used the "Synchronize with DB" and added the field to the VO - that's it no more need to go to every page and add the new field.
There are already multiple books about Oracle ADF out there, but the unique angle for this book is that it focuses on the free version of Oracle ADF - Oracle ADF Essentials. To increase the "Free" angle it also uses the free MySQL database throughout the book which is a nice touch that differs from the regular approach of using an Oracle database.
The book is around 250 pages long and as such it is not aiming for a very deep technical dive, but rather gives a very good overview of the various layers of ADF Essentials to someone who is new to the world of ADF. It covers the Fusion stack including ADF BC, ADF Faces, ADF Controller and ADF Binding. Going beyond the wizards it also covers the basics of adding code in managed beans and the business components layer.
The book starts with setting up your environment including JDev+MySQL and GlassFish, and then uses this environment to build a simple application that you enhance and add features to while going through the various chapters of the book.
Considering the target audience for ADF Essentials (Java purists), it might have been interesting to include in the book a chapter that describe integration with EJBs and POJOs as a source of data for ADF applications. I guess this is something for the next edition...
The book does address establishing a security layer for your ADF Essentials application - something that you get in regular ADF but you need to manually implement in the Essentials packaging.
Sten also goes beyond the basic intro level to cover some of the topics he also covered in his other book about enterprise ADF Development. He includes chapters about debugging, deployment and library usage and also addresses team development - which is a nice touch.
Overall the book can provide a great introduction to ADF for a developer who is completely new to the framework. The fact that is uses a completely free stack should make it even more attractive. For developers who are looking to leverage the free version of ADF this is right now the only book out there to cover that part of the framework (Glassfish configuration etc).
With the new Oracle Cloud offering you no longer need to install and manage the runtime platform for ADF applications. You can use a hosted instance of Oracle WebLogic and the Oracle Database to host your application.
Deployment to the cloud is quite straightforward, and you can do it directly from inside JDeveloper.
Here is a quick video showing you how to first create your database objects and then deploy your application to the cloud.
One small point, in the demo you don't see it but I also used the option to import the data into the tables.
To do that scroll the cloud cart to the right and check the check box for data.
Responsive web applications are a common pattern for designing web pages that adjust their UI based on the device that access them. With the increase in the number of ADF applications that are being accessed from mobile phones and tablet we are getting more and more questions around this topic.
Steven Davelaar wrote a comprehensive article covering key concepts in this area that you can find here. The article focuses on what I would refer to as server adaptive application, where the server adapts the UI it generates based on the device that is accessing the server.
However there is one more technique that is not covered in that article and can be used with Oracle ADF - it is CSS manipulation on the client that can achieve responsive design. I'll cover this technique in this blog entry. The main advantage of this technique is that the UI manipulation does not require the server to send over a new UI when a change is needed. This for example allows your page to change immediately when you change the orientation of your device.
This changes the properties of the same styleClasses that are defined in my application's skin.
Here is a quick demo video that shows you the full application and explains how it works.
Update - since running this demo I found out that in 12.1.2 you get better results if everything relating to the style is defined just in your template and not spread in your skin file too (as shown in the video)
So For those looking to replicate this, here are the basic files:
<?xml version='1.0' encoding='UTF-8'?> <af:pageTemplateDef xmlns:af="http://xmlns.oracle.com/adf/faces/rich" var="attrs" definition="private" xmlns:afc="http://xmlns.oracle.com/adf/faces/rich/component"> <af:xmlContent> <afc:component> <afc:description>A template that will work on phones and desktop</afc:description> <afc:display-name>ResponsiveTemplate</afc:display-name> <afc:facet> <afc:facet-name>main</afc:facet-name> </afc:facet> </afc:component> </af:xmlContent> <meta name="viewport" content="width=device-width, initial-scale=1"/> <af:resource type="css">
Mobile users are getting used to specific touch gestures, such as swipe, in their applications. And sometimes you might want to incorporate those gestures as a means for navigating between pages in your ADF Mobile application.
You can do this by using the amx:actionListener component and having it bind to a method in your backing bean.
The basic ingredients:
In an AMX page add an actionListner to a component for example:
I blogged before about the support for tablet and touch device rendering with ADF Faces. Release 12c brings together features that were introduced in previous patches (such as 18.104.22.168) into a single line of code and even adds more features in this area.
To show you what ADF Faces does automatically for you, I re-recorded the interaction with the houses demo that I showed here, but this time on an iPad.
Things to note:
Switching from stretch to flow layout (eliminates scroll bars and allow swipe scroll)
Table pagination instead of scroll bars
HTML5 rendering for data visualization components instead of Flash
Drag and drop and tap and hold support on device
Swipe support on objects such as cards in a hierarchy viewer
Maximize area support
New tablet style UI components (Springboard and list view for example)
It's a single application that runs on both the regular and mobile browser.
The only thing I needed to do is use an EL for two properties (maximize and dimensionsFrom) on the top containers in the page that will switch the whole page to do flow layout on touch devices. You would usually use this in your page template for the application.
The new JDeveloper 12c comes with some pretty cool ADF Faces components that can make your applications (or demos) look even better.
For the session I did at the Kscope13 conference I built a small application that showed off some of these components, and now the JDeveloper 12c is available for all to see, I thought I'll share a short video of the application.
It highlights the runtime behavior of the new components and shows you the basic code structure for each.
Check it out:
Here is the code that is uses in the pages:
Springboard (inside the center of a panelStretchLayout):
Just got back from ODTUG's kscope13 conference which had a lot of good deep ADF content. In one of my session I ran out of time to do one of my demos, so I wanted to share it here instead.
This is a demo of how Declarative View Objects can increase your application's performance.
For those who are not familiar with declarative VOs, those are VOs that don't actually specify a hard coded query. Instead ADF creates their query at runtime, and it does it based on the data that is requested in your UI layer. This can be a huge saver of both DB resources and network resources. More in the documentation.
Here is a quick example that shows you how using such a VO can automatically switch to a simpler SQL instead of a complex join when needed. (note while I demo with 11.1.2.* the feature is there in 11.1.1.* versions also).
The demo also shows you how you can monitor the SQL that ADF BC issues to the database using the WebLogic logging feature in JDeveloper.
As a side note, I would have loved to see more ADF developers attending Kscope. This demo was part of the "ADF intro" track at Kscope, In the advanced ADF track you would have been treated to a full tuning session about ADF with lots of other tips. Consider attending Kscope next year - it is going to be in Seattle this time.
This entry might seem a bit trivial, but from experience I know that sometime new features that are added to the product are not detected by developers who just continue working in the "traditional way". Well here is a quick update on such a feature - PPR:
Somewhere along the way* ADF got more advanced, and today there's a simpler way to do this without the need to define the partialTrigger property for your calculated field. Instead you just define dependency between fields in the model layer (ADF BC) and your View layer automatically handles the update to the screen. This is driven by the default use of the "ppr" mode for the ChangeEventPolicy of iterators in your page's binding layer.
Here is a quick demo that shows you how to define a calculated field that depends on the values of two other fields, and have it automatically display the value when the other fields are set.
For the record here is the bit of groovy code used in the calculated field:
* - I'm not exactly sure in which version of JDeveloper this became the default behavior, but I just looked in 22.214.171.124 and the default changeEventPolicy is not PPR for a page - but it seems like you can change it to ppr to get it working.
I posted before on how to do code level debugging in your ADF Mobile application, but sometimes debugging is an overhead and you would rather just put out some log messages that will allow you to track what's going on where.
You can use a line of code like this in your code:
Logger.getLogger(Utility.APP_LOGNAME).logp(Level.INFO, this.getClass().getName(), "Shay","We invoked the button");
Then don't forget to set the right level of logging (and possibly the log message format) in the logging.properties file under your META-INF directory.
The logging chapter in the doc, doesn't mention where to actually see the messages being logged.
One utility that you can use to see your log messages comes with the Android SDK - look into the tools directory there and you'll find the ddms.bat file - run it and you'll be able to see the log messages from your application.
On the side of that utility you can also define filters to just show you the messages you are interested in.
Here is a quick demo showing how this all works together:
By the way - a comment I got pointed out that ddms is old school and you should be using the new monitor.bat at the same locaiton. This will basically work just the same and will look like this:
A new component that showed up in the JDeveloper 126.96.36.199 release is the af:listView component. This component will become more and more popular as more people target tablet devices with ADF Faces UI. The component allows you to create a scrollable list from a collection of data, and it also does fetching with ranges so you don't get too much network traffic. If you ever used a contacts list on a smart phone you'll recognize the list view source of inspiration - check out the runtime demo of the component here.
The component was actually backported into 188.8.131.52 from the 12c version - and while in the 12c version of JDeveloper there is better design time support for adding and binding a listview to a page, in the current release the work will mostly be manual.
However, for the lazy developer there are some shortcuts you can take to create the list component faster.
Here is a short video that shows you how to leverage an existing table component on your page to make the creation of the list component easier and with more functionality.
The dial gauge is a very visual way to show data in an application - and it has been there in Oracle ADF Mobile since 11.1.2. However in that release you could only use a range of 0-100 - well now you can do better with the new ADF Mobile version.
But there is one little trick to how this works compared to the way it works in the regular web ADF Faces gauge component, and if you don't notice it you might think you are still stuck in the 0-100 days - The trick is the new background property.
If you are working in the property inspector you can right-click in the property to see explanation and the available values.
Or if you work in the code editor just use the code insight to choose the value you want.
For defining your own range you'll want to use the costum options.
Then you can get something that looks like these:
Also note that you can control the indicator type with the indicator property.
The new Oracle JDeveloper 184.108.40.206 just went out with a bunch of new features for ADF Mobile developers. Read more about it here - or watch this video.
One small feature that somehow got left out from the above two links is that there is a new UI component offered in ADF Mobile now - Star Rating.
The official tag name is dvtm:ratingGauge - and you can find it in the DVT Mobile AMX component palette under the Gauge section.
You can configure how many stars you want to show for your rating in the data section of the property inspector, and you can even specify to advance in half steps.
The component supports multiple shapes that you can choose from - star, diamond, circle, rectangle
You can also specify a different shape to be displayed for the unselected spots.
The code for the above 3 components is: <dvtm:ratingGauge id="ratingGauge1" value="2.5" maxValue="3" shape="circle"/> <dvtm:ratingGauge id="ratingGauge2" unselectedShape="dot" inputIncrement="half"/> <dvtm:ratingGauge id="ratingGauge3" shape="diamond"/>
JDeveloper 220.127.116.11 just hit the streets and among the new features it contains are several new data visualization ADF Faces components including timeline, treemap, and sunburst.
I got to play with the sunburst component a while back while building some internal demos - so I thought I'll provide a quick overview of some of the things you can do with it, and how to work with it at design time.
The sunburst component is used to visually show numerical data along one or two axises relating to something. One axis of data will show as the size of slices and the other data will show as a color. You can think about it as a two axis pie chart. The sunburst also allow for drilling into detail levels.
In the below example I'm showing just one set of data that has to do with the total orders broken in several levels - region->country->customer.
So here is the demo:
For those interested in the actual JSF code it is below:
With so many developers out there working with Oracle JDeveloper and Oracle ADF there is a lot of excellent technical content published about JDeveloper and ADF in blogs and other places on the net. But how do you find the information that is relevant for you? How do you track down the entry that will solve your specific ADF question?
Well we at the JDeveloper product management team have been hard at work over the past years tracking and tagging every blog entry that we found. This resulted in a repository that had close to 4,000 how-to's about Oracle ADF - all indexed and searchable with keywords.
However the site that hosted this repository (connotea) is closing, so we took the repository and moved it to a new location. In the process we cleaned it up, removed some non-working URLs, and fixed others, and did some cleaning on tagging as well.
Note that you can sign up for the rss feed of this site to get notified when new blogs are being posted. Or if you prefer you can just track the same feed through our twitter account at http://twitter.com/JDeveloper
In parallel I created a small extension that will allow you to also search the repository and show the results for a keyword directly inside JDeveloper.
You can download this extension through help check for update. Or directly here.