Hijri Calendar With ADF Bussiness Component

This is my Second Post About Using JQuery Hijri Calendar with ADF.

1-Firstly we will create these two function in our schema

      a- Greg_To_Hijri

Create Or Replace Function Greg_To_Hijri(V_Greg Varchar2) Return Varchar2 As

V_Hijri  Varchar2(10);



Begin
   Select To_Char(To_Date(V_Greg ,'yyyy-mm-dd') +1 ,'dd/MM/yyyy', 'nls_calendar =''arabic hijrah''')  Into V_Hijri From Dual ;
   

 
    Return V_Hijri ;
 
End ;



        b- hijri_to_greg

create or replace function hijri_to_greg(V_HIJRI VARCHAR2) return DATE as

V_GREG  DATE;



BEGIN
    select to_date(V_HIJRI,'DD-MM-YYYY','nls_calendar=''English Hijrah''') -1 INTO V_GREG from dual;
 
    RETURN V_GREG ;
 
END ;


2- Secondly we will make an ADF Application

        - in the model project we will create enity object and view ojbect for Employees Table

3-Make a transient Attribute in the employee view oject called "HijriHireDate" with Type String

4-we will make 2 custom sql query view objects that call the two functions

   a- GregToHijriView
      SELECT GREG_TO_HIJRI(:P_Greg) Hijri from dual

Make java class for the view

 

  b-  HijriToGregView
   SELECT hijri_to_greg (:P_Hijri) greg from dual

Make java class for the view

5- On the Application Moduel create two functions that convert from hijri to greg and vice viersa

   a-
    public String convertGregToHijri(String greg) {
        GregToHijriViewImpl gregVo= getGregToHijriView1();
        gregVo.setP_Greg(greg);
        gregVo.executeQuery();
        return gregVo.first().getAttribute("Hijri")+"";
    }
 
   b-
    public Date convertHijriToGreg(String hijri) {
        HijriToGregViewImpl hijriVo=getHijriToGregView1();
        hijriVo.setP_Hijri(hijri);
        hijriVo.executeQuery();
        return (Date) hijriVo.first().getAttribute("Greg");
 
    }

6- In Employees View change the expression of the  "HijriHireDate" attribute

to      "adf.object.applicationModule.convertGregToHijri(HireDate.toString())".

Note : when you change the attribute to Expression in the xml file the jdeveloper will make a tag trustMode ="untrusted": you must change it to "trusted"

<TransientExpression

      trustMode="untrusted"><![CDATA[adf.object.applicationModule.convertGregToHijri(HireDate.toString())]]></TransientExpression>

<TransientExpression

      trustMode="trusted"><![CDATA[adf.object.applicationModule.convertGregToHijri(HireDate.toString())]]></TransientExpression>

7- create the page and add the view object to the page

add two methods in Your bean to convert hijri to greg and vice versa

for example

    private Date converHijriToGreg(String hijriDate) {
        BindingContainer bindings = getBindings();
        OperationBinding operationBinding = bindings.getOperationBinding("convertHijriToGreg");
        operationBinding.getParamsMap().put("hijri", hijriDate);
        Object result = operationBinding.execute();
        if (result != null) {
   
            return (Date) result;
        }
        return null;

    }

8-make the hire date autosubmit =true and in the valuechangelistener call the conversion function as you will see in the example

 <af:inputDate value="#{bindings.HireDate.inputValue}"
                                                          label="#{bindings.HireDate.hints.label}"
                                                          required="#{bindings.HireDate.hints.mandatory}"
                                                          columns="#{bindings.HireDate.hints.displayWidth}"
                                                          shortDesc="#{bindings.HireDate.hints.tooltip}" id="id1"
                                                          autoSubmit="true"
                                                          valueChangeListener="#{HijriManipulation.hireDateChanged}"
                                                          binding="#{HijriManipulation.gregDate}"
                                                          partialTriggers="it11date">
                                                <f:validator binding="#{bindings.HireDate.validator}"/>
                                                <af:convertDateTime pattern="#{bindings.HireDate.format}"/>
                                            </af:inputDate>



b-

<af:inputText value="#{bindings.HijriHireDate.inputValue}"
                                                          label="#{bindings.HijriHireDate.hints.label}"
                                                          required="#{bindings.HijriHireDate.hints.mandatory}"
                                                          columns="10"
                                                          maximumLength="#{bindings.HijriHireDate.hints.precision}"
                                                          shortDesc="#{bindings.HijriHireDate.hints.tooltip}"
                                                          id="it11date"
                                                          autoSubmit="true"
                                                          valueChangeListener="#{HijriManipulation.hijriDateChanged}"
                                                          binding="#{HijriManipulation.hijriDate}"
                                                          partialTriggers="id1">
                                                <f:validator binding="#{bindings.HijriHireDate.validator}"/>
                                                <af:clientListener type="mouseDown" method="DatePick"/>
                                            </af:inputText>



At the end here is the Application Source



Calendar App

ADF Hijri Calendar

There is alot of ADF Developers searching for the Hijri Calendar 

I will show you how to  add the hijri calendar using JQuery Libraries

Actually the example is developed by My Brother Muhammed Faried, I only add small work to use the calendar on any input text which name ends with "date"

I'm working on making some work on converting between Hijri And Gregorian and i will publish the updates in a new post

I used JDev 12.1.3.0.0 for developing this complete example

1-  put the JQuery files in a folder in the view project  ex: JQuery

2- put the CSS file in a folder in the view project  ex: css

3- in the page make reference to jquery files,your javascript file, and css file   ex: 

<af:resource type="javascript" source="/JQuery/jquery-1.10.2.min.js"/>

<af:resource type="css" source="/css/jquery.calendars.picker.css"/>

4- function to select with id or class or with suffix 

// you should name any input text you want to put hijri calendar in with suffix "date"

function DatePick() {
         
                  $("input[name$='date']").calendarsPicker($.extend(
            { calendar: $.calendars.instance('ummalqura', 'ar') },
                $.calendarsPicker.regionalOptions['en']));

}


5- you can change the format of the date in the  file called "jquery.calendars.ummalqura-ar.js"

for example
dateFormat: 'dd/mm/yyyy', // See format options on BaseCalendar.formatDate

or

dateFormat: 'yyyy/mm/dd', // See format options on BaseCalendar.formatDate

6- Make a page template that holds all Jquery files

 <af:resource type="javascript" source="/JavaScript/page1Class.js" />
        <af:resource type="javascript" source="/JQuery/jquery-1.10.2.js"/>
        <af:resource type="javascript" source="/JQuery/jquery-1.10.2.min.js"/>
       
        <af:resource type="javascript" source="/JQuery/jquery.plugin.min.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.picker.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.picker-ar.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.plus.min.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.ummalqura.min.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.ummalqura-ar.js"/>
        <af:resource type="css" source="/JQuery/jquery.calendars.picker.css"/>
        <af:resource type="css" source="/CSS/myStyle.css"/>

7-  create a page and an input text then add A client listener to the input text you want it to display the calendar

 <af:clientListener method="DatePick" type="mouseDown"/>

8- Here is the Application Source   Hijri Calendar Application



The next post will be about converting between Greg and Hijri Dates