La nueva cara de APEX

Hace apenas unos días que fue liberada la versión 26.1 de APEX. Una versión que va a marcar un antes y un después en el desarrollo de aplicaciones con poco código.

Esta nueva versión adopta con fuerza el uso de las Inteligencias Artificiales en el proceso de desarrollo y tiene algunas otras características muy interesantes.

Sen embargo, en esta ocasión quiero abordar la revisión de esta nueva versión, en los cambios “cosméticos” que ha tenido y en cómo afecta la parte funcional de la herramienta.

Antes de empezar, solo quiero recordarle que puede ampliar las imágenes haciendo clic sobre ellas, para que las pueda apreciar mejor.

La pantalla de ingreso

No puedo empezar por otra parte que no sea la puerta de entrada, o en este caso, la página de ingreso al ambiente de desarrollo.

Atrás queda la clásica pantalla de registro con el recuadro central y el clásico logo de APEX, ahora tenemos una pantalla con un diseño moderno, tal y como pueden ver en la imagen arriba de estas líneas.

Los elementos han sido redistribuidos, con la parte derecha dedicada a resaltar la característica principal de APEX: “Construir aplicaciones empresariales inteligentes y confiables”, mientras que en la parte derecha de la página, tenemos los elementos necesarios para realizar el proceso de ingreso, más algunas tareas que en algunas ocasiones y dependiendo de como esté configurado APEX, van a ser de mucha utilidad y que incluyen la posibilidad de:

Realizar búsqueda de espacios de trabajo asignados a un usuario desarrollador o administrador
Restablecer la contraseña de ingreso
Ingresar a la aplicación de administración de la instancia APEX, por supuesto, si se cuenta con las credenciales necesarias.

Página principal del espacio de trabajo

Una vez completado el proceso de ingreso, vamos a aterrizar como siempre a la página principal del espacio de trabajo. Aparte de la nueva apariencia, no existen muchos cambios en esta página.

Los principales cambios, los puede ver en la imagen de arriba.

En la parte superior de la pantalla una pequeña región que por supuesto pone de relieve las capacidades de APEX para utilizar las inteligencias artificiales. Esta región incluye un botón que nos lleva a la página en donde podemos activar dicho uso. Pero este es un tema para tratar en detalle en otra publicación más adelante.

También vamos a encontrar un nuevo botón/tarjeta identificado como “Generador de Informes de Datos”. Esta es una nueva funcionlidad de la herramienta que le permite al administrador de la instancia habilitar un tipo especial de usuario que puede generar reportes de diferentes tipos sin necesidad de que un desarrollador lo haga. Al igual que el tema de las IA, este es un tema que merece su propia publicación y del cual escribiré pronto.

Por lo demás, seguimos contando con el dashboard que nos muestra las aplicaciones principales, usuarios principales y el resumen de elementos del espacio de trabajo, sin dejar de lado los enlaces a sitios que nos pueden ayudar en las tareas de desarrollo con APEX.

Página principal del espacio de trabajo

Imagen de la página principal del creador de aplicaciones

Al hacer clic en la opción “Creador de Aplicaciones”, vamos a ser redirigidos a la página principal del creador de aplicaciones, página que muestra la imagen anterior.

En este caso, el único cambio visible y evidente tiene que ver con su apariencia.

Aparte de eso, si existen cambios en la sección de “Tareas” a la derecha de la pantalla. El resto permanece igual.

Pagina principal de aplicación

Imagen de la página principal de una aplicación APEX

Si hacemos clic en una de las aplicaciones, vamos a abrir la página principal de la aplicación (vea imagen de arriba), en la que como siempre, vamos a encontrar cada una de las páginas que comprenden la aplicación, junto con las funcionalidades ya por todos conocidas:

Ejecutar aplicación
Objetos de soporte
Componentes compartidos
Utilidades
Exportar/Importar

Por supuesto no nos podemos olvidar del botón para crear nuevas páginas.

Si nos vamos al lado derecho de la pantalla, aquí vamos a encontrar un par de funciones interesantes.

En primer lugar una que nos permite ver un detalle de las Actualizaciones que podemos aplicar a la aplicación, algo que generalmente debemos hacer cuando migramos entre versiones de APEX, solo que esta vez lo vamos a poder hacer desde esta página y nos lo recordará a menos que descartemos realizar los cambios.

La segunda sección, de nuevo tiene que ver con el uso de las IA y nos permite dirigirnos al área de configuración de dicha funcionalidad.

El diseñador de páginas

En la imagen anterior, le muestro la apariencia de la página del Diseñador de Páginas, la página donde normalmente ocurre toda la magia y en donde creamos y modificamos todas y cada una de las páginas que componen una aplicación APEX.

Esta página sigue contando con las secciones o áreas acostumbradas:

el navegador de objetos o vista de árbol en la columna de la izquierda,
el diseñador gráfico con las correspondientes galerías de objetos en la columna central y,
la definición de propiedades /atributos de los diferentes componentes de la página en la columna de la derecha.

Esta sección sigue funcionando de la misma manera y podemos continuar haciendo lo que siempre hemos venido haciendo en esta página. Sin embargo, hay una nueva funcionalidad de la herramienta, que la hace aún más versátil y que está diseñada en concordancia con el objetivo de poder utilizar diferentes IAs en el proceso de desarrollo.

Esta funcionalidad es el nuevo APEXlang, de esta funcionalidad estaré escribiendo en detalle dentro de muy poco y mostrándoles como funciona, pero por el momento, les diré que nos permite realizar cambios y agregar objetos utilizando lenguaje natural y la ayuda de las IA.

Por el momento, quiero mostrarles como luce. Para acceder a esta funcionalidad, debemos hacer clic en la opción del menú de la página con el icono de la llave de tuercas, aquí vamos a encontrar la opción Vista APEXLang, la cual abre una ventana similar a la que les muestro en la siguiente imagen.

En esta vista, como puede observar, vamos a encontrar todos los elementos de la página en un formato fácilmente legible por parte de una persona o IA.

Acá abajo les dejo un ejemplo de una página definida con APEXlang.

page 1 (
    name: Home
    alias: HOME
    title: Sample Cards
    appearance {
        pageTemplate: @/standard
        templateOptions: #DEFAULT#
    }
    navigation {
        cursorFocus: doNotFocusCursor
    }
    security {
        authorizationScheme: mustNotBePublicUser
        pageAccessProtection: argumentsMustHaveChecksum
        formAutoComplete: false
    }

    region about-this-app (
        name: About This App
        type: staticContent
        source {
            htmlCode:
                ```html
                <p>Cards is a native report region type in Oracle Application Express (APEX). The Cards region type gives developers a powerful, flexible, new way of displaying data in bite-sized blocks. Card regions are ideal for use in faceted search or presenting at-a-glance information.</p>
                
                <p>This flagship feature of APEX allows you to effortlessly customize every aspect of a Cards region's UI (layout, appearance, icon, badge, and media).  Cards regions can contain advanced HTML expressions that support client-side templating, and the ability to define multiple actions per card. A Cards region's media can be sourced from BLOB column, URL, video in an iFrame or Oracle JET Data Visualizations.  You can use Cards regions to delight your end users by presenting data in new ways.</p>
                
                <p><strong>Note:</strong> Cards regions can be sourced by REST Data Sources.  The <strong>Embedded Video</strong>, <strong>Background Image</strong>, and <strong>Video Images with Durations</strong> pages (in <strong>Images and Media</strong> section) rely on REST Data Sources.  To run these pages without error, please use the links and instructions below.  You will need to get your own API keys that you will then use to create the necessary <strong>Web Credentials</strong> (in Shared Components) after importing this sample application.
                
                <ul>
                    <li><a href="&GOOGLE_API." title="Google API Key" target="_blank">Google API Key</a>
                        <ul>
                        <li>Credential Name: <em>key</em></li>
                        <li>Credential Secret: <em>{your key}</em></li>
                        </ul>
                    </li>
                    <li><a href="&MOVIEDB_API." title="Movie Database API" target="_blank">The Movie Database (TMDb) API Key</a>
                        <ul>
                        <li>Credential Name: <em>api_key</em></li>
                        <li>Credential Secret: <em>{your key}</em></li>
                        </ul>
                    </li>
                </ul>
                ```
        }
        layout {
            sequence: 10
            slot: regionBody
        }
        appearance {
            template: @/content-block
            templateOptions: [
                #DEFAULT#
                t-ContentBlock--h2
            ]
            cssClasses: mxw800
        }
        advanced {
            regionDisplaySelector: true
        }
    )

    region app-navigation (
        name: App Navigation
        type: list
        source {
            list: @home
        }
        layout {
            sequence: 20
            slot: regionBody
        }
        appearance {
            template: @/standard
            templateOptions: [
                #DEFAULT#
                t-Region--noPadding
                t-Region--removeHeader js-removeLandmark
                t-Region--scrollBody
            ]
            cssClasses: mxw800
        }
        componentAppearance {
            listTemplate: @/media-list
            templateOptions: [
                #DEFAULT#
                t-MediaList--showBadges
                u-colors
            ]
        }
    )

    region sample-cards (
        name: Sample Cards
        type: staticContent
        source {
            htmlCode: Cards report region examples for APEX apps
        }
        layout {
            sequence: 10
            slot: REGION_POSITION_01
        }
        appearance {
            template: @/hero
            templateOptions: #DEFAULT#
        }
        image {
            fileUrl: #APP_FILES#icons/app-icon-512.png
        }
    )

)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

page 1 (

alias: HOME

title: Sample Cards

appearance {

pageTemplate: @/standard

templateOptions: #DEFAULT#

}

navigation {

cursorFocus: doNotFocusCursor

}

security {

authorizationScheme: mustNotBePublicUser

pageAccessProtection: argumentsMustHaveChecksum

formAutoComplete: false

}

region about-this-app (

type: staticContent

source {

htmlCode:

```html

Cards is a native report region type in Oracle Application Express (APEX). The Cards region type gives developers a powerful, flexible, new way of displaying data in bite-sized blocks. Card regions are ideal for use in faceted search or presenting at-a-glance information.

This flagship feature of APEX allows you to effortlessly customize every aspect of a Cards region's UI (layout, appearance, icon, badge, and media). Cards regions can contain advanced HTML expressions that support client-side templating, and the ability to define multiple actions per card. A Cards region's media can be sourced from BLOB column, URL, video in an iFrame or Oracle JET Data Visualizations. You can use Cards regions to delight your end users by presenting data in new ways.

Note: Cards regions can be sourced by REST Data Sources. The Embedded Video, Background Image, and Video Images with Durations pages (in Images and Media section) rely on REST Data Sources. To run these pages without error, please use the links and instructions below. You will need to get your own API keys that you will then use to create the necessary Web Credentials (in Shared Components) after importing this sample application.

<ul>

<li><a href="&GOOGLE_API." title="Google API Key" target="_blank">Google API Key</a>

<ul>

<li>Credential Name: key</li>

<li>Credential Secret: {your key}</li>

</ul>

</li>

<li><a href="&MOVIEDB_API." title="Movie Database API" target="_blank">The Movie Database (TMDb) API Key</a>

<ul>

<li>Credential Name: api_key</li>

<li>Credential Secret: {your key}</li>

</ul>

</li>

</ul>

```

}

layout {

sequence: 10

slot: regionBody

}

appearance {

templateOptions: [

#DEFAULT#

t-ContentBlock--h2

]

cssClasses: mxw800

}

advanced {

regionDisplaySelector: true

}

)

region app-navigation (

type: list

source {

list: @home

}

layout {

sequence: 20

slot: regionBody

}

appearance {

templateOptions: [

#DEFAULT#

t-Region--noPadding

t-Region--removeHeader js-removeLandmark

t-Region--scrollBody

]

cssClasses: mxw800

}

componentAppearance {

listTemplate: @/media-list

templateOptions: [

#DEFAULT#

t-MediaList--showBadges

u-colors

]

}

)

region sample-cards (

type: staticContent

source {

htmlCode: Cards report region examples for APEX apps

}

layout {

sequence: 10

slot: REGION_POSITION_01

}

appearance {

templateOptions: #DEFAULT#

}

image {

fileUrl: #APP_FILES#icons/app-icon-512.png

}

)

Todo lo anterior se traduce al ejecutar en lo que muestra la imagen de abajo.

Imagen de la página principal de la apliación de ejemplo de Tarjetas de APEX 26.1

Ya tendremos oportunidad de aprender más acerca de APEXlang, una característica de las más importantes de la versión 26.1 de APEX, pero por el momento aquí acabamos.

Si desea conocer más acerca de las nuevas funcionalidades de APEX 26.1, les dejo el siguiente enlace.

Nuevas características de APEX 26.1