|
|
Rank: Administration
Groups: Administration
, Member
Joined: 10/7/2008
Posts: 505
Points: 1,515
|
In the module admin I require the registration of CSS and JavaScript to the page. This will enable the use of jQuery and UI enhanced administration.
The modules have registration of CSS (and JavaScript as I have added/finished the implementation that was partly already there).
What is the best way to do this? I do not wish to have a totally customised version of Cuyahoga, but these changes are required as it seems pretty limiting without the access to CSS and JavaScript.
If it is already possible then please correct me.
I have also tried:
//Add CSS to page
protected void Page_Init(object sender, EventArgs e)
{
//Add CSS
HtmlLink css = new HtmlLink();
css.Href = "css/custom.css";
css.Attributes["rel"] = "stylesheet";
css.Attributes["type"] = "text/css";
css.Attributes["media"] = "all";
Page.Header.Controls.Add(css);
}
This did not work either. I will be able to add it, but I just do not like the idea of having a completely customised Cuyahoga.
|
|
Rank: Administration
Groups: Administration
, Member
Joined: 10/7/2008
Posts: 505
Points: 1,515
|
Having taken some time to look how things knit together here is how I did it.
If it is wrong approach please comment. I understand this is only a brief overview to give the general idea and therefore may not be sufficient to generate comment.
An admin page inherits : ModuleAdminBasePage which inherits : GenericBasePage, that OnPreRender instantiates a BasePageControl called pageControl.
The BasePageControl has a public string 'Css' the value of which sets the 'ref' System.Web.UI.HtmlControls.HtmlControl CssStyleSheet by this.ResolveUrl(value). This resides inside the ModuleAdminTemplate.ascx page in the 'web/controls' folder.
So I added 2 new PlaceHolders in the head of the template one for CSS and one for JavaScript.
Changed the BasePageControl is to be stored at GenericBasePage level like:
public class GenericBasePage : CuyahogaPage
{
private BasePageControl _pageControl;
etc....
I then added:
private IDictionary _stylesheets;
private IDictionary _javascripts;
public BasePageControl() {
this._stylesheets = new Hashtable();
this._javascripts = new Hashtable();
}
to the BasePageControl and added the relevant
RegisterJavascript()
InsertJavascripts()
RenderCssLinks()
RegisterStylesheet()
InsertStylesheets()
RenderStylesheetLinks()
They are like this:
System.Web.UI.HtmlControls.HtmlLink css = new System.Web.UI.HtmlControls.HtmlLink();
css.Href = stylesheet;
css.Attributes["rel"] = "stylesheet";
css.Attributes["type"] = "text/css";
css.Attributes["media"] = "all";
AddedCssPlaceHolder.Controls.Add(css); << Add to the placeholders in the admin template.
Then it was a matter of making the two 'Register' methods open to the module admin back through:
BasePageControl > GenericBasePage >ModuleAdminBasePage > To the module admin of choice.
Now I can add JavaScript’s and CSS to the admin of my modules, enabling me to use jQuery and enhanced UI etc.
|
|
Rank: Administration
Groups: Administration
, Member
Joined: 10/7/2008
Posts: 505
Points: 1,515
|
Is there a way to attach files to posts? I could attach a Patch file for people to check. I just hope that there is not an existing way to register Javascripts and CSS to the module admin pages that I have missed 
|
|
Rank: Administration
Groups: Administration
, Member
Joined: 12/30/2004
Posts: 1,674
Points: 1,824
Location: Wageningen (NL)
|
Thanks and no, you haven't missed anything  . I've turned on attachments for this forum also, so you can upload the changes. If you want to make it a little bit more 'official': create an issue in Jira and attach the files there. This way we won't forget the patch.
|
|
Rank: Administration
Groups: Administration
, Member
Joined: 10/7/2008
Posts: 505
Points: 1,515
|
I have added a Jira entry. Patch attached to this forum entry. File Attachment(s):
 Web_UI_RegisterJavascript-CSS.patch (25kb) downloaded 17 time(s).
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/6/2009
Posts: 64
Points: 192
|
Constructor wrote:Is there a way to attach files to posts? I could attach a Patch file for people to check. I just hope that there is not an existing way to register Javascripts and CSS to the module admin pages that I have missed Hi Constructor, I love your way! I need it today, because of include css and js like normal by using script... so it still was wrong. I download your patch file, but there are 4 files with RED, TortoiseSVN say "this patch seems outdated....", include BaseModuleControl.cs, LocalizedUserControl.cs, ModuleAdminBasePage.cs, PageEngine.cs Could you guide me to correct it? P/s: I download SRC version 1.5.2 and commit it to my repository then usng apply patch command
|
|
Rank: Administration
Groups: Administration
, Member
Joined: 10/7/2008
Posts: 505
Points: 1,515
|
Here are the files that I made small changes to. They are in their relative folders. Just copy them over 1.5.2 versions and they should work fine. They work perfectly for me As always, make a backup first before you use them. You can download them from here. Unzip the files to your desktop and copy them to their corresponding folders. Inside the 'Templates' folder there is a small reminder: Ensure that your templates have these Literals inside the header. This is where the markup is injected. asp:Literal ID="JavaScripts" runat="server" / asp:Literal ID="MetaTags" runat="server" / asp:Literal ID="Stylesheets" runat="server" / That should do it. You should now be able to add javascripts and css from modules and module admin pages programatically. Hope that is a help to you.
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/6/2009
Posts: 64
Points: 192
|
Ok, thank u much! Your works are great.
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/6/2009
Posts: 64
Points: 192
|
I was merge your files with my code. It run ok, but if I register more than one js file, a problem occur. I need to register 3 files, include (1) jquery.js, (2) ui.core.js, (3) ui.tabs.js with correct order is 1, 2, 3. But if I call: base.RegisterAdminJavascript("jquery", "(1)"  ; base.RegisterAdminJavascript("uicore", "(2)" ; base.RegisterAdminJavascript("uitabs", "(3)" ; output files order I receive is (2), (1), (3). I was changed the order of 3 above statement, but the result no change. For this, a client error appear, because browser does not know jquery function. Do you meet this error?
|
|
Rank: Administration
Groups: Administration
, Member
Joined: 10/7/2008
Posts: 505
Points: 1,515
|
juanwoang wrote:I was merge your files with my code. It run ok, but if I register more than one js file, a problem occur. I need to register 3 files, include (1) jquery.js, (2) ui.core.js, (3) ui.tabs.js with correct order is 1, 2, 3. But if I call: base.RegisterAdminJavascript("jquery", "(1)" ; base.RegisterAdminJavascript("uicore", "(2)" ; base.RegisterAdminJavascript("uitabs", "(3)" ; output files order I receive is (2), (1), (3). I was changed the order of 3 above statement, but the result no change. For this, a client error appear, because browser does not know jquery function. Do you meet this error? I register CSS and Javascript like this: RegisterStylesheet("CSS", UrlHelper.GetApplicationPath() + "Modules/MyModule/css/MyModule.css" ) ; RegisterStylesheet("CSS1", UrlHelper.GetApplicationPath() + "Modules/MyModule/css/MyModule1.css" ) ; RegisterStylesheet("CSS2", UrlHelper.GetApplicationPath() + "Modules/MyModule/css/MyModule2.css" ) ; and... RegisterAdminJavascript("JS", UrlHelper.GetApplicationPath() + "Modules/MyModule/js/MyModule.js" ) ; RegisterAdminJavascript("JS1", UrlHelper.GetApplicationPath() + "Modules/MyModule/js/MyModule1.js" ) ; RegisterAdminJavascript("JS2", UrlHelper.GetApplicationPath() + "Modules/MyModule/js/MyModule2.js" ) ; Do not use 'base.' only RegisterAdminJavascript and RegisterStylesheet from code behind. You can register as many css and javascript as you require! Hope this helps.
|
|
|
Guest |