Share - dashlet - stylesheet

[luigi]

Ciao a tutti,

stavo provando a creare una dashlet in Alfresco Share 4.2.e, seguendo questo <a href='http://zlayer.net/blog/?p=255'>esempio</a>.

Il risultato è quello atteso ovviamente, e riesco a visualizzarlo all'indirizzo

http://127.0.0.1:8080/share/page/components/dashlets/my-dashlet
‍‍‍

L'unica cosa che non sono riuscito ad applicare è la parte relativa allo stylesheet, ossia

<@markup id="css" >
 <#– Link to your CSS file –>
 <@link rel="stylesheet" type="text/css" href="${url.context}/res/components/dashlets/my-dashlet.css" group="dashlets"/>
</@>
‍‍‍‍‍‍

La pagina sembra non recepire le direttive css. Come se non interpretasse gli stili.
L'url è corretto. Se eseguo

http://127.0.0.1:8080/share/res/components/dashlets/my-dashlet.css
‍‍‍

mi visualizza il contenuto del file css.

Per creare la dashlet ho creato un jar (jar cfv myalfdashlet.jar *) sulla seguente struttura:

alfresco
           –| site-webscripts
                              —-| dashlets
                                          ——| my-dashlet.get.desc.xml
                                          ——| my-dashlet.get.html.ftl
                                          ——| my-dashlet.get.properties
META-INF
           –| components
                         —-| dashlets
                                     ——| my-dashlet.css
   
<b>my-dashlet.get.desc.xml</b>      

<webscript>
  <shortname>My Dashlet</shortname>
  <description>Example dashlet</description>
  <family>user-dashlet</family>
  <url>/components/dashlets/my-dashlet</url>
</webscript>
‍‍‍‍‍‍‍‍

<b>my-dashlet.get.html.ftl</b>

<@markup id="css" >
 <#– Link to your CSS file –>
 <@link rel="stylesheet" type="text/css" href="${url.context}/res/components/dashlets/my-dashlet.css" group="dashlets"/>
</@>

<@markup id="html">
  <@uniqueIdDiv>
    <div class="dashlet my-class">
      <div class="title">${msg("header.title")}</div>
        <div class="body">${msg("text.hello")}</div>          
      </div>
      <div class="blogs-greeting-io">${url.context}</div>
    </@>
 </@>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<b>my-dashlet.get.properties</b>

header.title=My dashlet
text.hello=Hello world !!
‍‍‍‍

<b>my-dashlet.css</b>

.title {color:orange;}
.blogs-greeting-io {
   padding: 10px;
   color: orange;
   font-weight: bold;
}
‍‍‍‍‍‍‍‍

                                    
Il jar l'ho poi inserito in tomcat_home/shared/lib e riavvito il server.

Quale idea in proposito ?

Grazie.
Luigi

[davidciamberlan]

Ciao,

il codice sembra corretto.
Il problema secondo me è dovuto al fatto che le proprietà che setti nel tuo css vengono sovrascritte da qualche altro css.

Per capire se il problema è questo, puoi provare a inserire nel file ftl un elemento di prova con un id personalizzato come ad esempio:

<div id="my-dashlet">Prova!</div>‍

e poi aggiungere una regola nel css per questo nuovo elemento.

#my-dashlet { color: red; }‍

.

Ricarica tutto (consigliato per evitare problemi di cashing con il css) e se vedi la scritta "Prova!" in rosso, allora il problema è quello che ti ho detto.

In questo caso puoi inserire nel tuo elemento degli id (o class) personalizzati nel tuo elemento, (es:

<div class="my-title">…‍

oppure inserire la direttiva !important dopo la proprietà che vuoi modificare (

color: red !important‍

).
Attenzione però che se fai in questo modo per la classe "title" cambierai il colore di tutte le dashlet.

Spero questo risolva il tuo problema.

[luigi]

Ciao David,

non sono risucito a variare i colori della dashlet nè con l'id personalizzato e nemmeno con la direttiva "! important".
Come se non interpretasse il css !

<@markup id="css" >
 <#– Link to your CSS file –>
 <@link rel="stylesheet" type="text/css" href="${url.context}/res/components/dashlets/my-dashlet.css" group="dashlets"/>
</@>

<@markup id="html">
  <@uniqueIdDiv>
    <div class="dashlet my-class">
      <div class="title">${msg("header.title")}</div>
        <div class="body">${msg("text.hello")}</div>          
      </div>
      <div class="blogs-greeting-io">${url.context}</div>
      <div id="my-dashlet-pippo">Prova!</div>
    </@>
 </@>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

.title {color:orange !important;}
.blogs-greeting-io {
   padding: 10px;
   color: orange;
   font-weight: bold;
}
#my-dashlet-pippo { color: red; }
‍‍‍‍‍‍‍‍‍

In allegato quanto visualizzo a video.

Luigi

[davidciamberlan]

Ciao,

sono abbastanza sicuro che si tratti ancora di problemi di cache.

Mi confermi che il tuo file css si trova in webapps/share/components/dashlets e con l'url http://localhost/res/components/dashlets/my-dashlet.css riesci a vedere correttamente il css?

Prova a:
caricare la pagina con un altro browser oppure a cambiare il nome del css (anche nella relativa riga del template) e ricaricare la pagina.

[luigi]

ok David.
Per mia ignoranza e perchè mi ero perso una frase del blog da cui ho ricavato l'esempio, ossia

You can even access the component directly, by going to http://localhost:8080/share/components/dashlets/my-dashlet – you would only get the component (dashlet), not the whole page.
‍‍‍

mi ostinavo a voler visualizzare direttamente da quel link anche le trasformazioni del file di stile, mentre queste sono visibili solo in fase di customizzazione della user dashboard …

Ti ringrazio comunque per la tua assistenza.

"Prometto" che la prossima volta prima di aprire un post sul forum leggerò meglio ]

Ciao
Luigi