What did you miss at Oracle OpenWorld regarding WebCenter, The Cloud, and Front-End Website and Portal Development? Find out in this webinar.

fbweb_003072Fishbowl Solutions has been attending and sponsoring Oracle OpenWorld for many years, and every year we get questions from customers asking why they should attend, how is Oracle OpenWorld different from Collaborate, and if they do attend what sessions should they go to? Although there is no single answer to these questions, our general response is OpenWorld provides so many continuous learning, networking, and fun events that going isn’t hard to justify. However, as the old saying goes “you get out of it what you put into it” definitely applies to OpenWorld. The event is so big (60,000+ attendees), so busy (1,000+ sessions), and so much fun (Elton John concert), that first-time attendees and even alumni need to build out their schedules before the event. This can help ensure they are going to the sessions that will teach them something new that they can apply within their work, or they learn about the road map for the product areas they manage so that they can understand and plan for upgrades, new technology, or integrations.

Even with this proactive planning, attending OpenWorld just isn’t an option for all WebCenter customers, so my colleagues and I at Fishbowl will be hosting a webinar on December 10th that will give you a recap of what you missed as it applies to Oracle WebCenter 12c; The Cloud – Sites Cloud Service, Documents Cloud Service, Mobility Cloud Service, and Process Cloud Service; and new front-end development technologies that can be used for WebCenter-based websites and portals. The webinar will include a Q & A session, so even if we don’t cover a topic that you are interested in or have a question about, our WebCenter and Cloud experts will be available to fill you in. The webinar details are included below, and we hope you will be able to join us.

Date: December 10, 2015
Time: 1:00 – 2:00 PM EST, 12 – 1:00 PM CST

Register here.



WebCenter Portal & SPA (Single Page Application) – Enhancing ADF UI Design and UX Functionality

First of all, you may be wondering: what is SPA and how can it improve Oracle WebCenter Portal?
It’s the future, trust me, especially when it comes to providing the best possible UX and flexible UI to your users and enhancing the power of ADF Taskflows with a radical UI overhaul. ADF is great for creating rich applications fast, but to be honest, it is limited in its capability to provide that rich flexible HTML5 UX  through the ADF UI components and to create that truly interactive design that we all seek in today’s modern web based apps and portals. If we are honest, the developer (or more importantly, the designers) are constrained with the out-of-the-box ADF components/taskflows and their lack of design flexibility, unless they want to create their own and extend the render kit capabilities (but extending the render kit will be for another post – today lets cover SPA with Portal).

SPA fits in perfectly – overhaul the ADF UI using today’s modern techniques and design agency with the skills to build responsive components using the latest frameworks and libraries, such as knockout, backbone, requirejs, socket.io with reactive templating using mustache, handlebars to compliment ADF and WebCenters services via its REST API.

But before taking the next step and thinking SPA is right for you, read these warnings!

  • The taskflow interface is developed using the latest framework and libraries – not all partners and web design agencies are forward thinking and may not be able to develop and achieve SPA components for WebCenter Portal.
  • The cost can be greater, as the interface is usually designed from the ground up and requires browser and device testing. But if it’s done well, it will outmatch anything that the ADF UI layer can provide your users.
  • Experience goes a long way, especially with matching your design agency with ADF-experienced developers to provide responsive web services and inline datasets.

So what is SPA?

A single-page application (SPA) is a web application or website that fits on a single web page with the goal of providing a more fluid user experience. In an SPA, either all necessary code – HTML, JavaScript and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page (similar to ADFs PPR) as and when necessary, reducing the page load and speeding up page load times.

With our use of SPA within portal, the SPA is made modular and wrapped within a taskflow container, providing the rich capability to have multiple components that can be easily dropped into a page while providing rich interaction between components that are context aware by simply adding them from the resource catalog from within the WebCenter Composer view.

Workspace manager

Here is an example Photoshop design that we can easily convert into a pixel perfect functioning SPA taskflows we have developed that enables logged in users to manage their own list of Application and Spaces. All server side interaction is handled via ADFm (model) layer, which enables the ADF life cycle to be aware of REST calls and prevent memory leaks or other possible session issues. While the UI layer is all custom with reactive dynamic templating that is far superior and faster than the current ADF, PPR calls, as all the interaction and updating of the template is handled client side. Another great thing is that this template can easily transform and support modern responsive design techniques and can be consumed by mobile devices, and could also be deployed to other app environments like Liferay, SharePoint, and WebCenter Content, as the UI layer does not rely on ADF calls and service requests can be proxied or CORS enabled if the calls are handled by AJAX and are not WebSocket requests.

Click here for hi-resolution

Here you can see another example of a SPA Taskflow in action displaying the JIVE Forums (above), compared against the out of the box ADF Forum Taskflow (below).


If you are looking to create applications fast that are functional, use the out of the box taskflows or develop your own ADF components entirely in ADF with your development team and customize the ADF skin to improve on the ADF look.

However, if you are looking to take the experience to the next level and want to invest more to create visually interactive modern and rich dynamic experiences to your users, bring in a good UX/UI team that can help transform your interface layer while enabling components to have the potential to be deployed across multiple platforms while maintaining the power of the ADF back end.

Side Note

I’m currently co-authoring a white paper on modular SPA for ADF taskflows providing examples and different development techniques that can be used to enrich the UI. I hope to get this out to you and on OTN in the next 6 months so keep a look out for it.

Collaborate 14: Taking the WebCenter Portal User Experience to the Next Level!

Come join me and Ted Zwieg at Collaborate14 on our presentation Taking UX and development to the next level.
Fri, Apr 11, 2014 (09:45 AM – 10:45 AM) : Level 3, San Polo 3501A. 

Here is our session overview –

Taking the WebCenter Portal User Experience to the Next Level!


Learn techniques to create unique, award winning portals that not only supports todays need for Mobile responsive and adaptive content but take the next steps towards innovative design – enhancing both the user journey and experience for creating todays modern portal and the way in which developers  can expand the reach and potential of the portal with these new modern techniques.
Attendees will not only learn about new approaches but will be shown live portals using these techniques today to create a modern experience.
Learn how to develop your portal for future and enable marketing/design teams to react and generate interactive content fast with no ADF knowledge.


Target Audience

Designed for users wanting to learn the art of the possible and discover what is achievable with WebCenter Portal and ADF – creating compelling user experiences and keeping up to date with modern techniques and design approaches that can be combined to create a faster more interactive ways of navigating through portlets and the Portal.


Executive Summary

This session will demonstrate a couple award winnings examples of live clients who have taken their ADF WebCenter Portal environment to the next level – showing how by combining HTML5 techniques, third party libraries and responsive/adaptive design with ADF; when used in the correct way can not only improve the performance but the way in which users and developers can interact with portal using modern web design techniques.


Learner will be able to:

  • Identify art of the possible with ADF. (everything is achievable…)
  • Discuss achievable concepts and methods to enhancing the ways in which users can interact with Portal.
  • Improved understanding of Responsive and Adaptive techniques – not only targeted for Mobile devices
  • Understand how to structure the portal for faster response times with new frontend techniques
  • Integrate with Non ADF third party components for a more dynamic experience
  • Developers will learn new methods to manage and maintain key core components

Android – Bridging the Gap Between Native and HTML5 Mobile Apps (ADF-Mobile And Cordova)

At Fishbowl Solutions; we’ve been looking at ways to enhance and bring the Android experience closer to that native experience that every user wants: – here are some solutions that we are using today to help bridge the Android <4.4 gap and also bring in the latest web technology like WebSocket and WebRTC support not available with either cordova or ADF Mobile today..

When it comes to mobile development with ADF-Mobile or Cordova (HTML5) you will notice that there’s a significant difference in performance and support with the HTML5, CSS3 standards between Android and IOS when building HTML5 hybrid mobile apps.

Today; IOS is closer at bridging the gap – giving it a near to native experience in IOS7; – however with Android if your running a device lower than KitKat OS you will still notice a big hit with performance – this is due to ADF-Mobile and Cordova surfacing the standard webview with an old WebKit engine using the default browser with android and not the chromium browser (now part of KitKat).


With those developing ADF-Mobile be aware of the following -

- An old version of jquery (1.7.1) is used with the AMX views (1.7.1 was not designed for mobile) – hopefully Oracle will be upgrading this to the latest supported jquery release targeted for mobile or alternatively swap to mobile jquery syntaxed framework like Zepto.js.

– You can push the updates in manually – this will improve response times and animations;  however be aware that some jquery methods may of been depreciated and may cause you some issues – although I have not come across anything major when manually enhancing ADF Mobile.

There is also a bug with the initial load times of apps in ADF Mobile (Android) – I believe Oracle are working to fix this with the next ADF-Mobile update – this is outside of Cordova or the webview issue and I believe to be more related to the JVM setup. (Correct me if I’m wrong – anyone…)

Cordova 2.2.0 is also used on ADF Mobile (the currently cordova release is 3.4.0) – I’m hoping in the future that Oracle will make it easier for us to upgrade the Cordova Release and supply better release notes on ADF Mobile compatibility with Cordova.
i.e. 2.x is supported in the current release 3.x to be supported on the roadmap – 9 months time, etc.

– If you run into any issues with ADF Mobile; its worth taking a look to see what issues/bugs were in Cordova 2.2.0 release and follow up with Oracle Support to supply an fix for the issue or risk patching the framework yourself.


Creating that Native UX with Android (Cordova and potentially ADF-Mobile)

At Fishbowl Solutions we split our Apps to a Single Page App view outside of AMX Business component view for content management – this allows our clients web and marketing teams to quickly enhance content and brand mobile apps; without the need to learn ADF-Mobile using best practices for developing hybrid html5 mobile applications. This approach allows us to deploy our core apps to Cordova or lifecycle management systems like IBM-Worklight when clients do not need the power of ADF-Mobile and JAVA support to integrate with other Oracle systems.

Suggested Frontend JS Libraries (Cordova)
After working with Phonegap/Cordova for the last 4 years these are my recommendation of libraries to use for mobile app development outside of ADF-Mobile AMX views.

Rethinking Best Practices

1. ReactJS developed by Facebook/Instagram is a perfect open sourced library for developing Single Page Apps optimised for mobile development with its virtualised DOM and JS Engine makes animations and transitions effortless – If you are new to ReactJS you need to watch Rethinking Best Practices to give you an underlining understanding and appreciation of why virtualisation of DOM makes complete sense – when developing mobile apps – no need for acceleration on your browser to create clean transition touch events. Alternatively you could take a look at AngularJS by Google; but in terms of performance for mobile I personally believe ReactJS is the way to go even though its still fairly new to the industry – it will provide a closer native experience if used correctly.

2. Director part of the Flatiron framework is a great match for Reactjs – it’s a great URL Router to handle page history and template requests for single paged mobile apps.

3. RequireJS library – is a module loader that will improve the speed and quality of your code; compressing both CSS files and JS libraries into a single compressed file.

4. i18next translation library is a great solution for marketing teams to manage internationalisation string for your apps.

5. jQuery 2.1.0 the latest release is now optimised for mobile development a year or so ago I would of recommended Zepto.js but today jQuerys latest release is just as good for mobile development.

Getting Rid of Androids Old WebKit Browser and enhancing with Chromium and Blink!!

So this is where things get interesting!…

I’ve been working with the Crosswalk-Project runtime this last month upgrading Fishbowl Solutions Mobile Cordova Apps – which in effect has given me the OOTB power and experience achieved with IOS7 Cordova apps and more!

CrossWalk Overview

At the heart of Crosswalk is the Blink rendering and layout engine – this provides the same HTML5 features and capabilities you would expect to find in any modern web brower ie webSocket webRTC etc..

Building on Blink, Crosswalk uses the Chromium Content module to provide a multi-process architecture, designed for security and performance.

For anyone developing Cordova or hybrid apps I’d recommend taking a look at this project and incorporating the runtime if you are working on Android Mobile apps.. This month we’ll be looking at the potential to incorporate this runtime with ADF-Mobile – we’ll let you know how we get on.



ADF Mobile – Packaged WebCenter Accelerator (Cordova Application)

[Fishbowl Solutions WebCenter Accelerator] [ADF Mobile]
[Portal, Content And BPM/SOA] 

At Fishbowl Solutions we’ve been focusing heavily on Mobile solutions over the last 4 years – working on both award winning native and hybrid apps as well as adaptive and responsive web sites and portals for tablet and mobile devices. Last year we decided to expand our reach with ADF Mobile and Cordova based hybrid applications targeting the WebCenter Suite for Android and IOS  (as well as Blackberry, Microsoft for those using plain Cordova or IBM Worklight).

Both Oracle and Fishbowl offer a suite of powerful Native apps available on the Android Google Play and IOS iStore; however these solutions to date are not extendible or brand-able from Oracles side or require customisations and consultancy services from Fishbowl Solutions to extend and enhance the native apps to meet unique client requirements.

With the Oracle ADF Mobile Framework java developers and clients can now easily pull together hybrid applications within JDevelopers visual app designer; however and unfortunately there are currently no Oracle supported open ADF Mobile application for the WebCenter suite that allow clients to easily extend and enhance existing functionality for their corporate users running on mobile devices – and currently the WebCenter apps are not targeted to provide the clean User eXperience for mobile devices and lack features like offline or native device support.

All existing WebCenter Apps that clients want mobile access too, now have to be rebuilt for mobile devices as either native or hybrid applications like the ADF Mobile Framework – so at Fishbowl we’ve decided to build out Fishbowl supported mobile app accelerators for WebCenter Spaces, Content and BPM/SOA (More to come on our Mobile Roadmap). That will allow both your Marketing (Web designers with no ADF knowledge) and ADF Mobile Development teams to extend and quickly and easily customise, enhance and build mobile applications that provide all of the key out of the box features that come with the WebCenter Suite more importantly if you don’t have a requirement for any of the modules these can easily be switched off until you need to enable them in the future – these can also be packaged as a single unified app or multiple individual applications based on your requirements.

The core Fishbowl WebCenter accelerators (Portal, Content, BPM/SOA) are packaged and cannot be customised directly this is so that we can send out software updates as we follow our roadmap for more integrations and accelerators to all our clients without the need to worry that our core accelerators have been tweaked – what we do provide is a key set of APIs and templates that enable you to easily extend, enhance, brand the application as well as create or extend the UI or User Flow of the app to support and integrate with customised bespoke client WebCenter services or custom portal taskflow services or even third party core business applications – empowering you to manage and maintain the app whilst we at Fishbowl provide the key core support, services and UI Shell for future WebCenter OOTB releases.

For more information or a demo – Please contact Fishbowl Solutions here.