Liveupdate PollGadget

Here come my contribution to the gadgets competition in the “Open gadgets 2009” category. The gadget works with EPiServer XForm to get live results on a poll or question from the site. Meaning as people vote or answer your question on the site you can follow the result live on the dashboard. You can connect the gadget to any XForm and onthe XForm you can use any any field you wish to follow live. You also have the ability to turn off the live update if there is any performance issue or so. (I have tried to keep it pretty optimized so this will hopefully never be a problem). To configure the gadget you just use the edit menu on the gadget (The little arrow in the upper right corner of the gadget) and set its properties. This means you can have many of this gadgettype with different data working at the same time on the dashboard. It also only updates if there is any change in the data and never updates if the gadget is not visible (it is hidden on another tab or such).

Since I am very early with this gadget I give the possibility for others to see my code use parts of it to help with their development of the gadget. So I hope I get some competition credits for being early!! =)

Functionality

I will try to explain the functionality a little more in detail by explaining on how configure your own poll. Once the gadget is installed (see the installation instructions further down) you are now able to make your own polls.

First set up a new page (use the XForm page template or the demo) in the XForm properties create a new XForm and in this make sure you have a heading (and have “heading” as class since I currently search for this to be able to display heading in the gadget). Create a field like a radio or check boxes or what you like and note down what name you give it. Now save everything and view it in view mode. Should look something like this:

After this you go to the dashboard and add a new poll gadget. Edit the gadget and fill in the information. The pageId of your new page, the property name for the form (probably XForm if you use public templates) and the field name that you noted down earlier. Currently there is only 1 chart type (the pie chart).

Now save your settings and you should have a gadget with no data. So go to the page in view mode and do a few vote to get some data. And watch the magic.

Business Value

I think the business value of this gadget is pretty high. I can see a lot of scenarios where you would like some fast responses to questions be it on an external site or an intranet. This gives the possibility to follow these live and take actions when needed. It also looks pretty cool on the dashboard which might help partners sell EPiServer to customers that like flashy things =)

Technical Overview

The Poll gadget uses Google chart API as a graphical representation and renders the result as an image. This is the only external reference that is used in this gadget. The data comes as said from the XForms in EPiServer that uses data store as storage in EPiServer 6. The new data store should make these kinds of requests fast. The settings for the gadget is also stored in the new data store. The gadget also uses Linq to XML to get hold of the questions from the form XML. The ajaxrequest that is sent between the client and server to update the chart only send a small id to the server and gets json object with a link back.

Installation Instructions

1. Follow the CTP2 installation instructions to install CTP2 CTP2 install instructions. Also install Globalized public template content.
2. Open the poll zip file and extract the content of in into the public templates folder for your CTP2 site.
3. Convert the project file to MVC project. Info on how to do this you can find here: How to create a gadget – By Ted Nyberg Also do the step with web.config (adding the public template assembly).
4. Open the project in Visual Studio and include the 4 folders Content, Controllers, Models and Views to the project by right clicking and choose “Include in Project” on the folders.
5. Add reference to EPiServer.Shell, EPiServer.Data (found by browse to bin folder), system.web.mvc and system.runtime.serialization (found on the .NET tab).
6. Build the solution, go the the dashboard and you will see your poll gadget. (Even though it has no data yet, since you probably haven’t visited the demo page to use the Xform)

Feel free to ask any questions about the installation and I will try to help and update this. (Sorry for not beeing the ultimate installer guy and making some cool installer).

Download the Code here: Download

How to find information on EPiServer Problems

When working with EPiServer at least earlier a big problem has been finding good help when you need to develop something. Like “How do I <insert problem> in EPiServer. Is there any examples I can look at?”. Some things might still be a problem to find but it is alot of information out there, you only need a way to find it. I will try to write of some ways to find the information you need.

Google

Off cause Google is always a good place to start. If you are lucky there is some nice results there and you can go home and develop happily. Sometimes though the really good results is not on the first page (might be some hard to find blog like mine) or are a part of a big result from like EpiServer world which might not show unless you go deeper into all results with multiple pages.The information probably is there somewhere in a result string but might be faster and easier to instead go down and check the top sources themselves directly instead.

EPiServer World

EPiServer World is a very good place to search for information. First it have a lot of information in blogs. A lot of very good developers have a alot of nice blog posts about various problems that they have found solutions on. To find information in the blog i suggest doing a search on EPiServer world page. You will also find results from forum posts, articles and episerver.com (White papers and such). And if you don’t find the result here or in any of the below links its a good thing to post a question in the forum. That way also other developers can see the question and answer of the problem you have, so they can find in when they need.

EPiServer Wiki

EPiServer Wiki is a newly started  wiki that will grow lot ain the future when people start using (at the moment it is pretty unknown). To contribute to this wiki you only need an EPiSevrer World account and then you can start write good information. i hope this will be a huge database of good stuff about EPiServer. Go there and try a search and see if you get the result you want. At the moment there is no developer information but I hope that will change.

EPiServer SDK

EPiServer SDK in an early version was extremely flat and really did not give that super much information. Sure you could find some nice information there depending on what you where looking at but it had a lot lacking. This have improved some lately and there are more helpful information here now even if it still lacks a bit. There are people that have as a job to create SDK content here so more come up every day.

EPiCode, EPiServer LABS and EPiServer Research

EPiCode, EPiServer Labs and EPiServer Research is a great place if you are looking for some modules that you think would be good or other new and cool features that is not officially supported but would fit your project perfectly. Most projects you find on these sites are Open Source projects that you can download, install and use on your site. It is very good to have some basic knowledge on the projects here so that you don’t do the same work yourself that have already been done. Its very much worth the time to visit these!

Livechat with EPiServer developers, support and partners

Livechat with EPiServer developers is a very nice way if you need fast information on a problem and have not been able to find in in your searches. In this IRC channel you will find EPiServer employees, EPiServer Partners and more that discuss EPiServer all day long so this is a really nice place if you have an urgent question. Or want to help other people with their urgent questions.

I hope I have helped you to find the solution to your EPiServer problem!

Websites and Accessibility

I have just been to a workshop on accessibility lead by two persons with different sight handicaps. One that are working and using dayly readspeakers and one that uses zoom tool at work to be able to read and navigate the content of a website. They told us alot about what to take into consideration when creating a site and also what to stop doing. It was only a 2 hour workshop but it was very insightfull and told alot. The readspeaker that they used was JAWS and the zoom tool was Dolphin.

Some information from the meeting

Spending time on a website for functionality that reads the content automatically without using a readspeaker tool like JAWS is a big waste of time for their targetgroup. If the have disability, they have their own tools and if they are on a computer without their tools they wont be able to get to the browser or go the the webpage anyways. There might be other uses for such a tool like targetgroups that are weak in the language of the webpage and might benefit for hearing it instead of reading it, but most likly are not worth the developing time.

There are however alot to think about when building a webpage that have  abig beneficial effect towards readspeakers and I will lise some of them here.

Use  headings in a good structured way. Many sightdisabled persons navigate webpages using headings. Headings give a good structured overview of the page and what content it contains. Readspeakers have good tools for jumping between headings and this is the primary way they navigate a page. Also FireFox, Opera (and maybe more browsers) have toosl for testing this by only displaying a index of all headings on a page, try this to see that the page looks good and understandable (where to get what information) with only headings.

Another good thing is bringing back Anchor links to part of the page and have a index in the top (remember to have good titles on the links). That way  they can find what information or section of the page they need easily.

For zooming tools the website should not have too much empty spaces, flash/silverlight applications and such. If flash/silverlight is needed onthe page try different zoom tools on the page so that the applications zoom good. (sometimes they can even crash the zoom tool).

For more advanced help with accessibility you should really look inteo WAI-ARIA. Their comment on WAI-ARIA was that they ahd not had any experience with it but they said it sounded great, and a thing they really look forward too in the future. WAI-ARIA is still a very new technology to use and as such might be hard to find examples on how to, but it is worth looking in to if you want an accessible website.

Links

General information

W3C information on all WAI standards

WAI-ARIA information

Here is a link on for figuring out which browsers today have support for WAI-ARIA. Im not sure though on which rate this page is updated.

WAI-ARIA browser support

Video: Todd Kloots: “Developing Accessible Widgets Using ARIA”

EPiServerdagen 2009

EPiServerday 2009 had some seminaries with accessibility in swedish. So if you understand swedish here are some links for these:

PDF: Presentationerna för seminariet dag 2 accessibility i och med EPiServer

Video: Tillgänglihet 2010 – så skapar du webbplatsen alla kan använda

Video: Checklista inför de nya kraven på tillgänglighet 2010

Video: 2000-talet tillgänglighet på webben (With: Olle Ohlsson, W3C)

Video: EPiServer CMS och Tillgänglighet (With: Peter Sunna, EPiServer )

I hope that information will be usefull to you also, and please ask any questions you have and I might be able to help. I might continue and post more about this in the future.

List of editors

Time to take a look at my first list of WYSIWYYG editors. to start ill just post the list as is with no ordering or comments. These are a list of unchecked editors.  I just listed as many editors I could find with some basic criteria. Firefox and Internet Explorer enabled and not like PHP, JAVA, or such serverside only. (since i will use asp.net for development).

Here is the list of the 28 WYSIWYG editors in the first line-up. please contribute with any extra editors you know of that could fit the list and is worthy of looking at.

Active Up Html TextBox
Active Up Html TextBox

Solmetra SPAW Editor
Solmetra SPAW Editor

Whizzywig
Whizzywig

Xinha
Xinha

Asbru Web Content Editor
Asbru Web Content Editor

Cute Editor for .Net
Cute Editor for .Net

QWebEditor
QWebEditor

Telerik RadEditor
Telerik RadEditor

WYSIWYGPro
WYSIWYGPro

Web Wiz Rich Text Editor
Web Wiz Rich Text Editor

Freetextbox
Freetextbox

OpenWYSIWYG
OpenWYSIWYG

NicEdit
NicEdit

EditLive
EditLive

Sferyx Jsyndrome HTMLEditor
Sferyx Jsyndrome HTMLEditor

Xopus
Xopus

Edit-on Pro
Edit-on Pro

Inspire Webedit
Inspire Webedit

Ektron eWebEditpro
Ektron eWebEditpro

Devexpress
Devexpress

TinyMCE
TinyMCE

FCKEditor
FCKEditor

Xstandard
Xstandard

Obout Editor
Obout Editor

Yahoo:s Editor
Yahoo YUI Editor

Component Art
Component Art

InnovaStudio WYSIWYG Editor
InnovaStudio WYSIWYG Editor

Inspire Webedit
Inspire Webedit

Some of these did almost autofail within seconds after opening the page and starting to evaluate the editor later in the evaluation process. But we felt it needed to atleast take a look at them so that we dont miss a WYSIWYG editor that is good.

The WYSIWYG work begins

Well it has been quite some time since I last wrote anything as you can see. and it is time for me and for that I am sorry. I will not make any attempts to promise more postings but I will continue and tell you how this WYSIWYG process have been doing and the results.

The WYSIWYG work went on ice for a long time to be restarted early this year. and the first work was to figure out how we are going to achieve this.

First step: First step is to just brainstorm and define what is needed. We had two brainstorm areas that was requirements and list of editors. We just made a big list of all requirements or just questions like “Do we have keyboard navigation as a requirement?”. And for the editors we made a list of all editors we could find that had a remote possibility to be considered. In the editorslist we posted the name of the editor and a link to where there are more information on the editor on the web.

Second step: First step is as always research. We had to get a first requirements list and also a list of all the possible editors we could think of. With the requirements work we first identified some areas on what to write requirements on before we got into the meaty parts. This was the results of our requirement areas:

• License model, pricing and company/organizational aspects
  Legal stuff and such. Like if it is a part of some fancy CMS it might be a problem etc.
• Platform , browser, script and language support
  To make sure we can use the editor where we want to and that our target group of users can use it
• Customizability
  Make sure that the parts of editor that we want to customize can be customized
• Documentation and Support
  Make sure there are good documentation and support for the editor
• Accessibility of user interface
  Check accessibility parameters like keyboard navigation and such for the editor.
• Plugin Support
  Make sure we can make plugins for the parts we need and maybe also make sure there are some public plugins we can use/look at.
• CSS Support
  Make sure the editor has good CSS Support
• Code Rendering and Content Creation
  Look at the code the editor renders with its default functionality and make sure it is of good quality
• Formatting Options
  Detailed look at what elements the editor can create and what attributes it uses at default installation.
• Specific Requirements
  All other requirements that does not fit under the above headings.

Next time we will dive a little deeper.

The search begins!

I have started (small scale at first) the search for two gib base components needed for good CMS development.The first thing I need is a good erb based WYSIWYG editor that can match my

criterias, but I also want to start search for a good Ajax/Javascript library. First if they cost money should not be a big issue the main goal is quality. Cost and time is of seconday priority.

How to choose an WYSIWYG editor.
On the market today there is loooads of WYSIWYG editors that say thay they are the best in what they do and it is impossible to pick 1 perfect WYSIWYG editor match all my criterias. So the

process of choosing the WYSIWYG editor will be to first get a selection of 10:ish editors to look at a bit more then from them maybe 3-6 editors that will be more deeply anylized and in the end

pick the most fitting one.
My criterias for the editor is:
*Good browser support.
Internet Explorer 6.0+, FireFox 1.0+ is the most important and a must. But support for Safari, opera and Netscape is a good bonus other smaller browsers will not be taken into consideration.

*Configurability
The WYSIWYG editor must be easy to configure and support a good framework to both configure apperance, wich tools to use and also give possibilities to create plugins.

*Platform
The Editor must be within the scope of Javascript and/or ASP.NET. it should not use much activex:s or such unless it is optional plugins (like adding movies (youtube should not need it?), Silverlight, Adobe Flash, Ajax to the content or such).

Ok my first step has a little prerequirement. I need good lists of editors so that I can make a selection to continue looking.

Here I have some links with WYSIWYG editors:

Geniisofts WYSIWYG editor list
Wikipedia List of HTML Editors
Evaluation of WYSIWYG editors (2007)
WYSIWYG Text Editors Reviewed
9 of the best Rich Text editors reviewed

And also want to add this editor to my list: Obout Editor for ASP.NET 2.0

Now its time to start get a list of about 10 editors.. that list and more in the future.

Hold tight!!

Paging in Episerver

Paging with Episerver PageList

When you want a list of some sort (Search news, blog, …) and it is getting big you need to implemnt paging. This can be done very easily if you are yousing a Episerver PageList control. The only thing you do is add 2 properties paging and PagesPerPagingItem:

<EPiServer:PageList 
        ID=”SearchResult” runat=”server”
        Paging=”true”  
        PagesPerPagingItem=”15″
        SortOrder=”PublishedDescending”>

That way you will have automatic paging active. BUT! at first you will notice if you are using version 4.61 that the paging isnt working. you get the same page (the first page) whatever page number you click. This is because you need to rebind ans such on postback too. This might be fixed in CMS 5 though.

Paging with asp.net Repeater

Some blogs are made so that all posts or / and comments are made of Episerver XForm posts. To make paging of these I suggest using repeater and PagedDataSource. I found a great article about this that I used the first time. The article is written by Harrison Enholm and explains good how to use it. I added some to this for example number buttons for the pages:

for (int i = 0; i < pages; i++)
{
hl = new LinkButton();
hl.Command += new CommandEventHandler(navClick);
hl.CommandName = “cmdPage_Click”;
hl.CommandArgument = i.ToString();
hl.Text = (i + 1).ToString();
if ((i == 0) && (!IsPostBack))
{
hl.ToolTip = “Aktuell sida”
}
else
{
hl.ToolTip = “Sidan “ + (i + 1).ToString();
}
hl.ID = “PageNumberButton” + (i + 1).ToString();
hl.EnableViewState = false;
pageNumbers.Controls.Add(hl);
l = new Literal();
l.Text = ” “;
l.ID = “SpaceLiteral” + (i + 1).ToString();
pageNumbers.Controls.Add(l);
}

 That is I have a placeholder beween the prev and next buttons and then in the above loop I add a number linkbutton for each page with a command where I can move the visitor to the page. This and a First Last buttons makes it pretty much equal in functionality as the PageList paging. For more code pls contact me =)

Enjoy! 

The blogging begins!

This is my first blog entry so I will introduce myself a little and such to start.

I am a webdeveloper with a big gaming interest and around 30 years of age (+/- 5 years). In my webdevelopment profession I normally work with asp.net (C#), Episerver content management system but also alot others like old ASP (VB), PHP, Java, Lotus Notes and more. 

As a gamer I have a long history of playing games. First I played alot as a young boy on Amiga (500-1200) (Games like Sim City, Dogs of War, Giana Sisters, Bouble Bouble, Prince of Persia, Civilization, Sensible Soccer, Supercars and more). After that I moved on to a PC pretty late but I liked it alot. I started playing mainly 2 games Unreal Tournament (with some serious clan play) And Asherons Call starting in the Beta. I played those 2 games alot (UT I played about 3 years in serious way). After that I tried a few different games , A little Everquest and others until I started playing a game called Dark Age of Camelot. First starting the US Beta and then after that Jumping to the EU beta (The hours US players where playing sucked).

Dark Age of Camelot was my main game for a long time playing Hibernia on Excalibur mainly. I started a guild in beta called Terra Dominus that still lives as a multigaming guild. (My in game name was Moric annunaki and later Moric Forgeworker aka Iaivenda). But later this game also got a bit boring and I was playing alot of different games back and forth and at the same time i met my wife and had children n such.

Last 1,5 years my gaming history has been Cabal Online in the guild Section9 on Mars. As 1 of the top crafters (Swippie aka (GA) Swippie) i have been having a great time playing and will continue so.

Well thats all for my first post. Hopefully more will come soon! =)