Style Facebook Login Page Using Oracle ADF Face Component & implementing CSS

Hello All,

This post is about implementing CSS on ADF application used to change the look and apperence of ADF application by using skin. I have designed a Facebook Page just to show you how to implement this. 

• Firstly,create a Fusion Web Application.
• Now create a CSS File as,

         Right click on ViewController ----> New ----> All Items ----> CSS File.

• Now create a XML file in WEB-INF of the name of trinidad-skin.xml

<?xml version="1.0" encoding="windows-1252" ?> <skins xmlns="http://myfaces.apache.org/trinidad/skin"> <skin> <family>skyros</family> <extends>blafplus-rich.desktop</extends> <style-sheet-name>css/Home.css</style-sheet-name> </skin> </skins>

• Make sure that the skin-family type of trinidad-config.xml & trinidad-skin.xml should be same.
• Now create a jspx page and drop af:resource from the component palette and define type and source of the file as,

• By this way your CSS file will be implemented on the ADF application.
• Here, I have designed Facebook Login Page using ADF face component and implementing CSS and i also have done the functionality in this Application.
• To access this sample application firstly create a table in HR schema by using the following SQL query as,  

                                  CREATE TABLE  "FACEBOOK_SIGNUP"

CREATE TABLE "FACEBOOK_SIGNUP" ("FIRST_NAME" VARCHAR2(200), "LAST_NAME" VARCHAR2(200), "EMAIL" VARCHAR2(200), "MOBILE" VARCHAR2(200), "PASSWORD" VARCHAR2(200), "DIN" VARCHAR2(200),"MONTH" VARCHAR2(200), "YEAR" VARCHAR2(200), "GENDER" VARCHAR2(200), CONSTRAINT "FACEBOOK_SIGNUP_PK" PRIMARY KEY ("EMAIL") ENABLE)

                 Code for SignUp (Insert data in DB):

public void zxcxc(ActionEvent actionEvent) { String m= getMonth().getValue().toString(); String d= getDin().getValue().toString(); String y= getYear().getValue().toString(); String rd= getRadio().getValue().toString(); DCIteratorBinding dc= (DCIteratorBinding)getBindings().get("FacebookSignupVO1Iterator"); ViewObject EmpVO = dc.getViewObject();//used to get VO Row r = dc.getCurrentRow(); r.setAttribute("Din", d); r.setAttribute("Month", m); r.setAttribute("Year", y); r.setAttribute("Gender",rd); BindingContext bindingctx = BindingContext.getCurrent(); BindingContainer bindings = bindingctx.getCurrentBindingsEntry(); OperationBinding operationBinding = bindings.getOperationBinding("Commit"); Object result = operationBinding.execute(); OperationBinding operationBinding1 = bindings.getOperationBinding("CreateInsert"); Object result1 = operationBinding1.execute(); din.setValue(null); month.setValue(null); year.setValue(null); radio.setValue(null); // calljqHelper("$.growl.error({ message: \"Hi this is error message!\" });"); FacesMessage Message = new FacesMessage("Successfully Registered !!"); Message.setSeverity(FacesMessage.SEVERITY_INFO); FacesContext fc = FacesContext.getCurrentInstance(); fc.addMessage(null, Message); }

          Code for Login(Using DB credentials):

public String loginFB() { String emailLogin= getLoginEmail().getValue().toString(); String passwordLogin= getLoginPwd().getValue().toString(); DCBindingContainer b =(DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry(); DCIteratorBinding dcib = b.findIteratorBinding("FacebookSignupVO1Iterator"); ViewObject vo1 = dcib.getViewObject(); vo1.setWhereClause("email = '"+emailLogin+"'"); vo1.executeQuery(); if(vo1.getRowCount()>0) { Row rowSel = vo1.first(); String email=rowSel.getAttribute("Email").toString(); String password=rowSel.getAttribute("Password").toString(); vo1.setWhereClause(null); vo1.executeQuery(); if(email.equalsIgnoreCase(emailLogin) && password.equalsIgnoreCase(passwordLogin)) { return "go"; } else{ return null; } } else{ return "invalid"; } } }
• Now Run jspx file(main.jspx).

• Here, is the link to download the sample application Facebook_Login.

THANK YOU :)