none
externaliser du css et du javascript : des problèmes RRS feed

  • Question

  • Bonjour aux membres du forum,

    dans ma quête de découverte et d'utilisation à peu près correcte de SP,
    je m'attaque aux CSS et à Javascript .... sous notepad++ ( il faut le préciser, c'est important )

    CSS et JS sont intégrés "à la main", c'est OK dans des balises <script> et <style>

    Donc, ce n'est pas propre, surtout pour "inclure" dans une autre page SP.

    mais quand je créé un JS dans (...)/layouts/1033
    et que je l'écris dans le code, c'est la catastrophe pour exécuter du JS dans le code ( dans les balises ou dans le .js )

    Pourtant, il me trouve bien le JS en question, puisque je suis obligé de mettre
    <SharePoint:ScriptLink language="javascript" name="../1033/truc.js" runat="server"/> pour qu'il puisse le cacher ( je n'ai pas de 1036 ou autres ).

    Pire, quand ça plante, en faisant Afficher Source, il semble que SP génère du JS en bas de page ni n'est pas présent dans le source, même pas sous forme d'inclusion.

    Comment (bien) faire ?
    Est-ce une question de nettoyage de cache ou de paramétrage ?

    Et sur Internet, on voit pas mal de solutions qui correspondent globalement à ce qui a été fait, mais à mon avis, tout n'est pas écrit.

    Si vous pouviez me tuyauter pour le CSS, ce serait bien aussi

    Merci de votre aide.
    jeudi 9 avril 2009 07:14

Réponses

  • Si votre fichier CSS est dans une librairie de documents SharePoint du site courant, vous pouvez aussi la référencer ainsi avec le contrôle Microsoft.SharePoint.WebControls.CssRegistration

    exemple :
    <wss:CssRegistration id="cssregistration" runat="server" name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/pageLayouts.css %>" />

    http://blogs.developpeur.org/anouvel
    jeudi 9 avril 2009 09:03

Toutes les réponses

  • Bonjour,

    j'ai pas mal joué avec le contrôle ScriptLink, et mes conclusions sont qu'il vaut mieux ne pas l'utiliser. L'interet principal de ce contrôle est de gérer les scripts qui sont localisés. Si vous n'avez pas ce besoin, je vous conseille 2 approches :

    - mettre vos fichiers dans LAYOUTS/nomdevotresolution/ et de référencer votre script avec une balise script classique 
    <script type="text/javascript" src="/_layouts/nomdevotresolution/script.js" ></script>
    
    
    - ou embedder en resource d'assembly si ce script est utilisé uniquement par une webpart. Le fichier de script aurait alors sa place dans la même assembly que votre webpart, et pourrait s'inclure dans votre page avec un appel comme cela :
    //A utiliser dans la webpart HelloWebPart pour enregistrer le script HelloWebPart.js situé dans le répertoire Scripts du projet MesWebParts - utilisez Reflector pour confirmer le chemin de la resource
    
    Page.ClientScript.RegisterClientScriptResource(typeof(HelloWebPart), "MesWebParts.Scripts.HelloWebPart.js");
    
    
    plus d'infos : http://weblogs.asp.net/dwahlin/archive/2007/04/29/creating-custom-asp-net-server-controls-with-embedded-javascript.aspx


    Le contrôle ScriptLink est a mon gout plus utile aux équipes de Microsoft qui ont un contrôle sur les scripts déployés via language pack et qui peuvent ainsi s'assurer que chaque script est localisé dans chaque langue installée sur une ferme (si un script localisé n'est pas trouvé dans la langue courante, il y a une erreur)
    Si toutefois vous désirez l'utiliser, vous trouverez des informations ici : http://blogs.developpeur.org/anouvel/archive/2008/04/19/sharepoint-le-contr-le-scriptlink.aspx

    Bons développements :)
    http://blogs.developpeur.org/anouvel
    jeudi 9 avril 2009 08:05
  • Les 2 techniques s'appliquent aussi aux fichiers CSS, pour la 2eme il faut par contre utiliser Page.ClientScript.GetWebResourceUrl, générer la balise <link> et l'inclure dans le header, il n'y a pas de méthode permettant sa génération directement.
    http://blogs.developpeur.org/anouvel
    jeudi 9 avril 2009 08:09
  • Si votre fichier CSS est dans une librairie de documents SharePoint du site courant, vous pouvez aussi la référencer ainsi avec le contrôle Microsoft.SharePoint.WebControls.CssRegistration

    exemple :
    <wss:CssRegistration id="cssregistration" runat="server" name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/pageLayouts.css %>" />

    http://blogs.developpeur.org/anouvel
    jeudi 9 avril 2009 09:03
  • Merci Arnault,

    la solution
    <
    script
     type
    =
    "text/javascript"
     src
    =
    "/_layouts/nomdevotresolution/script.js"
     >
    </
    script
    
    fonctionne très bien, c'est vraiment appréciable.
    Et il n'y a plus la pollution javascript.

    Par contre, cela a juste été placé dans /_layouts

    Reste le CSS. Je cherche. Je ne veux rien reférencer.

    Cordialement,

    c.tou.moi
    jeudi 9 avril 2009 09:49
  • De rien :)

    Vous pouvez utiliser exactement la même solution pour le CSS :

    <link href="/_layouts/nomdevotresolution/feuille.css" rel="stylesheet" >

    http://blogs.developpeur.org/anouvel
    jeudi 9 avril 2009 09:53
  • Pas encore testé pour le CSS.

    J'ai un problème très bête tout de suite : il me met les fichiers JE en cache. Du coup, pour modifier je dois renommer le JS.
    Il y a un moyen pour ne pas cacher ces fichiers HTML-like ?

    Cordialement,

    c.tou.moi
    jeudi 9 avril 2009 14:46
  • Avez-vous vérifié les propriétés du cache de votre navigateur ? Vous devriez pouvoir le désactiver..

    D'autre part, si vous faites Ctrl+F5 dans votre navigateur cela devrait rafraichir la page entièrement sans tenir compte du cache client, est-ce que cela résoud votre problème ou s'agît-il d'un problème de cache serveur ?
    http://blogs.developpeur.org/anouvel
    vendredi 10 avril 2009 07:31
  • Merci Arnault,

    Ctrl-F5 fonctionne bien !

    mais le lien ( <link href ... ) pour le CSS ne fonctionne pas. Je ne comprends pas pourquoi.

    Il y a déjà une balise <style> dans la page existante à moitié personnalisée. Il y a-t-il des contraintes concernant l'écriture du CSS ?
    vendredi 10 avril 2009 11:53
  • Il n'y a pas vraiment de contraintes au niveau des CSS, vous pouvez aussi déclarer une balise <style> directement dans la page, bien que cela soit moins propre qu'un fichier .css référencé.
    Attention toutefois à l'ordre dans lesquelles sont référencées les feuilles de style dans la page. Vos css sont peut etre appliquées puis surchargées par les CSS sharepoint, qui sait..

    Si vous travaillez avec IE, utilisez la Internet development toolbar :  http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en 
    Cet outil vous permettra de voir si vos classes sont appliquées et surchargées.


    Pour vous aider à résoudre votre problème, pourriez-vous indiquer votre déclaration de balise <link> (et l'endroit où elle est déclarée) ?
    http://blogs.developpeur.org/anouvel
    vendredi 10 avril 2009 12:26
  • Arnault,

    la page aspx contenait :

          <%=SearchStrings.Search%> - <SharePoint:ProjectProperty Property="Title" runat="server"/>
        </title>
        <SharePoint:CssLink runat="server"/>

        <style>
          html, body {
            height: 100%;
          }


    J'ai rajouté la déclaration suivante entre la balise csslink et la balise style :
    <style>
    #droite{
      position: absolute;
      right: 0px;
      top: 600px;
    }
    </style>

    Mais si j'externalise le contenu du CSS dans un fichier "toto.css" dans 12/templates/layouts puis dans 12/templates/layouts/styles et en essayant les fichiers suivants, ça ne marche pas.


    <link href="/_layouts/1033/styles/toto.css" rel="stylesheet"/>

    <link href="toto.css" rel="stylesheet"/>

    <link rel="stylesheet" type="text/css" href="/_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/styles/toto.css" />

    ( 1033 pour la localisation )

    Par contre, c'est bien que SharePoint ne soit pas casse-sensitif ;)
    Autre chose qui m'ennuie, c'est qu'en recherchant les fichiers aspx utilisant su CSS sur le disque dur, on trouve bien cette façon d'écrire ...

    Il n'y a pas d'autres composants qui s'appellent "droite" dans la page.

    C'est bizarre.

    Cordialement,

    c.tou.moi
    vendredi 10 avril 2009 12:43
  • j'oubliais,

    l'inclusion du JS est juste après la balise CssLink

    pire,
    la balise pour l'inclusion du CSS ne me plus fonctionner du javascript. C'est vraiment problématique.
    vendredi 10 avril 2009 12:51
  • Si le chemin du fichier sur le disque est 12/templates/layouts/styles/toto.css , il faut utiliser la balise link suivante :

    <link href="/_layouts/styles/toto.css" rel="stylesheet"/>
    
    

    Si ca ne marche pas, essayez sans fermer la balise car en fonction du DOCTYPE, les balises link fermées peuvent être ignorées :

    <link href="/_layouts/styles/toto.css" rel="stylesheet">
    
    



    J'espère ne pas vous avoir induit en erreur dans un de mes messages précédents, il n'y a aucune obligation de décliner les feuilles de styles dans toutes les langues.

    Est-ce que cela résoud votre problème ?
    http://blogs.developpeur.org/anouvel
    vendredi 10 avril 2009 12:59
  • Merci Arnault,
    je n'ai pas réussi. Le css a été laissé tel quel dans la page aspx.

    Nous verrons bien si la solution mise en place conviendra. Suite au prochain épisode.

    Cordialement,

    c.tou.moi
    lundi 20 avril 2009 11:39