Formspider Learning Center

Tutorial 37: How to build a Calendar (Part I)

admin — Fri, 18 May 2012 12:14:24 +0000

This tutorial is the first part of the series “How to build a Calendar” tutorials describing how to build a simple calendar which displays activities existing in a database table. It covers following topics;

how to add a calendar component into a panel
how to display activities on the calendar
how to use calendar’s attributes

Note that manipulation of calendar activities such as editing – rescheduling an existing activity or creating a new activity on the calendar are not the subject of this tutorial. These topics are covered in the second part of the series.

Formspider Calendar

Formspider calendar is a multifunctional activity scheduler component which allows the user to display and schedule any activity. Activities are presented as small boxes on the calendar. The attributes of a calendar activity are listed below:

Attribute	Description
id	unique identifier of the activity
startDate	start date of the activity
endDate	end date of the activity
title	label displayed on the activity box
editable	defines whether the activity can be rescheduled by moving – resizing the activity box
fontColor	font color of the label displayed on the activity box
backgroundColor	background color of the activity box

The calendar can only display activities provided by a Formspider datasource. Therefore a calendar must always be bound to a datasource in order to display activities. As a result, when an activity is rescheduled by moving or resizing activity boxes or when a new activity is added through calendar APIs, you should reflect these changes to the calendar‘s datasource to make them permanent.

The calendar can display activities in three different views (Day, Week and Month) which makes it able to schedule activities for days, weeks and months. You can use calendar’s defaultView attribute to set which view mode will be used when the calendar is displayed for the first time. To set the view mode at run time, the user can select one of three available modes located on the right side of the calendar.

Backward/Forward arrows on the left side of the calendar allow the user to move within calendar dates. Each time these arrows are pressed, for the ease of performance, Formspider queries the calendar‘s datasource and fetches only data belonging to the activities which will be displayed on the calendar. Today button enables you to turn to the current date. When the selected view mode is Day or Week hours scale is located on the left side of the calendar.

Formspider calendar provides an advanced drag-and-drop functionality which allows users to change date and time of an activity by easily moving or resizing activity boxes.

Formspider calendar component

Open Formspider IDE and click “New Application” under the “File” menu, the “New Application” dialog shows up. Enter “calendar” as the name of the application and “HR” as datasource schema name. If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. Leave other fields empty and click “OK”. This creates the “calendar” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

Creating Model

Use the following scripts to create a database table holding activity data and insert sample data for the current month;

create table activities
   (activityid                     number not null,
    startdate                      date,
    enddate                        date,
    title                          varchar2(4000),
    editable                       varchar2(1),
    bgcolor                        varchar2(255),
    fontcolor                      varchar2(255))
/

alter table activities
add constraint activities_pk primary key (activityid)
/

insert into activities (
        select 1 as activityid, (trunc(sysdate, 'MM') + 5/96) as startdate, (trunc(sysdate, 'MM') + 10/96) as enddate, 'Title of activity 1' as title, 'N' as editable, 'Green' as bgColor, 'White' as fontColor from dual
        union all
        select 2, (trunc(sysdate, 'MM') + 3), (trunc(sysdate, 'MM') + 4), 'Title of activity 2', 'Y' , 'Blue', 'Yellow' from dual
        union all
        select 3, (trunc(sysdate, 'MM') +  139/24), ((trunc(sysdate, 'MM') +  139/24) + 298/96), 'Title of activity 3', 'Y', 'Red', 'Pink' from dual
        union all
        select 4, ((trunc(sysdate, 'MM') + 7) + 3/24), ((trunc(sysdate, 'MM') + 7) + 5/24), 'Title of activity 4', 'Y' , 'Yellow', 'Blue' from dual
        union all
        select 5, ((trunc(sysdate, 'MM') + 14) + 3/96), ((trunc(sysdate, 'MM') + 15) + 10/96), 'Title of activity 5', 'N' , null, null from dual
        union all
        select 6, ((trunc(sysdate, 'MM') + 22) + 50/96), ((trunc(sysdate, 'MM') + 22) + 60/96), 'Title of activity 6', 'Y' , 'Pink', 'Red' from dual
        union all
        select 7, ((trunc(sysdate, 'MM') + 50) + 8/96), ((trunc(sysdate, 'MM') + 50) + 57/96), 'Title of activity 7', 'Y' , null, null from dual
      )
/
commit

Create a new datasource definition holding activity data. To achieve this, expand the “Datasource Definitions” accordion, select the “Datasource Definitions” node and click the “+” button. Alternatively, you may right click the “Datasource Definitions” node and select “New” from the pop up menu. The “New Datasource Definition” dialog shows up. Select the “Query” radio button from the “Based On” section and enter “ACTIVITIES” as “Name” of the datasource definition.

Creating “ACTIVITIES” datasource definition

Select “Query” node in the navigation tree on the left. Enter the following SQL Statement:

select ACTIVITYID
      ,STARTDATE
      ,ENDDATE
      ,TITLE
      ,EDITABLE
      ,BGCOLOR
      ,FONTCOLOR
from ACTIVITIES

Entering Query for “ACTIVITIES” datasource definition

Click “OK” to save and close the “New Datasource Definition” dialog. This creates the “ACTIVITIES” datasource definition and the “ACTIVITIES1″ datasource.

Creating UI

Expand the “Panels” node from the “Containers” tree and double click the “mainPanel” to open it in the editor. Add a calendar bound to the “ACTIVITIES1” datasource. Note that idColumn, startDateColumn, endDateColumn, titleColumn, editableColumn, fontColorColumn and backgroundColorColumn attributes are used to adjust the properties of the calendar activities. The firstDayOfWeek attribute specifies the day of the week to display in the first day column of the calendar. The “mainPanel” XML should look like the following;

Expand the “Windows” node and then the “Mainframe” node from the “Containers”tree. Double click to the “mainFrame” node to open it on the editor and set the value of the maximizeOnStartUp attribute to “Y”:

Press “Run on Web” button to run your application. Note that the calendar is displayed in month view and “Monday” is the first day of the week. Also, note that the activities are displayed on the calendar as expected.

The activities are displayed on the calendar

Tutorial 36: How to use a Web Service in a Formspider Application

admin — Mon, 14 May 2012 10:59:52 +0000

This tutorial describes how to use a web service in a Formspider application. It shows how to build an application displaying current weather report for the selected state invoking an external web service from U.S. National Weather Service (NWS). Click here to run the completed application.

Sample Web Service Definition

NWS provides a web service containing various functions allowing public, government agencies and commercial enterprises to access data from the National Digital Forecast Database (NDFD). See the link below for the detailed information and the complete list of functions provided by NWS web service;
http://graphical.weather.gov/xml/

Also, you can access to the web service description from the link below;
http://graphical.weather.gov/xml/DWMLgen/wsdl/ndfdXML.wsdl

This tutorial uses NDFDgenByDay() function defined as a part of NWS web service. This function returns NDFD data for a specified point (identified by its latitude and its longitude), starting from a specified date. A sample SOAP request for the NDFDgenByDay() interface is as the following:

The SOAP response returned for the sample request above is:


   
      
         

  
    
      NOAA's National Weather Service Forecast by 24 Hour Period
      meteorological
      forecast
      2012-05-11T11:39:49Z
    
    
      http://graphical.weather.gov/xml/
      Meteorological Development LaboratoryProduct Generation Branch
      http://www.nws.noaa.gov/disclaimer.html
      http://www.weather.gov/
      http://www.weather.gov/images/xml_logo.gif
      http://www.weather.gov/feedback.php
    
  
  
    
      point1
      
    
    http://forecast.weather.gov/MapClick.php?textField1=27.77&textField2=-81.69
    
      k-p24h-n1-1
      2012-05-11T06:00:00-04:00
      2012-05-12T06:00:00-04:00
    
    
      k-p12h-n2-2
      2012-05-11T06:00:00-04:00
      2012-05-11T18:00:00-04:00
      2012-05-11T18:00:00-04:00
      2012-05-12T06:00:00-04:00
    
    
      k-p1d-n1-3
      2012-05-11T06:00:00-04:00
      2012-05-12T06:00:00-04:00
    
    
      
        Daily Maximum Temperature
        32
      
      
        Daily Minimum Temperature
        18
      
      
        12 Hourly Probability of Precipitation
        10
        5
      
      
        Weather Type, Coverage, and Intensity
        
      
      
        Conditions Icons
        http://www.nws.noaa.gov/weather/images/fcicons/sct.jpg
      
      
        Watches, Warnings, and Advisories
        
      
    
  
]]>

Consuming the Web Service

In your datasource schema, create a package called “webservice_pkg” and open your newly created “webservice_pkg” package in your favorite PL/SQL Editor. Add a function named “genCurrentWeatherReportXML” and ensure that it’s exposed in the package specification. This function creates a SOAP request for the given latitude-longitude pair and invoke the NDFDgenByDay function. It uses utl_http package to consume the web service and returns the complete NDFD data (SOAP response body) in XMLType format.

function genCurrentWeatherReportXML(in_latitude_nr number, in_longitude_nr number) return xmltype
as
  v_soapRequest_tx        varchar2(32767);
  v_soapResponseChunk_tx  varchar2(32767);
  v_NDFDData_xml          XMLType;
  v_httpResponse          utl_http.resp;
  v_httpRequest           utl_http.req;
  v_soapResponse_cl       clob;
  v_bufferSize_nr         number                 := 32766;
  v_endPointURL_tx        constant varchar2(255) := 'http://graphical.weather.gov/xml/SOAP_server/ndfdXMLserver.php';
  -- fixed web service parameters
  v_startDate_tx          constant varchar2(255) := ''; -- earliest date available in NDFD
  v_numDays_nr            constant number        := 1;
  v_unit_tx               constant varchar2(1)   := 'm';
  v_format_tx             constant varchar2(255) := '24 hourly';
begin

  if in_latitude_nr is not null and in_longitude_nr is not null then

    dbms_lob.createtemporary(v_soapResponse_cl, false);

    -- create SOAP request
    v_soapRequest_tx :=
    '' ||
      '' ||
      '' ||
          '' ||
              '' || in_latitude_nr ||'' ||
              '' || in_longitude_nr ||'' ||
              '' || v_startDate_tx || '' ||
              '' || v_numDays_nr || '' ||
              '' || v_unit_tx || '' ||
              '' || v_format_tx || '' ||
          '' ||
      '' ||
    '';

    -- invoke web service
    v_httpRequest:= utl_http.begin_request(v_endPointURL_tx, 'POST', 'HTTP/1.1');
    utl_http.set_header(v_httpRequest, 'Content-Type', 'text/xml');
    utl_http.set_header(v_httpRequest, 'Content-Length', length(v_soapRequest_tx));
    utl_http.set_header(v_httpRequest, 'SOAPAction', '');
    utl_http.write_text(v_httpRequest, v_soapRequest_tx);
    v_httpResponse:= utl_http.get_response(v_httpRequest);

    -- read web service response into clob
    begin
      loop
        utl_http.read_text(v_httpResponse, v_soapResponseChunk_tx, v_bufferSize_nr);
        dbms_lob.writeappend(v_soapResponse_cl, length(v_soapResponseChunk_tx), v_soapResponseChunk_tx);
      end loop;
    exception
      when utl_http.end_of_body then
        utl_http.end_response(v_httpResponse);
    end;

    -- extract CDATA section from the web service response xml
    v_soapResponse_cl := XMLType.createXML(v_soapResponse_cl).extract('//text()').getClobVal();
    -- decode extracted response XML and create an XMLType variable containing this  XML
    v_NDFDData_xml := XMLType.createXML(dbms_xmlgen.convert(v_soapResponse_cl, dbms_xmlgen.ENTITY_DECODE));
  end if;

  return v_NDFDData_xml;
end;

Note that while creating the SOAP request envelope, the function uses null as the “startDate” parameter value to get the earliest date available in NDFD and 1 as “numDays” parameter. It means that only current date’s data is requested.

You can further examine the NDFD data XML returned by this function for Florida using the following query:

select webservice_pkg.genCurrentWeatherReportXML(27.766279, -81.686782) from dual

Creating the Formspider application

Open Formspider IDE and click “New Application” under the “File” menu, the “New Application” dialog shows up. Enter “webService” as the name of the application and the name of the schema where you have created “webservice_pkg” package as datasource schema name. If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. Leave other fields empty and click “OK”. This creates the “webService” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

The sample application contains a combobox listing state names, three labels and an image component displaying weather information of the selected state through the combobox.

Create a new datasource definition. To achieve this, expand the “Datasource Definitions” accordion, select the “Datasource Definitions” node and click the “+” button. Alternatively, you may right click the “Datasource Definitions” node and select “New” from the pop up menu. The “New Datasource Definition” dialog shows up. Select the “Query” radio button from the “Based On” section and enter “weatherReport” as “Name” of the datasource definition.

Creating “weatherReport” datasource definition

This datasource definition holds current weather information for a given point. To populate this information, it queries the SOAP response XML provided by “webservice_pkg.genCurrentWeatherReportXML” function and retrieves necessary information from this XML.

Select “Query” node in the navigation tree on the left. Enter the following SQL Statement:

select maxTempDesc || ': ' || maxTempValue || ' ' || maxTempUnit as maxTempInfo
      ,minTempDesc || ': ' || minTempValue || ' ' || minTempUnit as minTempInfo
      ,weatherIcon
      ,weatherDesc
from(
      select maxTempDesc
            ,maxTempValue
            ,maxTempUnit
            ,minTempDesc
            ,minTempValue
            ,minTempUnit
            ,weatherIcon
            ,weatherDesc
       from xmltable('/dwml/data/parameters'
                      passing webservice_pkg.genCurrentWeatherReportXML(:latitude_nr, :longitude_nr)
                      columns
                      maxTempDesc varchar2(4000) path 'temperature[@type="maximum"]/name'
                     ,maxTempValue number        path 'temperature[@type="maximum"]/value'
                     ,maxTempUnit varchar2(255)  path 'temperature[@type="maximum"]/@units'
                     ,minTempDesc varchar2(4000) path 'temperature[@type="minimum"]/name'
                     ,minTempValue number        path 'temperature[@type="minimum"]/value'
                     ,minTempUnit varchar2(255)  path 'temperature[@type="minimum"]/@units'
                     ,weatherIcon varchar2(4000) path 'conditions-icon/icon-link'
                     ,weatherDesc varchar2(4000) path 'weather/weather-conditions/@weather-summary'
                    )
    )

Entering Query for “weatherReport” datasource definition

Note that this query contains two bind variables named “latitude_nr” and “longitude_nr”. Click the “Bind Variables” node to register “latitude_nr” and “longitude_nr” bind variables. Click “New BindVar” button, a new row appears in the grid. Enter “latitude_nr” to the “Name” column and select “DefaultNumber″ as the “Domain” value. Click “New BindVar” button again, this time enter “longitude_nr” as “Name” and select “DefaultNumber″ as the “Domain” value.

Creating “latitude_nr” and “longitude_nr” bind variables

Click “OK” to save and close the “New Datasource Definition” dialog. This creates the “weatherReport” datasource definition and the “weatherReport1″ datasource.

Create a new datasource definition holding names, latitude and longitude infornation of major states. To achieve this, select “Datasource Definitions” node and click the “+” button again. Select the “Query” radio button, enter “states” as “Name” of the datasource definition.

Select “Query” node in the navigation tree on the left. Enter the following SQL Statement:

select 'Arizona' as stateName, 33.729761 as latitude, -111.431224 as longitude from dual
union all
select 'California', 36.116203, -119.681563 from dual
union all
select 'Florida', 27.766279, -81.686782 from dual
union all
select 'Illinois', 40.349455, -88.986137 from dual
union all
select 'Indiana', 39.849425, -86.258278 from dual
union all
select 'Michigan', 43.326618, -84.536093 from dual
union all
select 'New York', 42.165724, -74.948052 from dual
union all
select 'Pennsylvania', 40.590752, -77.209755 from dual
union all
select 'Texas', 31.054487, -97.56346 from dual
union all
select 'Washington', 47.400902, -121.490493 from dual

Select “Datasource Definition” node in the navigation tree on the left and select “STATENAME” from the “Primary Key” combobox.

Defining primary key for “states” datasource definition

Click “OK” to save and close the “New Datasource Definition” dialog. This creates the “states” datasource definition and the “states1″ datasource.

Expand the “Panels” node from the “Containers” tree and double click the “mainPanel” to open it in the editor. Add a combobox listing states using the “states1” datasource, three labels and an image component displaying current weather information for the selected state using “weatherReport1” datasource. The “mainPanel” XML should look like the following;

When a state is selected from the combobox, the weather information corresponding to the selected state should be generated. Therefore the “weatherReport1” datasource should be executed with the corresponding latitude and longitude values each time a state is selected. To achieve this you have to create an action which fires when a state is selected from the combobox.

Open “webservice_pkg” package and create a procedure named “selectState”, this procedure uses api_datasource.getcolumnvaluenrbypk API to obtain latitude and longitude values belonging to the selected state from “states1” datasource. It populates corresponding weather data by executing “weatherReport1” datasource with the obtained latitude-longitude pair and sets the image component’s url to display graphical representation of the weather condition.

procedure selectState is
  v_selectedState_tx  varchar2(255);
  v_latitude_nr       number;
  v_longitude_nr      number;
begin

  v_selectedState_tx := api_component.getvaluetx('mainPanel.cb_state');
  if v_selectedState_tx is not null then
    v_latitude_nr := api_datasource.getcolumnvaluenrbypk('states1.latitude', v_selectedState_tx);
    v_longitude_nr := api_datasource.getcolumnvaluenrbypk('states1.longitude', v_selectedState_tx);
  end if;

  api_datasource.setbindvar('weatherReport1.latitude_nr', v_latitude_nr);
  api_datasource.setbindvar('weatherReport1.longitude_nr',v_longitude_nr);
  api_datasource.executequery('weatherReport1');

  if api_datasource.getcurrentrowid('weatherReport1') is not null then
    api_component.seturl('mainPanel.image_weatherCondition', api_datasource.getcolumnvaluetx('weatherReport1.weathericon'));
  else
    api_component.seturl('mainPanel.image_weatherCondition', ' ');
  end if;

end;

In Formspider IDE expand the “Actions” accordion, select the “Actions” node, click the “+” button to create a new action. Alternatively you may right click the “Actions” node and select “New” from the pop-up menu. The “New Action” dialog shows up. Enter “selectState” as the action name and “webservice_pkg.selectState” as the procedure. Click “OK” to save your action.

Creating “selectState” action

Open “mainPanel”, add a “valueChanged” triggering “selectState” action to the combobox listing states:

Press “Run on Web” button to run your application. Select a state from the combobox, the corresponding weather information is displayed.You can also click here to run the completed application.

Web service successfully used in the Formspider application

Tutorial 35: How to use XY Layout

admin — Fri, 04 May 2012 12:16:03 +0000

This tutorial describes how the xy layout can be used to design screens in Formspider.

Formspider mainframes, dialogs and panels can be designed using xy layout. Formspider xyLayout is a layout type where the developer specifies the absolute position and the absolute size of the components. Since the size and the position are absolute, the components don’t stretch up when the container(mainframe, dialog or panel) is resized. xyLayout can be preferred if a container holds components whose size is not affected by the container’s size or by font, look-and-feel, or language changes.

Formspider xyLayout elements consist of cells. The attributes of a xyLayout cell are listed below:

Attribute	Description
x	horizontal distance in pixels between to the upper left corner of the cell and upper left corner of the container. If not specified, default value 0 is used.
y	vertical distance in pixels between to the upper left corner of the cell and upper left corner of the container. If not specified, default value 0 is used.
width	width of the cell in pixels. If not specified, component’s default width is used.
height	height of the cell in pixels. If not specified, component’s default height is used. Ignored if the heightPolicy value is equal to Dynamic.
heightPolicy	indicates whether the height of the cell should be dynamically adjusted by layout manager or a static height value will be used. This attribute can be used when the height of the component contained by the cell is unknown and should extend its content. The only valid example to this case is a textLabel where the label content changes dynamically at runtime. Valid values of heightPolicy attribute are: Static, Dynamic. If not specified, default value Static is used.
name	name of the cell

Using XY Layout

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog will show up. Enter “xyLayout” as the name of the application and “HR” as its Datasource Schema name. If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. Leave other fields empty and click “OK”. This creates the “xyLayout” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

Double click the “mainPanel” under the “Panels” node of the “Containers” navigation tree to open it in the editor. The example below places three buttons to the “mainPanel” using xylayout:

The screenshot below shows how the buttons are displayed once the application is executed. Note that when the mainFrame window is resized, the sizes and the positions of the buttons remain same.

Three buttons are places using xyLayout

Using heightPolicy

As explained above, there can be some cases where the height of the component contained by a cell is unknown and should extend its content. In xyLayout, the only valid example to this case is a textLabel where the label content changes dynamically at runtime. In such cases, to let the layout manager decide and adjust cell height dynamically, heightPolicy attribute can be set as “Dynamic” (the default value of this attribute is “Static”, indicating that the layout manager won’t extend cell height dynamically).

Note 1: “Dynamic” heightPolicy usage should be limited as much as possible since too much usage of “Dynamic” heightPolicy may slow down the application performance.
Note 2: If any cell height value is set, heightPolicy cannot be set as “Dynamic” for this same cell anymore.

In the XML below “Dynamic” is specified as heightPolicy of the cell containing a textLabel

“Dynamic” heightPolicy

Note that the height of the cell is automatically adjusted by the layout manager according to the content of the textLabel component and the width of the cell.

Tutorial 34: How to use Border Layout

admin — Fri, 27 Apr 2012 11:03:56 +0000

This tutorial describes how the border layout can be used to design screens in Formspider.

Formspider mainframes, dialogs and panels can be designed using border layout. Formspider borderLayout lays out a container, arranging and resizing its components to fit in five regions: north, south, east, west, and center.

Formspider borderLayout elements consist of cells corresponding to the five regions above. The attributes of a borderLayout cell are listed below:

Attribute	Description
docking	region identifier of the cell, it’s a required attribute. Valid values are: North, South, East, West, Center
width	width of the cell, ignored if the docking value is equal to North, South or Center. If not specified, component’s default width is used.
height	height of the cell, ignored if the docking value is equal to East, West or Center. If not specified, component’s default height is used.
name	name of the cell

Each region may contain no more than one component, meaning that each docking value may be used only once. The components are laid out according to the size of the cell(specified with width and height attributes). The North and South components may be stretched horizontally; the East and West components may be stretched vertically; the Center component may stretch both horizontally and vertically to fill any space left over. Therefore, the width attribute is ignored for North and South components, the height attribute is ignored for East and West components and both the width and height attributes are ignored for Center component.

Using Border Layout

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog will show up. Enter “borderLayout” as the name of the application and “HR” as its Datasource Schema name. If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. Leave other fields empty and click “OK”. This creates the “borderLayout” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

Double click the “mainPanel” under the “Panels” node of the “Containers” navigation tree to open it in the editor. The example below places two buttons to the North and Center regions of the “mainPanel” using border layout:

The screenshot below shows how the buttons are displayed once the application is executed. Note that when the mainFrame window is resized, the “North” button is stretched only horizontally and the “Center” button is stretched both horizontally and vertically.

Two buttons are placed to the North and Center regions

The example below places a button to every region of the of the “mainPanel”:

All regions are used

Tutorial 33: How to Define and Use Key Events

admin — Fri, 20 Apr 2012 13:38:54 +0000

This tutorial describes how to define and use a key event in Formspider. In a Formspider application, a keyEvent is triggered when the user presses a combination of keyboard buttons specified by the developer.

A keyEvent can be defined at the mainframe, dialog, panel or component level. A keyEvent defined at a higher level in the view hierarchy delegates down to lower levels. For example, a keyEvent defined at PanelA triggers if the defined key combination is pressed when the focus is in a component that resides in PanelB which is included in PanelA.

When a key is pressed the framework searches for an appropriate keyEvent starting from the focused component. It then climbs higher in the view hierarchy (focused component => panel (recursively) => dialog/mainframe).

Sample Application

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog shows up. Enter “keyEvent” as the name of the application and “HR” as its datasource schema name. Leave other fields empty and click “OK”. This creates the “keyEvent” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

In the datasource schema of the application, create a package called “keyEvent_pkg” and open it in your favorite PL/SQL Editor. Add a procedure named “mainframe_shiftB” and ensure that the procedure is exposed in the package specification.

procedure mainframe_shiftB is
begin
  api_application.showpopupmessage('mainFrame''s SHIFT B keyEvent is fired');
end;

In the Formspider IDE expand the “Actions” accordion, select the “Actions” node and click the “+” button to create a new action. Alternatively, you may right click the “Actions” node and select “New” from the pop-up menu. The “New Action” dialog shows up. Enter “mainframe_shiftB” as the action name and “keyEvent_pkg.mainframe_shiftB” as the procedure. Click “OK” to save your action.

Creating “mainframe_shiftB” action

Expand the “Windows” node and then the “Mainframe” node from the “Containers” tree. Double click the “mainFrame” node to open it in the editor. To add the keyEvent, edit the “mainFrame” XML as the following;

Create a new panel containing a button labeled “Fire”. To achieve this, expand the “Containers” accordion, select the “Panels” node in the navigation tree and click the “+” button. Alternatively, you may right click the “Panels” node and select the “New” menu item from the pop-up menu. The “New Panel” dialog shows up. Enter “subPanel” as the name of the panel and “Yellow” as the background color. Select “TitledBorder” option from border type combo box and enter “subPanel” as the border title. Click “OK” to create and open the panel in the editor.

Creating “subPanel”

Using the procedures below, define two keyEvents on the “subPanel” with “SHIFT A” and “SHIFT B” as keyCombination and define a keyEvent on the button labeled “Fire” with “SHIFT A” as keyCombination. Create the actions corresponding to each keyEvent using the procedure names as the name of the actions.

procedure subPanel_shiftA is
begin
  api_application.showpopupmessage('subPanel''s SHIFT A keyEvent is fired');
end;

procedure subPanel_shiftB is
begin
  api_application.showpopupmessage('subPanel''s SHIFT B keyEvent is fired');
end;

procedure subPanelButton_shiftA is
begin
  api_application.showpopupmessage('subPanel''s “Fire” button SHIFT A keyEvent is fired');
end;

The “subPanel” XML should look like the following;

Double click the “mainPanel” to open it in the editor. Using the following procedures, define two keyEvents on the “mainPanel” with “SHIFT A” and “SHIFT C” as keyCombination. Create the actions corresponding to each key event using procedure names as the name of the actions.

procedure mainPanel_shiftA is
begin
  api_application.showpopupmessage('mainPanel''s SHIFT A keyEvent is fired');
end;

procedure mainPanel_shiftC is
begin
  api_application.showpopupmessage('mainPanel''s SHIFT C keyEvent is fired');
end;

Include the “subPanel” in “mainPanel” and add a button labeled “test” into “mainPanel”. The “mainPanel” XML should look like the following;

The screenshot of the application is below;

“keyEvent” application

Run the application to examine the results. If the user presses “shift and “A” buttons on the keyboard while the focus is on the button with the label “Fire”(you can click to the component to set the focus on it) then the “subPanelButton_shiftA” action executes. However, if the focus is on the “test” button, pressing the same keyboard buttons causes the action “mainPanel_shiftA” to execute. The action “subPanel_shiftA” is never executed.

Similarly, if the user presses “shift and “B” buttons while the focus is on the “Fire” button then the “subPanel_shiftB” action executes. On the other hand, if the focus is on the “test” button, pressing the same keyboard buttons causes the action “mainframe_shiftB” to execute.

Finally, if the user presses “shift and “C” buttons, “mainPanel_shiftC” action executes regardless of where the focus is.

Defining a Key Combination

The keys are split into two groups; modifiers (SHIFT, CONTROL and ALT) and virtual keys (rest of the keys). A keyCombination consists of one mandatory virtual key and one or more optional modifiers.

The list of modifiers is below:
SHIFT
CONTROL
ALT

The most commonly used virtual keys are:
A B C … Z
0 1 2 3 … 9
F1 F2 F3 … F12
NUMPAD0 NUMPAD1 … NUMPAD9
UP
DOWN
LEFT
RIGHT
ENTER
ESCAPE
HOME
END
PAGE_UP
PAGE_DOWN
ADD
DIVIDE
MULTIPLY
SUBTRACT
INSERT
DELETE
NUM_LOCK
CAPS_LOCK
SCROLL_LOCK
BACK_SPACE
COMMA
LESS
PAUSE

Below is a list of examples that define various key combinations;

keyCombination	Result
“A”	Correct. Pressing on A fires the event.
“SHIFT”	Incorrect. One virtual key must be used in the keyCombination.
“SHIFT A”	Correct. Pressing on shift and A fires the event.
“SHIFT A F1”	Incorrect. Cannot use more than one virtual key in one keyCombination.
“SHIFT ALT ENTER”	Correct. The event fires when the user presses shift, alt and enter.

Tutorial 32: How to use Table Layout

admin — Fri, 13 Apr 2012 08:14:05 +0000

This tutorial describes how the table layout can be used to design screens in Formspider. Formspider mainframes, dialogs and panels can be designed using table layout. Formspider tableLayout elements consist of rows and cells. Each row may contain a different number of cells.

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog will show up. Enter “tableLayout” as the name of the application and “HR” as its datasource schema name. Leave other fields empty and click “OK”. This creates the “tableLayout” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

Double click the “mainPanel” under the “Panels” node of the “Containers” navigation tree to open it in the editor. The example below places six buttons to the “mainPanel” using table layout:

The screenshot below shows how the buttons are displayed once the application containing the “mainFrame”, is executed. Note that the labels on buttons indicate the row and column that the button is placed in.For example, the button with the label 3.2 is located in the second column of the third row in the panel.

Figure 1: Example TableLayout with default alignment

Component Alignment

A component in a cell is by default aligned to the center of the cell (Figure 1). This behavior can be changed using the hAlign and vAlign attributes for horizontal and vertical alignment respectively.

The valid values for these two attributes are listed below;
hAlign: Left Center Right Full
vAlign: Top Center Bottom Full

The XML below expands the button “btn1-1” so that it fills its cell completely.

Figure 2: Example TableLayout with full alignment

The XML below aligns the button “btn1-1” to the top-left of its cell.

Figure 3: Example TableLayout with Top-Left alignment

Cell / Row / Component Sizes

If the sample application shown above is resized, the columns and rows in the table layout resize themselves automatically to share the available space. Developers can control the area that a row or a cell occupies using the height and width attributes respectively.

Cell Width

Cell width can be set as pixel or percentage. In the example below, the cell width for the button named “btn1-2” is set to 100 pixels. All alignment values are specified as “Full” to show the effect of the cell width change clearly (Figure 4).

Figure 4: Cell width specified in pixels

Setting the width attribute value to 100 pixels effects cells 2.2 and 3.2 as well. This happens because, when the application runs the table layout manager places the logical cells 1.2, 2.2 and 3.2 to the same physical column.

The layout manager determines the width of physical columns by processing logical cells starting from the first cell in the first row moving to the next cell in the first row and ending with the last cell in the last row. Hence the physical column width is determined by the cell in the physical column that has the biggest width value.

The XML below specifies cell width values for cells 1.2 and 2.2. (See Figure 5 for the rendered screen)

Figure 5: Cell width specified in pixels

The cell width can also be specified using a percentage as shown in the XML below(See Figure 6 for the rendered screen). The first and second cell widths are set to 25% and 75% respectively. The table layout manager will preserve this ratio between the areas the two columns cover when the mainframe is resized.

Figure 6: Cell width specified as percentage

The XML below uses both pixel and percentage to specify the cell width.(See Figure 7 for the rendered screen)

Figure 7: Cell width specified both as percentage and in pixels

As seen in the example above, the table layout manager sets first physical column width to 100 pixels. Then, 50% of the remaining space in the panel is designated for the second physical column.

In some cases, the width of the component should dynamically increase following its content where the width of the physical column containing this component should also dynamically increase. The best example of this state could be a textLabel where the label content changes dynamically at runtime. In such cases where setting a fixed percentage or pixel width is insufficient, cell width can be set as “auto” to let the layout manager decide and adjust cell width dynamically. In fact this is a special value which can be used only for cells containing textLabel component.

In the XML below “auto” is specified as cell width of “label1-1”.(See Figure 8 for the rendered screen)

Figure 8: Cell width specified as “auto”

As seen in the example above, the table layout manager sets first physical column width dynamically following the content length of the “label1-1” textLabel.

Row Height

height attribute operates similar to the width attribute. Unlike cell width, row height can only be specified in pixels. If no height attribute is specified, rows will cover all the available area.

The XML example below specifies the first row height as 100 pixels(See Figure 9 for the rendered screen). When mainframe is resized the first row will preserve its height of 100 pixels, while the height of the other two rows changes.

Figure 9: Row height

The XML example below shows a panel with a table layout manager that has pixel value for all of its cell widths and row heights(See Figure 10 for rendered screen). The layout manager of this panel will not adjust the contents of the panel when the panel is resized.

Figure 10: Row height and cell width

Row Height Policy

Similarly to cell width, there can be some cases where the height of the component contained by a row is unknown and should extend its content. Again the best example to this case is a textLabel where the label content changes dynamically at runtime. In such cases, to let the layout manager decide and adjust row height dynamically, heightPolicy attribute can be set as “Dynamic”(the default value of this attribute is “Static”, indicating that the layout manager won’t extend row height dynamically).

Note 1: “Dynamic” heightPolicy usage should be limited as much as possible since too much usage of “Dynamic” heightPolicy may slow down the application performance.
Note 2: If any row height value is set, heightPolicy cannot be set as “Dynamic” for this same row anymore.

In the XML below “Dynamic” is specified as heightPolicy of the first row in the panel.(See Figure 11 for the rendered screen)

Figure 11: “Dynamic” heightPolicy

Cell Spacing

cellSpacing attribute is used to create a blank area between table layout cells.

The XML below sets cellSpacing to 5(See Figure 12 for the rendered screen).

Figure 12: Cell Spacing

Component Size

When alignment is set to a value other than “Full”, cell‘s childWidth and childHeight attributes can be used to determine the size of the component in it as shown in the sample XML below(See Figure 13 for the rendered screen).

Figure 13: Component size

Span Values

Column Span

In the XML below the cell 1.2 is deleted and cell 1.1 is extended to cover two physical columns using the columnSpan attribute(See Figure 14 for the rendered screen).

Figure 14: Column spans values

The XML below uses columnSpan for a more complex display(See figure 15 for the rendered screen).

Figure 15: Column Spans values

The XML above defines two rows. The first row has four cells and a height of 300 pixels. The second row has two cells and a height of 50 pixels. Cell 1.2 width is specified as 100 and cell 2.1 has its columnSpan and width attributes set to 3 and 400 respectively.

Note that resizing the mainframe will only cause the cell 1.4 and cell 2.2 to resize.

Row Span

In the XML below, the cell 3.2 is deleted and the cell 2.1 is extended vertically using the rowSpan attribute(See Figure 16 for the rendered screen).

Figure 16: Row spans values

Note that, even though the cell 3.1 is defined as the first column in its row, when the panel is rendered, it is displayed in the second physical column due to the rowSpan attribute in cell 2.1

Deploying Formspider Middle Tier to OC4J

admin — Wed, 11 Apr 2012 14:03:34 +0000

It is possible to deploy Formspider middle tier to any JEE compliant container. This tutorial explains deploying Formspider to an OC4J standalone instance. Please contact us at contact (at) theformspider dot com to be able to download the Formspider WAR File for the OC4J deployment.

Deploying the Formspider WAR File

Open OC4J console from the browser (It should have a URL address similar to the following: http://localhost:8888/em/). Navigate to the Applications menu and click the Deploy button. The Select Archive screen shows up.

Deploying a new application

Proceed with the “Archive is present on local host…” option which is selected by default. Press the “Browse” button to select the Formspider middle tier war file from your local drive. Press the “Next” button.

Select archive

Application Attributes screen shows up. Enter the value “formspider” for both “Application Name” and “Context Root” fields. Click “Next” to continue.

Application attributes

The Deployment Settings screen shows up. Press the “Deploy” button.

Configuring the Database Connection

After the deployment is completed, its time to configure the database connection. There are two ways to define database connection parameters. You can either use “JDBC Resouces” or application web.xml parameters.

Connecting with JDBC Resources

This way gives the opportunity to tune the pooling parameters and it is generally the preferred method in a production environment. Navigate to Administration menu and go to task “JDBC Resources”.

Administration menu

There are two resource type in the “JDBC Resources” screen. “Data Sources” and “Connection Pools”. Click the “Create” button under the “Connection Pools” header.

JDBC Resources

“Create Connection Pool – Application” screen shows up. Proceed with the default values and click “Continue”.

Create Connection Pool - Application

“Create Connection Pool ” screen shows up. Enter the value “Formspider Pool” for the “Name” field. Set “JDBC URL”, “Username” and “Password” of the Formspider schema. Click “Finish” to continue.

Create Connection Pool

“JDBC Resources” screen shows up again. Click “Create” in the the “Data Sources” section. “Create Data Source – Application & Type” screen shows up. Press “Continue” to proceed with the default values.

Create Data Source - Application & Type

“Create Data Source – Managed Data Source” screen shows up. Enter the values “Formspider Data Source” and “jdbc/formspider” for the fields “Name” and “JNDI Location” respectively. Select “Formspider Pool” (which is already defined) for the field “Connection Pool”. Click “Finish” to complete.

Create Data Source

JDBC Resources are created. To enable Formspider deployment to use these resources, navigate to the OC4J main directory. This is where OC4J is installed. Find the Web.xml file of the newly deployed application. The Web.xml file path may differ depending on the OC4J application name and the Formspider WAR file name. It should look something similar to this:

C:\[OC4J Installation Path]\j2ee\home\applications\formspider\fs-1.0\WEB-INF\

In the web.xml file, set “engineJdbcName” parameter to the value “jdbc/formspider” which is defined in the “JNDI Location” field in the “Create Data Source” screen.


  engineJdbcName
  jdbc/formspider

Defining "engineJdbcName" parameter in web.xml file

Save the file and restart the OC4J.

Connecting with Web.xml File Parameters

It is also possible to define the database connection parameters in the web.xml file without creating any resources in the OC4J. This way is generally preferred in s development environment. Open web.xml file (how to find the web.xml file is described above) and edit the parameters, “engineSchemaURL”, “engineUsername”, “enginePassword” as the following:

set “engineSchemaURL” to JDBC URL of Formspider schema
set “engineUsername” to Formspider schema name
set “enginePassword” to Formspider schema password


  engineSchemaURL
  jdbc:oracle:thin:@192.168.1.122:1521:ORA10G


  engineUsername
  FORMSPIDER


  enginePassword
  FORMSPIDER

Connection parameters in web.xml file

Save the file and restart the OC4J.

E-Business Suite & Formspider Integration

admin — Wed, 11 Apr 2012 08:05:20 +0000

1. Introduction

Oracle E-Business Suite (EBS) covers a wide range of business processes. However, there are use cases where you want to extend your information system beyond the range of Oracle EBS. To achieve this, you can easily create complementary applications with Formspider which are securely integrated with Oracle EBS and its data.

This tutorial explains how to build a Formspider application using EBS data and how to call a Formspider application from EBS main menu.

2. Architecture

2.1 Formspider Architecture

In a Formspider application, a client request goes to the database through the middle tier. By default, Formspider uses Apache Tomcat and it can also be deployed into any JEE compatible web application servers. Formspider middle tier uses JDBC connection and connects to the Formspider schema in the database. Formspider schema is the engine of the Formspider framework.

Each Formspider application has its own schema. Formspider runs an application by running its queries, delete-update-insert statements, PL/SQL procedures in the application’s own schema. For instance, if your application data model (tables, packages…) are in SCHEMA1, then Formspider runs the queries of the application in SCHEMA1. In Formspider jargon, SCHEMA1 is called as the “datasource schema” of the application.

Formspider Architecture

2.2 EBS Architecture

EBS has a middle tier, as well. EBS middle tier connects to the APPS schema in the database. EBS has a separate schema for each of its modules. APPS is the main schema which has the public API’s of EBS database tier. APPS contains synonyms referencing objects of the other EBS schemas.

EBS Architecture

3. Integrating Architectures

To make Formspider work with EBS data, install Formspider database tier to the same database that EBS lives. Application Servers can stay separate. You can find detailed information about installing Formspider here.

In the scenario presented in this tutorial, a user calls a custom Formspider Application from the EBS main menu.

To achieve this, create a new Formspider application and a new datasource schema for this application called “FS_APPS”.

3.1 Calling Formspider Application From EBS Main Menu

To call an external application from the EBS menu, define the menu item and its function. This function opens a URL pointing to the Formspider application. In order to bypass the EBS authentication for the Formspider application, (since the user is already logged in to the EBS) pass several EBS session parameters like user id, application id, etc… to the Formspider application and use these parameters for authorizing the Formspider application automatically.

The EBS session parameters should not be passed to the Formspider application in the URL string because of security reasons. Therefore, instead of calling the Formspider application directly, the EBS function calls a custom JSP page, named “fs.jsp” added to EBS middle tier. When a request to open the Formspider application arrives to fs.jsp, it validates the user session and connects to the APPS schema to create access token which is essentially a key-value pair, in the database. This access token is stored in a table. The key is a randomly generated string that is returned to the JSP. The value is kept in the database because it contains the EBS application session parameters that will be passed to the Formspider application. When fs.jsp receives the key, it appends the key to the URL string and redirects the page to the Formspider application. The Formspider application retrieves the key from the URL and validates it against the table in which the key value pair is kept. If the key is not valid, Formspider application does not start (there are several ways to prevent starting the Formspider application. For instance, it can show an empty screen).

Integration of Formspider and EBS Architectures

3.2 Authentication and Authorization

If the key is valid Formspider application uses the value associated with it to authenticate itself to EBS.

After the Formspider application is opened and user is authenticated, it checks which parts of the application user can access with EBS public APIs, fnd_global.apps_initialize and fnd_function.test. The examples of these APIs are below.

4. Creating and Calling Custom JSP From EBS

4.1 Creating the JSP File

The source of fs.jsp:

<%@ page contentType="text/html;charset=windows-1252"%>
<%@ page import="oracle.apps.fnd.common.WebRequestUtil"%>
<%@ page import="oracle.apps.fnd.common.WebAppsContext"%>
<%@ page import="java.sql.CallableStatement"%>
<%@ page import="java.sql.Types"%>
<%@ page import="java.sql.SQLException"%>



<%

WebAppsContext ctx = WebRequestUtil.validateContext(request, response);

String userId = "" + ctx.getUserId();
String respId = "" + ctx.getRespId();

String sql = "begin ?:= fs_apps.ebs_main_pkg.createToken(?,?); end;";
String token = "";
CallableStatement stmt =null;

try
{
  	stmt = (ctx.getJDBCConnection()).prepareCall(sql);
  	stmt.registerOutParameter(1, Types.VARCHAR);
  	stmt.setString(2, userId);
  	stmt.setString(3, respId);
  	stmt.execute();
  	token = stmt.getString(1);
}
catch (SQLException e)
{
  	e.printStackTrace();
}

//Enter the URL of your Formspider Application
String redirectURL = "http://127.0.0.1/fs_ebs/main.jsp?name=EBS%20Test#" + token;
response.sendRedirect(redirectURL);

%>

fs.jsp file

Note that “ebs_main_pkg.createToken” function is owned by FS_APPS schema and it returns the key of the token.

Copy fs.jps file to EBS middle tier to the target path below (the path may be different depending on the EBS version):

/u01/E-BIZ/apps/apps_st/comn/webapps/oacore/

The path of fs.jsp

Then, navigate to oacore directory and run the following command to compile the JSP file.

$FND_TOP/patch/115/bin/ojspCompile.pl --compile -s 'fs.jsp' -p 2

Compiling fs.jsp

If the command above doesn’t work use the following command:

perl -x /u01/E-BIZ/apps/apps_st/appl/fnd/12.0.0/patch/115/bin/ojspCompile.pl --compile -s fs.jsp

Compiling fs.jsp

After compilation, restart the apache server and core using the following commands:

adstpall.sh apps/apps
adstrtal.sh apps/apps

Restarting the apache server and core

The JSP file is deployed to the EBS middle tier. Next, define necessary objects to call this JSP from the EBS main menu.

4.2 Calling the JSP

At the main menu, click the item “Function” under the path “System Administrator – Application”.

Open the Function Menu

4.2.1 Creating The Function

Create a new function. Enter the following values for the fields:

“FS_FUNCTION” for Function and User Function Name
“SSWA jsp function” for Type
“fs.jsp” for HTML Call

Defining the EBS Function - 1

Defining the EBS Function - 2

Defining the EBS Function - 3

4.2.2 Creating The Menu

Next, create the menu item that calls the function created in the step above by selecting “System Administrator – Application – Menus” from the EBS menu. Enter the following values to the fields:

“FS_MENU” for Menu and User Menu Name fields
“Standard” for Menu Type
“Start FS App” for Prompt
“FS_FUNCTION” for Function

Creating the EBS Menu

4.2.3 Creating The Responsibility

Create a new responsibility by selecting “System Administrator – Application – Responsibilities” from the EBS menu. Enter the following values to the fields:

“FS_RESPONSIBILITY” for Responsibility Name and Responsibility Key fields
“Application Object Library” for Application field
“Oracle Self Service Web Applications” for Available From
“FS_MENU” for Menu field
“Standard” for Data Group Name
“Application Object Library” Data Group Application

Creating the EBS Responsibility

4.2.4 Creating The User

Create a new user from by selecting “System Administrator – Application – Users” from the EBS menu. Enter the following values:

“FORMSPIDER” for User Name
Enter a password
Create a new record for Direct Responsibilities block and enter values “FS_RESPONSIBILITY”, “Application Object Library”, “Standard” for fields Responsibility, Application, Security Group respectively.

Creating EBS User "FORMSPIDER"

5. Developing a Formspider Application Using EBS Data

5.1 Creating FS_APPS Schema

Connect to the EBS database with “SYS” user and run the following scripts.

CREATE USER FS_APPS
IDENTIFIED BY FS_APPS
DEFAULT TABLESPACE USERS
TEMPORARY TABLESPACE TEMP
/
GRANT CREATE PROCEDURE TO FS_APPS
/
GRANT CREATE SEQUENCE TO FS_APPS
/
GRANT CREATE SESSION TO FS_APPS
/
GRANT CREATE SYNONYM TO FS_APPS
/
GRANT CREATE TABLE TO FS_APPS
/
GRANT CREATE TRIGGER TO FS_APPS
/
GRANT CREATE TYPE TO FS_APPS
/
GRANT CREATE VIEW TO FS_APPS
/
GRANT UNLIMITED TABLESPACE TO fs_apps
/

User FS_APPS

Then, connect to APPS schema and create the package “formspider_global”. This package wraps APPS APIs which will be used by the Formspider application. Please note the “authid definer” keyword added to the package specification in order to run it with the APPS schema privileges.

CREATE OR REPLACE
PACKAGE formspider_global AUTHID DEFINER AS

procedure apps_initialize(user_id number,
                          resp_id number,
                          resp_appl_id number,
                          security_group_id number := 0,
                          server_id number := -1);

function function_test(function_name in varchar2) return boolean;

function createToken(in_user_id varchar2, in_resp_id varchar2) return varchar2;

procedure updateUser(in_userName_tx varchar2, in_email_tx varchar2);

end;

end;
/

CREATE OR REPLACE
PACKAGE BODY formspider_global AS
--------------------------------------------------------------------------------
procedure apps_initialize(user_id in number,
                          resp_id in number,
                          resp_appl_id in number,
                          security_group_id number := 0,
                          server_id in number := -1) is
begin
  fnd_global.apps_initialize(user_id, resp_id, resp_appl_id,
  security_group_id, server_id);
end;
--------------------------------------------------------------------------------
function function_test(function_name varchar2) return boolean is
begin
  return fnd_function.test(function_name);
end;
--------------------------------------------------------------------------------
function createToken(in_user_id varchar2, in_resp_id varchar2) return varchar2 is
begin
  return fs_apps.ebs_main_pkg.createToken(in_user_id,in_resp_id);
end;
--------------------------------------------------------------------------------
procedure updateUser(in_userName_tx varchar2, in_email_tx varchar2) is
  pragma autonomous_transaction;
begin
  fnd_user_pkg.updateuser(
    x_user_name => in_userName_tx,
    x_owner => in_userName_tx,
    x_email_address => in_email_tx);
  commit;
end;
--------------------------------------------------------------------------------
END;
/

grant execute on formspider_global to FS_APPS
/

Package Formspider_Global

Next, connect to FS_APPS and run the following scripts to create “t_token” table and “ebs_main_pkg” package. T_token table is used to keep key value pairs. The package is used by Formspider application.

create table t_token(token_id varchar2(200) primary key, user_id number, resp_id number)
/

Table t_token

CREATE OR REPLACE
PACKAGE ebs_main_pkg IS

procedure postOpen;
procedure populate;
procedure save;
function createToken(in_user_id varchar2, in_resp_id varchar2) return varchar2;

END;
/

CREATE OR REPLACE
PACKAGE BODY ebs_main_pkg IS
--------------------------------------------------------------------------------
function appsAuthorise(in_user_id number, in_resp_id number) return boolean is
begin
  if in_resp_id is null then
    return false;
  end if;

  -- Init user and resp
  apps.formspider_global.apps_initialize(in_user_id, in_resp_id, 0);

  -- Check if user has permission on EBS Function
  return apps.formspider_global.function_test('FS_FUNCTION');

end;
--------------------------------------------------------------------------------
procedure postOpen is
  v_bookmark varchar2(4000);
  v_user_id number;
  v_resp_id number;

  --Get user_id and resp_id values from the t_token table and delete the row.
  --So that token will be used only once
  procedure useToken(in_token_id varchar2) is
    pragma autonomous_transaction;
  begin
    delete from t_token
    where token_id = in_token_id
    returning user_id, resp_id into v_user_id, v_resp_id;
    commit;
  end;

begin

  v_bookmark := api_application.getBookmark;
  useToken(v_bookmark);

  if appsAuthorise(v_user_id, v_resp_id) then
    api_session.add('user_id',v_user_id);
    api_session.add('resp_id',v_resp_id);
    api_frame.addPanel('mainFrame','centerCell','mainPanel');
  end if;

end;
--------------------------------------------------------------------------------
procedure populate is
begin
  api_datasource.setBindvar('EBS_USER1.user_id',api_session.getValueNR('user_id'));
  api_datasource.executeQuery('EBS_USER1');
end;
--------------------------------------------------------------------------------
procedure save is
begin
  api_application.doCommit;
end;
--------------------------------------------------------------------------------
function createToken(in_user_id varchar2, in_resp_id varchar2) return varchar2 is
  v_token_id varchar2(255);
  pragma autonomous_transaction;
begin

  --create a random string as token id
  v_token_id := utl_raw.cast_to_raw( DBMS_RANDOM.STRING('p', 10) ||
                  to_char(SYSTIMESTAMP, 'YYYYMMDDHH24MISSFF6'));

  insert into t_token(token_id,user_id,resp_id)
  values (v_token_id,in_user_id,in_resp_id);

  commit;

  return v_token_id;
end;
--------------------------------------------------------------------------------
END;
/

Package Ebs_main_pkg

5.2 Creating Formspider Application

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog will show up. Enter the application name and datasource schema name and then press “OK”.

Creating new Formspider application, "EBS Test"

5.3 Creating the Model

Create the view that queries the EBS data in the FS_APPS schema. Connect to the APPS schema and grant the necessary object privileges to FS_APPS:

grant select, insert, update, delete on apps.fnd_user to fs_apps;

Grants for FS_APPS object

Run the following DDLs in FS_APPS:

create or replace view ebs_user (
  user_id, user_name, email_address,
  constraint ebs_user_pk primary key (user_id) rely disable novalidate
) as
select user_id, user_name, email_address
from apps.fnd_user
/

CREATE OR REPLACE TRIGGER ebs_user_iud
INSTEAD OF UPDATE ON ebs_user
REFERENCING NEW AS NEW OLD AS OLD
begin
  if updating then
    apps.formspider_global.updateUser(:new.user_name,:new.email_address);
  end if;
end;
/

View EBS_User

After creating the view, create the Formspider objects; datasource definition and datasource which will be used to query the “EBS_USER” view. Go to the Formspider IDE again and expand the “Datasource Definitions” accordion, right click the “Datasource Definitions” node and select “New” from the pop up menu.

Creating a new datasource definition

The “New Datasource Definition” dialog shows up. Select “View” radio button from “Based On” section. Choose USER_ID column as the Primary Key and enable “Delete, Insert, Update” from “DML Permissions” section.

Creating "EBS_USER" datasource definition

To filter retrieving only the data of one user, go to the “Query” section, enter the following where clause:

user_id = :user_id

Where clause of EBS_USER datasource definition

Defining where clause

Define the bind variable “user_id”:

Defining bind variable

5.4 Creating the User Interface

Create a simple form with user id, user name and email fields.

Expand the “Containers” accordion, select the “Panels” node in the navigation tree and click the “+” button to create a new panel. Alternatively, you may right click the “Panels” node and select the“New” menu item from the pop up menu. The “New Panel” dialog shows up. Enter “userPanel” as the name of the panel and click “OK”. Edit the “userPanel” XML so that it looks like the following:

Panel userPanel

Add two buttons to the application named populate and save. The Populate button will fill in the user data fields in the application with the current user’s information. Save button commits the changes of the form to the EBS system. Please see ebs_main_pkg.populate and ebs_main_pkg.save procedures above.
Define action objects to use these procedures in the Formspider application. Go to the Formspider IDE and expand the “Actions” accordion, select the “Actions” node, click the “+” button to create a new action. Alternatively, you may right click the “Actions” node and select “New” from the pop up menu. The “New Action” dialog shows up. Enter “populate” as the action name and “ebs_mainl_pkg.populate” as the procedure. Click “OK” to save your action. Similarly, create a new action for “ebs_main_pgk.save” procedure. Open the “New Action” dialog, enter “save” as the action name and “ebs_mainl_pkg.save” as the procedure.

New action "populate"

New action "save"

You are now ready to create the buttons. Create a new panel, enter “buttonPanel” as the name of the panel and save the new panel pressing “OK” button. Then go to “buttonPanel” XML. Edit the panel XML so that it looks like the following:

Panel buttonPanel

Go to the main panel that is automatically created with the application and include the two panels into the mainPanel:

Panel mainPanel

When the application runs, the populate button does not retrieve any data because in the populate procedure the user data is received from the Formspider session. However, the session is not yet populated with this information yet. Set it by reading the key that is sent from the EBS through the URL. If there is not a key in the URL, show an empty screen. To achieve this, create a new panel and name it “emptyPanel”. Edit the “emptyPanel” so that its XML definition is as the following:

Panel emptyPanel

Add the emptyPanel to the main frame. Replace emptyPanel with mainPanel if the key is validated. To find the main frame, expand the “Containers” accordion, expand “Windows” and “Mainframe” nodes. Edit the mainframe to look like the following:

The mainframe

5.5 Using the Key-Value Pair

As mentioned before, the key is present in the URL string. Use the api_application.getBookmark API to retrieve the key in the Post-Open event of the Formspider application. Query the t_token table to find the key-value pair in the table. Get corresponding user id and responsibility id values. Please see ebs_main_pkg.postOpen procedure for more details.

To define the Post Open action, go to Formspider IDE and create a new action. Enter “postOpen” as the action name and “ebs_mainl_pkg.postOpen” as the procedure.

New action "postOpen"

Open “Appliaction Edit Dialog” from the File menu or using edit button right to the Application combo box. In the dialog, open the “Events” tab and select postOpen action for the Post Open event.

Defining "Post Open" event

6. Running the Application

Expand the menu “FS_RESPONSIBILITY” and click “Start FS App”. Please note that, when you try to expand the menu FS_RESPONSIBIILTY, EBS may open the Formspider application since there is just one menu item defined under FS_RESPONSIBIILTY.

Click "Start FS App"

The Formspider application starts. Press the query button in order to populate the data of the user FORMSPIDER. The application retrieves FORMSPIDER user id from the access token in the database. You can edit email field and save the changes.

Formspider application started

Try to open the application outside of the context of the EBS (from the browser or IDE without creating a key-value pair). Note that the application only displays an empty panel.

Refresh the application opened from the EBS menu, to see that you get the same result. This is because the key-value pair was designed to be single use.

Formspider application started but not authenticated

7. Conclusion

Formspider enables PL/SQL developers build great enterprise WEB applications with just PL/SQL. Formspider applications run using 100% AJAX, DHTML and JavaScript without the need to know any of them. You can easily integrate Formspider applications with EBS to extend the capabilities of your information system.

Tutorial 31: How to upload any image file and display it on Image component at run time

admin — Wed, 11 Apr 2012 07:00:41 +0000

This tutorial explains how to bind the image component to a datasource column of data type BLOB. This tutorial creates a new application which uploads an image to datasource column and displays the uploaded image with an image component. You may want to check Tutorial 15: How to upload a file tutorial first.

Creating the Formspider Application

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog shows up. Enter “image” as the name of the application and select any schema as its Datasource Schema name. If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database schema. Leave other fields empty and click “OK”. This creates the “image” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

a- Creating Datasource

Create a new table named T_IMAGE in your Datasource Schema which has a BLOB column and insert empty row into table. Here is a sample DDL:

CREATE TABLE "T_IMAGE"
(
    "PHOTO" BLOB
)
/
INSERT INTO T_IMAGE VALUES (null)
/

Then create a new datasource definion based on this table. To achieve this, expand the “Datasource Definitions” accordion panel, select the “Datasource Definitions” root node and click the “+” button from the toolbar of the accordion panel. The “New Datasource Definition” dialog shows up.

Select “Table” from the “Based On” section and T_IMAGE table from the combobox. Note that, the name of the “Datasource Definitions” is “T_IMAGE1″. Create an empty row in table.

b- Creating GUI of the application

As the first step, double click the “mainPanel” under the “Panels” node of the “Containers” navigation tree to open it in the editor. Edit panel XML so that it contains a fileUpload component and an image component.

In this panel, fileUpload and image components are bound to the same column. This way, when the value of fileUpload component is changed, the display of the image component changes. Note that, there is an empty “valueChanged” event without an action which is used to send uploaded file to the database.

Running application

Press “Run on Web” button or press F7 to run the application. Use the Browse button to select an image file. Upload the image. Note the image component shows the last uploaded image.

Binding image component to a datasource column

Tutorial 30: Integrating Oracle Reports into Formspider using htmlRenderer component – 2

admin — Mon, 09 Apr 2012 16:28:22 +0000

Since version 1.0, Formspider has a servlet that makes it easier for developers to render reports produced by Oracle Reports. This is tutorial shows how to use this new feature.

1- Creating Reports using Oracle Reports Designer

If you already created the report file in “Tutorial 17: Integrating Oracle Reports into Formspider using htmlRenderer component“, please skip to step 2.
As the first step, create a report that shows data from Human Resources (HR) schema tables. Open Reports Designer and create a new report using Report Wizard. Select “Create both Web and Paper Layout” as layout type;

Select “Create both Web and Paper Layout” option as layout type

Then, select “Group Above” as report style;

Select “Group Above” as report style

This report queries “Employees” and “Departments” tables using the “dep_id” parameter and shows employees working in a particular department. Type the following query as the report’s data source definition:

select e.employee_id
      ,e.first_name
      ,e.last_name
      ,e.phone_number
      ,e.salary
      ,d.department_name
      ,m.first_name as manager_name
      ,m.last_name as manager_surname
  from employees e, departments d, employees m
 where e.department_id = d.department_id
   and d.manager_id = m.employee_id
   and d.department_id = :dep_id

Datasource definition query

Select department_name field as a group field;

Group field selection

And remaining fields as display fields;

Display field selection

Use the “Wine” template in this report;

“Wine” template selected

Save the report with “employeesOfDepartments” as file name and Reports Binary(rdf) as file type.

You may also download this report file from the following link:

employeesOfDepartments.rdf

Finally, create a “reports” folder under “C:\” and place the report file under it. Also create a “temp” folder under the newly created “C:\reports\” folder. You may change the paths of these folders by editing the web.xml file in your Tomcat installation.

2- Setting Connection Parameters

Formspider has a built-in Oracle Reports servlet. You just need to set connection parameters and path of the Oracle Reports files. Open the web.xml file in “\webapps\formspider\WEB-INF” folder in your Tomcat installation and edit the following connection parameters.


       reportCommand
       rwrun.exe


       fileDirectory
       c:\reports\


       tempDirectory
       c:\reports\temp\


	databaseTNSName
	YOUR_TNSNAME


	databaseUsername
	YOUR_USERNAME


	databasePassword
	YOUR_PASSWORD

The “reportCommand” parameter is path of the “rwrun.exe” file. The rwrun command runs a report using the Reports Server. You may start the Reports Server as a stand alone server with rwserver server=server_name command from the Command Line. The “fileDirectory” is the directory where the Oracle Reports files reside. “tempDirectory” is the place that Formspider uses to create PDF files. The “databaseTNSName”, “databaseUsername”, and “databasePassword” parameters are database connection parameters.

Once the correct settings are made, you must see the “Welcome.. Please select a report and press run.” message, when you go to the “[ApplicationServerURL]/formspider/oraclereportsservlet” webpage.

3- Creating a Formspider application that displays reports in htmlRenderer component

This sections explains creating a simple Formspider application that shows reports inside an htmlRenderer component.

Open Formspider IDE and create an application named “OracleReports_ReportsServer”. Set “HR” as datasource schema name.

3a- Creating Datasources

Create a new datasource definion based on a table;

To achieve this, expand the “Datasource Definitions” accordion Panel, select the “Datasource Definitions” root node and click the “+” button from the toolbar of the accordion panel. The “New Datasource Definition” dialog shows up.

Select “Table” from the “Based On” section and “Departments” table from the combobox. This datasource definition is used as the datasource of a combobox so that users can select the department of the employees to be shown in “employeesOfDepartments” report.

3b- Creating GUI of the application

Expand the “Containers” accordion Panel, expand “Windows” node and then “Mainframe” node from the tree, double-click “mainFrame” node and edit the XML as the following;

Note that maximizeOnStartUp attribute is set as “Y” and the title as “Oracle Reports Demo”.

Select the “Panels” node and click the “+” button from the toolbar of the accordion panel to create a new panel. Enter “menuPanel” as panel name and click “OK”. Edit panel XML so that it looks like this:

Next, open and edit the XML of the “mainPanel”:

Add the “menuPanel” to the north of this panel with a height of “30”. The Reports are displayed inside the htmlRenderer named “renderer” and cover most of the screen.

3c- Creating the Database Procedures

At this step, create a package named “ORACLEREPORTS_REPORTSSERVER”:

Package Spec:

CREATE OR REPLACE
PACKAGE ORACLEREPORTS_REPORTSSERVER is
 procedure showReport;
end;

Package Body:

create or replace
PACKAGE BODY ORACLEREPORTS_REPORTSSERVER is
--------------------------------------------------------------------------------
procedure showReport is
 -- report url
 v_reportUrl_tx              varchar(32767);
begin
 v_reportUrl_tx := '[ApplicationServerURL]/formspider/oraclereportsservlet?';

 v_reportUrl_tx := v_reportUrl_tx || 'rep_name=employeesOfDepartments.rdf';

 v_reportUrl_tx := v_reportUrl_tx || '&application_id=' || api_application.getid;

 -- get dep_id parameter value from "Department" combobox'
 v_reportUrl_tx := v_reportUrl_tx || '&dep_id=' || api_component.getvaluenr('menuPanel.dep');

 -- show report
 api_component.seturl('mainPanel.renderer', v_reportUrl_tx);

end;
--------------------------------------------------------------------------------
end;

The “showReport” procedure builds the report URL according to the selected parameters and modifies the URL of the htmlRenderer component.
You may need to update v_reportUrl_tx variable in the package with appropriate values for your evironment.

3d- Creating Actions and attaching to the Components

Create an action named “showReport” pointing to the procedure ORACLEREPORTS_REPORTSSERVER.showReport

Open the XML of the “menuPanel” and add a buttonPress event to the button named “report”:

Running reports

Run the application and see the report output showing in the application after you select a department and an output format.

Oracle Reports successfully integrated into Formspider Application