Public Poll/advice on designing Controls that need Styles to look good...How?!?

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
 
B

bruce barker

webcontrols have the CssClass property, which is the techinque for specifing
the class, controls like the grid will have several properties for setting
the style. if the class is not specified, then inline style is used.

-- bruce (sqlwork.com)



Sky Sigal said:
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;'>... said:
<img style='border:solid 1px
red;width:16px;height:16px;margin:10px;'>... said:
<img style='border:solid 1px
 
S

Sky Sigal

And that doesn't BOTHER anyone??

Let's say you are Rendering a year calendar (7days*6rows*12months)=504cells.
Now style that up with nothing too fancy:
style='background-color:red;font-size:7pt;font-style:underline;font-weight:bold;'

which is 74 chars... -- which leads to 30k -- just for the cell. --Now add a ITemplate within, some
text and easily duplicate the num of characters ... 200 is more like it in the end.

200 x 504 = 100k.

Thats 20 seconds of download on a 54k modem -- and we havn't even discussed ViewState.

That doesn't strike anybody as wrong? Lazy?


What happened to giving a s**t about the quality of html/css we are ejecting -- or are we no longer
suppossed to care, since it is all done somewhere in the framework, and its no longer our duty to
investigate/modify...or worse "interfere" with the Framework? Because that really really gets my
goat. But maybe its because I used to do php day in day out.


Anybody have arguments to give as to why this is ok? Or if you agree with me that its not great, any
suggestions as to what we can do about it?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,818
Messages
2,569,732
Members
45,691
Latest member
Dick331194

Latest Threads

Top