Mostrando Rapido en Plone¶
Podemos ver un bloque visitando su dirección URL:
Del mismo modo para un registro:
Pero simplemente devuelve el HTML generado por el bloque.
Para mostrar nuestros bloques en nuestro sitio de Plone, hay 4 posibilidades:
Reglas diazo¶
Podemos utilizar la directiva Diazo include
para obtener el contenido del bloque Rapido e inyectarlo en nuestras páginas con las directivas before
, after
o replace
.
Ejemplo:
<before css:content="#content-core">
<include css:content="form" href="/@@rapido/myapp/blocks/simpleblock" />
</before>
Vistas extra¶
Advertencia
Desde rapido.plone 1.1, podemos declarar vistas de primera clase de Plone desde Rapido, pero requiere plone.resources 1.2.
Si no queremos simplemente inyectar un pequeño fragmento de HTML en las páginas existentes, sino usar un bloque Rapido como parte principal de la página, podemos declarar un bloque como una vista en su archivo YAML:
view:
id: my-custom-view
with_theme: true
Y luego llamamos a @@my-custom-view
en cualquier contenido, como:
y muestra nuestro bloque como contenido de la página principal.
Si la with_theme
es false
, la página se procesa sin el tema Plone (solo obtenemos el bloque por sí mismo).
Vistas extra antes de 1.1¶
DESCONTINUADA desde rapido.plone 1.1
Si no queremos simplemente inyectar un pequeño fragmento de HTML en las páginas existentes, sino crear una nueva vista para nuestros contenidos, podemos usar las vistas neutras de Rapido.
Las vistas neutrales se obtienen agregando @@rapido/view/<any-name>
a una dirección URL de contenido. Simplemente devolverá la vista predeterminada del contenido (por eso los llamamos neutrales).
Por ejemplo, todas esas direcciones URL muestran lo mismo:
http://localhost:8080/Plone/front-page
http://localhost:8080/Plone/front-page/@@rapido/view/
http://localhost:8080/Plone/front-page/@@rapido/view/abc
http://localhost:8080/Plone/front-page/@@rapido/view/123
Así que podemos llamar a un contenido con una URL que controlamos, y eso nos permite crear reglas específicas de Diazo para ello usando el atributo if-path
.
Inyección codificada
<rules if-path="@@rapido/view/show-report">
<replace css:content="#content">
<include css:content="form" href="/@@rapido/stats/blocks/report" />
</replace>
</rules>
En este ejemplo, si abrimos la siguiente dirección URL:
veremos el contenido principal de nuestra página es reemplazado por nuestro bloque de report
.
Inyección dinámica
También podemos mostrar dinámicamente un recurso Rapido especificado en la URL. Rapido proporciona un patrón de inyección de URL que permite referirse a la solicitud de los padres en nuestra regla Diazo.
El patrón es: $<integer>
, donde el entero especifica la posición inicial después de @@rapido
para obtener la ruta de inyección.
Por ejemplo:
- con
http://localhost:8080/Plone/@@rapido/view/show-report/5654654
,$3
recibe la parte de la ruta a partir del tercer elemento después de@@rapido
, el cual es:5654654
, - con
http://localhost:8080/Plone/@@rapido/view/show-report/myapp/record/5654654
,$3
recibe la parte de la ruta que comienza en el tercer elemento después de@@rapido
, el cual es:myapp/record/5654654
, - con
http://localhost:8080/Plone/@@rapido/view/show-report/myapp/record/5654654/edit
,$5
obtiene la parte de la ruta que comienza en el quinto elemento después de@@rapido
, el cual es:5654654/edit
.
Ejemplos:
<rules if-path="@@rapido/view/show-report">
<replace css:content="#content-core">
<include css:content="form" href="/@@rapido/$3" />
</replace>
</rules>
si abrimos la siguiente dirección URL:
nos representaría myapp/record/my-record-id
en nuestro de la página principal de contenido.
También podríamos hacer:
<rules if-path="@@rapido/view/show-report">
<replace css:content="#content-core">
<include css:content="form" href="/@@rapido/myapp/record/$3" />
</replace>
</rules>
si abrimos la siguiente dirección URL:
obtendremos la misma representación que en nuestro ejemplo anterior.
Mosaic¶
Mosaic es un editor de diseño.
Permite agregar y manipular tiles en nuestros diseños de contenido.
Rapido proporciona un tile de mosaico, así que cualquier bloque de Rapido se puede agregar como tile a nuestras disposiciones del diseño.
Para habilitarlo, necesitamos instalar Mosaic y luego importar un perfil específico de Rapido Generic Setup llamado «rapido.plone mosaic tile» desde el ZMI >>> portal_setup >>> Import y haga clic en el botón «Import all steps».
Aquí el enlace de la pestaña «Import» desde la herramienta portal_setup para ejecutar el perfil Generic Setup:
Patrones Mockup¶
Algunos patrones de Mockup pueden mostrar contenido proporcionado por una URL. Los dos principales casos de uso son:
Mostrar un bloque Rapido en un modal: usamos el patrón
plone-modal
en un elemento<a>
, la URL del bloque Rapido será proporcionada en su atributohref
, y solo necesitamos especificarform.rapido-block
como selector de contenido (porqueplone-modal
el selector de contenido por defecto es#content
, el cual es preciso para una página de Plone pero no para un bloque de Rapido). Ejemplo:Creamos un bloque llamado
my-content
contiene lo que sea necesario, y creamos un bloque llamadomenu
contiene el siguiente HTML:<a href="@@rapido/my-app/blocks/my-content" class="plone-btn pat-plone-modal" data-pat-plone-modal="content: form.rapido-block"> Open in a modal </a>
Y entonces solo necesitamos insertar
menu
en nuestra página de Plone (usando una regla de Diazo).Consulte la documentación modal de Mockup para obtener más detalles sobre las opciones.
Cargar un bloque Rapido dinámicamente en la página actual: usamos el
plone-contentloader
para inyectar nuestro bloque Rapido donde queramos. En nuestro ejemplo anterior, cambiaríamos elmenu
HTML a:<a href="#" class="pat-contentloader" data-pat-contentloader="url:@@rapido/my-app/blocks/my-content#form.rapido-block;"> Load content</a>
Reemplazaría el enlace «Cargar contenido» con nuestro bloque
my-content
cuando haga clic en el enlace.Advertencia
con
plone-contentloader
, el selector de contenido se pasa directamente como un hash al final de la URL.plone-contentloader
también nos permite orientar un elemento específico para la inyección (en lugar de reemplazar el enlace):<a href="#" class="pat-contentloader" data-pat-contentloader="url:@@rapido/my-app/blocks/my-content#form.rapido-block;target:#here;"> Load content</a> <p id="here">Insert my content here.</p>
De forma predeterminada, la inyección se activa con un clic, pero podemos elegir cualquier evento de DOM (
mouseover
por ejemplo), e incluso podemos realizar la inyección inmediatamente (usando el triggerimmediate
):<a href="#" class="pat-contentloader" data-pat-contentloader="url:@@rapido/my-app/blocks/my-content#form.rapido-block;trigger:immediate"> Load content</a>