Get real value from ADF af:selectOneChoice with javascript

I got to know (from a thread : https://forums.oracle.com/forums/thread.jspa?threadID=2351565&tstart=0)about a particular scenario where items values are displayed or rendered as select item's index in html.Therefore in javascript the select items values are populates as index values not items values.

Previous code in jspx page is :

<af:selectOneChoice label="Set Log Level" id="soc1"

                              value="#{SelectManagedBean.loggerDefault}">

            <af:selectItem label="select one" value="First" id="s6"/>

            <af:selectItem label="select two" value="Second" id="s56"/>

           

            <af:clientListener method="setLogLevel" type="valueChange"/>

          </af:selectOneChoice>

          <af:resource type="javascript">

            function setLogLevel(evt) {

                var selectOneChoice = evt.getSource();

                var logLevel = selectOneChoice.getSubmittedValue();

              //  var logLevelObject = AdfLogger.NONE;

                alert("new value is : " + logLevel);

                //alert(evt.getSelection);

               

                //alert(logLevelObject);

                evt.cancel();

            }

          </af:resource>

And the output in browser is :

This is because in html, the following codes are generated by ADF

<select id="soc1::content" name="soc1" class="x2h"><option value="" _adfTmpOpt="t"></option><option value="0">select one</option><option value="1">select two</option></select>

The workaround is :

I have added valuePassThru="true" in af:selectOneChoice component. The full jspx code is :

<af:selectOneChoice label="Set Log Level" id="soc1"

                              value="#{SelectManagedBean.loggerDefault}"

                              valuePassThru="true">

            <af:selectItem label="select one" value="First" id="s6"/>

            <af:selectItem label="select two" value="Second" id="s56"/>

           

            <af:clientListener method="setLogLevel" type="valueChange"/>

          </af:selectOneChoice>

          <af:resource type="javascript">

            function setLogLevel(evt) {

                var selectOneChoice = evt.getSource();

                var logLevel = selectOneChoice.getSubmittedValue();

              //  var logLevelObject = AdfLogger.NONE;

                alert("new value is : " + logLevel);

                //alert(evt.getSelection);

               

                //alert(logLevelObject);

                evt.cancel();

            }

          </af:resource>

And the output in browser is as expected.

And the generated html is :

<select id="soc1::content" name="soc1" class="x2h">

<option value="" _adfTmpOpt="t"></option>

<option value="First">select one</option>

<option value="Second">select two</option>

</select>

The select item values are also populated in correct way.

Skin Changing in ADF /Webcenter by clicking links

Those who are constantly working in adf/webcenter framework,then are acquainted with skin changing by selecting some kind of drop down list.Steps and some sort of code is documented by Oracle in the following link http://docs.oracle.com/cd/E21764_01/web.1111/b31973/af_skin.htm (To conditionally configure a component to set the skin family:) Now this is the base of what I am going to show you.
Skins will be changing based on user clicks on link.

Step 1:Under WEB-INF folder,create trinidad-skins.xml. where you will mention your skins.
just like below -(Assuming you have two skins redSkin.css and yellowSkin.css in your application.
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>redSkin.desktop</id>
    <family>redSkin</family>
    <extends>blafplus-rich.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/redSkin.css</style-sheet-name>
  </skin>
  <skin>
    <id>yellowSkin.desktop</id>
    <family>yellowSkin</family>
    <extends>blafplus-rich.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/yellowSkin.css</style-sheet-name>
  </skin>
</skins>

Step 2 :Create a managed bean to change skins dynamically and register the managed bean in adfc-config.xml or faces-config.xml (whatever you prefer).This bean will populate list of skins in trinidad-config.xml.

1. package hoque.skin;
2. import javax.faces.context.FacesContext;
3.  
4. public class SkinBean {
5.     private String[] skins = new String[] {"redSkin","yellowSkin","Portal" };
6.     private String currentSkin = null;
7.     public String[] getSkins() {
8.         return skins;
9.     }
10.     public void setCurrentSkin(String currentSkin) {
11.         this.currentSkin = currentSkin;
12.     }
13.     public String getCurrentSkin() {
14.         if(currentSkin==null){
15.             FacesContext ctx = FacesContext.getCurrentInstance();
16.             String skinPreference=(String)ctx.getApplication().evaluateExpressionGet(ctx, "#{preferenceBean.defaultTrinidadSkin}", Object.class);
17.             currentSkin = skinPreference;
18.         }
19.         return currentSkin;
20.     }
21. }

Step 3:Change the default skin preferencebean in trinidad-config.xml.

?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">

  <skin-family>#{SkinBean.currentSkin}</skin-family>
  <skin-version>v1.1</skin-version>
</trinidad-config>

Step 4: Add CommandLinks with actionListeners in jspx page.

<af:commandLink text="Red"
                              id="cl1"
                              actionListener="#{skinChangeBean.change}"/>

<af:commandLink text="Yellow"
                              id="cl2"
                              actionListener="#{skinChangeBean.change}"/>

Step 5: Create SkinChangeBean managed bean to change the skins and register it in adfc-config.xml or faces.xml.

 

1. package hoque.skin;
2.  
3. import javax.faces.context.FacesContext;
4. import javax.faces.event.ActionEvent;
5.  
6. public class SkinChangeBean{
7.  
8. private SkinSelectorBean preferencebean;
9.  
10. public void change(ActionEvent actionEvent) {
11.             FacesContext ctx = FacesContext.getCurrentInstance();
12.                String skinvalue="redSkin";
13.             preferencebean =
14.                     (SkinBean )ctx.getApplication().evaluateExpressionGet(ctx, "#{SkinBean }", Object.class);
15.             if(preferencebean!=null){
16.                 if(skinvalue.equalsIgnoreCase(preferencebean.getCurrentSkin())){
17.                     skinvalue = "yellowSkin";
18.                 }
19.                 preferencebean.setCurrentSkin(skinvalue);
20.                          
21.             }
22.             // Add event code here...
23.         }
24. }

Step 6:Run you application and observe the changes.