JHPuerto Eier søk, sortering og visning

Nok en video av JHPuerto.

Denne videoen viser eierlista til venstre etter at du har logget inn. I denne videoen har vi en eierliste med drøyt 300 stykker. Det tar ikke lange tiden å laste inn programmet (ca 10 sek) og etter det er responsen helt suveren 🙂

Tekstboblene fikk seg en omgang i rendreprosessen til videoen så tekstene er litt avkuttet men dere ser sammenhengene med det som gjøres i programmet. Kanskje jeg får endret og lagt opp en ny versjon med funksjonelle snakkebobler også etterhvert.

JH

Publisert i Wpf(Windows Presentation Foundation) | Legg igjen en kommentar

Ny video av JH Puerto som viser bruker innlogg og håndtering av instillinger

Ny video av JHPuerto. Siste par ukene har jeg brukt litt tid på å utvikle JH Puerto mer og viser nå noe av resultatet av det. Teknikker jeg bruker her er blant andre membershipprovider fra Microsoft slik at jeg kan bruke eksisterende web brukerdatabase eller kombinere teknologier som asp.net, silverlight og wpf.

Denne videoen viser bruker logginn i praksis der roller skiller mellom hva som vises og ikke i JH Puerto. I tillegg vises håndteringen av instillinger og endringer av disse, samt viser litt av responsen til programmet samt at det husker hvor du er i prosessen.

JH

Publisert i Wpf(Windows Presentation Foundation) | Legg igjen en kommentar

WPF Word Like Editor

Bakgrunnen for denne posten var at jeg hadde behov for en tekst editor kontroll a la RadEditor for asp.net. Eller TinyEditor for .net eller en mini Word om du vil.
Jeg søkte etter ferdige komponenter men fant bare store kontroller som var beregnet på å lage ide’er eller kode håndteringsverktøy.
Det første jeg til sist gjorde når jeg skjønte at jeg ble nødt til å lage en selv, var å opprette et WPF UserControl Library. Dette for at jeg skal kunne gjenbruke koden min. I dette biblioteket opprettet jeg en usercontrol kalt JHEditor.
Det var 3 ting jeg ønsket med denne editoren. Den skulle være enkel, støtte de enkleste editor funksjonene og samtidig exponere en Text egenskap. Slik at jeg kunne si noe sånt som enEditor.Text = “jsdlkjølkasldkjf” eller string t = enEditor.Text. Altså omtrent som en hvilke som helst tekstbox. Men den store forskjellen ligger i at jeg har behov for å stile teksten. Omtrent som styles i html. Løsningen havnet etterhvert på RichTextBox, denne støttet det jeg trengte.
Men ikke helt, for ikke kunne jeg stile teksten ordentlig og ei heller sette den eller hente den ut. Grunnen er at RichTextBox ikke har et felt for Text eller et Content eller noe sånt. Nei den bruker et FlowDocument til å presentere teksten i. I tillegg har ikke RichTextBox noen former for toolbars osv. Dermed fant jeg ut at jeg måtte til nesten fra bunden av.
Editoren består dermed av tre hovedbestanddeler fant jeg ut. Et textvindu til å editere teksten i, en verktøylinje i toppen og en text verdi som kan hentes ut eller settes.
Slik endte min JHEditor.xaml med å se ut:

<UserControl x:Class=»JHControls.JHEditor.JHEditor»
            xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation&raquo;
            xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml&raquo;
            xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006&#8243; 
            xmlns:dhttp://schemas.microsoft.com/expression/blend/2008&#8243; 
            mc:Ignorable=»d» 
            d:DesignHeight=»300″ d:DesignWidth=»600″ HorizontalAlignment=»Stretch» VerticalAlignment=»Stretch» Background=»{x:Null}»>
   
   
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height=»43″ />
            <RowDefinition Height=»*» />
        </Grid.RowDefinitions>
      
       
<ToolBar Grid.Column=»0″ Grid.Row=»0″ Height=»43″ HorizontalAlignment=»Stretch» Margin=»15,0,15,0″ Name=»toolBar1″ VerticalAlignment=»Top» Width=»Auto» Background=»{x:Null}»>
            <ToggleButton Command=»EditingCommands.ToggleBold» CommandTarget=»{Binding ElementName=rtfText}»>
               
<Image Width=»32″ Height=»32″ Source=»Images/format-text-bold.png»
                           ToolTipService.ToolTip=»Bold» ToolTip=»Bold» />
            </ToggleButton>
            <ToggleButton Command=»EditingCommands.ToggleItalic» CommandTarget=»{Binding ElementName=rtfText}»>
                <Image Width=»32″ Height=»32″ Source=»Images/format-text-italic.png»
                           ToolTipService.ToolTip=»Italic» ToolTip=»Italic» />
            </ToggleButton>
            <ToggleButton Command=»EditingCommands.ToggleUnderline» CommandTarget=»{Binding ElementName=rtfText}»>
                <Image Width=»32″ Height=»32″ Source=»Images/format-text-underline.png»
                           ToolTipService.ToolTip=»Underline» ToolTip=»Underline» />
            </ToggleButton>
            <Button Command=»EditingCommands.AlignLeft» CommandTarget=»{Binding ElementName=rtfText}»>
                <Image Width=»32″ Height=»32″ Source=»Images/format-justify-left.png»
                           ToolTipService.ToolTip=»Align Left» ToolTip=»Align Left» />
            </Button>
            <Button Command=»EditingCommands.AlignCenter» CommandTarget=»{Binding ElementName=rtfText}»>
                <Image Width=»32″ Height=»32″ Source=»Images/format-justify-center.png»
                           ToolTipService.ToolTip=»Align Center» ToolTip=»Align Center» />
            </Button>
            <Button Command=»EditingCommands.AlignRight» CommandTarget=»{Binding ElementName=rtfText}»>
                <Image Width=»32″ Height=»32″ Source=»Images/format-justify-right.png»
                           ToolTipService.ToolTip=»Align Right» ToolTip=»Align Right» />
            </Button>
            <Button Command=»EditingCommands.IncreaseFontSize» CommandTarget=»{Binding ElementName=rtfText}»>
                <Image Width=»32″ Height=»32″ Source=»Images/format-text-increase.png»
                           ToolTipService.ToolTip=»Increase Font» ToolTip=»Increase Font» />
            </Button>
            <Button Command=»EditingCommands.DecreaseFontSize» CommandTarget=»{Binding ElementName=rtfText}»>
                <Image Width=»32″ Height=»32″ Source=»Images/format-text-decrease.png»
                           ToolTipService.ToolTip=»Decrease Font» ToolTip=»Decrease Font» />
            </Button>
        </ToolBar>
 
        <Border Grid.Column=»0″ Grid.Row=»1″ CornerRadius=»10″ BorderThickness=»3″ Margin=»1,-2,1,1″ Background=»White» BorderBrush=»#FFB4AFAF»>
            <RichTextBox x:Name=»rtfText» HorizontalAlignment=»Stretch» VerticalAlignment=»Stretch» Margin=»5″ Background=»{x:Null BorderBrush=»{x:Null}»>
           
           
</RichTextBox>
        </Border>
       
   
</Grid
>
</
UserControl>

La oss se på de “viktigste” bitene:

<RichTextBox x:Name=»rtfText» HorizontalAlignment=»Stretch» VerticalAlignment=»Stretch» Margin=»5″ Background=»{x:Null BorderBrush=»{x:Null}»>
</RichTextBox>

Denne gir deg en richTextBox som teksten presenteres i og som man kan editere teksten i.

<ToolBar Grid.Column=»0″ Grid.Row=»0″ Height=»43″ HorizontalAlignment=»Stretch» Margin=»15,0,15,0″ Name=»toolBar1″ VerticalAlignment=»Top» Width=»Auto» Background=»{x:Null}»>
            <ToggleButton Command=»EditingCommands.ToggleBold» CommandTarget=»{Binding ElementName=rtfText}»>
                <Image Width=»32″ Height=»32″ Source=»Images/format-text-bold.png»
                           ToolTipService.ToolTip=»Bold» ToolTip=»Bold» />
            </ToggleButton
>
</
ToolBar>

Så har vi toolbar. Det denne gjør er å gi deg en standardisert måte å putte knapper inn i en og samme kontroll. Her har jeg lagt til en ToggleButton som ved førsteklikk er trykket inn og ved klikk nummer to blir klikket ut igjen akkurat slik word har med sine stiler.
Det som er viktig å merke seg her er at alle knapper i toolbaren må ha en CommandTarget som bindes til vår RichTextBox vist under.

CommandTarget=»{Binding ElementName=rtfText}»

I tillegg trenger vi å koble kommandoen til knappen opp mot RichTextboxen sin EditingCommands bibliotek.
Dette biblioteket inneholder en hel masse kommandoer som RichTextBox implementerer, dermed kan du fortelle knappen at når noen klikker på deg skal du sende denne kommandoen angitt i Command atributten til denne kontrollen angitt i CommandTarget atributten. Totalt støtter RichTextBox 47 slike forskjellige kommandoer. En oversikt finner du her EditingCommands Class.

Som dere ser av min ToolBar implementasjon har jeg kun tatt med det enkleste jeg ønsker at mine brukere skal ha mulighet til å gjøre. Men her kan man bygge inn alt man vil av funksjonalitet. Finnes ikke kommandoen som du ønsker å bruke så fortvil ikke da kan den implementeres som en vanlig Click event på knappen og håndteres i codebehind fila.

Vi har dermed implementert 2 av de tre egenskapene vi ville at kontrollen vår skulle ha. Nemlig et text område brukerne kan editere i og som viser stilene de ønsker å bruke, samt at vi har lagt til knapper som gir brukerne mulighet til å endre stiler. PS tastatursnarveier fungerer også uavhengig av ToolBaren vår.
Det siste vi ikke har fått til enda er å eksponere teksten som skrives inn, og eller editeres, inn eller ut til kontrollen vår. Dette må vi tilgjengeliggjøre i codebehind fila vår. Vi må ha en public property(atributt) som lar oss sette og hente ut texten. Dessverre er det slik at vår RichTextBox ikke har noen text  atributt vi kan bruke. Den har et innhold som er bassert på et FlowDocument. Dette gjør at man kan gjøre mye spennede med RichTextBoxen men for vår del er det overkill. Men det er FlowDocumentet som gjør at vi faktisk kan få et visuelt godt dokument og ikke bare ren tekst slik en ordinær flerlinjet tekstboks ville gitt oss. FlowDocumentet støtter stilering akkurat som html men i form av xaml.

Slik er implementeringen min av codebehind fila:

using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.IO;
 
namespace JHControls.JHEditor
{
    /// <summary>
    /// Interaction logic for JHEditor.xaml
    /// </summary>
    public partial class JHEditor : UserControl
    {
 
 
        public string Text
        {
            get 
            {
                TextRange tr = new TextRange(
                    rtfText.Document.ContentStart,
                    rtfText.Document.ContentEnd);
                MemoryStream ms = new MemoryStream();
                tr.Save(ms, DataFormats.Xaml);
                string xamlString =
                   ASCIIEncoding.Default.GetString(ms.ToArray());
                return xamlString;
                //return (string)GetValue(TextProperty);
            }
            set { SetValue(TextProperty, value); }
        }
 
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register(«Text», typeof(string), typeof(JHEditor), new PropertyMetadata(OnTextChanged));
 
        public JHEditor()
        {
            InitializeComponent();
        }
 
        private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            JHEditor control = (JHEditor)d;
            if (e.NewValue == null)
                control.rtfText.Document = new FlowDocument(); //Document is not amused by null 🙂
 
            TextRange tr = new TextRange(control.rtfText.Document.ContentStart, control.rtfText.Document.ContentEnd);
            tr.Text = (string)e.NewValue;
           
        }  
    }
}

For å ta de viktigste tingene her uten å forklare alt i detalj så lager vi en public property Text som vi kobler sammen med en dependency property.
I Visual Studio er snippeten for dette propdp vær dog obs på at jeg registrerer en OnTextChanged metode til denne dependecy propertyen.
Dette gjør at settes teksten til kontrollen så vil denne metoden fyre og vi får mulighet til å sette teksten inn i RichTextboxen vår. Dette gjøres via en TextRange.

Tilsvarende så returnerer vi en komplett TextRange via en MemoryStream slik at vi kan hente ut texten lagret i dokumentet til RichTextBoxen vår.
Dette er tungvindt men den eneste gode måten å løse dette på. Dermed har vi nå knyttet opp vår Text atributt til vår kontroll og det gjenstår kun å bruke den.

For å bruke kontrollen vår i vårt prosjekt må vi gjøre 3 ting.
For det første må vi høyreklikke på References mappa i GUI prosjektet vårt og legge til en referanse til biblioteket vårt. Dette gjør vi ved å velge prosject eller browse og blad oss frem til bilioteket vårt.

For det andre må vi implementere et xmlns namespace som gjør at vi kan referer til biblioteket vårt i den klassen kontrollen skal brukes. Dette gjøres i Window tagen i xaml fila der du skal bruke kontrollen, eller i usercontrol tagen hvis du skal bruke den inne i en usercontrol.

xmlns:JHCtrl=»clr-namespace:JHControls.JHEditor;assembly=JHControls»

For det tredje må kontrollen i seg selv legges til slik vi legger til knapper ol.

<JHCtrl:JHEditor Grid.Row=»0″ x:Name=»txtInnlevering»></JHCtrl:JHEditor>

Her er også et eksempel der vi bruker DependencyPropertyen Text

<JHCtrl:JHEditor Grid.Row=»0″ x:Name=»txtInnlevering» Text=»TestText»></JHCtrl:JHEditor>

Vanskeliger enn dette var det faktisk ikke. Det tok meg sikkert rundt 5 timer å finne ut av det og det vanskeligste var å få RichTextBoxen til å spille på lag.
Men når det var gjort så var det bare enkel skuring resten av veien.
Veien videre for en slik komponent ville vært å hekte opp tastatur trykk med visuelt på knappene og hindre tastaturtrykk som du ikke har knapper til. Feks er det ikke sikkert du ønsker å la de angre dermed kan du skru av ctrl+z
Man kan også se for seg et scenario der man utvider kontrollen med mange flere dependencyproperties som lar deg velge enkel, normal eller avansert toolbar, mulighet for å styre toolbaren sin plassering, mulighet for å definere ribbons osv osv.

Men de avanserte funksjonene overlater jeg til andre. Eller om noen er interessert kanskje vi kunne startet et codeplex prosjekt 

Her er et skjermbilde av kontrollen i bruk etter implementering Smilefjes

JHEditor

JH

Publisert i Kontroll bibliotek, Wpf(Windows Presentation Foundation) | 1 kommentar

Får ikke installert Windows Live Essentials 2011 etter avinstallasjon av Live Mesh Beta

Etter at jeg tok i bruk Microsoft Live Mesh Beta i fjor, så har jeg blitt helt avhengig av denne tjenesten. Den holder de mappene jeg bestemmer synkronisert mot nettskyen og lar meg koble meg på min maskin hjemme med andre maskiner så lenge den er på. Dette har fungert helt utmerket. Men nå faser Microsoft ut betaen og 30 september lanserte de Microsoft Live Essentials 2011. Der ligger også Live Mesh.

Supert tenkte jeg, i dag er dagen å oppdatere på. Men nei. Først fikk jeg beskjed om at dette ikke gikk. Jeg måtte avinstallere Live Mesh på alle brukerne på maskinen. Ok inn i kontroll panel og avinstallere alt vel og bra. Krevde selvfølgelig en omstart osv. Men da alt var oppe å kjøre igjen og jeg på nytt startet installasjonen, jo selvfølgelig fikk jeg samme feil igjen! Så var det å sjekke alle linker og henvisninger som installasjonen foreslo, nei ikke en tøddel til hjelp. Frustrasjonen var i ferd med å rive tak i håret (En av grunnene til at jeg barberer meg) som er akkurat så langt nå at den fikk skikkelig tak. Men to dype pust og et raskt google søk gav følgende treff http://thepizzy.net/blog/2010/10/migrating-from-live-mesh-beta-to-live-mesh-2011/ Bingo denne fikser alt du trenger for å få startet installasjonen av Live Essentials 2011. Så tusen takk til «neo» for denne posten.

For de av dere som ikke synkroniserer eller tar backup av dokumenter og bilder, her er en link til Microsoft Live Essentials

Husk store gutter gråter ikke de tar backup

JH

Publisert i Avinstallering, Installering, Nytte programmer, Windows | 1 kommentar

Første JH Puerto video opplastet til youtube.

Denne videoen viser brukere og roller i JH Puerto. Prinsippet er at jeg bruker standard Microsoft Membership handling som er den foretrukne brukerhåndteringen i .net dette er også den jeg er vant til å bruke i jobb sammenheng ellers. I tillegg har jeg utvidet brukerobjektet med et arbeiderobjekt som holder på all annen informasjon om brukerne.

Dette fungererer på den måten at nå kan jeg enten fristille og kjøre database lokalt eller koble meg på en sentralt plassert database med de fordeler det gir. Både med tanke på aksess og bruk på kryss av teknologier. Årsaken til at MS Membership ble valgt er at denne kan jeg nå koble meg til og bruke fra både asp.net, silverlight og WPF med flere. Dermed har jeg mange ferdige biblioteker som kan håndtere brukerne mine og som gjør at jeg kan konsentrere meg om funksjonalitet fremfor teknologi.

JH

Publisert i Wpf(Windows Presentation Foundation) | Legg igjen en kommentar

Design og starten på det nye prosjektet

Et av de første tingene jeg vist om WPF var at den lot deg designe windows programmer omtrent som man lager websider. Man bruker xml strukturer for å representere GUI.
Alt det er vel og bra, men for meg var læringskurven veldig bratt og det tok meg en uke til å skjønne sammenhenger osv. Men en ting har jeg lært at klipp og lim og stjel til den store gullmedaljen og lær av det andre har gjort.

Først og fremst lastet jeg ned Expression Studio fra Microsoft. Denne lar deg designe uten egentlig å tenke på hva som skjer bak. Dette er en god gammel designer a la Microsoft Frontpage. Denne har en wysiwyg editor som lar deg herje vilt med design og ettterpå kan du ta på deg utviklerhatten og trekke ut all informasjon og putte i naturlige blokker. Greia er at design og utvikling har tatt et stort skritt i riktig retning og blitt ført sammen. Det er ikke lenger slik at en designer lager et bilde en utvikler må prøve å matche så godt som mulig.

Nå er det slik at designeren kan gjøre jobben i Adobe illustrator eller hvor det enn måtte være og kan da impotere disse til blend og atpå til lage storyboards (animasjoner og overganger) uten å programmere noe som helst. I tillegg kan programmereren ta over prosjektet og med en gang begynne å skille ut de elementene av designet som han trenger. Alt gjøres innen for et og samme prosjekt og lar seg enkelt bytte mellom samarbeidende parter.

Men over til prosjektet igjen. Jeg startet med blanke ark og begynte faktisk å skissere litt på et papir på hvordan jeg kunne løst J2H Marina på en bedre og mer elegant måte enn det som var gjort fra før. Ikke minst det å utnytte at alle gjerne sitter på store skjermer med god plass. Til syvende og sist havnet jeg på en skisse jeg syntes kunne se spennende ut. Det jeg alikevell var spent på var om det i det heletatt lot seg gjøre da jeg viste at jeg ikke kunne laget noe i nærheten engang hvis jeg skulle gjort det i winforms. Jeg hadde heller ingen aning om hva WPF og xaml var god for. Under ser dere resultatet av det første Blend utkastet til dette.

Etter å ha designet dette i blend, noe som var overraskende enkelt så begynte prosessen med å teste ut om dette lot seg gjøre programatisk også og under ser dere det første skjermbilde med faktisk fungerende kode.

Men det jeg så med en gang jeg begynte var at med denne typen GUI trengte jeg å strukturere koden bedre enn det jeg var vant til. Valget falt på MVVM som metodikk og det skal jeg si mer om i neste oppføring 🙂

JH

Publisert i Wpf(Windows Presentation Foundation) | Legg igjen en kommentar

Nytt «gammelt» prosjekt i WPF

Ja da tenkte jeg å blogge om et nytt prosjekt. Dvs det er et gammelt prosjekt jeg og en kompis startet med etter endt bachelor grad og vi begge var arbeidsledig. Dette prosjektet er et dataprogram for marinaer med båter i vinteropplag der de også utfører arbeid på båtene.
Programmet var i utgangspunktet et Winforms prosjekt skrevet i Visual Studio 2003 i c#. Det var koblet til en enkel MS Access database og har i grunn levd fra starten høsten 2004 og frem til i dag. Første fulle versjon ble tatt i bruk høsten 2005.

Programmet har hatt en rekke større og mindre oppdateringer i løpet av de 5 årene det har vært i drift.
Omtrent 1 gang i året har vi tatt en bolk og jobbet inn den. Ide haver og testbedrift er Gjeving Marina ANS i Gjeving sør for Risør. De har et vinteropplag på omlag 400 båter i tillegg til at de da lagrer disse så gjør de også vask, polering, reprasjoner osv. For de har programmet vært veldig verdifult.

Etter et par år så var det endel andre marinaer som også ble interessert, og resultatet ble en plan om å bygge om J2H Marina til en webbasert plattform. Dette arbeidet kom egentlig godt i gang men strandet litt på både tid og penger.

Etter at jeg flyttet fra Norge til Gran Canaria så har jeg i mye tid innimellom hvor jeg jobber med nye spennende programmeringstekniker. Her kan nevnes wpf, silverlight, cocotouch(iPhone) og masse annet.

Så når jeg nå tenkte jeg skulle jobbe litt med WPF og Silverlight så ble det et naturlig valg å ta J2H Marina og forspanske det og legge det om til en helhetlig løsning både for nett og lokal kjøring. Det nye produktet har fått arbeidsnavnet JHPuerto og er i skrivende stund påbegynt.

Jeg har nå etter et par uker sett endel problemstillinger jeg ikke tenkte på før jeg begynte og jeg regner med at andre kan ha nytte av den lærdommen jeg har fått av det. Jeg kommer derfor til å blogge om endel av de problemstillingene her 🙂 og ikke minst kommer jeg til å blogge om det på Norsk slik at norske utviklere og andre som ønsker å lære litt om WPF vil slippe å streve med engelsk i tillegg 🙂

JH

Publisert i Wpf(Windows Presentation Foundation) | Legg igjen en kommentar

Test av Greenshot

Hei igjen.
Tester nok et kjekt og ha, gratisverktøy i dag. Greenshot er et program som kjører i bakgrunnen på pc’en og lar deg administrere skjermutklipp eller printscreens om du vil. En ting jeg liker godt med det er at det er mappet mot prntscrn knappen på tastaturet og du kan legge på blitseffekt når du tar bilde slik at du lett ser at bilde er lagret. Du har også mulighet til å angi en hel masse ting i forhold til hvor bildene skal lagres og hvordan.

Et must hvis du har behov for å dokumentere skjermbildene dine.

Programmet er gratis og kan finnes her
JH

Publisert i Litt av hvert | Legg igjen en kommentar

Test fra w.bloggar

Tester ut bloggverktøyet w.bloggar
Verktøyet er gratis og kan lastes ned her

Verktøyet er en ordinær wordlignende editor du kjører lokalt på din maskin for å slippe å bruke web’en for å poste blogg innlegg.
Så langt ser det bra ut men jeg savner det å se andre blogg innlegg og mulighet til å administrere mer en det du kan. Sånn bortsett fra det er GUI enkelt og intuitivt og du får akkurat det du trenger.

Mulig det er mer enn det først gir seg ut for å være 🙂

Edit: Det viser seg å være mer gjennomtenkt og enda bedre enn førsteintrykket tilsa. Her editerer jeg en tidligere bloggoppføring og jeg har mulighet til å styre ganske mye fra verktøyet. Blir mer og mer fornøyd.

Fikk ordnet et skjermbilde også

JH

Publisert i Litt av hvert | Legg igjen en kommentar