Developing A Real World Logistic Application With Oracle Application - UKOUG 2008

Developing a Real-World Logistic Application with Oracle Application Express Roel Hartman Software Architect / NL Lead Technical Architect Oracle

Agenda UKOUG 2008 04-12-2008 Introduction The Case Conclusions & Tips Q&A

Introduction 04-12-2008 UKOUG 2008 www.BloggingAboutOracle.org roelhartman.blogspot.com

Introduction Logica (a word from our sponsors) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008

Introduction Logica (another word from our sponsors) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008

The Client ,[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008

The Architecture No. 04-12-2008 UKOUG 2008 Accounts Payable/ Accounts Receivable administration Internet Board computer software TMS Planning software Supply C hain Ma n a g emen t Traffic information Order acceptance and processing Communication manager Onboard computer E Supply chain m anagement Mob ile internet Navigati on system

The Application ,[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008

The Technical Environment No. 04-12-2008 UKOUG 2008 Oracle DB Definition Files ,[object Object],[object Object],[object Object],[object Object],[object Object],Application Processor Cache Application Designer

So…what does the application look like? No. 04-12-2008 UKOUG 2008

Alternatives No. 04-12-2008 UKOUG 2008 ++ +? ++ ++ UI ++ ++ ++ - Future ++ -/+ + + Knowledge -/+ ++ + + Productivity -/+ ++ -/+ - Costs + ++ + + Performance -/+ + + + Migration .Net APEX JDeveloper Oracle Forms

Proof of Concept ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008

Enhancement 1 : Direct Validation ,[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008 onchange=“javascript:check_value(this,'Check_Legal_Entity');” <script type="text/javascript"> function check_value(object, pProcess) { var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS='+pProcess,$v('pFlowStepId')); get.addParam('x01',$v(object)); gReturn = get.get(); if(gReturn){ alert(gReturn); } } </script> <script type="text/javascript"> function checkValue(object, pProcess){ var lRequest = new apex.ajax.ondemand( pProcess, function(){ var l_s = p.readyState; if(l_s == 1||l_s == 2||l_s == 3){ } else if(l_s == 4){ gReturn = p.responseText; (gReturn)?myAlert(gReturn, object):null; }else{return false;} } ); lRequest.ajax.addParam('x01',$v(object)); lRequest._get(); } </script>

Enhancement 1 : Direct Validation ,[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008 declare dummy varchar2(1); l_ley_code legal_entity.legal_entity_code%type; begin l_ley_code := upper(wwv_flow.g_x01); if l_ley_code is null then htp.p('Legal Entity is required'); else select '1' into dummy from legal_entity where legal_entity_code = l_ley_code; end if; exception when no_data_found then htp.p('Legal Entity '||l_ley_code||' does not exists'); end begin ley_pck.check_value(upper(wwv_flow.g_x01)); end get.addParam('x01',$v(object)); gReturn = get.get();

Enhancement 2 : Calendar ,[object Object],[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008 $(function(){ // Attach a DatePicker icon and function to class="datefield" $(".datefield").datepicker( { dateFormat : 'dd/mm/yy' , closeText : 'X' , clearText : '' , showAnim : 'scale' , showOptions : { origin: ['top', 'left'] } , showOn : 'button' , buttonImage : '#APP_IMAGES#calendar.gif' , buttonImageOnly : true }); });

Enhancement 3 : Show description when a code is entered ,[object Object],[object Object],No. 04-12-2008 UKOUG 2008 get_company_address(this,'LOAD');" <script type="text/javascript"> function get_company_address(object, pType){ var getter = new htmldb_Get(null,$v('pFlowId').value,'APPLICATION_PROCESS=Get_Company_Address',0); getter.addParam('x01',$v(object)); gReturn = getter.get(); var colArray = gReturn.split("~sep~",5); if (colArray[4]==undefined) { alert(gReturn); } else { html_GetElement('P3_'+pType+'_NAME').value = colArray[0]; html_GetElement('P3_'+pType+'_ADRESS').value = colArray[1]; html_GetElement('P3_'+pType+'_COUNTRY_CODE').value = colArray[2]; html_GetElement('P3_'+pType+'_CITY_CODE').value = colArray[3]; html_GetElement('P3_'+pType+'_POSTCODE').value = colArray[4]; } } </script>

Enhancement 3 : Show description when a code is entered No. 04-12-2008 UKOUG 2008 4. Create an On Demand Application Process ‘Get_Company_Address’ Or even better: declare l_address varchar2(32000); l_sep varchar2(10) := '~sep~'; l_code address.adress_code%type; Begin l_code := upper(wwv_flow.g_x01); select name||l_sep||adress||l_sep||country_code||l_sep||city_name||l_sep||postcode into l_address from address where adress_code = l_code; htp.p( l_address ); exception when no_data_found then htp.p('Address Code '||upper(v('ADDRESS_CODE'))||' does not exists'); when others then htp.p(sqlerrm); end begin ads_pck.get_address(upper(wwv_flow.g_x01)); end

Enhancement 3 : Show description when a code is entered (JSON) No. 04-12-2008 UKOUG 2008 declare l_value varchar2(4000); l_ret_array wwv_flow_global.vc_arr2; begin l_value := upper(wwv_flow.g_x01); -- Address Code if l_value is not null then for a in ( select name||':'||adress||':'||country_code||':'||city_name||':'||postcode retval from address where adress_code = l_value ) loop -- wwv_flow.g_f01(1..5) contains the return fields -- The selected string must be in the same order as the return fields l_ret_array := apex_util.string_to_table(a.retval); for i in 1..wwv_flow.g_f01.count loop apex_util.set_session_state(wwv_flow.g_f01(i), l_ret_array(i) ); end loop; apex_util.json_from_items(apex_util.table_to_string(wwv_flow.g_f01)); end loop; end if; end <script type="text/javascript"> function getCompanyAddressJSON(object, pType){ if ($v(object)){ var lRequest = new apex.ajax.ondemand( 'getCompanyAddressJSON', function(){ var l_s = p.readyState; if(l_s == 1||l_s == 2||l_s == 3){ } else if(l_s == 4){ gReturn = p.responseText; if(gReturn){ json_SetItems(gReturn); } else{ myAlert('Adresscode '+$v(object)+' does not exist', object); } }else{return false;} } ); lRequest.ajax.AddArray(['P3_UNLOAD_NAME','P3_UNLOAD_ADRESS','P3_UNLOAD_COUNTRY_CODE‘ ,'P3_UNLOAD_CITY_CODE','P3_UNLOAD_POSTCODE']); lRequest.ajax.addParam('x01',$v(object)); lRequest._get(); } } </script>

Enhancement 4 : LOV ,[object Object],[object Object],[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008  <a href="javascript:ShowLOV('#CURRENT_ITEM_NAME#', 'LOV_CUSTOMERS');"> <img height="16" width="16" alt="Popup Lov" src="/i/lov_16x16.gif"/></a> return get_lov_query(v('LOV_NAME')); create or replace FUNCTION GET_LOV_QUERY ( p_lov_name IN lov_definitions.lov_name%type ) RETURN lov_definitions.lov_query%type AS l_query lov_definitions.lov_query%type; BEGIN select lov_query into l_query from lov_definitions where lov_name = upper(p_lov_name); RETURN l_query; END GET_LOV_QUERY;

Enhancement 4 : LOV ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],create or replace FUNCTION GET_LOV_QUERY ( p_lov_item IN lov_items.lov_item%type ) RETURN lov_definitions.lov_query%type AS l_query lov_definitions.lov_query%type; BEGIN select lov_query into l_query from lov_definitions d, lov_items i where i.lov_item = upper( p_lov_item ) and i.lov_name = d.lov_name; RETURN l_query; END GET_LOV_QUERY; select legal_entity_code code, description, company_code company, le_language language, htf.anchor('javascript:passBack('''||legal_entity_code||''')', 'select') choose from legal_entity where legal_entity_code like upper('%'||:P30_LOV_SEARCH||'%') or description like upper('%'||:P30_LOV_SEARCH||'%') or company_code like upper('%'||:P30_LOV_SEARCH||'%') or le_language like upper('%'||:P30_LOV_SEARCH||'%') // Attach a LOV icon and function to class="LOVfield" $(".LOVfield").after(' <img class="LOV-Image" src="#APP_IMAGES#Search.png" onclick="javascript:ShowLOV($(this));" />'); No. 04-12-2008 UKOUG 2008 return get_lov_query(v('LOV_ITEM'));

Enhancement 4 : LOV ,[object Object],No. 04-12-2008 UKOUG 2008 javascript:ShowLOV($(this)); return get_lov_query(v('LOV_NAME')); jQuery : Add DIV containing LOV to page

No. 04-12-2008 UKOUG 2008 Enhancement 4 : LOV 7. Now you can easily define other draggable multi column LOV’s!

The Reaction No. 04-12-2008 UKOUG 2008 Can you do that in APEX too? BTW, we also have a Java written graphical application, tightly connected with the screens. Hey guys, this is really great! .

Planboard in APEX : The Demo No. 04-12-2008 UKOUG 2008

Planboard in APEX : The Flow No. 04-12-2008 UKOUG 2008 Database APEX Planboard Flow Orders Trucks Planboard View Reports Region 1 2

Planboard in APEX : The Reports Region No. 04-12-2008 UKOUG 2008 Normal Report Region Report Region with Containers div_id : cont_<day>_<truck>

Planboard in APEX : The Reports Region No. 04-12-2008 UKOUG 2008 Normal Report Region Report Region with Containers div_id : cont_<day>_<truck> Report Region with Containers and Items div_id : item_<day>_<order>

Planboard in APEX : The Reports Region No. 04-12-2008 UKOUG 2008 HTML Expression of every (day) column: <div id="#EQUIPMENT_NO#" class="dndcontainer" ><div id="#MON#">#MON#</div></div> <SCRIPT type=text/javascript> if ('#MON#' != ''){ $('##MON#').addClass('dndobject'); } </SCRIPT> Normal Report Region Report Region with Containers div_id : #equipment_no# Report Region with Containers and Items div_id : #MON#

Planboard in APEX : The Flow No. 04-12-2008 UKOUG 2008 Database APEX Planboard Flow Orders Trucks Planboard View Reports Region Application Process Drag & Drop 1 2 3 4

Planboard in APEX : The Drag & Drop ,[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008

Planboard in APEX : Context Sensitive Right Mouse Menu No. 04-12-2008 UKOUG 2008 ,[object Object],[object Object],//Add mousedown function to Drag object $(".dndobject").rightClick( function(el) { setOrderMenuEntry($(el).attr("id")); }) ; lLink = "f?p=&APP_ID.:3:&APP_SESSION.::::P3_ORDER_NO:"+pNo; mainMenu.items.link.actionOnClick="code:html_PopUp('"+lLink+"','Orders‘,1000,800)"; mainMenu.items.link.setDisplayText( "Go to order "+pNo);

Conclusions & Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],No. 04-12-2008 UKOUG 2008

Question Time No. 04-12-2008 UKOUG 2008

Contact address: [email_address] No. 04-12-2008 UKOUG 2008

Developing A Real World Logistic Application With Oracle Application - UKOUG 2008

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

Similar a Developing A Real World Logistic Application With Oracle Application - UKOUG 2008

Similar a Developing A Real World Logistic Application With Oracle Application - UKOUG 2008 (20)

Más de Roel Hartman

Más de Roel Hartman (9)

Último

Último (20)

Developing A Real World Logistic Application With Oracle Application - UKOUG 2008

Notas del editor