09 September 2010

Add Css to a SharePoint WebPart

איך מוספים CSS לWebPart?
יש הרבה דרכים, אבל אני אדגים רק שתי דרכים נפוצות.
הראשונה הוספת הCSS בPreRender. יתרון משמעותי, בCSS נטען אחרון. זאת אומרת שאין קבצי core.css שעולים על הstyle'ים שלי (כי כמו שאתם יודעים בCSS האחרון הוא החזק והקובע).

       #region
-- Cntr --
///<summary>
   /// Cntr for MyWebPart
///</summary>

public MyWebPart()

{

this.PreRender += new EventHandler(WebPart_ClientCss_PreRender);

}

#endregion

///<summary>

/// Add css files to the page
/// </summary>
///<param name="sender"></param>

///<param name="e"></param>

private void WebPart_ClientCss_PreRender(object sender, System.EventArgs e)

{
const string cCSSControlID = "MyStyle";

// the resource path need absolute

if (Page.Header.FindControl(cCSSControlID) != null)

return;

String location = this.ClassResourcePath + "/styles.css";
// literal control css
LiteralControl literalControl = new LiteralControl(String.Format("<link
href='{0}' rel='stylesheet' type='text/css' />"
, location));


literalControl.ID = cCSSControlID;
Page.Header.Controls.Add(literalControl);
}

בעצם, מה שנעשה זה יצירת מתודה WebPart_ClientCss_PreRender שמתווסת לPreRender בזמן הContractor. בתוך המתודה מתבצע בדיקה שכבר לא קיים אותו CSS ואם לא קיים הוא יוסיף אותו.
הדרך השניה היא פשוטה יותר, קצרה יותר ומשתמשת בAPI של SharePoint – שזה יתרון חשוב. החיסרון שאנחנו לא שולטים מיקום הcss בheader (כדי לפתרון חסרון זה, כל מה שצריך לעשות זה להגדיר !important;).


protected
override void CreateChildControls()      
{

base.CreateChildControls();

// the resource path need relational

String location = this.ClassResourcePath.Replace(SPContext.Current.Site.Url,
string.Empty) + "/styles.css";

Microsoft.SharePoint.WebControls.CssRegistration.Register(location);
 
}
 
בדרך זו, אנו פונים למתודה שנקראת CssRegistration.Register ונותנים לה את הנתיב הרלציוני.
מקווה שלא סיבכתי יותר מדי את העינינים...
אה.. דרך אגב, אני מעדיף את הדרך השניה ...

רק דברים טובים,
רועי

No comments:

Post a Comment