Message Toast, Slider, Float, Responsive in Oracle ADF 11g - Mensaje flotante, deslizable, adaptable en Oracle ADF 11g

He empezado una serie de artículos de como podemos mejorar el fronted de nuestras aplicaciones ADF, en esta ocasión les traigo como pude integrar los mensajes Toast de materialize (librería de diseño web), a nuestra aplicación ADF.

Web:


Movil: 
como vemos luego de 4 segundos el mensaje desaparece, o el usuario puede hacer 
un slider a la izquierda para desaparecer el mensaje.


1. Agregaremos JQuery y Materialize a nuestra pagina, las cuales podemos descargar desde las paginas oficiales de cada libreria.


            <af:resource type="javascript" source="/js/jquery-3.2.1.min.js"/>
            <af:resource type="javascript" source="/js/toast.js"/>


2. Agregaremos los siguiente estilos css3 embebidos en el jsf o jspx según como tengas tu pagina, los media queries tendrán error pero no importa, es solo por que el compilador de jdev es algo obsoleto, pero a la final quien compilara nuestros estilos css3 en ambiente producción sera el navegador.

 
                #toast-container {
                    display: block;
                    position: fixed;
                    z-index: 10000;
                }
@media only screen and( max-width:600px) {
                    #toast-container {
                        min-width: 100%;
                        bottom: 0%;
                    }
                }

@media only screen and( min-width:601px)and( max-width:992px) {
                    #toast-container {
                        left: 5%;
                        bottom: 7%;
                        max-width: 90%;
                    }
                }

@media only screen and( min-width:993px) {
                    #toast-container {
                        top: 10%;
                        right: 7%;
                        max-width: 86%;
                    }
                }

                .toast {
                    border-radius: 2px;
                    top: 35px;
                    width: auto;
                    margin-top: 10px;
                    position: relative;
                    max-width: 100%;
                    height: auto;
                    min-height: 48px;
                    line-height: 1.5em;
                    word-break: break-all;
                    background-color: #323232;
                    padding: 10px 25px;
                    font-size: 1.1rem;
                    font-weight: 300;
                    color: #fff;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: justify;
                    -webkit-justify-content: space-between;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    cursor: default;
                }

                .toast .toast-action {
                    color: #eeff41;
                    font-weight: 500;
                    margin-right: -25px;
                    margin-left: 3rem;
                }

                .toast.rounded {
                    border-radius: 24px;
                }
@media only screen and( max-width:600px) {
                    .toast {
                        width: 100%;
                        border-radius: 0;
                    }
                }

                .toast {
                    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px-2px rgba(0, 0, 0, 0.2);
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px-2px rgba(0, 0, 0, 0.2);
                }
    
   

3. Invocaremos la siguiente función Javascript desde Java para lanzar el mensaje.

 
    public void messageToast(String message) {
        FacesContext fctx = FacesContext.getCurrentInstance();

        ExtendedRenderKitService erks = Service.getRenderKitService(fctx, ExtendedRenderKitService.class);

        StringBuilder script = new StringBuilder();

        String headMessage = "";

        script.append("Materialize.toast('" + message + "', 4000)");

        erks.addScript(FacesContext.getCurrentInstance(), script.toString());
    }


Y así obtendremos nuestro mensaje toast, podremos encontrar mas aplicaciones de los diálogos de materialize en Materialize .


Espero sea de ayuda para sus desarrollos.

Comentarios