PDF de programación - Demostración de WEBSPHERE Software Development Studio

IBM Software Demos

WebSphere Software Development WSStudio




<WEBSPHERE Software Development Studio Demo>

<Demostración de WEBSPHERE Software Development Studio>

In this demonstration we will see the construction of a web based customer order query
application that provides an introduction to WebSphere Studio. We will illustrate
wizards, show how Page Designer modifies the HTML and JSP pages and how the
application gets tested using the internal WebSphere Application Server Test
environment.

A modo de presentación de WebSphere Studio, en esta demostración veremos cómo
se crea una aplicación de consulta de pedidos de clientes basada en Web.
Ilustraremos asistentes, mostraremos cómo Page Designer modifica las páginas
HTML y JSP, y explicaremos el procedimiento para probar la aplicación en el
entorno interno de prueba de WebSphere Application Server.

Here we see the Web Developers perspective in WebSphere Studio. To save time, we
have already created a project called ShipStatus that will contain the web database
application.

Aquí, vemos la perspectiva de los desarrolladores Web en WebSphere Studio. Para
ganar tiempo, hemos creado el proyecto ShipStatus que contendrá la aplicación de
base de datos Web.

First we will visually generate a SQL Select statement using the Wizard.

En primer lugar, generaremos visualmente una instrucción SQL Select con la ayuda
del asistente.

The wizard easily guides us thru the construction of our SQL Query.

El asistente nos guía paso a paso por el proceso de creación de la consulta SQL.

The IBM WebSphere Studio family offers the best solution for accelerating team
application development. It minimizes the time and effort required to create, manage,
and test e-business on demand applications. WebSphere Studio provides comprehensive
application development support from web site creation, to J2EE, business process
development and enterprise applications.

La familia IBM WebSphere Studio ofrece la mejor solución para acelerar el
desarrollo de aplicaciones de equipo. Minimiza el tiempo y el esfuerzo necesarios
para crear, gestionar y probar aplicaciones e-business on demand. WebSphere
Studio proporciona un completo soporte para el desarrollo de aplicaciones, desde la

WebSphere Software Development WSStudio
Visit: http://demos.dfw.ibm.com for more demonstrations

Page 1 of 5



IBM Software Demos

WebSphere Software Development WSStudio




creación de sitios Web, hasta J2EE, desarrollo de procesos empresariales y
aplicaciones empresariales.

The conditions tab is used to specify which records to include in the results. The selection
criteria can be as simple or complex as we want and the Database wizard will create the
correct statement.

La pestaña de condiciones se utiliza para especificar los registros que se incluirán en
los resultados. Los criterios de selección pueden ser tan sencillos o complejos como
se quiera; el asistente de la base de datos creará la instrucción correspondiente.

Here we see the generated SQL statement which can be tested and changed as necessary.
Next, we see the results of the query. Thanks to Studio, the building of this database
query was a quick and easy task

Aquí, veremos la nueva instrucción SQL, que puede probarse y modificarse las
veces que sea necesario. A continuación, vemos los resultados de la consulta.
Gracias a Studio, la creación de esta consulta de la base de datos ha sido una tarea
fácil y rápida.

We will now use the Database Web Pages Builder wizard to create input and output
pages for our order query application.

A continuación, utilizaremos el asistente Database Web Pages Builder para crear
páginas de entrada y salida de datos para nuestra aplicación de consulta de pedidos.

The Master Details pattern is the default generation model.
Patterns are proven approaches to building business Applications.
And WebSphere Studio wizards offer developers a variety of patterns.

El patrón Master Details es el modelo de generación predeterminado.
Los patrones son formas probadas de crear aplicaciones empresariales.
Y los asistentes de WebSphere Studio ofrecen a los desarrolladores una gran
variedad de patrones.

We now select the ShipStatus query which was just generated.+ç

Ahora, seleccionaremos la consulta ShipStatus que acabamos de generar.

The Wizard uses JSP SQL tags to generate a detail and summary page.

El asistente utiliza etiquetas JSP SQL para generar una página detallada y otra de
resumen.

WebSphere Software Development WSStudio
Visit: http://demos.dfw.ibm.com for more demonstrations

Page 2 of 5



IBM Software Demos

WebSphere Software Development WSStudio





Next the wizard prompts for the master view page details.

A continuación, el asistente solicita la información detallada de la página de la vista
principal.

Once all the summary page fields are defined, we will design the details page.

Una vez definidos todos los campos de la página de resumen, diseñaremos la página
de información detallada.

The details page is generated from the selected database columns, order and display
captions.

La página detallada se genera a partir de las columnas de la base de datos, los
pedidos y las capturas de pantalla seleccionados.

Finally pressing finish generates the files and web pages for the database query.

Finalmente, al pulsar Finish, se generan los archivos y las páginas Web para la
consulta de la base de datos.

The Next step in the process is to edit the input form with WebSphere Studio Page
Designer.

El siguiente paso consiste en editar el formulario de entrada de datos mediante
WebSphere Studio Page Designer.

Web pages can be edited visually or as color-coded source code pages.

Las páginas Web se editan visualmente o como páginas de código de fuente
clasificadas por colores.

While in Design mode, it’s easy to edit any text on the page.

En modo Design es fácil editar todo tipo de texto de la página.

Adding images to the page is easy, we just need to select the area for placing the graphic,
and then use the menu option to choose the image file to be used.

También es fácil incorporar imágenes en la página, basta con seleccionar el área
donde se colocará el gráfico y emplear la opción de menú para seleccionar el archivo
de imágenes que debe utilizarse.

WebSphere Software Development WSStudio
Visit: http://demos.dfw.ibm.com for more demonstrations

Page 3 of 5



IBM Software Demos

WebSphere Software Development WSStudio





Page Designer source mode allows you to make changes directly to the HTML or JSP
source code. If we select an item while in Design mode, then switch to source mode we
are positioned at the correct place in the source.

El modo Page Designer Source permite realizar cambios directamente en el código
fuente HTML o JSP. Si seleccionamos un elemento en modo Design y después
pasamos al modo Source, nos hallaremos en el punto correcto del código fuente.

Studio makes it easy to input or edit the source tags as desired. The source view has a
built-in context sensitive, content assist editor.

Studio facilita la introducción y la edición de etiquetas del código fuente. La vista de
código fuente cuenta con un editor auxiliar integrado de contenido según contexto.

As we perform a save, the file is automatically validated.

Al grabar, el archivo se valida automáticamente.

Page Designer has full support for Java Server Pages. Here, we open page designer on
the jsp file. The Master View in this example is a list of the orders for 1 customer.

Page Designer es totalmente compatible con Java Server Pages. Aquí, abrimos el
archivo jsp en Page Designer. En este caso, la pantalla Master View muestra la lista
de pedidos del cliente 1.

If we examine the Java Server Page code on this page, we see that it is very easy to add
additional code to count the total number of orders.

Si analizamos el código Java Server Page de esta página, veremos que es muy fácil
incorporar el código necesario para calcular el total de pedidos.

First: We use the menu JSP option to insert a JSP Scriptlet to declare and initialize a
counter.

Primero: utilizamos la opción JSP del menú para insertar un JSP Scriptlet a fin de
declarar e inicializar un contador.

Next, we enter our java code in the attribute field.

A continuación, introducimos el código Java que hemos creado en el campo de
atributos.


WebSphere Software Development WSStudio
Visit: http://demos.dfw.ibm.com for more demonstrations



Page 4 of 5

IBM Software Demos

WebSphere Software Development WSStudio




We now insert a JSP scriptlet at the end of the display loop to count the number of orders.

Ahora, insertamos un JSP Scriptlet al final del bucle de pantalla para calcular el
total de pedidos.

Finally, we insert a label for the order total and insert a JSP Expression to display the
order count, which completes this easy task.

Finalmente, para concluir esta sencilla tarea, insertamos una etiqueta para el total
de pedidos y una JSP Expression para mostrar el recuento de pedidos.

IBM WebSphere Studio provides a built-in WebSphere Application Server to test the
Web application.

IBM WebSphere Studio proporciona un servidor integrado WebSphere Application
Server para probar la aplicación Web.

Here we select the input page and choose “Run on Server”.

Aquí, seleccionamos la página de entrada y la opción “Run on Server”.

Once the server is running, Studio launches an internal web browser showing our input
page. With WebSphere Studio the web application can be easily and completely tested
including profiling the application performance.

Cuando el servidor se ejecuta, Studio inicia un navegador Web interno que muestra
nuestra página de entrada de datos. Con WebSphere Studio, podrá probar la
apl