Har precis sett introduktionsfilmen som du hittar i releaselänken ovan och testkört själva editorn.
Man använder sig av HTML5-taggen Canvas för att rita upp scrollbars, de grafiska elementen samt även själva texten om jag förstått det hela rätt. Det gör att man kan finna funktioner som inte funnits på nät-applikationer innan. T ex kan de mäta längden på textsträngar och få texten att anpassa sig efter de omliggande panelerna och hur mycket utrymme som finns tillgängligt.
Prestandan på textediteringen blir med hjälp av Canvas-rendereringen väldigt god. I videon visas exempel på hur man redigerar en fil på över 30000 rader och det fortfarande går väldigt snabbt att skriva. Något vi inte sett på webben innan.
Även fast det är en tidig protoyp ser det mycket lovande ut och jag tror detta kan utvecklas till något riktigt häftigt. Senast för nån timme sen satt jag och försökte editera kod i en TinyMCE-editor som jag har konfigurerat själv och det är verkligen en stor möda. Det behövs något bättre på webben och Bespin kan vara svaret.
Målet med projektet är att skapa en produkt som kan mäta sig med med traditionella kodredigerare som körs i skrivbordsmiljö. Än är det nog läng väg kvar innan jag ska byta ut Visual Studio mot ett webbaserat alternativ, men kanske blir det tillräckligt bra i framtiden för att man ska göra viss del av sitt kodande ute i molnet. Möjligheten till att kollaborera många andra användare samtidigt i samma filer är minst sagt intressant.
I det första utförandet stöjder Bespin syntax highlighting för Javascript, HTML och CSS, men fler språk kommer att läggas till i senare versioner.
Man kan programmerar egna kommandon och på så sätt utöka editorn med egen funktionallitet. Det kommer även finnas en modell för att kunna dela dessa påbyggnader med andra användare.
Har precis fixat så att kodexempel i denna blogg får syntaxen framhävd med färger så den förhoppningsvis ska bli mer lättläst. Det engelska uttrycket är ju "syntax higlighting" men jag hade lite svårt att hitta en svensk motsvarighet först. Kristoffer på Bloggy hjälpte mig och tipsade om "syntaxmarkering", som fick blir titel på detta inlägg.
När jag sökte efter en metod att få till detta hittade jag några olika alternativ, i en tråd på Stack Overflow går man igenom några av dem.
Vissa tycker att det är en bra ide att märka upp koden med html och css i förhand, och spara den färdigformatterad i databasen. Detta kan man bland annat göra med ett plugin till Visual Studio som heter CopySourceASHtml. Jag dock att jag inte ville ha in detta i databasen utan att koden skulel sparas helt utan extra HTML och CSS. För om man vill ändra på det i efterhand så är det ju omständigt att behöva ändra alla gamla exempel.
Istället beslutade jag mig för att använda Javascript och att formatteringen ska ske i besökarens webbläsare. Uppritningen blir ju något långsammare, men de andra fördelarena var tillräckligt stora för att jag skulle gå på detta spåret.
Ett sådant javascript är google-code-prettify men eftersom det inte verkar ha stöd för C# så var det inget alternativ för denna blogg som har större delen av kodexemplen på det programmeringsspråket.
Istället valde jag samma som Scott Hanselman och bloggplattformen Wordpress använder sig av. Det heter SyntaxHighlighter och är utvecklat av Alex Gorbatchev.
Ett litet problem är dock att koden ska märkas upp på följande sätt och name inte är godkänt attribut på <pre>-taggen enligt XHTML-standarderna.
<pre name="code" class="javascript">
// the code
</pre>
Lars Corneliussen har dock fixat ett jQuery-plugin beautyOfCode som ändrar beteendet i SyntaxHighlighter så man istället kan använda följande struktur:
<pre class="code">
<code class="javascript">
// the code
</code>
</pre>
Än så länge har jag bara gjort om kodexemplena på förstasidan i bloggen till att använda syntaxmarkeringen. Ska fundera lite på hur jag ska ändra alla gamla exempel som fortfarande bara visas med en grå ruta.
När jag postade mitt förra inlägg så märkte jag att källkoden kunde formateras bättre. HTML-editorn TinyMCE som vi använder till att redigera inläggen stoppar som default in <br /> på alla radbryt och omger stycken med paragrafer. Bra när man skriver brödtext, men onödigt när man vill posta källkod. Jag ville hellre att kodexemplena skulle vara förformatterade utan någon extra HTML-uppmärkning.
Eftersom jag har tagit bort breaks i det förra inlägget kommer här en bild på hur det såg ut innan.
Samtidigt ville jag prova med att fixa syntax-formattering där nyckelorden får färger för bättre läsbarhet. Ska skriva mer om hur jag gjorde själva syntax-uppmärkningen i ett senare blogginlägg, men kan nämna att jag gjort detta med javascript hos besökaren. Uppdatering: Nu har jag skrivit klart bloggposten om javascript-biblioteket syntaxhl som jag avänder till att visa formatteringen i själva blogginläggen.
Nu till TinyMCE-pluggen som märker upp kodstyckena i databasen. Det heter syntaxhl finns att ladda hem på GitHub och går att läsa mer om hos skaparen Richard Grundy. Vid redigering ser det ut så här:
Som standard så omges koden med en textarea, något jag inte ville utan jag behövde en speciell uppmärkning för att fungera med den syntax-formatteraren jag valt. Hos Spencer Kellis hittade jag förklaring hur han hade gjort för att konfigurera TinyMCE med syntaxhl.
Först la jag syntaxhl i mappen plugin i TinyMCE. Sen modifierade jag syntax/js/dialog.js enligt följande för att få den uppmärkning jag efersträvade och inte textarea som den använder sig av som standard.
Blev nyligen kontaktad av Turbotrollet, med en fråga om hur hon skulle kunna lägga till en spalt med reklam längst ut till höger på hennes blogg. Hon har även lagt ut frågan tidigare på bloggen men inte kunnat hitta någon bra lösning än.
För att få till en sådant utseende på den befintliga designen hon har så tror jag att själva den behållare som heter #main bör breddas till typ 960 pixlar (nu är den 630). Sen ändra #sidebar så den har float:left och sedan lägga till ytterligare en div med float:right till höger om den och kalla den #ads.
Inte helt lätt alltså om man inte är duktig på html och css, vi brukar säga att CSS-positionering är ungefär lika lätt som kvantfysik ;)
Så mitt råd är nog att försöka hitta ett färdigt Wordpress-tema med den design som eftersökes. Vet att jag läste nyligen om nån svensk bloggare som gjorde om sin blogg ungefär så, men hittar inte länken.
Någon som har tips om bra Wordpress-tema att använda, som har en sådan högerspalt för reklam?
Att skapa hemsidor utan rullningslistor har varit en strävan inom viss webbdesign. Nu för tiden börjar folk vänja sig vid dem och det börjar till och med göras sidor som rullar i evighet.
Om man har en webbplats med olika långa sidor på, och innehållet dessutom är centrerat, så kan detta få till följd att sidan "hoppar" i sidled när man navigerar. Detta beror på att när scrollbarsen visas så minskas webbytan med ca 16px.
För att förhindra detta kan man som CSS-Tricks förklarar, ställa in i stilmallen att scrollbars alltid ska vara framme. Om innehållet är mindre än tillgänglig yta så blir rullisten inaktiv.
Kannan Sundarajan har skapat en "Rich Text Editor"-kontroll med ASP.NET AJAX och delat ut den med en MS-PL licens på CodePlex. Läs mer hos Kirti's blog för skärmskott och kolla in ett demo.
Ser ut att vara en någorlunda start. Men att det blir radbryt vid entertryckning istället för paragraf, att den inte stödjer XHTML och att den använder FONT-taggar tycker inte jag är så bra.
Förhoppningsvis utvecklas den fint av communityn så det är nog något att hålla ögonen på.
Jag kommer ihåg när man jobbade med klassisk ASP, och gick över till ASP.NET, att begreppet PostBack var rätt förvirrande. Typ: "Vadå ska varje sida posta tillbaks till sig själv?" Efter ett tag förstod man finessen och nu skulle skulle jag inte vilja byta tillbaks till hur föregångaren fungerade.
Ibland vill man dock kunna posta data från ett formulär till en annan URL, speciellt när man har att göra med betalväxlar (t ex Postens betalväxel), som ofta fungerar så.
PostBackUrl
I ASP.NET 1.1 var det rätt begränsade möjligheter men i 2.0 fick vi attributet PostBackUrl som kan sättas på Button, LinkButton och ImageButton. Har aldrig använt det själv men borde fungera bra.
HttpWebRequest
Med HttpWebRequest kan man skicka webbströmmar med data. Passar bäst om man vill att postningen ska ske i bakgrunden om jag förstått det rätt, och inte lika bra om man vill att webbläsaren ska följa URLen, som postningen sker till. Jag kan ha fel här för har inte provat så mycket med denna metod. Här är ett exempel som verkar rätt lätt att förstå.
Med JavaScript
Man kan lägga till ett extra formulär på sidan och posta detta genom att registrera ett javascript, från koden bakom, ungefär så här.
Här är ett exempel på hur man kan använda HttpContext för att helt enkelt bygga ihop formuläret själv med html-taggar. Det är skrivet av Jigar Desai och finns att ladda hem på C# Corner.
Här kommer lätt modifierad variant:
using System; using System.Web; using System.Text; using System.Collections.Specialized;
/// <summary> /// Summary description for RemotePost /// </summary>
public class RemotePost { private NameValueCollection inputs = new NameValueCollection();
RemotePost remotePost = new RemotePost(); remotePost.Url = "http://theRemoteDomain/Page.aspx"; remotePost.Add("field1","This is my first value"); remotePost.Add("field2","And another one"); remotePost.Post();
Imorgon ska jag lära en kille grunderna i webb-design och html-programmering. Tänkte även att detta kan vara något att skriva om i bloggen, så andra läsare kan få nytta av detta.
Ett enkelt exempel i XHTML
Nu ikväll har jag förberett en enkel stuktur för en webbplats för att ha något att börja med. Denna kan ni se på följande länk:
Exempel-sajten är kodad i XHTML 1.0. Funderade ett tag på om det var bättre att använda HTML som första exempel, men vi kör med XHMTL till en en början så får vi se.
Layout utan tabeller
Sajten i exemplet är kodad utan tabeller använder istället <div>-taggar som positioneras med hjälp av CSS.
Validerad
Ofta stöter man på konstigheter med att olika webbläsare visar layouten olika. Det första man bör göra är att se till att korrekt CSS och HTML (länkarna går till valideringsverktygen hos W3C). Det är en förutsättning för att de olika webbläsarna ska få en chans att visa ditt innehåll som det var tänkt.
Övrigt
Till sajten har jag använt lite externa resurser. "Lorem Ipsum"-texterna har jag fått genererade här och bakgrundbilden lånade jag från Kaliber 10000.
TinyMCE är en skön HTML-Editor som har blivit väldigt populär. Den är oftast väldigt enkel att använda och har många konfigureringsmöjligheter.
Men att använda den tillsammans med Ajax och partial update är verkligen ingen lätt match. Jag lyckades tidigare i år, efter stor möda, men det var nog mest tur.
Skrev om det i bloggen, men den postningen blev inte så fullständig eller bra. Det var mest lite egna minnesanteckningar som jag fick till där. Jocke var inne och kollade på beskrivningen men fick inte till det. Så nu tänkte jag visa precis hur man kan göra med ett uppdaterad och fullständig kod.
Problemen
Problem 1. TinyMCE gör om textboxar till en Iframe, som My Portal Project förklarar. Detta leder till att det är svårt att ta emot värden (speciellt i Firefox). Waqas_badas visar hur man kan komma runt detta genom ett javascript på submit-knappen.
Problem 2. Vid Ajax-anrop ritas inte editorn upp igen. Här kan man anropa mceAddControl-kommandot, men det gäller att resetta id-räknaren innan man gör det, här är en som kommit på hur man gör.
Kodexempel
Nu tänkte jag låta koden förklara resten. Missa inte att ladda hem zip-filen längst ner som innehåller ett färdigt project som fungerar i IE7, FF2 och Opera.
Default.aspx
<%@ Page Language="C#" ValidateRequest="false" Trace="false" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>MS Ajax UpdatePanel - TinyMCE</title> <script type="text/javascript"> function SaveMyPreciousValues() { tinyMCE.triggerSave(false,true); TextBox1 = document.getElementById('TextBox1'); alert('Check value when posting: '+ TextBox1.value) } </script> </head> <body>
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if(!Page.IsPostBack) LoadTinyMCE(); }
private void LoadTinyMCE() {
//Load tinyMCE HtmlGenericControl Include = new HtmlGenericControl("script"); Include.Attributes.Add("type", "text/javascript"); Include.Attributes.Add("src", "js/tiny_mce/tiny_mce.js"); this.Page.Header.Controls.Add(Include);
Label1.Text = "Content posted from TextBox1: " + inputText;
//Register some javascript to redraw the editor. //Very important to reset the id-counter to "0", or else strange things will happen.. ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "init", "tinyMCE.idCounter=0;tinyMCE.execCommand('mceAddControl', false, 'TextBox1');", true); } }
Även fast de sista tre två specifikationerna inte är klara, så ska tabellen representera de senaste rekommendationerna. Han förklarar att han ska fortsätta att uppdatera listan så fort några förändringar sker.
Rene Sarsoo har gjort en variant av listan med färgkodning, så man kan se vilka element som är på väg bort och vilka som är nytillkomna.
