Skip navigation.

C4: Content, Context, Collaboration & Community

Syndicate content
Content, Context, Collaboration & Community
Updated: 2 days 14 hours ago

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

Fri, 2014-04-04 05:46

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!

Abstract

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

The post Collaborate 14: Taking the WebCenter Portal User Experience to the Next Level! appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

How to get Google Glass, Cordova, HTML5 APIs Working (WebRTC, WebSockets).

Thu, 2014-03-27 08:04

One of the challenges I’ve noticed when developing with Cordova hybrid apps is the lack of support for the HTML5 APIs that work on desktop devices but not the default Android browser (Ice cream sandwich, Jelly bean) like webSockets and WebRTC.

Now, Google Glass currently runs on Android 4.0.3 Ice cream sandwich  and from the rumours circulating around the next update fingers crossed will put us onto 4.4 KitKat. (Can’t Wait!!)

The problem with Android 4.0.3 is that its running an old edition of WebKit customised to support Google Glass and added gesture support. Unfortunately if you’re developing rich internet applications with Cordova and want to use the latest support HTML5 techniques supported by desktop browser today – you just can’t as Cordova uses the default browser that is part of android..

Read on to find out how to get HTML5 APIs working with Cordova.

There are plugins out there ie here’s one for WebSockets.

Now for those looking purely for WebRTC support you could setup appRTC but I’ve seen a lot of bugs and issues reported with using this on glass. Another option would be to look at Addlive and try out their SDK which you can see working here with Google Glass.

A third option which I’ve gone for is to package Chromium with Cordova and use it as the default browser as it supports the majority of HTML5 APIs (ie – WebSockets, WebRTC and more..).

To do this there is a project called Crosswalk that’s designed for HTML5 mobile apps to bring in support for chromium with the blink engine on Android 4.x+.

I’ve used this with 3 custom apps I’ve built and it works great with Glass and cordova! Now when Glass KitKat arrives you should have the use of the Chromium browser as the default browser with cordova without the need to package Crosswalk. Although this does have the added benefit of blink and if you are like me and have created a single Android app to support 4.x+ devices I feel it just makes sense to spend that extra time to get Crosswalk packaged in with your app.

Here’s a quick simple example of getting your webcam from either your phone or glass to stream into the app/browser viewport.

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">

	<title>Video Cam Display</title>
</head>
<body>

	<video />

<script src='js/lib/adapter.js'></script>
<script>
	var constraints = {
		video : true
	};

	function successCallback(stream) {
		window.stream = stream;
		// stream available to console
		var video = document.querySelector("video");
		video.src = window.URL.createObjectURL(stream);
		video.play();
	}

	function errorCallback(error) {
		console.log("getUserMedia error: ", error);
	}

	getUserMedia(constraints, successCallback, errorCallback);
</script>

</body>
</html>

You can grab the adapter js file -from https://code.google.com/p/webrtc/source/browse/stable/samples/js/base/adapter.js
This provides additional browser support for WebRTC.

Tip
For those using Glass make sure to update the constraints to prevent overheating and lag by reducing frame-rate and camera size.

You can play around with constraints by editing the values from here:  http://src.chromium.org/svn/trunk/src/chrome/test/data/webrtc/manual/constraints.html

 

 

 

 

 

 

The post How to get Google Glass, Cordova, HTML5 APIs Working (WebRTC, WebSockets). appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

My Experience Developing for Google Glass using Cordova

Wed, 2014-03-26 03:45

I managed to get my hands on a Google Glass Explorer kit R2 last week!

Last week in the post – all the way from Minneapolis Fishbowl HQ arrived my Google Glass Kit. I’ve been fortunate and had the opportunity to play around and try these out thanks to the Oracle AppsLab Team sporting theirs at many of the Oracle events; but never the opportunity to write an app.

So as you can imagine ideas began forming – what could I develop with these?

Read on to find out some of my first experiences developing for Google Glass using Cordova.


So the first thing – why not push Fishbowl Connect (Fishbowl Solutions Hybrid Cordova based Android App) onto Google Glass and see what happens.. “Gulp”!

Plugged in Google Glass installed the drivers -

Android SDK Manager

 Checked to see if Glass was detected -

adb devices

Then side loaded Fishbowl Connect into the Google Glass.

adb install fishbowlConnect.apk

The app installed successfully but unfortunately nothing displayed under the installed app list.

Next step update the Cordova app with Google Glass plugin -https://github.com/aphex/cordova-glass-core

Provided by the clever guys at Sencha.

cordova plugin add https://github.com/aphex/cordova-glass-core

Updated the {app}/platforms/android/res/values/glass.xml

<string name="app_launch_voice_trigger">Launch Fishbowl Connect</string>

Package and side load the app in!

Using the voice command -

“OK Glass, Launch Fishbowl Connect”

Wow, it works!.. Well, when I say works – the voice command “Launch Fishbowl Connect” is recognised and it displays the first screen of Fishbowl Connect (Win!) but the problem is that there’s no screen touch support with glass. (don’t try it! you might poke your eye out).

With Glass you just get the following inputs voice commands and gesture support via the touch pad (tap, longpress, swipeup, swipeleft, swiperight, twotap, twolongpress, twoswipeup, twoswipedown, twoswipeleft, twoswiperight, threetap, threelongpress).

Luckily with adaptive design it was possible to extend the app and supply a new set of templates targeted and loaded for Glass to allow you swipe through the Fishbowl Connect options.

It’s still early days for Fishbowl Connect and Google Glass but its a great start. And as ADF-Mobile is cordova based it should be possible to install it onto Google Glass unfortunately the AMX view don’t support the gestures but I wouldn’t be surprised if Oracle have been working on that behind the scenes just waiting to release a wearables interface for ADF-Mobile.. Not only for Google Glass but other wearable devices smart watches etc…

Conclusion

If your familiar with developing apps for Android when you jump over to Glass, well at least for me the experience of writing/migrating an existing app was very very easy!.

 

 

The post My Experience Developing for Google Glass using Cordova appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

Collaborate 14 Preview: Oracle WebCenter 11g Upgrades – What You Need to Know

Tue, 2014-03-25 16:06

Title: #996 – A Successful Oracle WebCenter Upgrade: What You Need to Know

Date: Monday, April 7th
Time: 9:00 am to 3:00 pm
Location: Level 3, San Polo 3405

Upgrading to the next major release of software can sometimes be a complex and arduous task for organizations. In determining the how and when to perform the upgrade, organizations typically go through an evaluation process that includes new feature/function analysis, new technology and architecture analysis, and the overall time they expect the upgrade to take. This is especially the case for software upgrades that add a new layer of complexity and technology architecture that organizations have to plan and adapt for. Such is the case with Oracle WebCenter, as it added WebLogic Server as the application server from 10g to 11g. This addition, although beneficial in many areas, came with a set of new technologies and complexities that organizations with little to no exposure to had to first understand, perhaps get trained on, procure the necessary hardware to run, and in many cases deploy a separate team to manage. In considering all of these steps to perform the upgrade, organizations have undoubtedly gone through the process of “trade-off” analysis, where they weigh the pros and cons of performing the upgrade immediately versus putting it off until, for example, support for their current version runs out. This “trade-off” analysis describes many WebCenter customers as a great number have still not upgraded to 11g.

If this sounds like your organization, then make plans now to attend this session to receive overviews, examples, and actionable tasks that can be used when planning and performing your WebCenter upgrade.

Fishbowl Solutions is happy to be joined by WebCenter customers Ryan Companies, Cascade, Aleris International and AAM as they share their stories on upgrading to Oracle WebCenter 11g. Join us and hear directly from these customers to learn the tips, tricks and best practices for a successful WebCenter upgrade. Here is the tentative schedule for the presentation:

More information on this presentation, as well as all of Fishbowl’s activities at Collaborate, can be found here.

We hope to see you at Collaborate 14!

The post Collaborate 14 Preview: Oracle WebCenter 11g Upgrades – What You Need to Know appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

Node.js running on Oracle ADF-Mobile!

Mon, 2014-03-10 04:02

I recently came across this project – http://nodyn.io/ which provides the ability to run node.js on a JVM – got me thinking – “Hey wait a sec ADF-Mobile has a JVM” true not latest and greatest but I’m sure its only a matter of time before Oracle upgrade ADF-Mobiles JVM.

For those new to the node.js framework – it basically allows you to write JavaScript server/device side built on top of Google Chrome’s Javascript Runtime aka the V8 JS Engine. Its event-driven, non-blocking I/O model that makes it lightweight and very efficient it’s success has grown and grown within the community and the big players like LinkedIn, Microsoft, Walmart, paypal, Ebay, Yahoo.. etc. – More here

Nodyn, a project sponsored by Red Hat via its Project:Odd team, works by leveraging two other projects: the DynJS project, which provides the actual JavaScript runtime (ECMAScript, actually) for the JVM, and the Vert.x application platform/event bus system.

So your probably all reading this going.. and.. .. why would I want to write JS on the device and not through the webview whats the point??

It’s not for the novelty of writing server/device side JS (although I personally really like this idea) or even importing prebuilt node.js packages onto the device; its about allowing node.js apps to work directly with existing Java apps or even apps that may also be running on the JVM.

Now, before you all get your hopes up if you write node.js packages you need to be aware that it isn’t a direct port of node.js not everything works; but I feel it is a step forward in the right direction with the backing of Redhat.

This might be a pipe dream of mine at the moment but the hope is in the next year or so we may be able to use node.js on ADF-Mobile.. It may even be possible to run it now although doubtful with the current JVM release running on ADF-Mobile.

 

 

The post Node.js running on Oracle ADF-Mobile! appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

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

Tue, 2014-03-04 05:54

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.

 

 

The post Android – Bridging the Gap Between Native and HTML5 Mobile Apps (ADF-Mobile And Cordova) appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

ADF Mobile – Packaged WebCenter Accelerator (Cordova Application)

Sun, 2014-02-16 16:06

[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.

 

 

 

 

 

 

The post ADF Mobile – Packaged WebCenter Accelerator (Cordova Application) appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

Collaborate 2014 – 79 days until 79 degrees and Poolside WebCenter Discussions!

Fri, 2014-01-17 12:11

79 days.
Vegas.
Collaborate 2014.
79° F (average temp. in Vegas during April)

Fishbowl Solutions has another full list of activities planned for Collaborate 14. We look forward to discussing your Oracle WebCenter Content and Portal initiatives with you – hopefully poolside while we enjoy the warm weather together. It is a balmy 3° F in Minneapolis right now…

Here is a sneak peek of Fishbowl’s activities for Collaborate 2014:

Booth: 1453
Demos of our WebCenter Portal Solution Accelerator, SharePoint Connector 3.0, Google Search Connector for WebCenter and many more.

Presentations: 5

Here are the titles and abstracts of the sessions that Fishbowl is presenting or co-presenting on.

  • A Successful WebCenter Upgrade: What You Need to Know
    If your organization has not upgraded its WebCenter Content, Portal, or Imaging environment from pre-11g to 11g, then this 5-hour session is for you. Join WebCenter Content and Portal Specialized partner, Fishbowl Solutions, as they share facts and use cases that you will be able to apply to your WebCenter 11g upgrade. Fishbowl Solutions will be joined by customers who have successfully upgraded to 11g and therefore will be able to share their learnings, tips, and best practices that you will be able to utilize as well. This session will include a fact sharing discussion on upgrades, use case stories from WebCenter customers, and a roundtable forum where attendees will be able to ask questions specific to their Content, Portal, or Imaging upgrade. If your are planning your WebCenter upgrade and it seems daunting, or you aren’t sure where to begin; come to this session to collect first-hand and actionable information to get your upgrade project started and successfully completed.
  • Delivering on the Oracle WebCenter Portal Composite Application Vision – Top 5 Lessons Learned
    Most organizations see the benefit of creating composite web applications that aggregate services from disparate corporate and 3rd-party systems into a cohesive capability that efficiently supports business processes, driving self-service interactions for employees, customers and suppliers. The challenge is how to deliver on this vision, where to start, and how to plan and execute against your roadmap. Join us in this session as we discuss the Top 5 Lessons Learned at Rolls Royce in deploying WebCenter Portal, and how we were able to bridge content from multiple sources and surface that content to the right person, at the right time, and in the right context, to support our global customer portal.
  • Taking the WebCenter Portal User Experience to the Next Level
    Most organizations see the benefit of creating composite web applications that aggregate services from disparate corporate and 3rd-party systems into a cohesive capability that efficiently supports business processes, driving self-service interactions for employees, customers and suppliers. The challenge is how to deliver on this vision, where to start, and how to plan and execute against your roadmap. Join us in this session as we discuss the Top 5 Lessons Learned at Rolls Royce in deploying WebCenter Portal, and how we were able to bridge content from multiple sources and surface that content to the right person, at the right time, and in the right context, to support our global customer portal.
  • Leveraging BPM workflows for Accounts Payable Processing
    Accounts Payable departments are looking to create a more streamlined and paper-less business process. By achieving this an AP department, along with HR and many other departments are seeing huge ROI when converting from paper to digital management, but one key piece of this is the approval workflow of these documents. Oracle Business Process Management along side of Oracle WebCenter Imaging helps trigger an approval workflow to many different approvers to be acted upon. This session will describe how BPM workflows can be used for Accounts Payable processing and how they can be implemented with popular ERP applications like PeopleSoft and E-Business Suite.
  • Understanding Your Options for Searching Oracle WebCenter
    Search is a critical part of any effective content management solution. Without it, documents, web pages, policies, and other enterprise resources cannot be easily surfaced to end users. This session will explore the search technologies available to Oracle WebCenter customers including metadata-only search, Oracle Text Search, and Secure Enterprise Search, as well as the search functionality available with the Google Search Appliance. Attendees will get a side-by-side comparison of these search options covering the pros and cons of each technology and the use cases most suited to their capabilities. Whether you’re using WebCenter to power your website, intranet, or document management system, join this session to learn the differences between your search options and determine which one is best for you.

More information regarding the sessions above, as well as all of the scheduled sessions for Oracle WebCenter, can be found here: http://collaborate14.ioug.org/schedule

Did I mention it is 3° in Minneapolis right now with a high of 10° expected?! April, and Collaborate, can’t come soon enough.

The pool deck at the Venetian

 

 

The post Collaborate 2014 – 79 days until 79 degrees and Poolside WebCenter Discussions! appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

Enhancing the WebCenter Portal ADF Template – 3 easy steps for front-end developers.

Mon, 2014-01-13 04:43

Here are a few tips for creating new ADF Templates for WebCenter Portal.
These tips are for front end developers applying a branded template or who are integrating their own custom Javascript enhancements.

There are 2 approaches widely used – the first option is to use pure ADF for everything – the second and one which I follow is the hybrid approach to use HTML and JSTL tags only for templating; as I feel its easier for web designers to skin and maintain a light weight frontend without the need to learn ADF techniques.

Read on for tips on templating -

Lets Start off with a clean ADF Page Template first -

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" 
	xmlns:f="http://java.sun.com/jsf/core" 
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:af="http://xmlns.oracle.com/adf/faces/rich" 
	xmlns:pe="http://xmlns.oracle.com/adf/pageeditor" 
	xmlns:wcdc="http://xmlns.oracle.com/webcenter/spaces/taglib" 
	xmlns:trh="http://myfaces.apache.org/trinidad/html" 
	xmlns:c="http://java.sun.com/jsp/jstl/core" 
	xmlns:fn="http://java.sun.com/jsp/jstl/functions" 
	xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<af:pageTemplateDef var="attrs">
<af:xmlContent>
	<component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
		<display-name>
			Clean Portal Template
		</display-name>
		<facet>
			<facet-name>
				content
			</facet-name>
			<description>
				Facet for content Composer
			</description>
		</facet>
	</component>
</af:xmlContent>

<!-- Content Composer Container -->
<af:group>
	<af:facetRef facetName="content"/>
</af:group>
<!-- xContent Composer Container -->

</af:pageTemplateDef>
</jsp:root>

The first thing to do is add the files to be included in the generated template <head></head>.

So first lets add  a generic CSS file ie global.css this is not the ADF Skin and should not contain any ADF skinning syntax ie af|panelGroupLayout {} or hacks like .af_panelGroupLayout {} or compressed CSS adf classes ie – .xyz {}.

<af:resource type="css" source="//css/global.css"/>

This af:resource tag will put either JavaScript or CSS files based on the attribute type into the DOM <head></head> of the generated template.

If your like me – I like to modularise my CSS files into multiple maintainable files like this -

/*Require JS will compress and pull these files into one*/
@import url("import/normalize.css");
@import url("import/main.css");
@import url("import/bootstrap.css");
@import url("import/psa_components.css");
@import url("import/skin.css");
@import url("import/iscroll.css");
@import url("import/responsive.css");
@import url("import/font-awesome.css");
@import url("import/ie8.css");
@import url("import/cache.css");

So you can see global.css acts as a CSS Module container importing the rest of the files. This allows me to maintain and update the CSS files individually ie Normalise, bootstrap, iscroll etc.

What’s also really useful is that with the requireJS library – when I move the files from DEV to SIT OR Live requireJS will compress and pull all those modules into a single global.css removing the imports improving load times.

Next lets add some base scripts to load first  in the head before the rest of the page loads.

<af:resource type="javascript" source="//js/libs/plugins.js"/>
<af:resource type="javascript" source="//js/libs/modernizr-2.0.6.min.js"/>

So first lets discuss plugins.js

/**********************
 * Avoid `console` errors in browsers that lack a console.
 */
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());
/************************/

This defines an empty method if the object console is not defined.
For more info on JS console and debugging javascript (Chrome Dev Tools) || (FireFox FireBug)

I often leave console.info, log, error methods in my javascript which makes it easier to debug when doing early development – these echo methods will be stripped out when compressed and moved to SIT/Live with the use of requireJS or will be ignore if console is not defined.
(more to come on requirejs in next post) 

- this is common for browser like IE and FireFox without firebug enabled – any console objects found would create a JS error if it the above script was not included.

 JS Method Chaining and initialisation.. ..

/**********************
 * Define FB Base Chain if not defined
 */
var FB = window.FB || {};
//create Base object 
FB.Base = FB.Base || (function() {
	return {
		//create multi-cast delegate.
		onPortalInit: function(function1, function2) {
			return function() {
				if (function1) {
					function1();
				}
				if (function2) {
					function2();
				}
			}
		},
		//used for chaining methods
		chainPSA: function() {}
	}
})();
/************************/

This is important as I use requireJS library as a module loader at the footer of the template. RequireJS asynchronously loads in my dependency libraries ie Jquery, mustache templates and my own custom JS Libs as-well as providing a great tool for optimising and merging of the  libraries into 1 file like the CSS above.

After loading the dependencies the chain method is initialised.

(Why load JS files at the footer and not in the <head></head> with af:resource?
Read this - why it is best practise for scripts to load here by yahoo) ( btw – Modernizr needs to load in the <head></head>)

The chain method above allows me to have multiple portlets that can chain their methods to only initialise once all the dependencies have been loaded on the page. ie. If you imagine an onReady event that only initialises when page has loaded and all scripts in the footer of the page have asynchronously loaded – then and only then initialise all methods from the page or portlets or containers that are wrapped in the chain method that require Jquery for example… Without this if I  were to use the Jquery method in the portlet body but initialised the jquery script in the footer the page would send a JS error as the portlet jquery method would be unaware of the Jquery API – as it has not yet loaded.

How to setup inline methods -
in the template or portlet body that can access a library method after it async loads in the footer - 

FB.Base.chainPSA = FB.Base.onPortalInit(FB.Base.chainPSA, function() {
	//JS to initialises after Async load of required libs
	//ie lets alert the jquery version
	alert('You are running jQuery Version ' + $.fn.jquery);
});

This way you could write out FB.Base.chainPSA multiple times throughout your template to store all the required methods that need to be initiated after the page has loaded..

How to Initialise chainPSA
after all libs have loaded.

//load PSA javascript files 
if (FB.Base.chainPSA) {
	FB.Base.chainPSA();
}

So first check that chainPSA exist then execute all methods; that’s all there is too it.

An alternative solution which I often use is to setting a global JS variable flag – this enables me to contain and compress the forum portlet scripts in a single file that reads the configuration and data attributes from the portlet after all the JS dependencies have loaded if my main script in the footer – Once loaded it will then search to see if the variable flag exist and then asynchronously load all the required portlet files and dependencies ie

Portlet contains inline JS or JS script
which will be injected into the head - 

<af:resource type=”javascript”>

var WCP = WCP || {};
WCP.Portlet  = WCP.Portlet || {};
WCP.Portlet.enableForums = true;

</af:resource>

Footer Script
initiases the following after page load

if (WCP.Portlet.enableForums) {
//Async call required forum files.
}

 

Setting up Global reusable variables using JSTL

//Create FB Obj;
	var FB = FB || {};

	//Global Namespace get properties.
	//http://docs.oracle.com/cd/E25054_01/webcenter.1111/e10149/wcsugappb.htm#
	FB.Global = {
		wcApp: {
			defaultSkin:			'${fn:escapeXml(WCAppContext.application.applicationConfig.skin)}',
			logo:					'${fn:escapeXml(WCAppContext.application.applicationConfig.logo)}',
			resourcePath:			'${fn:escapeXml(WCAppContext.spacesResourcesPath)}',
			requestedSkin:			'${fn:escapeXml(requestContext.skinFamily)}',
			title:					'${fn:escapeXml(WCAppContext.application.applicationConfig.title)}',
			URL:					'${fn:escapeXml(WCAppContext.applicationURL)}',
			webCenterURI:			'${fn:escapeXml(WCAppContext.currentWebCenterURI)}'
		},
		spaceInfo: {
			description:			'${fn:escapeXml(spaceContext.currentSpace.GSMetadata.description)}',
			displayName:			'${fn:escapeXml(spaceContext.currentSpace.GSMetadata.displayName)}',
			keywords:				'${fn:escapeXml(spaceContext.currentSpace.metadata.keywords)}',
			name:					'${fn:escapeXml(spaceContext.currentSpaceName)}'
		},
		//custom Fishbowl lib
		restInfo: {
			trustServiceToken:		'${fb_rtc_bean.trustServiceToken}'
		},
		pageInfo: {
			createDateString:		'${fn:escapeXml(pageDocBean.createDateString)}',
			createdBy:				'${fn:escapeXml(pageDocBean.createdBy)}',
			lastUpdateDateString:	'${fn:escapeXml(pageDocBean.lastUpdateDateString)}',
			lastUpdatedBy:			'${fn:escapeXml(pageDocBean.lastUpdatedBy)}',
			pageName:				'${fn:escapeXml(pageDocBean.name)}',
			pagePath:				'${fn:escapeXml(pageDocBean.pagePath)}',
			pageTitle:				'${fn:escapeXml(pageDocBean.title)}',
			pageUICSSStyle:			'${fn:escapeXml(pageDocBean.UICSSStyle)}'
		},
		userInfo: {
			businessEmail:			'${fn:escapeXml(webCenterProfile[securityContext.userName].businessEmail)}',
			department:				'${fn:escapeXml(webCenterProfile[securityContext.userName].department)}',
			displayName:			'${fn:escapeXml(webCenterProfile[securityContext.userName].displayName)}',
			employeeNumber:			'${fn:escapeXml(webCenterProfile[securityContext.userName].employeeNumber)}',
			employeeType:			'${fn:escapeXml(webCenterProfile[securityContext.userName].employeeType)}',
			expertise:				'${fn:escapeXml(webCenterProfile[securityContext.userName].expertise)}',
			managerDisplayName:		'${fn:escapeXml(webCenterProfile[securityContext.userName].managerDisplayName)}',
			moderator:				'${fn:escapeXml(security.pageContextCommunityModerator)}',
			organization:			'${fn:escapeXml(webCenterProfile[securityContext.userName].organization)}',
			organizationalUnit:		'${fn:escapeXml(webCenterProfile[securityContext.userName].organizationalUnit)}',
			timeZone:				'${fn:escapeXml(webCenterProfile[securityContext.userName].timeZone)}',
			title:					'${fn:escapeXml(webCenterProfile[securityContext.userName].title)}'
		}
	};

Sometimes there are values from WebCenter that you wish to use ie Space Name or User Name – the easiest way is to escape these values with JSTL into a javascript Object within the page template. I’ve put a quick example above you can strip it out if you don’t need any values but it makes it easier to pull in values to other JS libs calling the key value pair from the object like this for user display name -

var userDisplayName = FB.Global.userInfo.displayName;

Setting RequireJS to load my dependencies via base bootstrap script
(Read this - For more info on module loading and using requirejs)  

<script src="/js/core/config.js"><jsp:text/></script>
<script src="/js/libs/requirejs/require.min.js" data-main="bootstrap"><jsp:text/></script>

Now as you can use html in JSF templates and I don’t want my scripts in the head – which af:resource enables I write out the <script> tag. A word or warning and you may have spotted <jsp:text/> this prevents the script tags from being self closed and breaking. This will happen if you are editing the page templates direct at runtime from the browser. This is the same for any empty container ie <div></div> would become <div/> self closing; this is fine with xml but not fine with browser interpreting html mark-up in the DOM..

Also you may want to consider putting this into the login template to pre-load and cache the initial scripts before the portal page loads all of the ADF JS lib dependencies.

The final template
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" 
	xmlns:f="http://java.sun.com/jsf/core" 
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:af="http://xmlns.oracle.com/adf/faces/rich" 
	xmlns:pe="http://xmlns.oracle.com/adf/pageeditor" 
	xmlns:wcdc="http://xmlns.oracle.com/webcenter/spaces/taglib" 
	xmlns:trh="http://myfaces.apache.org/trinidad/html" 
	xmlns:c="http://java.sun.com/jsp/jstl/core" 
	xmlns:fn="http://java.sun.com/jsp/jstl/functions" 
	xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<af:pageTemplateDef var="attrs">
<af:xmlContent>
	<component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
		<display-name>
			Clean Portal Template
		</display-name>
		<facet>
			<facet-name>
				content
			</facet-name>
			<description>
				Facet for content Composer
			</description>
		</facet>
	</component>
</af:xmlContent>

<!-- Put resources into head -->
<af:resource type="css" source="//css/global.css"/>
<af:resource type="javascript" source="//js/plugins.js"/>
<af:resource type="javascript" source="//js/libs/modernizr-2.0.6.min.js"/>
<!-- xPut resources into head -->

<!-- Define static global FB namespace and vars -->
<script>
	//Create FB Obj;
	var FB = FB || {};

	//Global Namespace get properties.
	//http://docs.oracle.com/cd/E25054_01/webcenter.1111/e10149/wcsugappb.htm#
	FB.Global = {
		wcApp: {
			defaultSkin:			'${fn:escapeXml(WCAppContext.application.applicationConfig.skin)}',
			logo:					'${fn:escapeXml(WCAppContext.application.applicationConfig.logo)}',
			resourcePath:			'${fn:escapeXml(WCAppContext.spacesResourcesPath)}',
			requestedSkin:			'${fn:escapeXml(requestContext.skinFamily)}',
			title:					'${fn:escapeXml(WCAppContext.application.applicationConfig.title)}',
			URL:					'${fn:escapeXml(WCAppContext.applicationURL)}',
			webCenterURI:			'${fn:escapeXml(WCAppContext.currentWebCenterURI)}'
		},
		spaceInfo: {
			description:			'${fn:escapeXml(spaceContext.currentSpace.GSMetadata.description)}',
			displayName:			'${fn:escapeXml(spaceContext.currentSpace.GSMetadata.displayName)}',
			keywords:				'${fn:escapeXml(spaceContext.currentSpace.metadata.keywords)}',
			name:					'${fn:escapeXml(spaceContext.currentSpaceName)}'
		},
		//custom Fishbowl lib
		restInfo: {
			trustServiceToken:		'${fb_rtc_bean.trustServiceToken}'
		},
		pageInfo: {
			createDateString:		'${fn:escapeXml(pageDocBean.createDateString)}',
			createdBy:				'${fn:escapeXml(pageDocBean.createdBy)}',
			lastUpdateDateString:	'${fn:escapeXml(pageDocBean.lastUpdateDateString)}',
			lastUpdatedBy:			'${fn:escapeXml(pageDocBean.lastUpdatedBy)}',
			pageName:				'${fn:escapeXml(pageDocBean.name)}',
			pagePath:				'${fn:escapeXml(pageDocBean.pagePath)}',
			pageTitle:				'${fn:escapeXml(pageDocBean.title)}',
			pageUICSSStyle:			'${fn:escapeXml(pageDocBean.UICSSStyle)}'
		},
		userInfo: {
			businessEmail:			'${fn:escapeXml(webCenterProfile[securityContext.userName].businessEmail)}',
			department:				'${fn:escapeXml(webCenterProfile[securityContext.userName].department)}',
			displayName:			'${fn:escapeXml(webCenterProfile[securityContext.userName].displayName)}',
			employeeNumber:			'${fn:escapeXml(webCenterProfile[securityContext.userName].employeeNumber)}',
			employeeType:			'${fn:escapeXml(webCenterProfile[securityContext.userName].employeeType)}',
			expertise:				'${fn:escapeXml(webCenterProfile[securityContext.userName].expertise)}',
			managerDisplayName:		'${fn:escapeXml(webCenterProfile[securityContext.userName].managerDisplayName)}',
			moderator:				'${fn:escapeXml(security.pageContextCommunityModerator)}',
			organization:			'${fn:escapeXml(webCenterProfile[securityContext.userName].organization)}',
			organizationalUnit:		'${fn:escapeXml(webCenterProfile[securityContext.userName].organizationalUnit)}',
			timeZone:				'${fn:escapeXml(webCenterProfile[securityContext.userName].timeZone)}',
			title:					'${fn:escapeXml(webCenterProfile[securityContext.userName].title)}'
		}
	};
</script>
<!-- xDefine static global namespace and vars -->

<!-- Content Composer Container -->
<af:group>
	<!-- Add any custom HTML HERE -->
	<div id="FB-wrapper" class="wrapper">
		<af:facetRef facetName="content"/>
	</div>
	<!-- xAdd any custom HTML HERE -->
</af:group>
<!-- Content Container -->

<!-- Init RequireJS -->
<script src="/js/core/config.js"><jsp:text/></script>
<script src="/js/libs/requirejs/require.min.js" data-main="bootstrap"><jsp:text/></script>
<!-- xInit RequireJS -->

</af:pageTemplateDef>
</jsp:root>

** I haven’t added a navigation structure to this template only the Content Composer facet.

Designing for mobile with Responsive Design.

When learning about responsive design the first thing to do is add the following meta viewport tag into the head defining the required content params for mobile ie -

<meta name="viewport" content="width=device-width, initial-scale=1">

Now unfortunately there is no ADF tag to add meta tags into the header and although you could add this html to the <body></body> its not really ideal.

What you should do is add this meta viewport into the Page Style not the Page Template.
This will allow you to add the following trinidad tag to generate the meta tag into the  <head></head> of the generated template as the facet metaContainer specifies this region to generate into.

<f:facet name="metaContainer">
	<af:group>
		<trh:meta name="viewport" content="width=device-width, initial-scale=1"/> 
	</af:group>
</f:facet>

The metaContainer facet should be held within the <af:document></af:document> tags

You could also add other meta tags ie keywords and add a dynamic value like this -

<trh:meta name="keywords" content="#{bindings.SEO_KEYWORDS}"/>

A word of warning you must make sure you add this to the page style before you create a page. Existing pages will ignore any updates to Page Styles that were used to create a page unlike Page Templates which allow you to tweak and update on the fly.

In the next post I’ll be writing up how to use requireJS properly with WebCenter to Asynchronously load in your libraries, templates and request additional libraries or templates when required by the page.

The post Enhancing the WebCenter Portal ADF Template – 3 easy steps for front-end developers. appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

WebCenter Portal, ADF, REST API & JS templating – another approach to faster portlets.

Mon, 2014-01-13 04:24

So there are a few ways to create portlets, widgets and gadgets for WebCenter -

I’m going to show a few tips and tricks and one of the methods I use – to create faster interactive portlets using the WebCenter REST API and Javascript to leverage the services available.

As an example I will show you the basics to recreating the “OOTB WebCenter Portal forum taskflow” that hooks into JIVE as a light weight Async JS template driven portlet that you can drag and drop from the resource catalogue and supply configurable values.

This will enable marketing or IT teams who have no knowledge of ADF to manage, customise and enhance the look and feel of the portlet with just HTML and CSS skills. Also they will not need to redeploy the portlet via weblogic to apply enhancements – if they have access to the files on the server ie with FTP or SCP – you could also include these files on the content server – if it’s externally facing to handle revisioning version control much like sitestudio.

Click here to see the viewlet

Here’s a quick video that shows the OOTB Spaces Forum on the bottom against a simple one on the top that I created using this approach. You’ll also noticed I added an upload capability that allows the user to upload docs into WebCenter Content associated to the JIVE forum that is not part of the OOTB taskflow capability.

Read on to view the guides on how to recreate this approach and learn some useful tips on the way -

Over next month I will posting articles on how to achieve this (Keep an eye out)

Step 1) ENHANCE WEBCENTER LOGIN TEMPLATE
How to pre-authenticate with the REST API and WebCenter Content if you don’t have SSO enabled.

Step 2) ENHANCE ADF PAGE TEMPLATE
Taking the ADF Page to the next level – improve load times, caching via asynchronous calls to additional assets and JavaScript libs. (With RequireJS)

Step 3) REQUIREJS LOADING DEPENDENCIES
How to use RequireJS with WebCenter Portal effectively

Step 4) MOUSTACHE JS TEMPLATING
Moustache Template driven portlets

Step 5) EVENT DRIVEN PORTLET INTERACTION WITH “HTML5 DATA ATTRIBUTES”
How to navigate and interact between templates/screens with event listening

Step 6) SETTING UP THE FORUM PARAMETRISED PORTLET
How to create your first parametrised portlet for WebCenter Portal and deploy it to the resource catalogue 

Step 7) REQUIREJS COMPRESSING/MERGINING JS AND CSS ASSETS INTO A SINGLE FILE WITH NODEJS
Compress all libraries to Single script and CSS file that loads and caches all dependencies

Step 8) WebCenter Caching and Compression 
How to get the best performance from your portal!

Step 9) TIPS AND TRICKS 
Additional tips for integrating template driven portlets for WebCenter

The post WebCenter Portal, ADF, REST API & JS templating – another approach to faster portlets. appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

11g AJAX Authentication for WebCenter Portals Rest API and Content

Wed, 2014-01-08 09:54

WebCenters Portals REST API and WebCenter Content provide a great set of  web services enabling you to create rich interactive JavaScript components. You can see an example of this here - http://www.fishbowlsolutions.com/mobile via jQuery and UCM – Client Side Ajax UCM Interaction blog post.

An issue you may have come across if you don’t have SSO enabled is the ability to interact against these services. This can be a problem if you are writing Javascript Widgets or hybrid mobile applications for WebCenter Portal that require authentication to access them.

You could present a popup requesting the user to re authenticate; however this isn’t ideal if the user has already authenticated with the portal to access your new JS Components.

Read on to see the options available to you -

There are two options available if you don’t use SSO:

1) Enabling AJAX pre-authentication on the WebCenter portal login page; which will store the authenticated session.
2) Setting up a trust service token and passing the authentication request with the token when you need to access the services once the user has authenticated.

 

1. Pre-authenticating against the REST API. 

1.1 Updating the login template for pre-auth.

On the login page disable the submit event on the form to authenticate against WebCenter Portal.
Instead when the user selects the login button -

1. Pass a base64 authentication request to the REST API via AJAX.
2. On a success response (store the REST API security token if needed)
3. Trigger the submit request to enable the form post to authenticate on WebCenter.

Here are some code samples for authenticating with either WebCenter Portal or Content via AJAX using JQuery -

WebCenter Portal AJAX REST API Authentication
(with OIT or Username & Password)

jquery.ajax({
	url: endpoint,
	dataType: 'json',
	beforeSend: function(xhr) {
		//if trust token not defined send base64 user/pass authentication
		if (FB.restInfo.trustServiceToken === undefined) {
			//pass user/password credentials
			if (username.length &gt; 0) {
				//IE has no support for BTOA use crypto lib
				if (window.btoa === undefined) {
					xhr.setRequestHeader('Authorization', 'Basic ' + Crypto.util.bytesToBase64(Crypto.charenc.Binary.stringToBytes(username + ':' + password)));
				//all other browsers support BTOA
				} else {
					xhr.setRequestHeader('Authorization', 'Basic ' + window.btoa(username+':'+password));
				}
				return;
			}
		//else pass security token
		} else {
			//token auth
			xhr.setRequestHeader('Authorization', 'OIT ' + FB.restInfo.trustServiceToken); ///Obj path to Trust token value
		}

		//pass secure token
		xhr.withCredentials = true;
	},
	//Authentication Successful
	success: function(data) {
		//Process Resource Index Object in callback method
		//Store REST API Token
		callback(context);
	},
	//Authentication Failed
	error: function(request, status, error) {
		error_handler(callback)(request, status, error, endpoint);
	}
});

 

 WebCenter Content AJAX Authentication
(with OIT or Username & Password)

var params = {
	IdcService: 'PING_SERVER',
	IsJson: 1
};
//Authenticate with WebCenter Content 
jquery.ajax({ url: endpoint+ '/idcplg', data: params, dataType: 'json',
	//user already authenticated
	success: function(data) {
		callback(this);
	},
	//Error connection or authorisation to WebCenter Content failed
	error: function(request, status, error) {
		//if trust token defined send OIT Auth Request
		if (FB.restInfo.trustServiceToken !== undefined) {
			//Authenticate Via OIT
			jquery.ajax({
				type: "GET", 
				url: '/adfAuthentication', //http://domain.com/adfAuthentication will auth OIT on WebCenter
				//setup request headers first
				beforeSend: function(xhr) {
					xhr.setRequestHeader('Authorization', 'OIT ' + FB.restInfo.trustServiceToken); //Obj path to Trust token value
					xhr.withCredentials = true;
				},
				//request successfull
				success: function(data) {
					callback(this);
				},
				//issue with request
				error: function(request, status, error) {
					error_handler(callback)(request, status, error, endpoint+ '/idcplg');
				}
			});
		//else user/pass sent 
		} else {
			//Authenticate with user/pass
			jquery.ajax({
				type: "POST", 
				url: endpoint+'/login/j_security_check', 
				data: {
					j_username: 		username, 
					j_password: 		password, 
					j_character_encoding: 	'UTF-8'
				},
				//request successfull
				success: function(data) {
					callback(this);
				},
				//issue with request
				error: function(request, status, error) {
					error_handler(callback)(request, status, error, endpoint+ '/idcplg');
				}
			});
		}
	}
});

The WebCenter Content Secure Token Auth requires authentication on http://domain.com/adfAuthentication.

You can also use this to authenticate against the Inbound Refinery (Conversion Server)

http://domain.com/ibr/adfAuthentication

And Universal Records Management

http://domain.com/urm/adfAuthentication

Where as User/Pass Auth on the content server is requested via http://domain.com/cs/login/j_security_check.

Here is a simple example of a webcenter login page that makes an Authentication request first to the REST API before posting the form and logging into WebCenter Portal.

 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Login Auth Example</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

</head>
<body>

<div id="FB-loginWrapper">
	<h2>Sign-in to your account</h2>

	<form name="PortalLoginForm" method="post" action="/webcenter/wcAuthentication">
		<input type="hidden" name="success_url" value="/webcenter/intranet_loginhandlerservlet"/>
		<input type="hidden" name="j_character_encoding" value="UTF-8">

		<div class="formField">
			<label>Username:</label>
			<input type="text" name="j_username" />
		</div>

		<div class="formField">
			<label>Password:</label>
			<input type="password" name="j_password" />
		</div>

		<input disabled="disabled" type="submit" />
	</form>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/vendor/cryptojs.js"></script>

<script>
//Setup JS namespace
var FB = FB || {};
FB.Login = (function() {
	return {
		//on script init
		init: function() {
			//Setup page events
			this.events();

			//remove disabled attr on submit button.
			$('[name="PortalLoginForm"] [type="submit"]').prop('disabled',false); 
		},
		//setup page events
		events: function() {
			//on submit click initialise auth request
			$('[name="PortalLoginForm"]').submit(function() {
				//if data attribute true on form allow submit
				if ($(this).data('valid')) {
					return true;
				}

				//call REST API authentication method
				FB.Login.AuthRestAPI(
					'/rest/api/resourceIndex', 			//endpoint
					$('[name="j_username"]').val(), 	//User
					$('[name="j_password"]').val(), 	//Pass
					function() { //callback method
						$('[name="PortalLoginForm"]').data('valid', true).submit(); //enable form to submit
						$('[name="PortalLoginForm"] [type="submit"]').submit(); //submit form on AuthRestAPI success AJAX.
					}
				);

				//else stop form from submitting
				return false;
			});
		},
		//REST Auth AJAX method
		AuthRestAPI:function(endpoint, username, password, callback) {
			//make ajax req
			$.ajax({
				url: endpoint,
				dataType: 'json',
				beforeSend: function(xhr) {
					//IE has no support for BTOA use cryptoJS lib
					if (window.btoa === undefined) {
						xhr.setRequestHeader('Authorization', 'Basic ' + Crypto.util.bytesToBase64(Crypto.charenc.Binary.stringToBytes(username + ':' + password)));
					//all other browsers support BTOA
					} else {
						xhr.setRequestHeader('Authorization', 'Basic ' + window.btoa(username+':'+password));
					}

					//pass secure token
					xhr.withCredentials = true;
				},
				//Authentication Successful
				success: function(data) {
					//submit form via callback
					callback();
				},
				//Authentication Failed
				error: function(request, status, error) {
					alert('Authentication failed');
				}
			});
		}
	}
})();

//on DOM Loaded setup page
$(document).ready(function() {
	FB.Login.init();
});
</script>

</body>
</html>

 

2. Setting up the the trust service security token
(Info to setup OIT).

I would recommend setting up the trust token; however the base64 authentication pre login above is easier and quicker to setup.

The trust token will be generated once the user has logged in.

2.1. Create keystore

a) cd /opt/oracle/jrmc-4.0.1-1.6.0/bin/
b) keytool -genkeypair -keyalg RSA -dname “cn=spaces,dc=domain,dc=com” -alias orakey -keypass myKeyPassword -keystore /opt/oracle/keystore/default-keystore.jks -storepass myKeyPassword -validity 1064
c) keytool -exportcert -v -alias orakey -keystore /opt/oracle/keystore/default-keystore.jks -storepass myKeyPassword -rfc -file /opt/oracle/keystore/orakey.cer
d) keytool -importcert -alias webcenter_spaces_ws -file /opt/oracle/keystore/orakey.cer -keystore /opt/oracle/keystore/default-keystore.jks -storepass myKeyPassword

2.2. Update jps-config.xml

a)

<serviceInstance name="keystore" provider="keystore.provider" location="/opt/oracle/keystore/default-keystore.jks">
<description>Default JPS Keystore Service</description>

b)

<propertySets>
	<propertySet name="trust.provider.embedded">
		... existing entries
		<property value="orakey" name="trust.aliasName"/>
		<property value="orakey" name="trust.issuerName"/>
	</propertySet>
</propertySets>

 

2.3. Update credential store

a) in WLST: /opt/oracle/middleware/Oracle_WC1/common/bin/wlst.sh
b) connect()
c) updateCred(map=”oracle.wsm.security”, key=”keystore-csf-key”, user=”owsm”, password=”myKeyPassword ”, desc=”Keystore key”)
d) updateCred(map=”oracle.wsm.security”, key=”enc-csf-key”, user=”orakey”, password=”myKeyPassword ”, desc=”Encryption key”)
e) updateCred(map=”oracle.wsm.security”, key=”sign-csf-key”, user=”orakey”, password=”myKeyPassword ”, desc=”Signing key”)

2.4. Add TrustServiceIdentityAsserter.

a) Console -> Security Realms -> myrealm -> Providers -> New
b) Restart all

2.5. Configure Credential Store

a) in WLST: /opt/oracle/middleware/Oracle_WC1/common/bin/wlst.sh
b) connect()
c) createCred(map=”o.webcenter.jf.csf.map”, key=”keygen.algorithm”,user=”keygen.algorithm”, password=”AES”)
d) createCred(map=”o.webcenter.jf.csf.map”, key=”cipher.transformation”,user=”cipher.transformation”, password=”AES/CBC/PKCS5Padding”)

2.6. Test it against the rest api

a) http://www.domain.com/rest/api/resourceIndex

Once setup create a bean to output the token into the page template  ie ${fb_rtc_bean.trustServiceToken} JS object so that your JS AJAX request can reuse it.

var FB = FB || {};
FB.restInfo = {
	username: 				'${securityContext.userName}',
	trustServiceToken:			'${fb_rtc_bean.trustServiceToken}',
	spaceName: 				'${spaceContext.currentSpaceName}',
	spaceGUID: 				'${spaceContext.currentSpace.metadata.guid}'
};

You can then use one of the AJAX authentication methods above with ${fb_rtc_bean.trustServiceToken} reading the JS Obj FB.restInfo.trustServiceToken;

 

The post 11g AJAX Authentication for WebCenter Portals Rest API and Content appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

The How and Why of Integrating SharePoint with Oracle WebCenter in 13 Minutes

Mon, 2013-12-23 13:01

Integrating Microsoft SharePoint with Oracle WebCenter Content is more of a question of why than how. Integrations between the systems have existed for 6+ years now, and each of those have had their own set of integration points and technologies to make the integration work. However, companies need to first understand and agree why they want to integrate the two systems. This starts with identifying the need or business problem that continues to persist without an integration.

Fishbowl Solutions has had an integration for the systems for three years. In that time, we have talked to hundreds of customers regarding their needs and business problems and the disconnect between SharePoint content and getting that content into Oracle WebCenter. Here are the most common needs/business problems we have heard:

  • Lack of Governance over SharePoint use and what happens to orphaned sites and content
  • Difficulty surfacing high-value content created in SharePoint to Oracle-based websites, portals and business applications
  • Inability to selectively determine the SharePoint content items to store in WebCenter – based on version, site location, or business unit requirements

If your company has identified any of the problems above, then it has effectively answered the why question. However, companies should also take a look at their overall information governance strategy and how SharePoint and Oracle WebCenter are a part of that strategy. For organizations that have answered the why, but also have determined that Oracle WebCenter Content is THE repository for enterprise, mission-critical information,  then the how questions can be asked and answered as well.

This 13 minute overview presentation and demo addresses both questions and may be a good place to start in helping you and your organization define its information governance strategy:

For your convenience, here are the time slots for the use case demos of Fishbowl’s connector:

  • Content Publishing – 3:16 to 5:45
  • Project Lifecycle Governance – 5:46 to 7:58
  • Business Specific Storage Requirements – 7:59 to 10:45

Happy Holidays!

Jason Lamon is a product strategist and technology evangelist who writes about a range of topics regarding content management and enterprise portals. He writes to keep the communication going about such topics, uncover new opinions, and to get responses from people who are smarter than him. If you are one of those people, feel free to respond to his tweets and posts.

The post The How and Why of Integrating SharePoint with Oracle WebCenter in 13 Minutes appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

Speaking at UKOUG Tech13 – UK Oracle User Group

Thu, 2013-12-19 10:47

I was fortunate to be accepted to present at this years UK Oracle User Group – “Developing and integrating with Oracle Social Network”.
Showing how easy it was to integrate with OSN using it’s REST API and my previous experience at OSNs Developer Challenge at Oracle Open World 2012.

You can see more info and my original OOW12 entry – Mobile Integration with OSN here

I had a bit of fun with this years presentations creating it for my ipad; this allowed me to move around whilst still having control of the presentation and making it more dynamic.
Above you can see me and my co-presenter David Rowe as I take a picture of the audience which jumps across and into my presentation being projected.

For those interested I created the IOS application using Cordova to build a hybrid app with the reveal.js library for creating my slides in html5; to speed things up I used www.slid.es and exported the html package which I imported into my cordova project.

I then used an app called reflector that enabled me to use airplay and mirror to my laptop from the ipad onto the projector.
And then finally I used Connectify to quickly create a network from my laptop my ipad could connect too, to enable airplay to work – this could of worked with the available wireless network but I wasn’t taking any chances of things being blocked.

It worked out pretty well and had a few smiles.. Although there were a few glitches and I’m blaming IOS 7 as I had recently upgraded and hadn’t fully tested on the new OS.

 

So Tech13 as you can see below in the infogram – the event had just over a thousand attendees from over 28 countries during 4 days 159 speakers and 200 exciting sessions.
It was a great event and good fun networking and connecting with colleagues, other Aces and the Oracle Team – there were lots of interesting topics/sessions from Fujitsu and their case studies with Webcenter to the Red Samurai team who gave 2 great presentations on ADF - ADF Development Survival Kit – Essentials for ADF Developer &  ADF Anti-Patterns: Dangerous Tutorials – Real Experience in ADF

I also got to play with Oracle’s Google Glass kit; and also get a glimpse at what has been happening behind the scenes; where they are taking new technology and products to enhance user experience and interaction.
With that said Fishbowl Solutions also got a pair of Fishbowl blue Google Glass kits recently for the innovation team to start looking into the future and experimenting as we did with our mobile product line back 5-6 years ago.

So be on the lookout for the first Oracle Partner Glass app ;)

 

 

 

 

The post Speaking at UKOUG Tech13 – UK Oracle User Group appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other

WebCenter Content: How to persist parameters across links ie &coreContentOnly=1

Thu, 2013-12-19 07:11

This is something new I came across thanks to a colleague; that I thought would be good to share.

Recently I had an issue where I needed to hide the standard UCM header and footer, but allow the users to navigate through the links available on the body.
(This  process will also allow you to persist other params)

If you add the parameter coreContentOnly=1 like this -

http://contentServer/cs/idcplg?IdcService=GET_DOC_PAGE&Action=GetTemplatePage

&Page=HOME_PAGE&coreContentOnly=1 

The header/footer are removed leaving the body content available however on navigating selecting a link or interacting with a form field the coreContentOnly param is removed therefore displaying the header & footer on the next page.

In the past I’ve written components to handle this or done some magic on the web-server; however no more is this needed!
There is a workaround to persist parameters -

By placing /_p/ after the ISAPI/CGI file Name (usually idcplg) – you can apply and persist variables.

http://contentServer/cs/idcplg/_p/?IdcService=…

This variable mapping can be found by opening the PersistentUrlKeys table.

Here are some of the mappings - 

min =coreContentOnly
cc = ClientControl

So to enable coreContentOnly=1 throughout you can use either approach -

http://contentServer/cs/idcplg/_p/min?IdcService=…

or

http://contentServer/cs/idcplg/_p/min-1?IdcService=…

On the first one I did not set -1 as 1 is the default assumed value the dash is used as a seperator for key/value.
If I wanted to add ClientControl or another variable I  can add the mapping in like this -

http://contentServer/cs/idcplg/_p/min/cc-queryselect?IdcService=…

Important - this mapping must exist in Content Server the SCRIPT_NAME environment variable or it will not be persisted.

 

The post WebCenter Content: How to persist parameters across links ie &coreContentOnly=1 appeared first on C4 Blog by Fishbowl Solutions.

Categories: Fusion Middleware, Other