el
inventario
y
formular
pedidos
de
artículos
(SV000501)
Introducción
Enestemódulocrearáunainterfazquevisualizalasopcionesdeoperacióndeun administrador mediantelaherramientaIBM WebFacing.Despuésdeuniniciode sesión satisfactorioenelservidoriSeries,lainterfazvisualizaelinventario disponibley sepuedencomprobarlospedidosexistentes.Como administrador, podráentoncescomprarmercancía alsuministradoralpormayor.
Enesteproyectosetrabajacondosprogramasydosarchivosdepantalla restauradosenelservidor iSeries.Losnombresdelosprogramasson
ViewInventory yViewOrder.Losprogramasutilizanlosdossiguientesarchivosde pantalla: ORDERDSPyQUERY.EstosdosarchivoscontienenvaloresWeb
personalizados paralosarchivosJSPgeneradosporlaHerramientaWebFacing,yse utilizanparalasimágenesyloshiperenlaces.ElvalorWebde imagenlepermite utilizarelcontenidodeuncampoparagenerarelnombredelarchivo deimageny visualizar laimagen quehayenelarchivo JSP.ElvalorWebdehiperenlace le permiteinvocarotraaplicaciónWebcuando pulsalaimagenenelarchivo JSP. PuedeutilizarelEditorCODEoelDiseñadorCODEparacomprobarelcódigo fuentedelarchivode pantallaconobjetodedeterminarcómo especificarlos valoresWeb.
Antes
de
empezar
Solopodrállevara cabolosejerciciossisecumplen lossiguientesprerrequisitos. EneltemaCapítulo3,“Ejecutar elcasopráctico”,enlapágina9hallarámás detallessobrelosprerrequisitos.
v Tieneacceso TCP/IPaunservidoriSeries.
v HainiciadolosservidoresiSeries conelmandato STRTCPSVR*ALL.
v Hainiciadoelservidor WebFacingconelmandatoSTRTCPSVR *WEBFACING. v HallevadoacabotodaslastareasdelCapítulo3,“Ejecutar elcasopráctico”,en
lapágina 9(salvolastareasde WebSphereApplicationServer opcionales,queno sonnecesariasparaprobar laaplicaciónenelentornodetrabajo).
Crear
un
proyecto
WebFacing
Lo primeroquedebehacerescrearunproyectoWebFacingy especificarlos mandatos CLrelevantes.ParacrearelproyectoWebFacing:
1. Enelentornodetrabajo,pasea laperspectivaWebFacingpulsandounodelos iconos deperspectiva queestánenlaparte inferiorde laparte izquierdadel áreade trabajoobienpulsandoVentana>Abrirperspectiva>Otras > WebFacing y,porúltimo,Aceptar.
2. CreeunproyectoWebFacingnuevopulsandoArchivo>Nuevo>Proyecto WebFacing.
3. DéelnombreProject501alproyecto.
4. PulseelbotóndeselecciónExistentesituado juntoaProyectodeaplicación deempresa.
5. Escriba SVStoreEARenelvalordelcampoNombredeproyecto existente; tengaencuentaqueelvaloressensiblea mayúsculasyminúsculas. Pulse
Siguiente.
6. Enlalista desplegableNivel deJ2EE,seleccione1.3.PulseSiguiente.
7. EnelcampoConexión,debehaberse escritoautomáticamenteelnombredel servidor iSeries.Sinoesasí,pulseNuevo,especifiqueelnombredelservidor iSeries eneldiálogoypulseFinalizar.
8. PulseRenovar listadeDDS yescribasuIDdeusuario ysucontraseñaenel diálogoemergente pararenovarlalista.
9. Enlalista debibliotecasgeneradas, expandaRETAILSTOR.
10. PulseQDDSSRC y,a continuación,laflechaqueseñalahacialaderecha(>>) paramoverlosarchivos.
11. PulseSiguientedosveces,hastaquelleguealapágina Especificarmandatos CL.
Ahoratendrá queañadirunmandatoyuna etiquetademandatoparael administrador:
12. En elcampoMandatoCL,escribalallamadacallviewinvent.
13. EnelcampoEtiqueta demandato,suprimaelvalorexistentey escribaVer inventario.
14. PulseelbotóndeselecciónIniciarsesiónconvaloresespecificados.
15. PulseAñadir yobservelaadiciónenlalistadelaparte inferiorde laventana. Ahoratendrá queañadirunsegundomandatoysu etiquetaparaelcliente:
16. EnelcampoMandatoCL,suprimaelvalor existenteyescriba call vieworder.
17. EnelcampoEtiqueta demandato,suprimaelvalorexistentey escribaVer pedidos.
18. MarqueelbotóndeselecciónSolicituddeiniciodesesión.
19. PulseAñadir yobservelaadiciónenlalistadelaparte inferiorde laventana. PulseSiguiente.
20. EnlaventanaElegirunestiloWeb,vayadesplazándoseporlosestilospara verlosvaloresdisponibles.Dado quemásadelante tendremosquerecuperar informacióna partirdeesteestilo,seleccioneavenueparaestemódulo.Pulse
Siguiente.
21. Verifique quehayunamarca deselecciónenelrecuadroNo.Solodeseocrear el proyectoahoraypulseFinalizar.
22. Si veunmensajequeindicaRepararconfiguraciónde servidor,pulseAceptar. Estemensajetansolosirveparaconfirmarquedeseaqueelproyectoseañada alarchivo SVStoreEAR.
Puestoqueestáconstruyendo Project501comounduplicadodelproyectocompleto SV000501, ahoratendrá quecopiaralgunosde losarchivosde imagendeSV000501 enProject501, paraqueProject501sevisualicecorrectamente. (Sinembargo,silo desea,puedeañadirsuspropiasimágenesparalainterfaz).Paracopiarlas imágenes:
1. Pasea laperspectiva Web.
2. EnlavistaNavegador, expandaSV000501>WebContent>images.
3. (Opcional) Expandagenerated paratomarnotade todaslasimágenesque importaalproyecto.
4. Pulsegeneratedconelbotón derechodelratónyseleccioneCopiar.
5. DesplácesehaciaarribaenlavistaNavegadorhastaquepuedavolveraver
Project501.
6. ExpandaProject501>WebContent.
7. Pulselacarpetaimages conelbotónderechodelratóny seleccionePegar enel menúemergente.
8. AhorayaexistelacarpetageneratedparaProject501.Expandageneratedpara tomarnotadelasimágenesqueañadió.
Convertir
el
fuente
DDS
Ahoraqueyahacreadoelproyecto,podráconvertirlosarchivosdepantallaDDS enarchivosJSPparalapágina Web.Cuando conviertelosarchivosdepantalla DDS,laherramientaWebFacinggeneraarchivosJSPyarchivosXMLque
sustituyenelcódigoDDSyhacenposibleelaccesoWeb.Losarchivosgenerados contienenlosdatosdelformatode registro(obiencontrolansu aspecto),visualizan laversiónWebde lapantalla, solicitandatosy manejanloserroresdeentrada.El asistente tambiéngeneraunapáginadepresentación delaaplicaciónparalanzarla versión delprogramahabilitadaparalaWeb.
Sinembargo,primero tendráquemodificarelcódigofuenteparaquehaga referenciaalservidor iSeriescorrecto.Concretamente,tendráquerealizaruna modificación enlosarchivosdepantallaDDSparaquefuncioneelenlacede la aplicación.Deberácambiarelnombreporomisión,queesSV000501,por elnombre de suproyecto,Project501:
1. Pasedenuevoalaperspectiva WebFacingyabralavistaProyectos WebFacing, sinoestáabiertaporomisión.
2. ExpandaProject501>DDS.
3. Efectúeunadoblepulsación enlasegundaentrada, <servidor_iSeries>RETAILSTOR/QDDSSRC(QUERY)
4. Desplácesehaciaabajohastamásomenoslalínea16,dondeverá lalínea:
A*%%WB 12 FLD 1 next (’/SV000501/DetailPage.do?PRODNO=&{PRODNO}’)
5. SuprimaSV000501yescribaProject501.
6. Guardeycierreelarchivo.
Nota: Sienunmomentodadodeseaejecutarde nuevoelproyectoSV000501,debe cambiarelvalorProject501paraquedenuevoseaSV000501,yaqueeste archivoexisteenelservidor iSeriesylosdosproyectosaccedena él.
Paraconvertir elfuenteDDS:
1. EnlaperspectivaWebFacing,pulselapestañaProyectosWebFacing parapasar a lavistaProyectosWebFacing,siaúnnoestáabiertaporomisión.
2. ExpandaProject501>DDS.
3. SeleccioneservidoriSeries>RETAILSTOR/QDDSSRC(ORDERDSP)y
servidoriSeries>RETAILSTOR/QDDSSRC(QUERY);paraello,pulselaprimera y, mientrasmantienepulsadalateclaMayús, pulselasegunda.
4. Pulseelbotónderechodelratóny seleccioneConvertirparadarcomienzoa la conversión. Esposiblequedebaespecificarsu IDde usuarioysu contraseñasi enalgúnmomentoqueda desconectadodelservidoriSeries.
Configurar
el
soporte
UTF-8
en
el
entorno
de
trabajo
—
Sólo
para
los
usuarios
de
WAS
Versión
4.0
LasaplicacionesdelaherramientaWebFacingpermitenvisualizar múltiples idiomas enuna pantalla.Dadoquelosidiomasutilizandistintosjuegosde caracteres, lascorrientesdedatosentreelnavegadory WebSphereApplication Server estáncodificadasenUTF-8.ParaquelaherramientaIBMWebFacing funcionecomoesdebido,tendráqueconfigurarelsoporteUTF-8enelarchivo de propiedadesdelaaplicaciónenelentornode trabajo.
Nota: EsteapartadotansoloatañealosusuariosdeWAS4.0. EnWAS Versión5.0, estatareaserealizaautomáticamente.
ParaconfigurarelsoporteUTF-8:
1. Pase alaperspectivaWeb(parapasarde unaperspectivaa otra,puedepulsar losiconos agrupadosenlaparte izquierdadelapantalla).
2. PulselapestañaNavegadordeproyectosparapoder verlasestructurasdelos proyectos.
3. ExpandaProject501ypulsedosvecesenDescriptor dedespliegueWeb.
4. PulselapestañaEntorno.
5. PulseelbotónAñadir.
6.
7. Pase alaperspectivaServidorespulsando elcorrespondienteiconoenlabarra de tareasdelapartesuperiorizquierda,obienpulsePerspectiva >Abrir> Otras >Servidorenlabarrademenúsy despuéspulseAceptar.
8. EnlavistaNavegador,expandalacarpetaServidores.
9. PulsedosvecesendefaultInstance.wsiparaabrirestearchivo eneleditorpor omisión.
10. PulselapestañaEntornoy, después,elbotónAñadir.
11. Apareceelvaloreditable″(VariableNueva)″.Suprimalaseriequeaparecepor omisión yescriba:client.encoding.override.
12. EnelcampoValor,escribaUTF-8.
13. PulseeliconodeGuardarobienpulseArchivo>Guardardescriptorde despliegueWeb.
Configurar
el
soporte
UTF-8
para
WebSphere
Application
Server
(Opcional) Sideseadesplegarsu aplicacióndeiSeriesenWebSphereApplication Server, tambiéntendráqueconfigurarelsoporteUTF-8enWebSphereApplication Server, ademásde enelentornodetrabajo.
Para
configurar
el
soporte
UTF-8
en
WebSphere
Application
Server
4.0
AdvancedEdition
1. InicielaconsolaadministrativadeWebSphere.
2. Expandaeliconode Nodosy,después,Nombredenodo>Servidoresde aplicaciones>DefaultServer.
3. SeleccionelapestañaValoresdeJVMypulseelbotónValoresavanzadosde JVM paraabrireldiálogoValoresavanzadosdeJVM.
4. EnelcampoArgumentosdelíneademandatos,escriba:
-Dclient.encoding.override=UTF-8
5. PulseAceptary, después,Aplicarbajo lapestaña ValoresdeJVM.
6. ParaqueestecambioentreenvigorenlasaplicacionesdeWebSphere,detenga elservidorporomisióny vuelvaainiciarlo.Paradetenerelservidor,pulse
DefaultServer conelbotónderechodelratónyseleccioneDetener.Unavez realizadoesteproceso,pulseDefaultServerconelbotónderechodelratóny seleccioneIniciar.
Para
configurar
el
soporte
UTF-8
en
WebSphere
Application
Server
4.0
AdvancedSingle
Server
Edition
1. InicielaconsolaadministrativadeWebSphere.
2. Enlaconsolaadministrativabasadaennavegador,expandaeliconode Nodos
y, después,Nombredenodo> Servidoresdeaplicaciones>Default Server> Definicióndeproceso>ValoresdeJVM.
3. DesplácesehastalaseccióndevaloresavanzadosdelapáginaValoresdeJVM ypulseelenlacePropiedadesdelsistema.Sevisualizalapágina Propiedades delsistema.
4. PulseNuevaparaañadirunanuevapropiedaddelsistema.
5. EnelcampoNombre,escribaclient.encoding.override.
6. EnelcampoValor,escribaUTF-8.
7. PulseAceptar.Sirecibeunmensajequeindicaquehayqueguardarla
configuración,conunenlaceenlapartesuperiorde lapágina ValoresdeJVM, pulseelenlaceparaira lapágina Guardarconfiguración.SeleccioneGuardar
yluegopulseAceptar.
8. ParaqueestecambioentreenvigorenlasaplicacionesdeWebSphere,detenga elservidordeaplicacionesyvuelvaa iniciarlo.Lamanerade detenereiniciar elservidordeaplicacionespuedevariarenfuncióndelaplataformaenlaque tengainstaladoWebSphereApplicationServer.Enladocumentaciónde WebSphereApplicationServercorrespondientea suplataformahallará informaciónsobrecómo detenereiniciarelservidor deaplicaciones.
Crear
una
hoja
de
estilo
Si deseaintegrarpáginasadicionales conunahojadeestilo encascada(CSS), tendrá quepersonalizar yaseaelestilodelproyectoWebFacingobienlahojade estilo encascada(CSS)paraquetenganunaspectoequivalente.Cuandohaya terminadode personalizarlahojadeestilo,puedeutilizarelasistenteInteracción Webparacrearunapágina Webdetallada,mediantelahojadeestilo,para
visualizar informaciónsobrelosartículosdelatienda, comoelprecioy elcolor.En loquealmóduloserefiere,incorporarálahojade estiloDetailPageResults.jsp delproyectoSV000501.Sinembargo,paraconsultafutura,puedepersonalizar manualmente elarchivo CSS(talcomoseindicaenelpróximoapartado).
(Opcional)
Personalizar
manualmente
la
hoja
de
estilo
en
cascada
(CSS)
Talcomosehaindicadoanteriormente,envezde incorporarlahojadeestilo DetailPageResults.jsp delproyectoSV000501paraProject501,puedepersonalizar suspropiashojasde estilo:
1. Pasea lavistaNavegadordeproyectosyexpandaProject501>Web Content> styles>apparea.
2. Pulsedosvecesenapparea.cssparaabrirelarchivo eneldiseñador deCSS. Estahojadeestilocontrolaelaspectodeláreadesu aplicación.
3. Modifiqueelarchivo yguárdelo.
4. DenuevoenlavistaNavegadordeproyectos, naveguehastaProject501>Web Content>styles>chrome.
5. Pulsedosvecesenavenue.cssparaabrirelarchivo eneldiseñador deCSS. Estahojadeestilocontrolaelaspectodetodalapágina.
6. Modifiqueelarchivo yguárdelo.
Ampliar
y
mejorar
el
proyecto
WebFacing
con
una
interacción
Web
EnesteapartadomejoraráelproyectoWebFacing.Cuandosevisualizalalista de artículos,leinteresarápulsarlaimagendeunartículoparaaveriguarsusdetalles. Paraello,utilizaráelasistenteInteracciónWebparainvocarelprogramaRPG con elfinderecuperarlosdetallesdelartículoy visualizarlosenotrapáginaWeb. Llevaráa caboestospasos:
v definirlainformacióndelservidor v copiarlahojadeestilocorrecta v crearlainteracción
v añadirprogramasy parámetrosalainteracción v cambiarlautilizacióndelosparámetros
Primerotendráquedefinirlainformacióndelservidor:
1. Pasea laperspectiva Web.
2. EnlavistaNavegador, pulseProject501conelbotónderechodelratóny seleccioneEspecificarconfiguracióndetiempodeejecucióndeherramientas Web deiSeries.
3. EscribaelnombredelservidoriSeries,suIDdeusuario ysucontraseña.
4. EscribaRetailstorenelcampoBibliotecaypulseAñadir.
AntesdecrearlainteracciónWeb,tendráquecopiarlosestiloscorrectosy lahoja de estiloparaqueProject501sevisualice coneldebidoformatodearchivoJSP.(No tendríaquerealizarestatareasihubiesellevadoacaboelejerciciodelapartado “(Opcional)Personalizar manualmentelahojadeestiloencascada(CSS)”enla página 36).Primerocopiarálacarpetade estilosy, después,elarchivo
DetailPageResults.jsp:
1. EnlavistaNavegador, expandaSV000501>WebContent.
2. PulseStylesconelbotónderechodelratóny seleccioneCopiar.
3. DesplácesehaciaarribaenlavistaNavegadorhastaquevuelvaaver
Project501.
4. Expandaelproyecto,pulseWebContentconelbotónderechodelratóny seleccionePegarenelmenú emergente.PulseSíparasobrescribirlosestilos existentes.
5. DesplácesehaciaabajohastaSV000501>WebContent.
6. PulseDetailPageResults.jspconelbotónderechodelratónyseleccione
Copiar.
7. DesplácesehaciaarribahastaquevuelvaaversuproyectoProject501.
8. Expandaelproyecto,pulseWebContentconelbotónderechodelratóny seleccionePegarenelmenú emergente.
Observe losnuevoselementosquesehanañadido bajolacarpetaWebContentde Project501.
AhorayapuedecrearlainteracciónWeb:
1. PulseArchivo>Nuevo>Otros.
2. EneldiálogoNuevo,pulseWebenlaparteizquierda,yluegopulse
Interacción Webenlapartedeladerecha.PulseSiguiente.
3. EnelcampoNombredeinteracciónWeb,escribaDetailPageypulse
Siguiente.
4. Marqueelbotón deselecciónGenerarJSPdeentrada.
5. Marqueelbotón deselecciónUtilizarpáginasdesalida(siesquetodavíano estámarcado)ypulseAñadir.
6. EneldiálogoJSP desalida,expandaWeb Content,seleccione
DetailPageResults.jsp,queessupágina desalidapreformateada, ypulse
Aceptar.
7. PulseSiguiente.
Ahorayapuedeañadirprogramasy parámetrosalainteracción.Tendráque añadir11 parámetrosalmismoprograma.Envezdeirañadiendo manualmente cadaparámetroconsusvaloresindividuales,puedeañadirlosconun
procedimientoalgomásrápido:
1. Seleccione UtilizarunprogramaILEdeiSeries,siesquetodavíanoestá seleccionado.
2. PulseAñadir programa.
3. EnelcampoAliasdeprograma,escribaDetailPage.
4. ParaelcampoObjeto deprograma,pulseExaminar.
a. ExpandaservidoriSeries>*LIBL>RETAILSTOR.
b. PulseDETAILPAGE.*pgm.rpgle(queeselprimerarchivobajo RETAILSTOR)ypulseAceptar.
5. DenuevoenelasistenteInteracciónWeb,pulseAceptar(hacialaparte inferiordeladerecha).
FíjeseenqueDetailPageseañadeenlaparteizquierdadelasistentebajo Definicionesdellamadaaprograma.
6. EnlasecciónDefinicionesdellamadaaprograma,enelpanelizquierdodel asistente, pulseDetailPageparaquequedeseleccionado.
7. PulseAñadir parámetro.
8. Juntoa Especificarcampodereferenciaa basededatos,hacialaparte inferiordelasistente,pulseEspecificar.
9. ExpandaservidoriSeries>*LIBL>RETAILSTOR>INVENTORY.*file.pf-dta> INVFORMATparavisualizaruna listade13parámetros.Tendráqueañadir los11parámetros queseindicana continuación;paraello,pulseunavezen cadaunodeellos yseleccioneAñadir,obien,sin soltarlateclaControl,pulse cadaunodeellos yluegoseleccioneAñadir:PRODNO,PRODNAME,
COLOR,RPRICE,IMAGE,STYLE,SQTY,MQTY,LQTY,XLQTY,XXLQTY. Lo queestáhaciendoenrealidadesseleccionartodosloscampossalvoPPRICEy QTY.
10. PulseCerrar.
Ahoratendrá quecambiar lautilizaciónde 10de los11parámetrosparaquesean de tipo″salida″ (detodoslosparámetros salvoPRODNO).
1. Todavíaenelasistente InteracciónWeb,pulsePRODNAMEparaseleccionarlo.
2. EnelcuadrocombinadoUtilización,hagaqueelvalor seleccionadopaseaser
salidaypulseAceptar.Repitaestepaso(junto conelpasoanterior)paratodos losparámetrossalvoelprimero(PRODNO).Unavezquehayaajustadotodos losparámetros,suáreadetrabajodebeparecersea ladelasiguientefigura. Observequeeliconosituado alaizquierdadecadaparámetroindicasiestees
detipo entrada,entradaysalida,osalida.
3. PulseSiguienteparaobtenerlavistapreviadelFormulariodeentrada.
4. PulseFinalizarparacrearlainteracciónWeb.
5. SeleccioneSía todooAceptary,de nuevo,Finalizar,sirecibemensajes.
Enlazar
el
proyecto
con
una
interacción
Web
AhoraqueyahacreadounarchivoJSPdeinteracciónWebqueutilizaparámetros de entraday salida,tendráquepersonalizarelarchivo JSPparaquetambién funcioneconelcomponenteWebFacing.Deberáentrarcódigoparacreardesdela aplicación WebFacingunenlacequeinvoque estainteracciónWeb.Paraello,tendrá queañadirunafunciónJavaScriptenelarchivo webface.jsparaquesepueda llamaralservletDetailPageServletconelparámetroPRODNOenuna ventana nueva.
Paracrearelenlace:
1. EnlavistaNavegador, expandaProject501>Web Content>ClientScript.
2. Pulsedosvecesenwebface.jsparaabrirestearchivoenuneditor.
3. Desplácesehastaelfinaldelarchivo yescribalassiguienteslíneas:
var mywindow function next(app) {
mywindow = window.open(app,"Details","RESIZABLE=YES, HEIGHT=700, WIDTH=800"); }