S
Sky Sigal
Hello:
I'm currently messing around, and need as much feedback/help as I can get, trying to find the most
economical/graceful way to build usercontrols that rely on styling to look any good...
It's the last part that has got me all frazzled (the 'rely on...to look good')...
Let me explain -- and please bear with me as it's a bit longer than my usual questions:
I've seen a lot of articles and books on how to make Controls, and how to expose CSS properties via
the Style objects, and how to use SaveViewState/LoadViewState to hold them...
It appears that if designing a control that is to draw 50 images, each to be styled with the same
Style rules, that what is recommended as best practice is something like:
MyControl {
//Define a public property to expose a style for the inner elements:
public Style StyleImage{get {if (_StyleButton == null){_StyleButton= new
Style();((IStateManager)_StyleButton).TrackViewState();}return _StyleImage;}
private Style _StyleImage;
//....usual suspects (override LoadViewState/SaveViewState)
//...somewhere about here we actually give some values to the style object before we use it:
_StyleImage.BorerStyle = BorderStyle.Solid;
_StyleImage.BorderColor Color.Red;
_StyleImage.BorderWidth = Unit.Pixel(1);
_StyleImage.Height = Unit.Pixel(16);
_StyleImage.Width = Unit.Pixel(16);
//Finally, apply the styling:
protected void override Render(HtmlTextWriter writer){
//And after ViewState has been saved...
//Apply the common style so there is no ViewState bloat.
for (int i=0;i<50;i++){
Image tImg = new Image();
tImg.ApplyStyle(_StyleImage;} // <--Apply the Style...
this.Controls.Add(tImg;}
}
}
Looks about right, no?
What I am suprised about in first place is to hear NOBODY complain the least that this would bloat
the outgoing stream with:
<img style='border:solid 1px red;width:16px;height:16px;margin:10px;'>...</img>
<img style='border:solid 1px red;width:16px;height:16px;margin:10px;'>...</img>
<img style='border:solid 1px red;width:16px;height:16px;margin:10px;'>...</img>
<img style='border:solid 1px red;width:16px;height:16px;margin:10px;'>...</img>
....
when:
<img class="MYCLASS">...</img>
<img class="MYCLASS">...</img>
<img class="MYCLASS">...</img>
<img class="MYCLASS">...</img>
would have done it -- and been more to the norms to boot.
Ok. ..So you say, that too can be done by using the Style.CssClass value to achieve this:
True...and I've been trying to use it. I'm just suprised that it doesn't raise more of a stink...
Moving right along...because that's not the question/point of this query...
The point is I've gotten myself into a fix trying to figure out what is the most graceful way to
design webcontrols...that rely on style sheets to look correct.
For example:
Currently I am mucking around designing a webcontrol for calendars in week/day/quarter/etc. views...
relies on a lot of different Styles to lay it all out.
If I render it with it with no Styling applied at all, just placement of cells, etc, it looks like
absolute hell.
It really needs default styling to be included in the control.
I can default each style to what is the css code for it -- or default it to point to a css file.
eg:
a) Style _CalendarCell = new Style(); _CalendarCell.BackColor =
Color.Almond;ForeColor=Color.Black...etc...
or:
b) Style _CalendarCell = new Style(); _CalendarCell.CssClass =
"STYLE_IN_SOME_SHEET_THAT_IS_CURRENTLY_MISSING"
If I use version a, that's nice -- it looks good, but I just bloated the poor guys viewstate for no
reason except laziness on my part.
If I use b), that's nicer to his VS -- but the first time he drops the control on his page, it looks
all wrong...nothing will be sized right, colored etc...and will be all out of whack till he/she
includes a CSS sheet.
That is assuming that he will find out how my control is put together and what needs to be styled
how.
c) Option 3...-- I could do b) -- but then also include a StyleSheet as a resource and feed it into
the page....So now the control would need to have a public bool that looks like:
bool IncludeResouceCSS=true;
that will include or not a <link src='ResourceHandler'> in the output or not -- which the user can
override.
Option 3 looks like the most flexible to me -- but I am having a lot of trouble putting it into
practice.
So about now, I am pretty frustrated by how the Net Framwork has not clearly shown a way to do this
type of control designing -- and would like input from people who have done this before...
Could someone who has done this before post your comments as what you suggest as a good way to
tackle this problem?
Thank you so much,
Sky
I'm currently messing around, and need as much feedback/help as I can get, trying to find the most
economical/graceful way to build usercontrols that rely on styling to look any good...
It's the last part that has got me all frazzled (the 'rely on...to look good')...
Let me explain -- and please bear with me as it's a bit longer than my usual questions:
I've seen a lot of articles and books on how to make Controls, and how to expose CSS properties via
the Style objects, and how to use SaveViewState/LoadViewState to hold them...
It appears that if designing a control that is to draw 50 images, each to be styled with the same
Style rules, that what is recommended as best practice is something like:
MyControl {
//Define a public property to expose a style for the inner elements:
public Style StyleImage{get {if (_StyleButton == null){_StyleButton= new
Style();((IStateManager)_StyleButton).TrackViewState();}return _StyleImage;}
private Style _StyleImage;
//....usual suspects (override LoadViewState/SaveViewState)
//...somewhere about here we actually give some values to the style object before we use it:
_StyleImage.BorerStyle = BorderStyle.Solid;
_StyleImage.BorderColor Color.Red;
_StyleImage.BorderWidth = Unit.Pixel(1);
_StyleImage.Height = Unit.Pixel(16);
_StyleImage.Width = Unit.Pixel(16);
//Finally, apply the styling:
protected void override Render(HtmlTextWriter writer){
//And after ViewState has been saved...
//Apply the common style so there is no ViewState bloat.
for (int i=0;i<50;i++){
Image tImg = new Image();
tImg.ApplyStyle(_StyleImage;} // <--Apply the Style...
this.Controls.Add(tImg;}
}
}
Looks about right, no?
What I am suprised about in first place is to hear NOBODY complain the least that this would bloat
the outgoing stream with:
<img style='border:solid 1px red;width:16px;height:16px;margin:10px;'>...</img>
<img style='border:solid 1px red;width:16px;height:16px;margin:10px;'>...</img>
<img style='border:solid 1px red;width:16px;height:16px;margin:10px;'>...</img>
<img style='border:solid 1px red;width:16px;height:16px;margin:10px;'>...</img>
....
when:
<img class="MYCLASS">...</img>
<img class="MYCLASS">...</img>
<img class="MYCLASS">...</img>
<img class="MYCLASS">...</img>
would have done it -- and been more to the norms to boot.
Ok. ..So you say, that too can be done by using the Style.CssClass value to achieve this:
True...and I've been trying to use it. I'm just suprised that it doesn't raise more of a stink...
Moving right along...because that's not the question/point of this query...
The point is I've gotten myself into a fix trying to figure out what is the most graceful way to
design webcontrols...that rely on style sheets to look correct.
For example:
Currently I am mucking around designing a webcontrol for calendars in week/day/quarter/etc. views...
relies on a lot of different Styles to lay it all out.
If I render it with it with no Styling applied at all, just placement of cells, etc, it looks like
absolute hell.
It really needs default styling to be included in the control.
I can default each style to what is the css code for it -- or default it to point to a css file.
eg:
a) Style _CalendarCell = new Style(); _CalendarCell.BackColor =
Color.Almond;ForeColor=Color.Black...etc...
or:
b) Style _CalendarCell = new Style(); _CalendarCell.CssClass =
"STYLE_IN_SOME_SHEET_THAT_IS_CURRENTLY_MISSING"
If I use version a, that's nice -- it looks good, but I just bloated the poor guys viewstate for no
reason except laziness on my part.
If I use b), that's nicer to his VS -- but the first time he drops the control on his page, it looks
all wrong...nothing will be sized right, colored etc...and will be all out of whack till he/she
includes a CSS sheet.
That is assuming that he will find out how my control is put together and what needs to be styled
how.
c) Option 3...-- I could do b) -- but then also include a StyleSheet as a resource and feed it into
the page....So now the control would need to have a public bool that looks like:
bool IncludeResouceCSS=true;
that will include or not a <link src='ResourceHandler'> in the output or not -- which the user can
override.
Option 3 looks like the most flexible to me -- but I am having a lot of trouble putting it into
practice.
So about now, I am pretty frustrated by how the Net Framwork has not clearly shown a way to do this
type of control designing -- and would like input from people who have done this before...
Could someone who has done this before post your comments as what you suggest as a good way to
tackle this problem?
Thank you so much,
Sky