ADF Skinning: Skin an ADF Pop-up

Mastering the art of ADF Skinning can help you change the look and feel of your application. Please view some of my prior blogs to get acquainted with the basics - How to create an ADF Skin, Applying custom class to ADF Faces

Today, we will discuss a specific use case. I have been asked the question – How to apply a border to an ADF popup? Let’s figure out how!

Skinning a PopUp

1. Create a custom skin MyDemo.css (Refer this post if you don’t know how to do this)

2. Identify the root component within the popUp. For this example, I am considering it to be an dialog box.

2. Add the following class to MyDemo.css
af|dialog.myClass 
 border: solid; 
 border-width: thick; 
 border-style: solid; 
 border-color: Red;
}

3. Apply the class to the popup component
<af:popup childCreation="deferred" autoCancel="disabled" id="p1">
      <af:dialog id="d2" styleClass="myClass">
              <af:outputText value="This is my dialog box" id="ot2"/>
       </af:dialog>
</af:popup>

4. Run the page. And here’s how the popUp should look



Hope you find this information useful.Please share your feedback below. I would love to hear from you.

CaptiveCode

Oracle B2B: How to unit test your Oracle B2B Setup

Oracle provides Shell and PL/SQL scripts to unit test your B2B application. These scripts enable you to enqueue/ dequeue messages B2B queues. Queing messages to the following B2B queues helps simulate inbound and outbound messages to/from Oracle B2B. Thus, enabling unit testing of your B2B Setup.

1) IP_IN_QUEUE - B2B queue for Inbound messages
2) IP_OUT_QUEUE - B2B queue for Outbound messages

Using Shell Scripts:
SOA 11g: B2B - How to Use Scripts to Enqueue a Message (Doc ID 1376541.1)
https://support.oracle.com/epmos/faces/SearchDocDisplay?_adf.ctrl-state=bu4l6uddl_185&_afrLoop=562365794673522

Using PL/SQL Scripts:
http://www.oracle.com/technetwork/topics/b2b-tn-004-enqueue-dequeue-plsql-132991.pdf

Additional Reference:
Refer the Fusion Middleware User's Guide for Oracle B2B >> Chapter 23 Utilities for Enqueuing and Dequeuing
http://docs.oracle.com/cd/E23943_01/user.1111/e10229/enq_deq.htm#XBBUG1502


Hope you find this information useful.Please share your feedback below. I would love to hear from you.

CaptiveCode

SOA: Basics: Creating a WSDL using a XSD

This is one of the basic requirements for SOA developers. Today, we will learn how to generate a WSDL file using a XSD. We will use Eclispe to achieve this. So, let's begin!

Our Objective:
To build a HelloWorld WSDL that will have the following inputs, outputs and operations:
  • Inputs:
    • First Name
    • Last Name
  • Outputs:
    • GreetingsMessage
  • Operations:
    • sayGreetings






















Creating the XSD

Create a new Dynamic Web Project > Provide a Project Name (HelloWorldSvc) > Click Finish
Right click the WEB-INF > Click New > Other > Select XML Schema File

Create HelloWorldRequest.xsd


Add the firstName and lastName elements to the HelloWorldRequest.xsd

<?xml version="1.0" encoding="UTF-8"?>
<schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.example.org/HelloWorldRequest" xmlns:tns="http://www.example.org/HelloWorldRequest" elementFormDefault="qualified">
    <element name="hw_Request" type="tns:hw_Request" />
    <complexType name="hw_Request">
    <sequence>
    <element name="firstName" type="string" minOccurs="1" maxOccurs="1"></element>
    <element name="lastName" type="string" minOccurs="1" maxOccurs="1"></element>
    </sequence>
    </complexType>
</schema>


Similarly,
Create HelloWorldResponse.xsd


Add the following elements to the HelloWorldResponse.xsd

<?xml version="1.0" encoding="UTF-8"?>
<schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.example.org/HelloWorldResponse" xmlns:tns="http://www.example.org/HelloWorldResponse" elementFormDefault="qualified">
    <element name="hw_Response" type="string" />
</schema>


Creating the WSDL

Right click the WEB-INF > Click New > Other > WSDL
Provide a name for the WSDL and click Finish

Follow these steps to update the WSDL:

Add the namespace for the request and response xsd to the wsdl

<wsdl:definitions xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
xmlns:tns="http://www.example.org/HelloWorld/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema" name="HelloWorld"
targetNamespace="http://www.example.org/HelloWorld/" xmlns:request="http://www.example.org/HelloWorldRequest"
xmlns:response="http://www.example.org/HelloWorldResponse">

Import the schemas for the request and response

<wsdl:types>
<xsd:schema targetNamespace="http://www.example.org/HelloWorld/">
<xsd:import namespace="http://www.example.org/HelloWorldRequest" schemaLocation="../xsd/HelloWorldRequest.xsd" />
<xsd:import namespace="http://www.example.org/HelloWorldResponse" schemaLocation="../xsd/HelloWorldResponse.xsd" />
</xsd:schema>
</wsdl:types>

Add the message for the request and response messages

<wsdl:message name="sayGreetingsRequest">
<wsdl:part element="request:hw_Request" name="parameters" />
</wsdl:message>
<wsdl:message name="sayGreetingsResponse">
<wsdl:part element="response:hw_Response" name="parameters" />
</wsdl:message>

Update the process name and message binding
<wsdl:portType name="HelloWorld">
<wsdl:operation name="sayGreetings">
<wsdl:input message="tns:sayGreetingsRequest" />
<wsdl:output message="tns:sayGreetingsResponse" />
</wsdl:operation>
</wsdl:portType>


Generated Output/ Final WSDL

And your WSDL is ready! Here's how it looks!

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<wsdl:definitions xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
xmlns:tns="http://www.example.org/HelloWorld/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema" name="HelloWorld"
targetNamespace="http://www.example.org/HelloWorld/" xmlns:request="http://www.example.org/HelloWorldRequest"
xmlns:response="http://www.example.org/HelloWorldResponse">
<wsdl:types>
<xsd:schema targetNamespace="http://www.example.org/HelloWorld/">
<xsd:import namespace="http://www.example.org/HelloWorldRequest"
schemaLocation="../xsd/HelloWorldRequest.xsd"></xsd:import>
<xsd:import namespace="http://www.example.org/HelloWorldResponse"
schemaLocation="../xsd/HelloWorldResponse.xsd"></xsd:import>
</xsd:schema>
</wsdl:types>
<wsdl:message name="sayGreetingsRequest">
<wsdl:part element="request:hw_Request" name="parameters" />
</wsdl:message>
<wsdl:message name="sayGreetingsResponse">
<wsdl:part element="response:hw_Response" name="parameters" />
</wsdl:message>
<wsdl:portType name="HelloWorld">
<wsdl:operation name="sayGreetings">
<wsdl:input message="tns:sayGreetingsRequest" />
<wsdl:output message="tns:sayGreetingsResponse" />
</wsdl:operation>
</wsdl:portType>
<wsdl:binding name="HelloWorldSOAP" type="tns:HelloWorld">
<soap:binding style="document"
transport="http://schemas.xmlsoap.org/soap/http" />
<wsdl:operation name="sayGreetings">
<soap:operation soapAction="http://www.example.org/HelloWorld/sayGreetings" />
<wsdl:input>
<soap:body use="literal" />
</wsdl:input>
<wsdl:output>
<soap:body use="literal" />
</wsdl:output>
</wsdl:operation>
</wsdl:binding>
<wsdl:service name="HelloWorld">
<wsdl:port binding="tns:HelloWorldSOAP" name="HelloWorldSOAP">
<soap:address location="http://www.example.org/" />
</wsdl:port>
</wsdl:service>
</wsdl:definitions>



Hope you find this information useful.Please share your feedback below. I would love to hear from you.

CaptiveCode

ADF: Skinning: Applying ALTA UI Skin to an ADF Application

Oracle’s new ALTA UI (introduced in 12c) provides a modern look to your ADF application. It is simple, clean and at the same time very sleek. Let me share with you how you applying the out of the box ALTA Skin to your application.
  • Note: You do not need to perform these steps when using the latest release of Oracle JDeveloper 12.2.1  as ALTA UI is extended by default when you create a new skin file.

Applying the ALTA Skin

Create a custom skin file MyDemoSkin.css within your ADF application. Refer to my prior post for the detail steps on how to do this.

Your trinidad-config.xml file looks like this:

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


Update the Trinidad-config.xml and add a version number for your skin-family. 

  • Best Practice - "Always version your skin families"

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


Your trinidad-skins.xml looks like this:


<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>myDemoSkin.desktop</id>
<family>myDemoSkin</family>
<extends>skyros-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/myDemoSkin/myDemoSkin.css</style-sheet-name>
<bundle-name>com.demo.view.skinBundle</bundle-name>
</skin>
</skins>

Notice that your skin (MyDemoSkin) extends the out of the box skyros skin (skyros-v1.desktop). We will update this to extend ALTA skin.


Update the trinidad-skins.xml to modify the <extends> property:
<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>myDemoSkin.desktop</id>
<family>myDemoSkin</family>
<!--extends>skyros-v1.desktop</extends-->
<extends>alta-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/myDemoSkin/myDemoSkin.css</style-sheet-name>
<bundle-name>com.demo.view.skinBundle</bundle-name>
</skin>
</skins>

Now your ADF UI will follow the ALTA look and feel. Furthermore, you can create custom classes within your MyDemoSkin.css and enhance the appearance of your UI.

Learn how to define custom style classes and apply them to ADF Faces components here.


Hope you find this information useful. Please share your feedback below. I would love to hear from you. 

CaptiveCode


ADF: Skinning: Creating a custom skin for an ADF Application

Applying style to your ADF application can radically change its look and feel. Here’s the basics on how!

Creating a Skin File

Using the new component wizard à JSF/Facelets à ADF Skin

New Gallery > JSF Facelets > ADF Skin

Provide a file name and the skin family

Enter FileName for ADF Skin

Select the base skin custom skin (MyDemoSkin.css) will be based on

Inherit skyros in ADF Skin 

Add your custom classes to the MyDemoSkin.css file

Add custom class to ADF Skin


Understanding the Impact

An entry is made in the trinidad-skins.xml
  • You can define multiple skin files within the trinidad-skins.xml file
  • You can define multiple skin files within the skin family
Review ADF Skin

An entry is created the trinidad-config.xml file defining the skin family that is used by the application.
  • You can have multiple skin families defined within your application. The <skin-family> tag specifies the skin family that is currently being used by the application.
  • You can use EL expression to programmatically apply skin family programmatically  here:
    • <skin-family> #{mybean.value}</skin-family>

Review ADF Skin


Learn how to define custom style classes and apply them to ADF Faces components in my next post.


Hope you find this information useful. Please share your feedback below. I would love to hear from you.

Captive
Code


ADF: Skinning: Applying a custom style class to an ADF Faces component

In my previous post we learnt how to create and apply a skin file to an ADF application. In this post, we shall learn how to add custom style classes and make your application look great!

Define your custom style class in the myDemoSkin.css file

.myFirstClass{      
        Color: Red;
Font-weight: bold;
}
  • You can use the property inspector on the right to edit your style class


Applying the skin to a ADF Faces Component

Set the style class property of the ADF Faces component to your custom class' name

    <af:outputText value="This is how my styling looks on an outputText component." id="ot1" styleClass="myFirstClass"/>

This is how the result looks:


ADF 12c supports CSS 3.0 standards and is very powerful. You can do a range of things using CSS style your components, programmatically apply style classes and use expressions within style classes to control property values. We will discuss further more in my upcoming posts.


Hope you find this information useful. Please share your feedback below. I would love to hear from you.

Captive
Code