Oracle JET: RequireJS How it works

In this blog I would like to show how requireJS. As I am exploring Oracle JET technology so I will keep my blog in context of Oracle JET

What is requireJS and its purpose: This library solves three problems
1. Download and execute a javascript library only when needed.
2. Reduce global variables
3. Provide modular structure to your javascript libraries.

To understand RequireJS, its better to see what generally happens when we don't have any such library. In that case we add all required javascript libraries in our html file using <script> tag. Browser will download all of them and execute them even though I don't need some of them while loading page initially. I may need to them later when user performs some action on page.
Also These libraries may by creating some global variables as well.
Also we need to be double sure about sequence of libraries in html. For example I can't use jquery selectors (like $("#lastname")) in my code unless I have jquery library mentioned. I definitely need to put jquery library script tag in html before using its feature in any subsequent library.

To overcome above limitations I need something which can
1. download and execute library only when needed.
2. reduce global variables
3. manage dependencies

That something is what requireJS is

Let see how it works. I have Oracle JET quickstart basic template project running. If you don't know Oracle JET, its a javascript based framework with rich set of UI components. Its open source and uses various third party libraries like knockout, jquery, promise, and requireJS etc.

I see in my index.html there is only one script tag

<script data-main="js/main" src="js/libs/require/require.js"></script>

The moment browser see this line in html, it download require.js and loads (execute) it.
require.js library validates data-main property of script tag and found that its js/main, which means its will look for a library main.js in js folder. It downloads it and run it. So atleast two libraries are going to get downloaded at page load. Lets use browser developer tools and verify it. I have put a debug point at first line of my main.js file. This line is requirejs.config call.

I found that
a. First require.js is downloaded, which is because we have <script> tag for that. It gets loaded immediately
b. After few milliseconds main.js is also getting download. Its not there in html script tag but its getting downloaded because require.js loads it asynchronously.
c. I also see two global variable require and requirejs added by require.js library. (NOTE we no other library has got executed till now)

main.js: First thing it does is calls requirejs.config function. This function is used to configure your all js library locations with require. All these library locations are given a name. For example knockout library is at libs/knockout/knockout-3.4.0 location. Its registered with name 'knockout'.
NOTE: we are not registering each and every js file. For example we have lots of oj libraries inside libs/oj/v2.1.0/debug but we are not mentioning them individually. We just mention parent directory here and associate it with ojs name. Which means if we want to refer any individual js from that directly we can simple say ojs/<that-library>



Next big call is require function call. It takes two inputs
a. Array of String
b. callback function

 require(['ojs/ojcore', 'knockout', 'appController', 'ojs/ojknockout', 'ojs/ojrouter',
   'ojs/ojmodule', 'ojs/ojdialog', 'ojs/ojnavigationlist', 'ojs/ojtoolbar',
   'ojs/ojbutton', 'ojs/ojmenu'],
   function (oj, ko, app) { // this callback gets executed when all required modules are loaded

       //Some code eliminated from here.
     
   }
 );

each entry in array of string can actually points to a js file if we join it with configuration done previously. For example ojs/ojcore, points to libs/oj/v2.1.0/debug/ojcore.js file. Each entry in this list is nothing but a dependency for the function. Each entry in terms of require is called a module.

job of require function is to call callback function once all the dependencies are loaded. So require function is going to load each js file mentioned as dependency here and once all are loaded its going to run callback function. By above require call I can say its going to load
libs/oj/v2.1.0/debug/ojcore.js, 
libs/knockout/knockout-3.4.0.js, 
appController.js, 
libs/oj/v2.1.0/debug/ojknockout.js, 
libs/oj/v2.1.0/debug/ojknockout.js, 
libs/oj/v2.1.0/debug/ojrouter.js, 
libs/oj/v2.1.0/debug/ojmodule.js, 
libs/oj/v2.1.0/debug/ojdialog.js
libs/oj/v2.1.0/debug/ojnavigationlist.js
libs/oj/v2.1.0/debug/ojs/ojtoolbar.js
libs/oj/v2.1.0/debug/ojbutton.js
libs/oj/v2.1.0/debug/ojmenu.js


NOTE: appContorller.js is not mentioned in config call as its present in same directory as main.js. So if all your libraries are present where you have main.js then you need not to mention anything in configure. But it would be a bad design


Lets put a debug point at very first line of our callback function
But as I know require is going to load dependencies first lets add few more debug points
First line of ojcore.js,
First line of ojmenu.js
First line of ojdialog.js etc

What I observe is it definitely downloads all js before calling callback function.

Now I am stopped at first line of ojcore.js
First line of ojcore.js is
define(['require', 'ojL10n!ojtranslations/nls/ojtranslations', 'promise'], function(require, ojt) {
   //Some code here
})

Its a call to define function.
Here define function is taking two arguments
1. Array of String
2. Callback function

Array of String is again nothing but dependcies and define function is also going to download all dependencies and then call callback function. It means ojcore is also dependent on some other js file or better to say module.
One question arise why not to use require when define is also doing something similar.

Require vs Define: As name suggest require is to download required libraries and then call callback function but Define is something to define. Define is actually defining a module. If you see the callback function of define must return a value. It could be anything but it must return a value. That value is associated with module and module name is nothing but what is mentioned in require call.

Effectively define is not only downloading dependencies and calling callback but also defining a module using moduleName and value.

What is the purpose of this module? This is what is passed to callback function as an input. If you see require function is taking oj, ko and app as three input. They are nothing but module value of ojs/ojcore, knockout and appcontroller first three dependencies mentioned in require call.

Now if I stop my bebugger at first line of require callback I see lots of other files are also downloaded

Can I assume that by the time require's callback is running all modules of JET are loaded. Definitely NOT. If we have to load all modules then why not to load using script tag itself. Only few required modules are loaded. Rest you will be loading when you create a viewModule.

When we create a viewModule, its js file again start of define call. Using that viewModule will load its dependencies separately. That is the advantage a module is loaded when its needed.

Few things you should notice
1. RequireJS tries to divide our code in modules. With that we should also change of coding style. We should write one module (function) in one js file. These functions should clearly know their dependencies.

2. require has so many dependencies but callback only takes three oj, ko, app as input. Why we have other dependencies. If you see first is ojs/ojcore. It creates oj global variable (namespace). All other dependencies adds its methods to oj namespace. For example ojs/ojrouter at Router related functions to oj namespace.

That's all I have here.

ADF: Token replacement for resource bundle af:formatNamed

Problem Description: There is a common usecase to have a translatable string in resource bundle with tokens. In this blog I want to show how to use such strings using af:formatNamed apis

Let say we have a string in bundle as

WELCOME_MESSAGE=Hello {USER_NAME}. Welcome to Benefits Application.

We want to replace username token at run-time.

Solution: You can simply use af:formatNamed apis to do so

<af:outputText value="#{af:formatNamed(viewcontrollerBundle.WELCOME_MESSAGE,'USER_NAME','Sanjeev')}" id="ot1"/>

In above you make 'Sanjeev' to an expression like securityContext.userName to show actual username.
<af:outputText value="#{af:formatNamed(viewcontrollerBundle.WELCOME_MESSAGE,'USER_NAME',securityContext.userName)}" id="ot1"/>



If you have two tokens you can use af:formatNamed2, It can replace two tokens
WELCOME_MESSAGE=Hello {USER_NAME}. Welcome to {APPLICATION_NAME}.

<af:outputText value="#{af:formatNamed2(viewcontrollerBundle.WELCOME_MESSAGE,'USER_NAME','Sanjeev', APPLICATION_NAME, 'Benefits Application')}" id="ot1"/>

Similarly for 3 tokens, use af:formatNamed3 and 4 tokens use af:formatNamed4 apis

Token name in bundle must be surrounded by curly braces as {USER_NAME}


What if I don't use token but simply break strings in multiple parts. For example instead of
WELCOME_MESSAGE=Hello {USER_NAME}. Welcome to Benefits Application.
I create a bundle as
WELCOME_MESSAGE_PART1=Hello
WELCOME_MESSAGE_PART2=Welcome to Benefits Application.

Now in expression I write it like
<af:outputText value="#{viewcontrollerBundle.WELCOME_MESSAGE_PART1} Sanjeev. #{viewcontrollerBundle.WELCOME_MESSAGE_PART2}"
                         id="ot2"/>

If you run application you may not find any difference but I suggest NOT to do that. This approach has some hidden problems

a. Your translator will not be able to understand whole message. Breaking message in parts can be very difficult to translate and may end up having a completely different meaning.
b. Also I have my doubts that it may not work properly with RTL language. Need to verify this point.

ADF: Know if VO attribute is currently changed

Problem description: We have isAttributeChanged(String) method available in VORowImpl, which can tell if a particular attribute in vo row has changed or not. Problem with this method is if we change attribute once and then restore its value back, method still returns that attribute has changed. I would not say this is bug as this might be requirement at times to know if attribute is ever changed. but at times we are interested in knowing if attribute's current value is different from the database value.
In this blog I want to come up with another method isAttributeCurrentlyChanged(String), which can compare database value with current value and let us know if attribute is actually changed at this time. If value is restored, we should get false as there is no effective change.

Solution: Idea is to use getPostedAttribute method of entity to get database value and compare it with attribute's current value to know if its actually changed. We also want to add this method to be available on each vo row so we would be writing our own base classes and introduce method in those.

1. Create an Entity Impl (say SanEntityImpl) base class and introduce a method getDataBaseValue as

import oracle.jbo.server.EntityImpl;
public class SanEntityImpl extends EntityImpl {

    public Object getDataBaseValue(String attributeName){
        return getPostedAttribute(this.getAttributeIndexOf(attributeName));
    }
}

2. Create a View Row Impl (say SanViewRowImpl) base class as 

import oracle.jbo.server.AttributeDefImpl;
import oracle.jbo.server.ViewAttributeDefImpl;
import oracle.jbo.server.ViewRowImpl;

public class SanViewRowImpl extends ViewRowImpl {
  
    
    public boolean isEOBasedAttribute(String voAttributeName){
        ViewAttributeDefImpl voAttrDef = (ViewAttributeDefImpl)this.getViewDef().findAttributeDef(voAttributeName);
        byte attributeKind = voAttrDef.getAttributeKind();
        if(AttributeDefImpl.ATTR_PERSISTENT == attributeKind){
            return true;
        }
        else{
            return false;
        }
        
    }
    
    public boolean isTransientAttribute(String voAttributeName){
        ViewAttributeDefImpl voAttrDef = (ViewAttributeDefImpl)this.getViewDef().findAttributeDef(voAttributeName);
        byte attributeKind = voAttrDef.getAttributeKind();
        if(AttributeDefImpl.ATTR_TRANSIENT == attributeKind){
            return true;
        }
        else{
            return false;
        }
    }
    
    public Object getDatabaseValue(String voAttributeName){
        if(this.isEOBasedAttribute(voAttributeName)){
            ViewAttributeDefImpl voAttrDef = (ViewAttributeDefImpl)this.getViewDef().findAttributeDef(voAttributeName);
            AttributeDefImpl eoAttrDef = voAttrDef.getEntityAttributeDef();//voAttrDef.getReferenceAttribute()
            String entityAttributeName = eoAttrDef.getName();
            return ((SanEntityImpl)this.getEntity(this.getViewDef().getEntityIndex(voAttrDef.getEntityReference()))).getDataBaseValue(entityAttributeName);
            
        }
        else if(this.isTransientAttribute(voAttributeName)){
            return null;//Better if we can return initial value of attribute
        }
        else{
            return this.getAttribute(voAttributeName); 
        }
        
        
    }
    
    public boolean isAttributeCurrentlyChanged(String voAttributeName){
        Object dbValue = this.getDatabaseValue(voAttributeName);
        Object ctValue = this.getAttribute(voAttributeName);
        if(dbValue == null && ctValue == null){
            return false;
        }
        else if(dbValue == null && ctValue != null){
            return true;
        }
        else if(dbValue != null && ctValue == null){
            return true;
        }
        else if(dbValue.equals(ctValue)){
                return false;
        }
        else{
            return true;
        }
    }
   
}


3. Configure these classes as base classes in project properties

4. Test behavior of isAttributeChanged and isAttributeCurrentlyChanged

    Create EmployeeEO, EmployeeVO based on HR schema and add it in AM. Generate AMImpl and have below method in AM to verify


    public static void main(String[] args){
        String amDef = "com.san.adf.model.am.HRAppModule"; //Replace it with your AM
        String config = "HRAppModuleLocal";  //Replace it with your AM configuration
        HRAppModuleImpl am = (HRAppModuleImpl) Configuration.createRootApplicationModule(amDef, config);
        
        ViewObjectImpl empVO = am.getEmployeeVO();
        empVO.executeQuery();        
        SanViewRowImpl empRow = (SanViewRowImpl)empVO.first();
        
        
        String attrValue = null;
        String attributeName = "FirstName";
        if(empRow != null){
            
            
            attrValue = (String)empRow.getAttribute(attributeName);
            
            //When there is no change
            System.out.println("Without any change");
            System.out.println("isAttributeChanged: " + empRow.isAttributeChanged(attributeName));
            System.out.println("isAttributeCurrentlyChanged: " + empRow.isAttributeCurrentlyChanged(attributeName));
            
            //Change value of attribute and verify
            System.out.println("Changing attribute value to Sanjeev");
            empRow.setAttribute(attributeName, "Sanjeev");            
            System.out.println("isAttributeChanged: " + empRow.isAttributeChanged(attributeName));
            System.out.println("isAttributeCurrentlyChanged: " + empRow.isAttributeCurrentlyChanged(attributeName));
            
            
            //Restore value of attribute and verify
            System.out.println("Restoring attribute value");
            empRow.setAttribute(attributeName, attrValue);            
            System.out.println("isAttributeChanged: " + empRow.isAttributeChanged(attributeName));
            System.out.println("isAttributeCurrentlyChanged: " + empRow.isAttributeCurrentlyChanged(attributeName));
        }
        
        
        Configuration.releaseRootApplicationModule(am, true);
    }


If you run the AMImpl, output is something like this.

Without any change
isAttributeChanged: false
isAttributeCurrentlyChanged: false

Changing attribute value to Sanjeev
isAttributeChanged: true
isAttributeCurrentlyChanged: true

Restoring attribute value
isAttributeChanged: true
isAttributeCurrentlyChanged: false

We can see that after restoring value isAttributeCurrentlyChanged returns false, which means no change. 

Other utility method added in base class VORowImpl are 

isEOBasedAttribute: This method returns true if attribute is database driven.

isTransientAttribute: This method returns true if attribute is transient

getDatabaseValue: This attribute returns value of attribute from database.

Thats all.

Weblogic integrated server Demo Identity Keystore and Demo Trust Keystore

Weblogic has two kinds of keystore, one is IdentityKeyStore and other is TrustStore.

IdentityKeyStore: This keystore contains the identity for WebLogic Server. It means if any client wants to make an SSL request to server, server will send him this certificate. By default, file is located in <WL_HOME>\server\lib\DemoIdentity.jks. Its password is DemoIdentityKeyStorePassPhrase. Private key password is DemoIdentityPassPhrase. 

If you want clients to call an application on weblogic server over SSL then you need to set IdentityKeyStore and you need to add a certificate in it. You have two options to get certificate.
1. Contact verisign or other certificate authority to provide you a certificate.
2. You can yourself generate a certificate using keytool
keytool -genkey -keystore keystorename -storepass keystorepassword

You will use CA provided certificate if you want browser not to throw any warning of certificate when user tries to access your site. With self-signed certificate, browser throws exception and user needs to accept that OR alternatively they need to add that certificate to browser. 


TrustStore: This keystore establishes trust for WebLogic Server. It means if this weblogic server needs to make a call to some secured server over SSL then its going to use this certificate. If you are making a call to thirdpart webservice using a java code, which is deployed on weblogic then weblogic will use this keystore to verify identity of thirdpart-server. This keystore is located at 
<WL_HOME>\server\lib\DemoTrust.jks. Its password is DemoTrustKeyStorePassPhrase. 

In truststore you generally need to add those certificates which are provided by third-party services, which weblogic is going to call. To get those cerficate is simple.
1. Access their service in IE, it will be an https call and you will see a lock icon.

 Install certificate as shown above.

2. Export certificate from browser Tools >> Internet Options >> Content >> Certificate >> Other People >> Select Certificate >> Export

Import certificate in DemoTrust.jks by following these steps
a. Navigate to <WL_HOME>\server\lib and Take backup of DemoTrust.jks
b. Import certificate
keytool -importcert -file <location-of-your-cer-file> –keystore <location-of-trust-keystore> -alias <youraliasname> -storepass DemoTrustKeyStorePassPhrase
For example
keytool -importcert -file D:\temp\OracleOutSourcing_DER.cer –keystore D:\Oracle\Product\11.1.1.7.1-Cloud\Middleware64\wlserver_10.3\server\lib\DemoTrust.jks -alias oracleoutsourcing -storepass DemoTrustKeyStorePassPhrase

Once certificate is imported then you should be able to call thirdparty webservices over SSL.

NOTE: Jdeveloper also using same DemoTrust.jks for standalone program. If you run a java program in jdeveloper,
<your-jdk>\bin\javaw.exe -client -classpath <your-jars> -Djavax.net.ssl.trustStore=<WL_HOME>\server\lib\DemoTrust.jks <Your-java-class>

You can configure it in jdev using Tools > Preferences > Credentials

You can also change keystore/truststore in weblogic console and point to completely new keystore files. 

NOTE: keystore/trustore is server specific. It means all applications of one server are forced to use same keystore/truststore. If you want different keystore/truststore, you may need to create a new managed server.

NOTE: If you get bad-certificate issue after importing certificate in trusstore, then verify if certificate has entries like *.<domain>.com kind of entries. If yes, then you need to remove host verification in weblogic as wildcard host certificates are not allowed if host verification is enabled.

ADF: Colorful Panel Accordion (ShowDetail Item headers)

Problem Description: In ADF we can mostly change styles of all components. Recently in one of forum post it was asked to do styling of ADF panel accordion to have different colors of header. Like below

Problem here is if I style panel-accordion provides a way to style its header. But that style will be applied to all headers. So I can have yellow headers but all will become yellow. How can we have different headers with different colors.

Solution: Lets go from simple to complex

What if we just need to make all headers yellow

<af:panelAccordion id="pa1" >
          <af:showDetailItem text="showDetailItem 1" id="sdi1"/>
          <af:showDetailItem text="showDetailItem 2" id="sdi2"/>
          <af:showDetailItem text="showDetailItem 3" id="sdi3"/>
          <af:showDetailItem text="showDetailItem 4" id="sdi4"/>
  </af:panelAccordion>

af|panelAccordion::header{
  background: yellow none no-repeat fixed center !important; 
}

af|panelAccordion::header-subsequent{
  background: yellow none no-repeat fixed center !important; 
}

af|panelAccordion::header-disclose {
  background: yellow none no-repeat fixed center !important; 
}


Above settings will impact all panel accordions. What if we want it for only specific panel accordion
We can add a class with panelAccordion and refer that in css

<af:panelAccordion id="pa1" styleClass="colorfulAccordian">
          <af:showDetailItem text="showDetailItem 1" id="sdi1"/>
          <af:showDetailItem text="showDetailItem 2" id="sdi2"/>
          <af:showDetailItem text="showDetailItem 3" id="sdi3"/>
          <af:showDetailItem text="showDetailItem 4" id="sdi4"/>
        </af:panelAccordion>

.colorfulAccordian af|panelAccordion::header{
  background: yellow none no-repeat fixed center !important; 
}

.colorfulAccordian af|panelAccordion::header-subsequent{
  background: yellow none no-repeat fixed center !important; 
}

.colorfulAccordian af|panelAccordion::header-disclose {
  background: yellow none no-repeat fixed center !important; 
}


Till here everything is great and Oracle provides selectors to style accordion headers. Now what if we want to style each accordion header differently.

There is no direct way to apply different different styles for each panel accordion headers. They are governed by one style only af|panelAccordion::header (or header-susequent/header-disclose). Any change in this style will affect all headers equally.

To style individual headers we need to use css styling in combination of adf selectors. We need to use nth child selector of css to select one particular header (h1) tag.

.colorfulAccordian af|panelAccordion::header{

  background: #000000 none no-repeat fixed center !important;

}

.colorfulAccordian af|panelAccordion::header-subsequent{

  background: #000000 none no-repeat fixed center !important;

}

.colorfulAccordian.af|panelAccordion h1:nth-child(2) {

  background-color: yellow !important;

}

.colorfulAccordian.af|panelAccordion h1:nth-child(4), af|panelAccordion h1:nth-child(5){

  background-color: red !important;

}

.colorfulAccordian.af|panelAccordion h1:nth-child(6), af|panelAccordion h1:nth-child(7){

  background-color: green !important;

}

.colorfulAccordian.af|panelAccordion h1:nth-child(8), af|panelAccordion h1:nth-child(9){

  background-color: blue !important;

}

Above styles will give you required output. 
Similarly if you want to style only one tab heading of a panelTab

<af:panelTabbed id="pt1" styleClass="colorfulTab">

          <af:showDetailItem text="showDetailItem 5" id="sdi5"/>

          <af:showDetailItem text="showDetailItem 6" id="sdi6"/>

        </af:panelTabbed>

and you want to style only first tab

.colorfulTab.af|panelTabbed af|panelTabbed::viewable-tabs > div:nth-child(1) af|panelTabbed::tab-text-link {

  color: yellow !important;

}

To style only second tab

.colorfulTab.af|panelTabbed af|panelTabbed::viewable-tabs > div:nth-child(2) af|panelTabbed::tab-text-link {

  color: yellow !important;

}

We have to use nth-child selector of css because Oracle by default style all panelAccordion headers (or panelTab's tab) with one single style. There is no way to provide different styles for different headers. Ideally I would have loved to have an attribute in panelAccordion like headerStyle, which I can set as comma separated classnames. Then framework could have taken care to apply those class on individual headers. I just need to provide styles on those classes.


Disclaimer: This solution is not upgrade safe as there is no guarantee that header tags (h1) will be placed same way in html hierarchy as it is today. If ADF framework changes h1 tag in html then whole implementation will fail and you may need to write a new class.

JDeveloper (ADF) Tip: Open pages in source mode instead of design mode. (Improve Productivity)

Problem description: When we try to open a jspx/jsff file it opens up in design mode and generally it takes long time to show page. Most of the time we directly want to see page in source mode.

Here I am just showing to simple jdeveloper tip to open page or page-fragment directly in source mode. This will save time and improve productivity.

Solution

Simple navigate to Tools > Preferences > File Type > Default Editor

Set default editor for different types of file. Mainly I set default editor = Source for JSFF Label, JSP Segment, JSP Source, HTML Source

Thats all.

ADF: Control rows which you want to commit

Problem Description: Let say you have a table in ADF and you want to make sure that even if user edits or create certain rows, they should not get committed but other rows should get committed. Generally when we do commit in adf all rows gets committed together but our requirement is to chose which records should get committed and which one should not.


In this blog I have a hypothetical usecase that all employees rows having firstname=Sanjeev should not get inserted. Its just frozen and no one should be able to modify them.
In ideal case we would like to throw error to end user and let him/her know why certain row can not be committed, but then real world is not ideal and there are chances that we don't want to show error but we silently want to make sure that certain rows (in our example where firstname=Sanjeev) are not getting inserted.

Solution: Its prettey simple. Use doDML method of EOImpl and do not call super.doDML for certain rows. This is doDML operation, which is going to fire actual insert/update/delete operation. If we don't call superclasses doDML operation that those operations will not happen for the row.

Step 1: Create EO/VO/AM based on employee table.

Step 2: Generate EOImpl and override doDML operation as shown below
    protected void doDML(int operation, TransactionEvent e) {
        if(operation == DML_INSERT && "Sanjeev".equals(this.getFirstName())){
            System.out.println("Do not commit employee rows having first name = sanjeev");
        }
        else{
            super.doDML(operation, e);
        }
       
    }

Step 3: Run AM and tester in bc4j tester and show VO in tabular format

a. Create two new rows one having FirstName=Sanjeev and other FirstName=Sanjeev1
 

b. Commit transaction

c. Requery vo

You see there is only one row has got committed.

Launch Popup while loading the page

Problem Description: In this blog I am trying to explain how we can launch a popup while loading the page. Generally we launch popup as an event of some activity (button click, link click, input change etc). What if we need to launch a popup while user is launching the page first time? There are different usecase for this.
a. You may want to provide a change password popup to user when he access system first time.
b. You may want to ask user to 'read and acknowledge' agreement terms before accessing a page.


Solution: There could be multiple ways to do it. I am going to show two ways.
First which works if you have a page and your UI components are directly on page.
Second if you have bounded task-flow and your popup is on a jsff of bounded task-flow. Task-flow is appearing as a region on main page.


First Approach: When you have your UI components (popup) on a jspx page directly.

Step 1: Create your page (say main.jspx) and bean (say MainBean.java) and register it in backingbeanscope.

Step 2: Create popup on your main.jspx

Step 3: Bind popup with bean

Step 4: Implement BeforePhase for your page: For this you need to select f:view tag in your page and set(or create) bean method that you want to execute in beforePhase property.

Step 5: Implement launchMyPopup method as shown below
    public void launchMyPopup(PhaseEvent phaseEvent) {
        // Add event code here...
        if(this.getChangePwdPopup() != null){
            Map viewScope = (Map)ADFUtil.evaluateEL("#{viewScope}");
            String isPgInitialized = (String)viewScope.get("pIsPgInitialized");
            if(isPgInitialized == null){

               //You may want to have additional complex business logic of page initialization. Do it here.
                    this.getChangePwdPopup().show(new RichPopup.PopupHints());
                viewScope.put("pIsPgInitialized", "Y");
                
            }
            
        }
        
    }

Above code is going to get executed while page is loading. It is actually going to get executed multiple times while page is getting loaded. (For every phase once).
Out logic is we are going to do page initialization activities (in this case launching popup) only once and immediately we will set a viewScope parameter. To avoid unnecessarily running page initialization code again and again in every phase, we are going to check if viewScope parameter is already set. If its there we will not execute our code. Viewscope checking will save us if user is doing some activity like button click etc on page, still our code is not going to execute as viewScope will still have the variable.

Step 6: Run page and verify.

Now coming to next approach. If your popup is on a jsff, which is used in a bounded-task-flow. You have dropped bounded task-flow as a region on main page.

In this situation, we don't have beforePhase property in jsff file component. One easy solution that I can figure out is having a hidden (visible=false) outputtext on page. Bind it on bean and write your code inside getter method.


Step 1: Have your task-flow (say MyTestFlow), bean (MainFGBean registered in task-flow at backingbeanscope), Fragment (say MyTestPG.jsff).

Step 2: Create popup in MyTestPG.jsff and bind it with bean

Step 3. Have one hidden (visible=false) outputtext in jsff file. It must be at very bottom of jsff. That will make sure that getter of this run at last. By the time all UI component would have been already bound with bean.

Step 4. Have below code in your bean

public class MainFGBean {
    private RichPopup changePwdPopup;
    private RichOutputText pageInitText;

    public void setChangePwdPopup(RichPopup changePwdPopup) {
        this.changePwdPopup = changePwdPopup;
    }

    public RichPopup getChangePwdPopup() {
        return changePwdPopup;
    }
    public void setPageInitText(RichOutputText pageInitText) {
        this.pageInitText = pageInitText;
    }

    public RichOutputText getPageInitText() {
        if(this.getChangePwdPopup() != null){
            Map viewScope = (Map)ADFUtil.evaluateEL("#{viewScope}");
            String isPgInitialized = (String)viewScope.get("pIsPgInitialized");
            if(isPgInitialized == null){

                //You may want to have additional complex business logic of page initialization. Do it here.
                this.getChangePwdPopup().show(new RichPopup.PopupHints());
                viewScope.put("pIsPgInitialized", "Y");
                
            }
            
        }
        return pageInitText;
    }
}

NOTE: How getPageInitText is launching popup. Its trying to initialize page UI components. By the time this getter runs popup getter/setter is already done and popup is already associated with bean. That is because you have added outputtext at the bottom of jsff.

Step 5: Run and test. 

NOTE: Above mentioned approaches are not limited to showing poup on page-load but it is helpful to play around with UI components on page load. For example
a. You may want to make your complete page read only for certain condition.
b. You may want to dynamically make one column form to two column based on some condition.

To sumup you want to play with UI components while page is getting loaded. 

Run Groovy from Java

Why do we want to mix Groovy with Java:
One common requirement in java is to keep core logic in groovy and then evaluate it at runtime. This gives a flexibility as groovy can be referred from xml file, property file or database. That way customer can change groovy anytime and without deployment java code can start working with new groovy expression.

One common example could be calculating salary components. We definitely want to give customer a flexibility to write his own logic to determine salary components. We don't want to hard code that logic in java code. In such cases we can store groovy expression in database table and read it at runtime and evaluate it from java. End user can change groovy expressions anytime in database.

Basic requirement from groovy to java integration would be
a. Somehow we should be able to pass java variables to groovy code. These are called environment variables.
b. Somehow we should be able to parse and run groovy from java. We have Groovy apis for that.
c. Somehow values calculated by groovy should be passed back to java.

Below code show how we can do it.

import groovy.lang.Binding;
import groovy.lang.GroovyShell;
import groovy.lang.Script;

import java.util.HashMap;
import java.util.Map;


public class GroovyUtil {
    public GroovyUtil() {
        super();
    }
   
    public static Map evaluateGroovy(Map paramMap,String scriptText){
       
       System.out.println("Evaluating groovy: " + scriptText);     
        System.out.println("Input Map: " + paramMap);
       //Environment variables passed to groovy using Binding.
        Binding binding = new Binding(paramMap);
        GroovyShell shell = new GroovyShell();       
        Script script = shell.parse(scriptText);
        script.setBinding(binding);
        script.run();
        //bindings.getVariables() returns all variables of groovy including input and other local variables
        System.out.println("Output Map: " + binding.getVariables());      
        return binding.getVariables();
       
    }
   
    public static void main(String[] args){
        String scriptText = "println('Sctipt execution Started');\n" +
        "    sum = a + b;\n" +
        "    println('script finished');";
       
        Map inputMap = new HashMap();
        inputMap.put("a",10);
        inputMap.put("b",20);
        Map outputMap = evaluateGroovy(inputMap,scriptText);
        System.out.println(outputMap);
    }
}











Output looks like
Evaluating groovy: println('Sctipt execution Started');
    sum = a + b;
    println('script finished');
Input Map: {b=20, a=10}
Sctipt execution Started
script finished
Output Map: {b=20, a=10, sum=30}
{b=20, a=10, sum=30}







For such kind of code there must be an understanding between groovy and java code about input and output variable names.

Taleo: Installing Taleo (TCC) Client

This blog is first in my upcoming blogs of Taleo (TCC). In this I would like to show how we can install Taleo Client TCC.

1. Go to https://edelivery.oracle.com

2. Sign in / Register. (OTN SSO username/password will be used)  

3. Select Product "Oracle Taleo Plateform Cloud Service - Connect" and Plateform Window-32

    Select Continue

4. Read and Accept ‘Terms and Conditions’

5. Download TCC Application Datamodel and TCC Application Installer for windows

6. Once downloaded unzip both zip files. They both contains an exe file each.

7. Install ‘Taleo Connect Client Application Data Model (15.1.0.3) for Microsoft Windows.exe’ first. NOTE: its installation location. It will be required in second installation.

8. Install ‘Taleo Connect Client Application Installer (15.1.0.11) for Microsoft Windows.exe’. Provide pip location as the location of where you installed datamodel.

 

9. Launch Taleo Client.

10. If you are launching first time, you need to pint Taleo server. Select Product and provide, Host Port (generally 443 for https), username/password