12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

ChartingwithADFDataVisualizationComponents
Inthistutorial,youusetheDVT(DataVisualizationTool)componentsinOracleADFtobuildsomegraphicalrepresentations
ofdata,suchasBarCharts,Gauges,GanttchartsandGeographicalmaps.Youalsoexploretheuseofapivottable.ADF
DataVisualizationcomponentsareasetofrichinteractiveADFFacescomponentsthatprovidesignificantgraphicaland
tabularcapabilitiesforanalyzingdata.
TheapplicationtobuildreflectstheModelViewControllerarchitecture.ThemodelisprovidedbyEJBComponents,whilethe
viewandcontrollerareprovidedbyJavaServerFaces.YouusetheADFFacessetofJSFcompatiblecomponentstobuilda
richerwebinterface.

Purpose

Inthistutorial,startingfromapredefinedapplication,youuseOracle
JDeveloper11gVersion11.1.2.0.0tobuildawebapplication.Forthedata
modelbasedontheFODdatabaseschema,youuseADFBusiness
Components.Forthewebclientside,JavaServerFaces(JSF)isused.You
createamainmasterdetailOrderpage,then,youimprovetheUIbyadding
graphicalcomponentslikebarcharts,gauge,geographicmap,ganttchart
andpivottable.
Toseethecompletedapplicationyouwillcreate,clicktheDownloadbutton
todownloadazipofthefinalapplication,andthenunzipitinyour
JDevelopermyworkfolder.

Duration

Application

120minutes

Part1:ValidatingtheModelandStartingBuildingtheUI
YoufirstinstalltheFODschemausingadedicatedapplicationtobuildthedatabaserequirementsforthistutorial.Thenyou
openapredefinedapplicationandvalidatetheModelprojectthatalreadyexists.FinallyyoustartcreatingaMaster/Detailpage
usingtheADFBusinessComponents.

BuildingthemodelwithEJB/JPAcomponents.JDeveloperincludesstepbystepwizardsforcreatingEJBprojects,
entities,persistenceunits,sessionbeans,andmessagedrivenbeans.Youcanbuildentitiesfromonlineoroffline
databasedefinitionsandfromapplicationserverdatasourceconnections.ThereisalsoseamlessintegrationwithJPA
andTopLinktechnologytoprovideacompletepersistencepackage.

Step1:CreateandPopulatetheDatabaseSchema
Beforeyoustartworkingonyourapplication,youmustfirstcreatetheFODdatabaseschema.
1. DownloadtheFODschemazipfilefromOTNorrightclickthefollowinglinkandchooseSaveLinkAs...fromcontext

todownloadthefod_11.zipfileonalocaldirectoryofyourchoice.
2. Unzipthefod_11.zipfileonalocaldirectoryofyourchoice(i.e.temp)
3. StartJDeveloperbyselectingStart>AllPrograms>OracleFusionMiddleware11.1.2>JDeveloperStudio11.1.2
4. IfpromptedforaRole,chooseStudioDeveloper(AllFeatures)andclickOK.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

1/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

5. ClosetheTipoftheDaywindow.

Onceloaded,theJDeveloperIDEappears.
TheveryfirsttimeyouopenJDeveloper,theStartPagedisplays.YoucanreinvoketheStartPagelaterby
choosingHelp|StartPage.

NoticethevariousoptionsavailabletohelpyoulearnaboutJDeveloper.Afterexploringtheseoptions,clicktheX
ontheStartPagetabtocloseit.(theXappearswhenyoumouseoverthetab).
6. ClicktheOpenApplicationlink(orfromthetoolmenu,chooseFile|Open).

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

2/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

7. Locatetheworkspaceinfrastructure.jwswhereyou'veunzippedthefod_11.zipfile.i.e.:

d:\temp\FOD_11\Infrastructure.

ClickOpen.Ifyouarepromptedtomigratetheproject,followthestepsofthemigrationwizardtoproceed.

Migratingaproject.IncaseyouopenaworkspacethatwassavedwithapreviousJDeveloperrelease,
JDeveloperneedstomigrateittothelatestversions.AcceptthemigrationfortheprojectsbyclickingNextonthe
Migrationwizard.

ClickFinishtoproceed.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

3/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

ClickOKtodismisstheMigrationStatusinformationwindow.
8. IntheApplicationNavigator,expandtheMasterBuildScript|Resourcesnodesanddoubleclickbuild.propertiesto

openitintheeditor.

9. Settheappropriatevaluesinthebuild.propertiesfile(jdeveloper.home,andallthejdbc.*anddb.*settings).The

relevantsettingsare:
Parametername

Value

middleware.home

Setthemiddleware.homevariabletothedirectory
whereyouinstalledJDeveloperi.e.
C:/oracle/middleware

jdbc.urlBase

BaseURIforyourdatabase,i.e.,
jdbc:oracle:thin:@localhost

jdbc.port

Portnumberforyourdatabase,i.e.,1521

jdbc.sid

Databaseinstancename,i.e.,XEorORCL

db.adminUser

Databaseuserwithadminprivileges,i.e.,system.

db.demoUser

Nameofdatabaseuserandschematobecreated,i.e.,
fod

db.demoUser.password

Passwordfordatabaseusertobecreated,i.e.,fusion

db.demoUser.tablespace

Nameoftheusertablespace,i.e.,USERS

db.demoUser.tempTablespace

Nameofthetemporarytablespace,i.e.,TEMP

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

4/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

10. IntheMasterBuildScriptproject,selectthebuild.xmlfile.

11. IntheStructurewindow,rightclicktherefreshSchematargetandchooseRunTarget"refreshSchema".

12. Whenpromptedenterthedatabasesystemuserpassword.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

5/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

ClickContinue.
13. Verifythatthelogwindowdoesn'treportanymajorerror.Itshouldlooklikethis:

14. NexttotheInfrastructureapplicationname,clickthedownarrow

andselectCloseApplication.

Step2:GettheStarterApplicationReady
Beforeyoucreateanycomponent,youmustfirstopenthestartupapplication.Todothis,performthefollowingsteps:
1. DownloadtheGantt.zipfile.RightclickthefollowinglinkandchooseSaveLinkAs...fromcontexttodownloadthe

gantt.zipfileonalocaldirectoryofyourchoice.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

6/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

2. UnziptheGantt.zipfileonalocaldirectoryofyourchoice(i.e.temp)

3. FromtheApplicationNavigator,clicktheOpenApplicationlink.

4. Locatetheworkspacec:\temp\Gantt\BrowseEditApp\BrowseEditApp.jws.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

7/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

ClickOpen.Ifyouarepromptedtomigratetheproject,clickYestoconfirm.

Migratingaproject.IncaseyouopenaworkspacethatwassavedwithapreviousJDeveloperrelease,
JDeveloperneedstomigrateittothelatestversions.AcceptthemigrationfortheprojectsbyclickingNextonthe
Migrationwizard.

ClickFinishtoproceed.

ClickOKtodismisstheMigrationStatusinformationwindow.
5. YouneedtocreateaDatabaseConnectiontotheFODschema.Todothis,performthefollowingsteps:Rightclickthe

ModelprojectnodeandselectProjectPropertiesfromcontext.
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

8/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

6. IntheProjectPropertiesdialog,selecttheADFBusinessComponentsnodeandintheConnectionfield,clickthe

Createicon

tocreateanewdatabaseconnection.

7. Enteranamefortheconnection,selecttheconnectiontype,andentertheusernameandpassword.Tofollowalong

withthisexample,useFODfortheconnectionname,fodfortheusernameandfusionforthepassword.Notethatthe
valuesprovidedhereasexamplemayneedtobemodifiedtoworkwithyourenvironment.
Property

Value

ConnectionName

FOD

Username/Password

fod/fusion

SavePassword

Checkboxchecked

Driver

Thin

HostName

Themachinewheretheschemaisinstalled(e.g.localhost)

SID

ThedatabasewheretheFODschemaisinstalled(XE,orcl...)

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

9/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

8. ClickTestConnectiontoconfirmthatyoucanconnect.

ClickOKiftheconnectionwassuccessful.ThenOKagaintodismisstheProjectPropertiesdialog.

Iftheconnectionfails,
checkthattheparametersenteredarecorrectandthattheOracledatabaseandlistenerservicesarerunning.
TheconnectionshouldalsoappearintheInitializeBusinessComponentsProjectpage.
9. IntheApplicationNavigator,clicktheApplicationResourcesaccordiontoopenit.

10. IntheApplicationResources,expandtheConnectionsandDatabasenodestoseetheFODconnectionyoujust

created.YoucanexpandtheFODnodetoviewthedatabaseobjects.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

10/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

Step3:ExploretheStarterApplication
ThestarterapplicationusesOrders,OrderItemsandProductsBaseentityobjectsandtheircorrespondingviewobjects.Italso
usesadditionalviewobjectsthatyoudiscoverwhenrequiredtousethem.Toexploreandvalidatethedatamodel,performthe
followingsteps:
1. OpentheApplicationNavigatorandexpandtheModelprojectnodes.NoticetheexistingEntities,Views,Linksobjects

andtheFODModule.

Themodelprojectcontainsallthenecessarycomponentsneededfortheapplication.
2. Torunthemoduleinthetester,intheApplicationNavigator,rightclickFODModuleandchooseRun.
RunningtheFODModule

WaitfortheBrowserwindowtoopen.

Testingthemodel.
OracleJDeveloperprovidesaneasywaytotestyourbusinesscomponentsdefinedinanapplicationmodule.You
canlaunchthetesterbyclickingtheRunoptionintheApplicationModuleandtheADFModelTesteropensup.
Thenselecttheviewcomponentinthehierarchytreetovisualizedateretrievedbyyourentityobjects.
3. IntheOracleADFModelTester,doubleclickOrdersItemsOrdersFkLink1.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

11/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

4. UsethenavigationbuttonstobrowsethroughtheOrders

TheBCBrowser.
NoticethatyoucanInsertUpdateDeletedatathroughtheprovideddefaultinterfaceandtestthevalidationrules
foryourbusinesscomponents.
YoucanalsoCommitorRollbackyourchanges.
5. Navigatebackandforthtoexploredata.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

12/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

6. ClosetheBusinessComponentBrowserwindow.

7. CollapsetheModelproject.ExpandtheViewControllerprojectnodes.Noticetheexistingcomponentsthatare

createdbydefaultwhencreatingaFusionWebApplication.

Step4:CreatetheMasterDetailOrderPage
TheViewControllerprojectusesOrders,OrderItemsandProductsBaseentityobjectsandtheircorrespondingviewobjects.It
alsousesadditionalviewobjectsthatyoudiscoverwhenrequiredtousethem.TocreatetheMaster/Detailpagethatwillbe
usedasafoundationofyourUIproject,performthefollowingsteps:
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

13/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

1. IntheApplicationNavigatorrightclicktheViewControllernodeandselectNewfromcontext.

2. IntheNewGallery,clicktheCurrentProjectFeaturestab,thenselecttheWebTier|JSF/Faceletscategoryand

selectthePageitem.

ClickOK.
3. SettheFileNamefieldtoOrdersAndStocks.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

14/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

ClickOK.
4. ThenewpageopensupintheDesigneditor.Makesureit'sselected.

5. FromtheComponentPalette,usingtheADFFaces|Layoutlibrary,draganddropaPanelTabbedcomponentonto

thepage.
Usethesearchboxabovethecomponentlisttofindspecificcomponents.

6. SelecttheshowDetailItemandinthePropertyInspectorusingtheCommonnode,typeMDOrdersinthetextfield.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

15/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

7. IntheApplicationNavigator,opentheDataControlsaccordionandexpandtheFODModuleDataControlnode.

8. DragtheOrdersView1nodeontothevisualeditor,anddropitontothePage.FromtheCreatecontextmenu,select

Forms>ADFReadonlyForm.

9. IntheEditFormFieldsdialog,checktheIncludeNavigationControlscheckbox.,multiselectallthefields,andthen

unselectthefollowingones:OrderId,OrderDate,OrderStatusCode,OrderTotal,andCustomerId.ThenclickDelete
.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

16/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

ClickOK.

Moreonhowtodeletefields.
Whenthelistoffieldstodeleteisgreaterthanthelistoffieldstokeep,it'smoreconvenienttomultiselectallthe
fieldsfirstandthenunselecttheonestokeep,beforeclickingtheDeletebutton.

10. IntheDataControlspanel,expandtheOrdersView1node.DragtheOrderItemsView2nodeontothelowerpartofthe

form.

11. FromtheCreatecontextmenu,selectTable>ADFReadonlyTable.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

17/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

12. IntheEditTableColumnsdialog,selectbothSingleRowandEnableSorting.Multiselectallthecolumnsand

deselectthefollowingones:LineItemId,Quantity,UnitPrice,andProductName.ThenclickDelete

ClickOK.
13. Withthenewtableselected,inthePropertyInspector,usingtheLayouttabintheStylenode,settheStyleClass

propertytoAFStretchWidth.

14. SelecttheCommontabandtypeOrdItemastheId.

OverwritingthedefaultId
http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

18/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

ChangingtheIdforamoremeaningfulonewillmakeiteasierlaterontoidentifythecomponentyouwanttorelate
to.

15. Thepageshouldlooklikethis:

16. ClickSaveAll

iconontheJDevelopermenubar,(orselectFile|SaveAll).

17. RightclickwithinthepageandselectRunfromcontext,orclicktheRunbutton

torunthepage.

18. Thepageloadsupinyourbrowser.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

19/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

19. ExperimenttheNavigationbuttons.

20. Trythesortingfacilityonanyofthedetailcolumns.

21. Closethebrowserwindow.

Atthispointyouhaveaworkingpage,youarenowgoingtoaddgraphicalcomponentssuchasbartchart,gauge,gantt
chart,geographicinfoandcreateaPivotTable.
Previous 1 2 3 4 Next

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

20/21

12/22/2015

OracleJDeveloper11gRelease2TutorialsChartingwithADFDataVisualizationComponents

Copyright2011,Oracleand/oritsaffiliates.Allrightsreserved.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html

21/21