Twipot.com is (for now) a simple Tetris game written in SL3, with a social dimensions : players can login using Twitter API. When signed in, their best score is saved and they can compare with their friends/followers or with the whole Twitter community.

To test it, you must install the Silverlight 3 beta plugin available for Windows and for Mac.

All you have to do is in the web.config file of the domain.com website add the attribute “domain” in the Forms tag, like this :

<forms … domain=”.domain.com” />

Elle est toutefois ancienne et n’a pas évolué avec la demande pourtant toujours croissante des utilisateurs pour plus de convivialité. Notamment, elle nécessite l’affichage de plusieurs pages, là où l’on sait que chaque nouvelle page, chaque seconde perdue est un risque supplémentaire que l’utilisateur quitte le site sans passer à l’acte.

Nous avons donc essayé de nous affranchir pour le moins de la première page, celle du choix du moyen de paiement, ou tout du moins de l’intégrer mieux dans le processus d’achat via un affichage en Ajax (et donc un chargement de page en moins). Mais faire cela en .NET n’a pas été un chemin sans écueil.

Le résultat obtenu ressemblera à cela :

Nous utilisons dans cet exemple les ASPXCallBack de Devexpress, mais cela reste tout à fait faisable avec des CallBack classiques.

Côté ASPX, vous devez disposer :

• d’un bouton déclenchant l’affichage de la popup
• d’un ASPXCallback nommé cal_paiement
• d’une popup nommée pop_paiement avec comme contenu un div <div id=”div_paiement”></div> pour l’instant vide

Côté Code behind, une fonction permettant d’appeler la DLL de SIPS et renvoyer le code à afficher.

Le code sur le bouton est simple

cal_paiement.SendCallback();
pop_paiement.Show();

Il déclenche le CallBack du CallBackPanel.

protected void cba_paiement_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e)
    {
        string pathfile = globals.SIPS_Pathfile;
        string request_exe = globals.SIPS_Request_exe;
        string amount = 1500;
        string parm = "merchant_id=" + globals.SIPS_MerchantID;
        parm += " merchant_country=fr";
        parm += " amount=" + amount;
        parm += " currency_code=978"; //978 = EUR
        parm += " caddie=1";
        parm += " pathfile=" + pathfile;
        parm += " data=";
        Execute transaction = new Execute();
        transaction.cmdLine = request_exe;
        transaction.parameters = parm;
        // --Appel de l'activeX pour executer request
        string result = transaction.ExecuteApp();
        // --Sortie de la fonction executeApp() : !code!error!buffer!
        // --- code=0: la fonction génère une page html contenue dans la variable buffer
        // --- code=-1 : La fonction retourne un message d'erreur dans la variable error
        string[] tableau = result.Split('!');
        string code = tableau[1];
        if (code != "0")
            e.Result = tableau[2];
        else
            e.Result = tableau[3];
    }

Le callBack renvoie dans e.Result le code html qui nous a été renvoyé par la DLL de SIPS. Nous pensions au début utiliser un UpdatePanel classique. Toutefois un problème s’est présenté. Le code retourné par la DLL est en fait un formulaire “<FORM></FORM>”. Or si l’on clique sur un des boutons (les logos CB) à l’intérieur de ce formulaire, l’action du formulaire principal de .NET (<FORM runat=”server”>) est exécuté, entraînant un rafraîchissement de la page au lieu de nous envoyer vers le serveur de paiement.

C’est pourquoi nous avons utilisé un CallBack, et sa fonctionnalité d’exécuter le javascript aprés que son CallBack ait été effectué. Le but va être de changer le “Action” du formulaire ASP.NET par l’adresse du formulaire de SIPS. Pour plus d’informations, voir cet article.

Voilà donc le code pour l’évènement CallbackComplete de l’ASPXCallBackPanel

	//Displaying the SIPS form in our container layer
	document.getElementById('div_paiement').innerHTML= e.result;
	// parsing code to get the "action" value.
	// ok it is rough, will be tuned later on
	var formAction = e.result.substring(e.result.indexOf('ACTION=')+8);
	formAction = formAction.substring(0,formAction.indexOf(' ')-1);
	// changes the action value for the ASP.NET form tag
	document.forms[0].action = formAction;

Remarques sur ce code : il conviendra, si l’utilisateur ferme la popup sans cliquer sur un logo de restaurer la valeur initiale de action pour le formulaire ASP.NET

Ce billet vous permettra d’obtenir une page aspx entièrement validée par le validateur W3C

Tout d’abord, je conseille fortement d’installer l’extension Firefox HTML Validator:

Ensuite, il faut définir le DTD (DocType qui définit les règles à respecter), les plus courament utilisés sont :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
ou
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Étant donné que ASP.net génère systématiquement un attribut “name” à la balise “form” (rumat=’server’) et que le DTD XHTML Strict ne reconnaît pas cet attribut pour les balises “form”,
il est donc préférable de choisir le DTD Transitional qui est moins restrictif.

De plus, ASP.net génère des noms de variables javascript commançant par “__” (double underscore) alors que tous les noms de variables déclarées doivent commencer par une lettre.
Par conséquent, des avertissements sont générés par HTML Validator:

Une des solutions est de créer une classe PageBase dans le but de faire hériter toutes vos autres pages:
public class PageBase : Page
{
protected override void Render(HtmlTextWriter writer)
{
System.IO.StringWriter stringWriter = new System.IO.StringWriter();
HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
base.Render(htmlWriter);
string html = stringWriter.ToString();
html = html.Replace(”id=\”__EVENTTARGET\”", “id=\”EVENTTARGET\”");
html = html.Replace(”id=\”__EVENTARGUMENT\”", “id=\”EVENTARGUMENT\”");
html = html.Replace(”id=\”__LASTFOCUS\”", “id=\”LASTFOCUS\”");
html = html.Replace(”id=\”__VIEWSTATE\”", “id=\”VIEWSTATE\”");
writer.Write(html);
}
}

Après quelques ajustements de votre code HTML que vous pourrez faire en suivant les indications de HTML Validator, vous allez pouvoir valider votre page sur le site http://validator.w3.org/ et obtenir le picto

2 - Administration Tab “tour”

Ok, hidden in the issue tracker page of the site, I finally manage to get the default admin password : it is “pa$$w0rd” (without the quotes).
Once logged in as administrator, two links appear in the right sidebar : Create Post and Create Page

So Oxite has a Page system. Pretty cool if you wish to use it as a CMS.

The new post page looks like this :

I could find a way to edit page but no way to edit a post … strange. Moreover, there is no wysiwyg editor at this time.
In the “About” page, the authors make it clear : this is just a sample program and not (yet ?) a real-life solution. For instance, to edit and post blogs, they use Windows Live Writer.

I hope this project will go forward and provide a fair alternative to platforms like wordpress, in the ASP.NET world. I will keep an eye on it and will post again here if I see more interesting things.

Pour Phoceis, c’est une grosse nouvelle puisque nous utilisions jusqu’à présent Wordpress pour nos clients, dans le cadre de la réalisation de blogs ou de sites relativement simples. Vue notre expertise en .NET, l’arrivée d’Oxite pourrait peut-être changer la donne, à condition que ce dernier tienne la comparaison avec Wordpress. Je précise juste qu’Oxite est en version alpha, il faudra donc être indulgent et espérer qu’il saura fédérer une communauté de développeurs lui permettant d’atteindre le niveau de ses grands frères.

Dans la suite de ce billet, première prise en main, et premières impressions, sans filet.

1. Téléchargement et ouverture du code source

Le code source se télécharge depuis cette page. Un code d’un peu plus d’un méga qui une fois dézippé se présente sous la forme d’un projet Visual Studio, doublé d’une version Visual Web Developper Express : une bonne idée pour que les développeurs ne possédant pas une licence Visual Studio puissent tout de même partcipier au projet avec cette version gratuite de l’outil. L’installation du framework MVC de Microsoft est également nécessaire (lien).

Une fois ouvert le projet se présente comme cela :

Note : L’ouverture du projet avec Visual Studio Professional entraîne une erreur puisque ce dernier le gère pas les fichiers dbproj.

Le projet compile correctement et la page d’accueil s’affiche correctement :

Et aprés … pour l’instant le néant car je n’ai pour l’instant pas trouvé le moyen d’accéder à l’admin … une version alpha de chez alpha donc … Dès que j’arrive à aller plus loin, je posterai un nouveau billet

Heureusement, Microsoft a développé un module “URL rewrite” pour IIS7 (à télécharger ici) qui permet de générer des règles de réécriture simplement.

Il est également possible de tester les patterns directement.

Si vous utilisez de l’ajax dans vos pages, n’oublier pas de cocher la case “Stop processing of subsequent rules”

Here is the code we use to display 3 posts of this blog on the official phoceis.com website (in a literal named lit_blog)

RssDocument rdoc = RssToolkit.Rss.RssDocument.Load(new System.Uri("http://blog.phoceis.com/feed/rss/"));
DataView dv = (DataView) rdoc.SelectItems(3);
lit_blog.Text = "
<ul>";
foreach (DataRow dr in dv.Table.Rows)
{
	lit_blog.Text += "
	<li><a href='" + dr["link"].ToString() + "' target="_blank">" + dr["title"].ToString() + "</a></li>";
}
lit_blog.Text += "</ul>";

You can download the source code of this file here.
Please note : to get this to work, you may serve the bin-release/index.htm through a webserver (IIS, Apache, whatever …)

Here is the mxml file of the project

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="660" height="580" backgroundColor="white">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import flash.sampler.NewObjectSample;
 
			import flash.display.*;
			import flash.events.*;
			import flash.text.*;
			import timber.demo.*;
			import choppingblock.video.*;
 
			private var _youTubeLoader:YouTubeLoader;
			private var _timer:Timer;
			private var _draggingSeeker:Boolean = false;
			function init():void {
				_youTubeLoader = new YouTubeLoader(); 
				_youTubeLoader.addEventListener(YouTubeLoaderEvent.LOADED, youTubePlayerLoadedHandler, false, 0, true);
				_youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler, false, 0, true);
				_youTubeLoader.create();
				_youTubeLoader.x = 5;
				_youTubeLoader.y = 5 ;
				mainUI.addChild(_youTubeLoader);
				_timer = new Timer(500);
				_timer.addEventListener(TimerEvent.TIMER,timerTick);
			}
 
			private function youTubePlayerLoadedHandler (event:YouTubeLoaderEvent):void{
				_youTubeLoader.loadVideoById("SQ1ys3MxaEM");
 
			};
 
			private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
			if (event.state=="playing") {
				sli_seek.visible = true;
				sli_seek.minimum = 0;
				sli_seek.maximum = _youTubeLoader.getDuration();
				sli_seek.value=0;
				btn_pause.visible=true;				
				_timer.start();
			}
			};
 
			private function timerTick(event:TimerEvent):void {
				if (!_draggingSeeker) {
				sli_seek.value = _youTubeLoader.getCurrentTime();
				}				
			}
 
			private function seekChanged():void {
				_youTubeLoader.seekTo(sli_seek.value);
			}
 
		]]>
	</mx:Script>
	<mx:UIComponent id="mainUI">
 
	</mx:UIComponent>
	<mx:HSlider id="sli_seek" x="150" height="30" y="485" visible="false" width="490" change="seekChanged()" thumbDrag="_draggingSeeker=true;" thumbRelease="_draggingSeeker=false;">
 
	</mx:HSlider>
 
	<mx:Button id="btn_play" x="5" y="490" visible="false"
              		useHandCursor="true"
              	overSkin="@Embed(source='../assets/playpause.swf', symbol='play_over')"
     			upSkin="@Embed(source='../assets/playpause.swf', symbol='play_up')" 
     			downSkin="@Embed(source='../assets/playpause.swf', symbol='play_down')"            	
              	click="_youTubeLoader.play();btn_pause.visible=true;btn_play.visible=false;"/>
	<mx:Button id="btn_pause" x="5" y="490" visible="false"
              		useHandCursor="true"
              	overSkin="@Embed(source='../assets/playpause.swf', symbol='pause_over')"
     			upSkin="@Embed(source='../assets/playpause.swf', symbol='pause_up')" 
     			downSkin="@Embed(source='../assets/playpause.swf', symbol='pause_down')"            	
              	click="_youTubeLoader.pause();btn_play.visible=true;btn_pause.visible=false;"/>              	
 
</mx:Application>