tutorial_medialibrary _ prototype version _ august 2007

8/6/2019 Tutorial_MediaLibrary _ Prototype Version _ August 2007

1/34

Media Library Tutorial

By Fabre Tristan

Prototype version, the 17th of August 2007

Abstract:This tutorial introduces how to use Jdeveloper 10g, the ADF BC framework and the

Oracle 9i RDBMS in order to build a little web application enabling to upload and download

files. These files will be kept into the database as BLOB and the interfaces of the app will let

to organize these records depending on their extension and a type chosen by the user. An

administrator will be able to manage the content of this type list and too the extension and

their associated mime-type.

Prior to follow these instructions, assume to have successfully installed Jdeveloper

(Jdev) 10g and Oracle 9i, and to have created a database (DB) instance.

Content:

I. Building the model layer .................................................................................................... 2

a. Generating the application skeleton ............................................................................... 2

b. Making the DB schema.................................................................................................. 3

i. Connecting the DB ..................................................................................................... 3

ii. Building the DB schema ............................................................................................ 4

c. Organizing and configuring the app module.................................................................. 8

i. Generating the Business Components........................................................................8

ii. Organizing the Business Components........................................................................ 9

iii. Configuring the Business Components................................................................10

II. Building the controller layer ............................................................................................ 13

a. Generating the interface skeleton................................................................................. 13

i. Configuring the UserInterface project ..................................................................13

ii. Building and using the faces-config.xml.............................................................. 13

iii. Adding the source files......................................................................................... 15

b. Coding the needed methods and functions................................................................... 16i. Controlling the application administrator tasks ....................................................... 16

ii. Controlling the library tasks..................................................................................... 18

III. Designing the interfaces ............................................................................................... 24

a. Generating the administration page.............................................................................. 24

i. Management of the type list ..................................................................................... 24

ii. Management of the extensions and the mime-types ................................................ 27

b. Generating the library page .......................................................................................... 28

i. Displaying the files................................................................................................... 28

ii. Enabling to upload new files .................................................................................... 29

c. Binding the controllers and refining the display .......................................................... 30

i. On the administration.jspx page ........................................................................... 30ii. On the Library.jspx page ......................................................................................32


2/34

I.Building the model layera.Generating the application skeleton

The first step to perform is to make the schema of the DB and then to save it underOracle 9I. And before doing that, the future application needs a container to the different

files.

Building the application skeleton is quite an easy task under Jdev. Open the

Application Navigator in the Jdev menu > View, right click on Applications and select

New Application. Fill the form to correspond to the following screen:

The creation wizard launches the form enabling the creation of a new project into the

app; Enter DataModel and accept the default directory. A simple setting to add is the

default package name. For that right click on the new created project and select Project

Properties. Select the Project Content facet and change the text field at the bottom of the

form: Default package which should be medlib has to be change for medlib.datamodel.


3/34

b.Making the DB schemai. Connecting the DB

In Jdev, open the Connection Navigator window in the Jdev menu > View; rightclick on the Database folder and then choose New Database Connection. The wizard

which is launched includes 4 steps to fill like the followings:

Step 1: Choose a name for the new connection and select JDBC. This

name will be referenced in this tutorial by the tag .,

and to help in the understanding of this tutorial, the

will be MediaLibraryConnection in all the examples

Step 2: Use sys, the sys-password defined during the instance creation and

sysdba to fill the username, the password (DEMLIB here) and the role

(sysdba). Check the box for Deploy password

Step 3: Use Thin for the driver. Depending on the Oracle 9i installation,use localhost, 1521 and the SID name for the Oracle DB instance

created. In the examples, SID will be DEMLIB.

Step 4: Test the connection. If the test doesnt return Success, go back on

the preceding steps on try to find what mistake has been done.

NOTE: In a first time, the connection is created for the sys in order to access the

SQL*PLUS executable. After creating an empty schema for a specific user, the connection

will be modified for allowing access only to this user and this schema.

Select the new connection and in the Jdev menus, open Tools > SQL*PLUS. A

browser function should be launched to help to find the SQL*PLUS executable. Find it in theOracle9i_Home\ora92\bin\sqlplusw.exe. When prompting for a password, enter MEDLIB,

and then On the SQL*PLUS page, enter:

CREATE USER TIF IDENTIFIED BY TIF

DEFAULT TABLESPACE users

TEMPORARY TABLESPACE temp

QUOTA UNLIMITED ON users;

GRANT connect, resource TO TIF; then press Enter to execute it.

Now close this window, and right click on the new created connection. Select

properties, go on authentication and replace the username and its password by TIF and

TIF. Delete the role, go to the Test facet and check if the new connection parameters are

correct by testing the connection.

NOTE: The browse function enabling to select the SQL*PLUS executable is launched at the

first use of Tools > SQL*PLUS, but you can change this location going to Tools >

Preferences > Database connections


4/34

ii. Building the DB schemaNow, create the database diagram, by right clicking on the new project and selecting

New, the database diagram creation wizard is in General > Diagrams. Use

MedLibDiagram and medlib.datamodel.diagram as name and package for the newdiagram.

The proposed schema is simple; a table will contain all the files in a Blob field, it will

be associated to a central table which will support the details about each file uploaded. To

identify easily the extension and the mime-type to associate, they will be stored in a separate

table, and finally by adding a last one which contains a type, the application will allow user to

class the uploaded files in different types like Rock music, Administrative documents,

Charm pictures, etc.

=> Creating tables

To make this document shorter, only two table creation processes are entirely

described here: the DOCS and the DETAILS table.

NOTE: If the Component palette is not yet displayed when the MedLibDiagram is

opened, go into the Jdev menus at Views > Component palette or click Ctrl+Maj+P.

Start by dropping a table from the Component palette and then rename it DOCS

by double clicking on the title. Now double click on the table to open the wizard enabling to

add fields, constraints, primary and foreign keys on the table.

In the Table Information, enter TIF in the Schema. Its important to

not forget this step during the creation of all the tables and the sequences.

Select Column Information and add two columns by clicking on the green

cross. Name the first one DOC_ID and the second DOC_BLOB. With

the first one selected choose Number, and choose Blob for the second.

Check the box Cannot be null for the two.

Now Select the Primary Key Information, and make DOC_ID switching

from the left panel to the right one

There is neither constraints nor foreign key on this table, also choose OK

Drop a new table and rename it DETAILS. Open the wizard:

Add six columns with names DETAIL_ID, DETAIL_NAME,

DETAIL_EXTENSION, DETAIL_TYPE, DETAIL_DOC and

DETAIL_DATE

Select Date for DETAIL_DATE, Varchar2 (4000) for

DETAIL_NAME and Number for the other columns.

Now Select the Primary Key Information, and make DETAIL_ID

switching from the left panel to the right one

Add a Unique Constraints Information by making DETAIL_NAME

switching from the left panel to the right one. That will let to forbidden thesave of two files having the same name.


5/34

Now add a Foreign Key: Referenced DOCS on constraint DOC_PKand make matching DETAIL_DOC in the local column to DOC_ID in

the referenced column on DOCS. Finally choose OK.

Add still two tables EXTENSIONS and TYPES, and then edit DETAILS to add

their ID in the foreign keys.

=> Creating sequences

On each table, create a sequence:

Dont forget to enter TIF in the Schema text field.

Drop a sequence on the diagram per table and name it with the name of the

table without the S it refers, plus _SEQ.

Double click on the sequence to open a new wizard.

Use 1 for the Increment and 200 for the Start with.Enter 1 and 999999999 for the Min and the Max value

Finally check the box Cache and enter 20 in the associated text field

These sequences will enable to generate automatically different ID for each new entry

in the different tables. But to use these sequences, some triggers are needed.

=> Conciliating the complete schema to the DB

The complete schema is the following:


6/34

When schema is complete, it has to be reconciled to the DB. Automatically, Jdev has

built the Offline Database Sources which are an offline copy of the elements contained in

the schema. The folder containing these sources should have name MYSCHEMA. Right

click on it and choose Generate or Reconcile Objects:

Step 1: Switch the 4 table elements except DETAILS (to assume the othertables will exist before trying to create the foreign keys) to the Selected

panel. The tables have to be created before trying to generate the sequence.

Step 2: Choose CREATE Objects. Functions REPLACE and ALTER

can be used when objects already exists in the DB.

Step 3: Uncheck Generate SQL Scripts. Checking this option has no

consequences on this tutorial and can be done for having a look on the way

of SQL generates the DB objects.

Step 4: Check Perform Operations Against Database. Choose for

Connection the MediaLibraryConnection and for Schema the name

given to the DB user which is TIF.

Step 5: Check the summary before to accept it. Until clicking on End, theOracle DB schema TIF is still empty and that action will populate it. Now,

complete the table creation by clicking on End and check the pop up

message. This message confirms the table creation.

Step 6: Now, reconcile the last table DETAILS by repeating step 1 to 5

with switching only this table.

Step 7: Finally, reconcile the sequences by repeating the step 1 to 5 with

switching only the sequences.

NOTE: Its possible to reconcile offline objects to the DB by right clicking on the schema and

selecting Generate > Data Definition Language For Database.

=> Creating triggers

On each sequence, the DB needs a trigger to know when use it:

Open the Connection Navigator window in the Jdev menu > View, and

drilldown the MediaLibraryConnection > TIF > Triggers. Then right click

and choose New Trigger

Enter ASSIGN_DOC_ID in the Name textfield, select DOC table and

check the Insert box before clicking on OK.The new trigger is created on the DOC table. Double click on it in the

Triggers folder. That opens it in the principal window.

Finally cut and paste the part of the code corresponding to the

ASSIGN_DOC_ID trigger from the following:

TRIGGER ASSIGN_DOC_ID BEFORE INSERT ON DOC

FOR EACH ROW

BEGINIF :NEW.DOC_ID IS NULL OR :NEW.DOC_ID < 0 THEN

SELECT DOC_SEQ.NEXTVAL

INTO :NEW.DOC_ID

FROM DUAL;END IF;

END;


7/34

TRIGGER ASSIGN_DETAIL_ID BEFORE INSERT ON DETAILS

FOR EACH ROW

BEGIN

IF :NEW.DETAIL_ID IS NULL OR :NEW.DETAIL_ID < 0 THEN

SELECT DETAIL_SEQ.NEXTVAL

INTO :NEW.DETAIL_ID

FROM DUAL;END IF;

END;

TRIGGER ASSIGN_EXTENSION_ID BEFORE INSERT ON EXTENSION

FOR EACH ROW

BEGIN

IF :NEW.EXTENSION_ID IS NULL OR :NEW.EXTENSION_ID < 0 THEN

SELECT EXTENSION_SEQ.NEXTVAL

INTO :NEW.EXTENSION_ID

FROM DUAL;

END IF;

END;

TRIGGER ASSIGN_TYPE_ID BEFORE INSERT ON TYPE

FOR EACH ROW

BEGIN

IF :NEW.TYPE_ID IS NULL OR :NEW.TYPE_ID < 0 THEN

SELECT TYPE_SEQ.NEXTVAL

INTO :NEW.TYPE_ID

FROM DUAL;

END IF;

END;

Build the three others triggers by adapting the preceding steps. In the Connection

Navigator window, the existing objects should match the following screen:


8/34

c.Organizing and configuring the app moduleThe Db is ready to use and the Offline Database Sources should reflect it. These

sources will be very useful to make the app evolving by adding tables and columns in the

existing schema.

The next step is to produce the Entity Objects (EO), the View Objects (VO) and the

View Link (VL) which will provide the model layer, and then to organize them to build the

Application Module (AM).

i. Generating the Business ComponentsThe objective is to obtain the following architecture:

Jdev enables, thanks to the Application Development Framework Business

Components (ADF BC), to build very quickly and easily the model layer. Right click on the

datamodel package and select new Business Components from Tables:

Step 1 creating the EO: Click on the Query button, and switch all the 4

tables into the Selected panel.

Step 2 creating the Updatable VO: Switch all the 4 tables into the

Selected panel.

Step 3 creating the Read-only VO: No read-only VO has to be created.

Step 4 creating the AM: Check the box Application Module and enter

MedLibModule in the field Name.

Step 5 creating the Business Component Diagram: uncheck the box, and

click on Next.

Step 6 summary: The displayed summary should match the following, ifnot, cancel the creation and start again the creation at step 1:


9/34

ii. Organizing the Business ComponentsTo understand the circulation of the information through the model layer and facilitate

future maintenance, a good way is to reorganize the business components.

=> Organizing EO and their corresponding Associations

Select the 4 EO (Details, Docs, Extensions and Types). Right click and

choose Refactor > Move. Enter the path medlib.datamodel.entities, click on Ok and

accept the creation of the new folder.

Select the 3 Associations (DetailsDocFk1Assoc, DetailsExtensionFk1Assoc and

DetailsTypeFk1Assoc). Right click and choose Refactor > Move. Enter the path

medlib.datamodel.entities.associations, click on Ok and accept the creation of the newfolder.

=> Organizing VO and their corresponding VL

Select the 4 VO (DetailsView, DocsView, ExtensionsView and TypesView).

Right click and choose Refactor > Move. Enter the path medlib.datamodel.viewobjects,

click on Ok and accept the creation of the new folder.

Select the 3 VL (DetailsDocFk1Link, DetailsExtensionFk1Link and

DetailsTypeFk1Link). Right click and choose Refactor > Move. Enter the pathmedlib.datamodel.viewobjects.links, click on Ok and accept the creation of the new

folder.


10/34

The result of this reorganization matches the following screen:

iii. Configuring the Business ComponentsThe Business Components provide a quite easy and fast way to perform a lot of

complex tasks like handling the transactions between the database and the model layer or

managing the way of displaying the data through the interface.

=> Configuring the EO:

Different tasks can be performed on the EO; the following is a short sample list:

Customizing the EO attributes, like fixing the ID of each table to a

DBsequence type, adding default values if needed, fixing the labels to

display at run time.

Adding validation rules to force values to match some regular expressions or

to belong to a fixed list

Generating associated Java files to add custom code functionalities.


11/34

The first task to perform is to fix the ID of each EO on the DBSequence type:

Double click on the EO, expand the attribute node and select the ID attribute.

Use the Type drop down list to find DBSequence.

Keep the other default values, click on Apply then on Ok.

Repeat these simple operations for each one of the EO.

Now, change the labels to customize the future interface displays:

For the Extensions and the Types EO, double click on the EO, expand

the attribute node and select one of the non ID attribute.

Click on the Control Hints tab.

In the Label Text field, enter Extension Name, Type Name, Mime-

type or Type Definition depending on the selected attribute.

In the Display width field, type 25 (except for the Type Definition where

this value has to be fixed to 50)

Repeat these simple operations until have fixed Label Text and Displaywidth for each one of the four attributes.

Now repeat these steps for the Details EO. DetailName should have

label File Name and width = 50. DetailDate take 10 and Upload Date

for values.

=> Configuring the VO:

In complex app, many VOs are built on each EO depending on the different operations

to carry out. That explain why its possible to refine again the future interface displays;

default behaviour for each VO is to take values from the EO but if any value has been set in a

VO, it will display it:

In the MediaLibrary app, there is no need for specific customization of the VO, but a

not yet existing VO is needed. To create it right click on the viewobjects package, and then

choose New View Object:

Step 1: Just change Name empty field to AllFilesAndDetails and go to

the next step

Step 2: In the medlib.datamodel.entities package displayed in the left

window, find Details and switch it to the right window. Verify the

Updatable is checked when the Details in the right panel is selected.Switch the three other EO assuming the Association list is correctly

populated and only the Reference box is checked for each of them (default

behaviour).

Step 3: Switch all the attributes from left to right

Step 5: (Just keep default on step 4) Add Types.TYPE_NAME ASC ,

Extensions.EXTENSION_NAME ASC , Details.DETAIL_NAME ASC in

the Order By text field and keep other default values. Click on Finish to

create the VO.


12/34

=> Building the AM:

The Application Module let the interface interacts via the controllers to the model. The

way the VO will be available in the AM has to be configured:

Double click on the AM to editing itGet the right panel empty of the nested VO by selecting them one by one and

using the blue arrow. The AM is populated by default, but there is no need

for these complex relationships (search for master - detail) in the app.

Expand the medlib.datamodel.viewobjects package (central panel) to find

the AllFilesAndDetails VO, and switch it to the right panel

Click on Apply and on Ok.

The complete AM looks like the following screen:

NOTE: Its important to save regularly the current progress. The use of Make and

Rebuild is another think to keep in mind; java has to be compiled to work.


13/34

II.Building the controller layera.Generating the interface skeleton

Like in the first part of the tutorial, the application has to be structured in a newproject which will contain the files for the interface and the controllers.

i. Configuring the UserInterface projectRight click on the MediaLibrary application and select New Project. In the left

panel, choose General > Projects, and select Empty Project in the right panel. Fill the

Project Name text field with UserInterface and keep the default value for the directory.

Right click on the new created project and choose Project Properties. In the left panel select

the Project Content node and at the bottom of the right panel find the Default Package

and type medlib.userinterface. Now choose Dependancies in the left panel and check thebox DataModel.jpr to assume the two layers are connected together.

ii. Building and using the faces-config.xmlRight click on the UserInterface project and choose New. Drill down the Web

Tier node, select the JSF and choose JSP Page Flow in the right panel. After clicking

on OK, keep the default values for File Name and Directory Name. The new file is

opened in the principal window on the Diagram facet; just open the Component Palette

by clicking on Ctrl+Maj+P or by getting in the Jdev menus > View > Component Palette.

=> Imagining the workflow:

By using drag and drop, Jdev enables to build very quickly the complete application

navigation and skeleton.

Drop two JSF Page onto the diagram. Then drop two JSF Navigation Case going

from one page to the second. Finally change the names of the page and the navigation arrows

in way to match the following screen shot:

NOTE: The yellow warning signals mean these pages dont yet exist. Have a look on the tab

Source, the underlining lines have the same signification.

=> Building a template for the pages:

Building a template is very useful to generate quickly similar pages and so giving anapplication a unified look and feel.


14/34

Right click on the WEB-INF project and choose New. Drill down the Web

Tier node, select the JSF and choose JSF JSP:

Step 1: Enter template.jspx in the File Name field and add \template to

the default entry in Directory Name. Assume to have checked the JSP

Document box

Step 2: Check Do Not AutomaticallyStep 3: Assume you have selected (in the right panel), the ADF Faces

Components, ADF Faces HTML, JSF Core 1.0 and JSF HTML

1.0 libraries.

Step 4: Here, you could add a personal touch, but just click on Finish.

The new template appears in the principal window. Drop on it the PanelPage

component from the ADF Faces Core elements (from Component Palette). Then Drop a

MenuBar and two PanelGroup components. These different containers will be use in the

pages.

=> Generate the pages and apply the template:

Reopen the faces-config.xml if it was closed. Double click on one of the two pages.

That will launch the Cerate JSF JSP wizard with all the correct settings, so just click on

next if you want to check the steps, or directly click on Finish. Repeat this action for the

second page.

NOTE: The yellow warning signals have disappeared.

In the Application Navigator, select the template.jspx file. The Structure

window shows the content of the file. Find the afh:html node, right click on it and choose

Copy. Next find one of the two pages, find the node html, delete it and paste on the

f:view the node you have copied. Do the same on the second page.


15/34

iii. Adding the source filesThe source files will contain all the classes, functions and methods enabling to control

the information flow coming from the interface.

=> Using some utility files:

In a first time, its interesting to add some utility files which will provide the future

beans some common functions and methods.

In the Application Navigator, right click on the Application Sources folder. Then

choose in the left panel, the tab General, then in the right panel the Java Class option. Fill

the form to match this one:

Repeat these steps two times with using JSFUtils and FileOperations for the class

names. Copy the content from appendix to the corresponding Java class.

=> Completing the web.xml:

Add the following tags to the web.xml:

javax.faces.STATE_SAVING_METHOD

client

CpxFileName

dfly.userinterface.DataBindings


16/34


17/34

The new class is created but has to be declared into the faces-config.xml to be used:

Step 1: Open the faces-config.xml in the principal window by a double

click on it in the Application Navigator window.

Step 2: With the Overview tab selected, choose the Managed beans and

click on the button New.Step 3: Enter LibraryBean in the Name field and

userinterface.view.backing.LibraryBean in the field Class. This second

text can be obtained by using the Browse button and selecting the class

LibraryBean. Finally keep the Request scope and the box Generate

checked, then press Ok.

This bean will have to be bound to the interface context. To enable this, more

declarations are needed:

With the LibraryBean selected into the Managed Beans panel, expand

the Managed Properties panel with the black array and add a new property

with the New button.Insert bindings in the Name field and accept the form.

Now, with the new Managed properties selected, change the Value in the

Managed property panel from null to #{bindings}.

=> Written the needed code:

In order to edit it, open the LibraryBean.java file if it is not already opened:

Copy the lines below in the Public Class LibraryBean between the braces:

Right click on the word bindings, then choose Generate Accessors.

Check all the boxes in order to generate the getters and the setters for the

three new attributes.

The code editor automatically imports the corresponding libraries, also the

following lines have been created:

Now write the function enabling to switch the display:

public String administrationSwitchDisplay() {

if (this.getAdministrationTypesPanelGroup().isRendered()) {

// If the page displays the types management form// Don't display it any more

this.getAdministrationTypesPanelGroup().setRendered(false);

// And display the extension management form

this.getAdministrationExtensionsPanelGroup().setRendered(true);

} else {

// Else display itthis.getAdministrationTypesPanelGroup().setRendered(true);

// And don't display the extension management form

this.getAdministrationExtensionsPanelGroup().setRendered(false);}

return null; // To stay on the same page

import oracle.adf.view.faces.component.core.layout.CorePanelGroup;

import oracle.binding.BindingContainer;

private BindingContainer bindings;

private CorePanelGroup administrationTypesPanelGroup;

private CorePanelGroup administrationExtensionsPanelGroup;


18/34

ii. Controlling the library tasksThe library has to enable to download the selected file and to upload new ones. The

upload process is composed by a selection in a drop down list for the type to associate to the

file and then by the selection of the file itself.

=> Adding the functions for switching the display:

In order to edit it, open the LibraryBean.java file if it is not already opened:

Build the following attributes in the LibraryBean class:

Generate all the corresponding accessors.

The code editor has imported the following class:

Finally, add the three following functions:

public String libraryDownloadSwitchDisplay() {

if (this.getLibraryDownloadSelectionPanelHeader().isRendered()) {

this.getLibraryDownloadSelectionPanelHeader().setRendered(false);

this.getLibraryDownloadConfirmationPanelHeader().setRendered(true);

} else {

this.getLibraryDownloadSelectionPanelHeader().setRendered(true);

this.getLibraryDownloadConfirmationPanelHeader().setRendered(false);

}

return null;

}

public String librarySwitchDisplay() {

if (this.getLibraryDownloadPanelGroup().isRendered()) {this.getLibraryDownloadPanelGroup().setRendered(false);

this.getLibraryUploadPanelGroup().setRendered(true);

this.getLibraryUploadTypeSelectionPanelbox().setRendered(true);

this.getLibraryUploadFileSelectionPanelbox().setRendered(false);

} else {this.getLibraryDownloadPanelGroup().setRendered(true);

this.getLibraryUploadPanelGroup().setRendered(false);

this.getLibraryDownloadSelectionPanelHeader().setRendered(true);

this.getLibraryDownloadConfirmationPanelHeader().setRendered(false);

}return null;

import oracle.adf.view.faces.component.core.layout.CorePanelHeader;

import oracle.adf.view.faces.component.core.layout.CorePanelBox;

private CorePanelGroup LibraryDownloadPanelGroup;

private CorePanelHeader LibraryDownloadSelectionPanelHeader;

private CorePanelHeader LibraryDownloadConfirmationPanelHeader;

private CorePanelGroup LibraryUploadPanelGroup;

private CorePanelBox LibraryUploadTypeSelectionPanelheader;

private CorePanelBox LibraryUploadFileSelectionPanelHeader;


19/34

=> Adding controllers for uploading files:

The first step, in order to upload a new file into the library, is to choose in a list the

type which will be associated to this file

In order to get the selected type, copy the following function:

To confirm the choice and going to the page enabling to select the file to

upload, the simplest solution is to use the preceding

libraryUploadSwitchDisplay function.

Now add two functions to extract the name and the extension of the selected

file:

public Integer findTheSelectedTypeFromList4UploadingNewFile() {DCIteratorBinding typeIter = ADFUtils.getIterator("TypesView1");

Row r = typeIter.getCurrentRow();

Integer typeID =

new Integer(0).valueOf((String)r.getAttribute("TypeId").toString());

return typeID;

}

/**

* Enable to read the name a document by cuting its extension

* @param filename The complete name of a document

* @return String Return the name of the document without its extension

*/

public static String findExactName(String filename) {String[] tests = filename.toLowerCase().split("\\.");

Integer i = null;

for (i = 1; i < tests.length - 1; i++) {

tests[i] = tests[i - 1].concat("." + tests[i]);}

return tests[tests.length - 2];

}

/**

* Enable to read the extension of a document by cuting its name

* @param fileName The complete extension of a document with the initial dot

* @return String Return the extension of the document without its name

*/

public static String getExtensionFromFileName(String fileName) {

String[] tests = fileName.toLowerCase().split("\\.");

return "." + tests[tests.length - 1];

}

public String libraryUploadSwtichDisplay() {

if (this.getLibraryUploadTypeSelectionPanelheader().isRendered()) {

this.getLibraryUploadTypeSelectionPanelheader().setRendered(false);

this.getLibraryUploadFileSelectionPanelHeader().setRendered(true);

} else {

this.getLibraryUploadTypeSelectionPanelheader().setRendered(true);

this.getLibraryUploadFileSelectionPanelHeader().setRendered(false);}

return null;

}


20/34

To simplify the use of the library, its very useful to control the extensions of

the uploaded files and to create them if they are not yet existing:

/**

* Test if an extension name exists in an iterator based on the extension Db table

* @param extensionName, the extension name to look for* @return Boolean, True if the extension name is already existing in the database

*/

public Boolean extensionExist(String extensionName) {

Boolean result = false;

String testExtension = null;

DCBindingContainer dcBindings =

(DCBindingContainer)ADFUtils.findBindingContainer(getBindings(),

"app_administrationPageDef");

DCIteratorBinding docExtensionIter =dcBindings.findIteratorBinding("ExtensionsView1Iterator");

ViewObject docExtensionVO = docExtensionIter.getViewObject();

docExtensionVO.clearCache();

docExtensionVO.executeQuery();if (docExtensionVO.getEstimatedRowCount() != 0) {

testExtension =docExtensionVO.first().getAttribute("ExtensionName").toString();

if (testExtension.matches(extensionName)) {

result = true;

}

if (docExtensionVO.getEstimatedRowCount() > 1) {

for (Integer i = 1; i < docExtensionVO.getEstimatedRowCount();i++) {

testExtension =

docExtensionVO.next().getAttribute("ExtensionName").toString();


result = true; }}}}return result;

}

/**

* Add an extension to the existing one in the database

* @param fileExtension* @return the new extension Id

*/

public Integer createAnExtension(String fileExtension) {DBSequence newExtensionId =

new DBSequence("EXTENSION_SEQ",

ADFUtils.getApplicationModule("MedLibModule"));



"app_administrationPageDef");

DCIteratorBinding docExtensionIter =

dcBindings.findIteratorBinding("ExtensionsView1Iterator");

docExtensionIter.getViewObject().clearCache();

docExtensionIter.getViewObject().executeQuery();Row newRow = docExtensionIter.getViewObject().createRow();

newRow.setAttribute("ExtensionId", newExtensionId);

newRow.setAttribute("ExtensionName", fileExtension);

docExtensionIter.getViewObject().insertRow(newRow);

OperationBinding operationBinding =

dcBindings.getOperationBinding("Commit");

Object result = operationBinding.execute();

return new Integer(newExtensionId.toString());

}


21/34

Finally it misses only the functions creating the BLOB with its details and

the function which will be called from the interface:

/**

* Find the extension ID corresponding to the given extension name

* @param extensionName, the extension name to look for

* @return Integer, the extension ID of interest

*/

public Integer findAnExtensionFromName(String extensionName) {

Integer resultingExtensionId = 0;String testExtension = null;



"app_administrationPageDef");DCIteratorBinding docExtensionIter =

dcBindings.findIteratorBinding("ExtensionsView1Iterator");

ViewObject docExtensionVO = docExtensionIter.getViewObject();

docExtensionVO.clearCache();

docExtensionVO.executeQuery();

if (extensionExist(extensionName.toLowerCase())) {if (docExtensionVO.getEstimatedRowCount() != 0) {

testExtension =

docExtensionVO.first().getAttribute("ExtensionName").toString().toLowerCase();


resultingExtensionId =new

Integer(0).valueOf(docExtensionVO.getCurrentRow().getAttribute("ExtensionId").toString

().toLowerCase());

}

}

if (docExtensionVO.getEstimatedRowCount() > 1) {for (Integer i = 1; i < docExtensionVO.getEstimatedRowCount();

i++) {

testExtension =

docExtensionVO.next().getAttribute("ExtensionName").toString().toLowerCase();


resultingExtensionId =

new

Integer(0).valueOf(docExtensionVO.getCurrentRow().getAttribute("ExtensionId").toString

().toLowerCase());

}

}

}

}

return resultingExtensionId;

}


22/34

public void createTheDocumentDetails(Integer docBlob) {

DCIteratorBinding docDetailsIter =

((DCBindingContainer)getBindings()).findIteratorBinding("AllFilesAndDetails1Iterator");

ViewObject allFilesAndDetails = docDetailsIter.getViewObject();

Row newRow = allFilesAndDetails.createRow();newRow.setAttribute("DetailId", -1);

newRow.setAttribute("DetailName", findExactName(uploadedFile.getFilename()));

Integer docExtension = 0;

if (extensionExist(this.getExtensionFromFileName(uploadedFile.getFilename()))) {

docExtension =

this.findAnExtensionFromName(this.getExtensionFromFileName(uploadedFile.getFilena

me()));

} else {

docExtension =

this.createAnExtension(this.getExtensionFromFileName(uploadedFile.getFilename()));

}

newRow.setAttribute("DetailExtension", docExtension);

newRow.setAttribute("DetailType",

findTheSelectedTypeFromList4UploadingNewFile());

newRow.setAttribute("DetailDoc", docBlob);

java.sql.Date docDate = new java.sql.Date(new Date().getTime());

newRow.setAttribute("DetailDate", new oracle.jbo.domain.Date(docDate));

allFilesAndDetails.insertRow(newRow);

OperationBinding operationBinding =

getBindings().getOperationBinding("Commit");

Object result = operationBinding.execute();}

public Integer createTheDocumentBlob(BlobDomain file) {

DBSequence newBlobId =

new DBSequence("DOC_SEQ",

ADFUtils.getApplicationModule("MedLibModule"));

DCIteratorBinding docBlobIter =

((DCBindingContainer)getBindings()).findIteratorBinding("DocsView1Iterator");

ViewObject docBlob = docBlobIter.getViewObject();Row newRow = docBlob.createRow();

newRow.setAttribute("DocId", newBlobId);

newRow.setAttribute("DocBlob", file);

docBlob.insertRow(newRow);OperationBinding operationBinding =

getBindings().getOperationBinding("Commit");

Object result = operationBinding.execute();

return new Integer(newBlobId.toString());


23/34


24/34

III.Designing the interfacesa.Generating the administration page

The administrator of the application will use this page to manage the content of the

type list proposed to the user. Actually each user will have to select a type in this list to

classify the file he is uploading. This page will enable too to add or remove some of the

allowed extensions and to change if needed the mime-type associated to the existing

extensions.

i. Management of the type list=> Building the table:

Open the Adiministration.jspx page from the Application Navigator, and the

Structure Navigator, the Component Palette and the Data Control Palette from the Jdev

menu.

From the Data Control Palette:

Find the TypesView1, drag and drop it on the first panel group

Select Table and ADF Table.

In the wizard, delete the field TypeId and check the Enable sorting and

the Enable selection boxes.

=> Adding the specific functionalities:

The table will display the possible document types. The administrator will need to be

able to save the changes brought to these types, but too to add and to delete them if needed.


Expand the TypesView1 collection to find the proposed actions.

From the Operations folder, drag and drop the Execute action on the

Submit button located in the table. Choose Bind existing

CommandButton.

Now, repeat this step with the Delete action and with choosing ADF

Command Button.

public String downloadAction() {

DCIteratorBinding blobIter = ADFUtils.getIterator("AllFilesAndDetails1");

Row r = blobIter.getCurrentRow();

BlobDomain file = (BlobDomain)r.getAttribute("DocBlob");

String fileName = (String)r.getAttribute("DetailName");

String fileExtension = (String)r.getAttribute("ExtensionName");

String fileMimeType = (String)r.getAttribute("ExtensionMimetype");FileOperations.downloadFile(fileName, fileExtension, fileMimeType,

file);

//ADFUtils.executeOperation("app_LibraryPageDef", "Execute");

return libraryDownloadSwitchDisplay();

}


25/34

The Structure window should look like the following:

Under the Table facets are present different facets. The Selection facet, into which

have been dropped the two buttons,

From the Data Control Palette:From the Operations folder, drag and drop the Create action on the

actions facet. Choose ADF Command Button.

Right click on the new command button and choose Edit Command

Button.

In the Select an action drop down list, select Create insert.


26/34

=> Running the page:

The Administration.jspx page should look like the following:

Its possible to run the page by a right click on the page then select Run. The actions

delete and create can be used, but there is no way for saving the data until now. Actually these

actions enable to modify the collection build from the content of the database and the

Execute action will submit the changes to the database, but the transactions have to be

committed to the database to be saved permanently.

=> Adding the common functionalities:


Collapse the TypesView1 collection and find the Operations folder

located under the node MedLibModuleDataControl.

Drag and drop the Commit and the Rollback actions on the MenuBarinto the page with choosing ADF Command Button.

From the Component Palette:

Drag and drop the Command Button component on the MenuBar into

the page

This button will enable to switch the administration panels between the tables for the

type and for the extension management


27/34

ii. Management of the extensions and the mime-types=> Building the table:


Find the ExtensionsView1, drag and drop it on the second panel group

Select Table and ADF Table.

In the wizard, delete the field ExtensionId and check the Enable sorting

and the Enable selection boxes.


The table will display the possible document extensions and their associated mime-

types. The administrator will need to be able to save the changes brought to these details, but

too to add and to delete them if needed.

NOTE: More information about MIME: http://en.wikipedia.org/wiki/MIME


Expand the ExtensionsView1 collection to find the proposed actions.

From the Operations folder, drag and drop the Execute action on the


CommandButton.

Now, repeat this step with the Delete action and with choosing ADF

Command Button.

From the Operations folder, drag and drop the Create action on theactions facet. Choose ADF Command Button.

Right click on the new command button and choose Edit Command

Button.

In the Select an action drop down list, select Create insert.

=> Running the page:

The Administration.jspx page should now look like the following:


28/34


29/34


The table will display all the files and users will need to be able to download the

selected one and to upload new one.


Expand the AllFilesAndDetails1 collection to find the proposed actions.

From the Operations folder, drag and drop the Delete action on the


CommandButton.


Drag and drop a Command Button component on the new Delete button

with choosing ADF Command Button. It will be used for downloading the

selected entry.

Drag and drop a second Command Button component on the MenuBarinto the page. It will enable user to switch to the upload panel.

ii. Enabling to upload new files=> Building the global layout:


Drag and drop two PanelBox components into the second panel group,

then drop one PanelHorizontal in the first box and two in the second.

Into the first PanelHorizontal, drop an OutputText component, and in theProperty inspector window, type Select a type into which classify your

file in the Value property.

Into the first PanelHorizontal of the second panel box, drop an InputFile

component and change its Label property into Select the file to upload.

Finally, in the second PanelHorizontal of this panel box, drop a

PanelButtonBar, then add into it two Command Button components


Drag and drop the TypesView1 collection into the first PanelBox in the

second PanelGroup of the page.

Select Table and ADF Table.Make the wizard matching the following screen shot:


30/34

In the Structure window, the page should now look like the following:

c.Binding the controllers and refining the displayIts now time for binding the interfaces with their controllers and to associate the

corresponding labels in order to finalize the application

i. On the administration.jspx page=> Binding the actions:

Only one action is needed on this page, the one which will enable to switch from the

types management form and the extension management form

Using the Structure and the Property Inspector windows:

Find and select the first PanelGroup

In the Property inspector, enter AdministrationTypePanel in the Id

field

Click in the Binding field then on the little button with the three dots. A

wizard appears which enables to associate the panel group component with a

bean.Select LibraryBean in the first list and administrationTypesPanelGroup

in the second. The field should take the value:

#{LibraryBean.administrationTypesPanelGroup}.


31/34

Repeat these operations for the second panel group:

Find and select the second PanelGroup

In the Property inspector, enter AdministrationExtensionPanel in the

Id field

Click in the Binding field then on the little button with the three dots. Awizard, enabling to associate the panel group component with a bean,

appears.

Select LibraryBean in the first list and

administrationExtensionsPanelGroup in the second. The field should take

the value: #{LibraryBean.administrationExtensionsPanelGroup}.

Now add the function under the command button:

Expand the menuBar and select the commandButton 1

In the Property inspector, click on the Action property then on the little

button with the three dots. A wizard appears to associate a button to an action

declared in a bean.Select LibraryBean in the first list and administrationSwitchDisplay in

the second. The field should take the value:

#{LibraryBean.administrationSwitchDisplay}.

=> Refining the display:

Some labels have been built automatically and also need to be changed in order to be

more understandable. The only label which really needs to be changed on this page is the one

displayed on the command button commandButton 1. This button has to display Go to

Extension Management or Go to Types Management depending on which table is

displayed in the page. To carry out this complex display the best way is to use the

Expression Language.

NOTE: More information about the Unified Expression Language:

http://en.wikipedia.org/wiki/Unified_Expression_Language


Find and select the command button commandButton 1

In the Property inspector, click on the Text property then on the little

button with the three dots. A wizard appears to build the button label.Expand JSF Managed Beans > LibraryBean >

administrationTypesPanelGroup and double click on the rendered

attribute.

Finally modify the proposed expression to obtain the following:

Do the same for the three buttons on the extension table:

Find and select the command button Create1and rename it in the property

inspector with Create.

Find Execute1 and Delete1, then change them for Execute andDelete.

#{LibraryBean.administrationTypesPanelGroup.rendered? 'Go to Extensions Management':'Go to

Types Management'}


32/34

Finally, make the document extensions management panel disappearing:

Select the second PanelGroup.

From the Properties Inspector, find the attribute Rendered and set it to

false.

ii. On the Library.jspx page=> Adding some needed binding:

To enable the upload of new file, the page needs to be associated to the VO controlling

the access to the table Docs which contains the BLOBs:

Right click on the Library.jspx page and select Go to Page Definition.

In the Structure Inspector, find the executables folder, right click on it

and select Insert inside executables > iterator.From the wizard, select the DocsView1 and accept.

Now, in the Structure Inspector, find the bindings folder, right click on it

and select Insert inside executables > table.

In the Select an Iterator drop down list, find DocsView1 then assume the

two attributes are in the right panel called Display Attributes.

To confirm the changes made into the database, its needed to commit them. This

action will be called from the bean but need to exist in the bindings:

Now, in the Structure Inspector, find the bindings folder, right click on it

and select Insert inside executables > action.

In the Data Collection panel, click on the MedLibDataControl item andin the Select an action list choose Commit (with a French version the

label is Valider, in this case accept in then in the action id change it for

Commit)

=> Binding the actions:

To be able to upload files from the Library page, the Form which contains all the

component has to be change from the current which is a JSF one to an ADF one.

Open the Library page if needed, and click on the Sources tab.

Find the tags and and change them for and .

Return on the Design facet and select the af:form in the Structure

window.

Find the attribute UsesUpload in the Properties Inspector and set it to

true.

Five different actions are needed on this page: uploading and downloading files, and

the three actions enabling to switch the display between the two panel groups and between the

two panel boxes and the two panel headers inside of each pane l group.


33/34


Find and select the first PanelGroup

In the Property inspector, enter LibraryDownloadPanelGroup in the Id

field

Click in the Binding field then on the little button with the three dots. Awizard, enabling to associate the panel group component with a bean,

appears.

Select LibraryBean in the first list and libraryDownloadPanelGroup in

the second. The field should take the value:

#{LibraryBean.libraryDownloadPanelGroup}.

Repeat these steps with the second PanelGroup. Use

LibraryUploadPanelGroup in the Id field and complete the Binding to

obtain #{LibraryBean.libraryUploadPanelGroup}.

Expand the first PanelGroup, and select the first PanelHeader. Set the

properties Id and Binding to LibraryDownloadSelectionPanelHeader

and #{LibraryBean.libraryDownloadSelectionPanelHeader}.Select the second PanelHeader and set Id and Binding to

LibraryDownloadConfirmationPanelHeader and

#{LibraryBean.libraryDownloadConfirmationPanelHeader}.

Expand the second PanelGroup, and select the first PanelBox. Set the

properties Id and Binding to LibraryUploadTypeSelectionPanelbox

and #{LibraryBean.LibraryUploadTypeSelectionPanelbox}.

Select the second PanelBox and set Id and Binding to

LibraryUploadFileSelectionPanelbox and

#{LibraryBean.LibraryUploadFileSelectionPanelbox}.

Now add the functions under the command buttons:

Expand the menuBar and select the commandButton 2

In the Property inspector, click on the Action property then on the little

button with the three dots. A wizard appears to associate a button to an action

declared in a bean.

Select LibraryBean in the first list and librarySwitchDisplay in the

second. The field should take the value: #{LibraryBean.

librarySwitchDisplay}.

Repeat these steps to trigger the actions libraryDownloadSwitchDisplay

and libraryUploadSwtichDisplay with respectively the command buttons

commandButton 5 and commandButton 3Do it again for have the actions #{LibraryBean.downloadAction},

#{LibraryBean.uploadAction}, #{LibraryBean.selectFileToDownload}

and #{LibraryBean.libraryUploadSwtichDisplay} respectively on the

buttons commandButton 6, commandButton 4, commandButton 1 and

Submit.


34/34

The outputText component which will display the name of the selected file to

download needs to be linked to the bean:

Find the outputText1 from the Structure window.

In the Property inspector, enter NameOfSelectedFile4Download in the

attribute id.In the binding attribute select LibraryBean and

nameOfSelectedFile4Download to obtain the value

#{LibraryBean.nameOfSelectedFile4Download}.

The last action to bind is the one which enables to automatically keeping up-to-date

the UploadedFile attribute in the bean with the selected file:

Find the af:InputFile from the Structure window.

In the Properties Inspector, find the ValueChangeListener attribute and

set its value to #{LibraryBean.onUploading}.

=> Refining the display:

Now its time for changing the label of the different buttons. Using the Structure and

the Property Inspector windows, change the Text attribute of the buttons according to

those proposed in the following table:

Button current label Button wanted labelcommandButton 1 Download this file

commandButton 2 #{LibraryBean.libraryDownloadPanelGroup.rendered?

'Upload new File':'Download a File'}commandButton 3 Cancel upload

commandButton 4 Confirm upload

commandButton 5 Cancel download

commandButton 6 Confirm download

Submit Select this type

Finally, your application is almost ready to use. The last step is to avoid the display of

some panels at the first use of the application. The Rendered attribute has to bet set to

false for the second PanelBox of the second PanelGroup, the second PanelGroup and

the second panelHeader of the first PanelGroup.

You can now run your application. To access from one page to the other change in the

internet browser address field Library.jspx by administration.jspx or

administration.jspx by Library.jspx depending on the current displayed page.

Lot of improvements can be added but that will be the subject for next tutorials.

tutorial_medialibrary _ prototype version _ august 2007

Documents