torsdag 20 november 2008

AKS Adapters from Hi Software NO GOOD ? -- corrected .. yes .. it has it's faults but stiull

!! The performance is not an issue, it is actually good for performance

In fact, it probably washes because the outputted page will load faster so any hit taken on the rendering will be recovered in the page load.
Performance really isn't much of a consideration here, the outputted HTML is a big deal !!

I have looked into the AKS Adapters for Accessability and I am a bit confused about the way it’s implemented.
An example is the advanced search adapter.

It overrides the rendering of all controls with the namespace of System.Web.UI.WebControls.WebParts.WebPart

ALL of them.. so all with that particular namespace will go inside this adapters Render function and do as it says.
First of all it does this:

StringBuilder sb = new StringBuilder();
HtmlTextWriter writer = new HtmlTextWriter(new StringWriter(sb));
base.Render(writer);

Then comes the magic :
sb.Replace("<select name="\" id="\" title="\" for="\" id="\">Property </label><select name=\"ctl00$m$g_4410c332_663f_487c_aa9d_64779dcfa650$ASB_PS_plb_0\" id=\"ctl00_m_g_4410c332_663f_487c_aa9d_64779dcfa650_ASB_PS_plb_0\" title=\"Pick a Property\"");


3 times ..
First of all it always search and tries to replace the output html. Is it good performance ? Every webpart that is rendered on the page will go through this. It don’t look for a particular type of a webpart but every one.
Second it looks for hard coded name attributes and id’s so if you have moved that advanced search anywhere else than where it was from the beginning it will fail.
The text strings are hard coded as well. So any translation will fail.

After it has done all this it will write the output from the stringbuilder

output.Write(sb.ToString());

I don’t feel that this is the best adapters you can put on you MOSS installation but I may be wrong. Is there not any performance loss in replacing the output stream then it is not totally wrong though the other things I mentioned about this may be enough to not install these adapters on your MOSS installation.
There are other ways to do this. Me myself has done a asp:menu modification adapter( build on the asp.menu:adpapter with better support for global css) and am close to finish a webpart zone renderer ( for the end user only, internet site) that works like a charm without hard coded stuff such as id’s and translations. And it does NOT replace the output stream. As I said I may be wrong and it would really be nice to get as much comments as possible on this.

onsdag 13 augusti 2008

IE 7 and that zooming feature

Vacation, vacation, holiday, sunshine, lovely times and then rain, rain, rain. That's sweden in the summer. Especially now when we all are in a climate change and the nature's gone totally bonkers. I think it's like that in the winter time as well now. Yesterday winter was filled with snow and ice, now there is only rain. Wonder why people gets depressed during the winter. Darkness AND rain. Back in the days we had snow to lighten things up.

Anyhow .... I came back from the summer rain and stepped inside the bunker to work with this project I've been involved with for some time now. I noticed in the interface I was building when using the zooming feature the background images in my web parts looked very strange indeed. It couldn't calculate the rendering accurate.

I tried using .gif instead of .png as I knew that IE had troubles with .png before but that didn't help. I tried using several css-fixes with height and that did not work. But when I used position:relative on the element holding the web part something happened. As I was zooming the background-image looked as it should be but the web part was now outside the surrounding area. I moved the position:relative to the first element after the body and then the zooming worked, everything worked fine.

NOT really.

When editing the web parts, dragging the webparts between the different web part zones, all I got was a lot of javascript errors. It seemed that the javascript function that handles the drag & drop feature could not handle the position:relative on the top element. A fix on that was to put an editingpanel on the top in the masterpage that rendered a style element. Inside that element put on the position:static.

<PublishingWebControls:editmodepanel runat="server" id="editModePanel">
<style type="text/css">
#page { position:static !important; }
</style>
</PublishingWebControls:editmodepanel>
<!-- the page holder, layout.css -->
<div id="page">

The #page element now has css attribute of position:relative in the css file and when editing web parts the #page will have a temporarily attribute of postition:static. Ok, when using the zoom feature in edit mode(IE7), stuff will maybe look a bit weird but that's a price I am willing to pay to get a nice zooming look for the end user.

måndag 12 maj 2008

Design Accessible Web Sites , A book worth spending some time with

I recently read a book that I gladly can recommend to all people that are developing GUI on the web. It is called Design Accessible Web Sites by Jeremy J. Sydik and in it you will learn about accessible HTML, audio and multimedia content. Good understandable examples and more than just accessiblity for the disabled people. To follow certain guide lines, all people will benifit from it not just the ones that really needs it.
Wondering when the Sharepoint crew will take some of this under consideration?

torsdag 10 april 2008

MOSS - Put the CSS files accessible on the hard drive ?

The problem
We were having great difficulties with the css-files when using the BLOBCACHE for the MOSS because when using the style library that exists inside the MOSS platform it puts references in the database even if we had configured it not to. So the BLOB didn't get all the content for some of the css files for some reason and the design fell apart at as a result of the great BLOB. WE (I) also had problems with changing the css files on the hdd, instead I had to open the Sharepoint Designer ( ohh nooooo !! ) for changing and testing the design on my local vpc. Then I had to take the css code, copy it from the files one by one and into a new files on the hdd to put it back into the development project code base.

The solution
Then when designing the login page I found out that user that wasn't logged in could not access the files that was hidden inside the Style Library for logged on users only.
So we moved the css files inside the /_layout// folder instead. Then the BLOB cache worked AND I could edit the css files with notepad or Visual Studio or any tool that I wanted because every save had an instant impact. ( turning off the cache that is )

I don't know why so many examples seems to recommend the css files to be in the Style Library and not directly accessibly in the layout folder. Maybe it's because of the use of the workflows and such inside the content structure, but does anyone really want to use those in the site design? My experience is that we do the design and not the customers. We don't want our customers to rock the design boat we are sitting in, and use Sharepoint Designer to **** up our files ? Does anyone know, then I would really like to have your opinion.

Simple little thing but it made my day a lot easier.

tisdag 25 mars 2008

Gaps under images in HTML

Somtimes when you put an image in your html code you get a small gap under it. No matter how much you are trying to mixture with it's padding or margin you can't get that gap to disappear.

The gap is probably a gap in your code and browsers ( specially IE ) can be very sensitive.

Example:

This is how you code for the gap to appear


<div >

<img id="img" alt="testimage" src="Images/test.gif" />

</div>

This code is the correct one. No spaces

<div ><img id="img" alt="testimage" src="Images/test.gif" /></div>


There you go

Do it and erase the gap..

//Magnus


torsdag 20 mars 2008

Simple Print Preview Button in MOSS

Friday morning and a snow storm is raging outside my window. I thought I was going to jump up from my bed and start this first free day on the easter holiday by going outside running, but instead I find myself on the computer once again. Well, there is no better way to start the morning with some blogging and a cup of coffee, ey, as I found a new brand that taste so good I can't complain really. It's like a hockey game in my mouth.



Print Preview Button
When in the world of MOSS, WSS you want to add a print preview button without the effort of buildning new user controls and adding server code. Just a simple client code snippet in your masterpage and it's done.


First you need a function that opens a print preview window. Add it in a .js file or in the header of your masterpage.






Then you need a print preview button(link, image) that runs your javascript function when clicking on it.





Finally you need to add a little code snippet in the head area of your master page.




After you have clicked on this button a new window will open, this last snippet will add your print.css and the page will look as in "print mode".

This is just a simple little client code that maybe will make the life a little bit easier for some of you.
//Mag

ASP.NET, MOSS Web Parts with rounded corners

Some of you that has worked with ASP.NET, specially with MOSS 2007 or WSS has been troubled with the fact that you will have to build your own Web Parts renderer to be able to get Web Parts with rounded corners, both on top and body.

Just by adding the correct CSS attributes and work with a set of images then you are able to get the result you are after. The only thing is that images will be larger and not repeatable that is preferable, but with a little skill in image optimization that shouldn't be an issue.

The Project
I have been working with a large intranet project ( MOSS 2007 ) that required such an implementation because the customer was not willing to pay for the amount of time spending on recreating the webpart renderer to get Web Parts with Rounded Corners, then I decided to dig a bit deeper into this issue and told myself that nothing is impossible and I trew myself over this challenge.


The solution
This was a MOSS implementation, I used a css file to override the standard core.css and a set of images. This perticular codesnippet is optimized for IE7 .

The code snippet images are links. So click on them and they will expand.

The Header
1.First set the left background image on the header, you will have to use !important to override the previous css settings in the master css file. You will need an image for the left part of the header and it has to be wide. Mine was about 800px.



2. Set the right background image in the same area of the header by using the h3 element. The right backround image should be a small image, just covering the right corner. It will render over the left background image.



3. if the user has edit rights on the web part a second will appear in the table rendering the web part. Then we'll have to set the background on that td and close the gap between.



4. Set the div:s that contains the menu image for editing items and positioning to the left closing the gap between the two td:s .. wee need a background image like the one in the second to hide the gap beetween them.



The Body
When adding your web part and you want to have the border-like body you will have to select the border appearance in the crome box. Then the classname ms-WPBorder will render in the body .

1. Adding the right image for the , right aligned. This one should be narrow but it should have a large height covering high web parts.



2. Adding the left background image in the , left aligned. This image should be both wide and high.



There you will be able to smooth things up on your MOSS installation without having taking the effort rebuilding the web part renderer and disabling the WebPart Javascript DOOM that enables a lot of stuff inside the MOSS platform. This is one way to do it. I have got several more.