Archives de la catégorie WPF

JsConsole.Net– Console javascript déportée pour le déboggage

J’ai développé cette petite application Windows pour me permettre lors du débogage d’applications web, de visualiser la console JavaScript de manière déportée. Sur certains devices, comme la plupart des consoles de jeux, il n’est pas possible d’accéder à cette console de débogage.

L’application a été développée en C# et WPF  pour l’interface utilisateur et utilise le pattern MVVM indispensable au découpage fonctionnel du code.
Concernant les fonctionnalités un serveur web Owin permet l’auto hébergement des applications web au sein du répertoire « /Web » qui se trouve a la racine de l’application. Par contre, Owin nécessite une élévation de privilège pour ouvrir des sockets réseaux au niveau d’une IP externe, l’application lors de l’exécution vous demandera donc une autorisation plus élevée lors du lancement.
Il est possible aussi d’écrire des bouts de codes « snippet » en créant des fichiers avec l’extension js dans le répertoire « /snippet » ceux-ci pourront être directement inséré dans la console d’exécution des scripts.
Le but de cette application était aussi  pour moi, de mettre en pratique certains frameworks comme l’association entre AngularJs et SignalR.
Par la suite, j’ai inclus une fonctionnalité d’intelliSence lorsque l’on tape du code JavaScript, ce qui m’a semblé bien pratique pour un développeur. Pour cela, la bibliothèque la plus aboutie est AvalonEdit, malheureusement celle-ci n’est pas compatible avec MVVM. Il faut donc faire un peu de code dans la partie code behind, je n’aime pas trop, mais je pense que dans une prochaine version j’essayerai de la rendre compatible MVVM, soit en créant une classe qui hérite des classes d’avalonEdit ou un behavior ou encore avec une attached propertie.

Ce projet a été développé avec les librairies suivantes
–    AvalonEdit
–    MahApps
–    Owin
–    Mvvm Light Toolkit
–    AngularJS
–    SignalR
–    Bootstrap

Voiçi une vidéo, pour comprendre l’utilisation de l’application :

Le code est disponible ici : https://github.com/auriou/JsConsole.Net

Publicités

, , ,

Poster un commentaire

WPF : HighlightConverter (IMultiValueConverter)

Lorsque l’on met en place une zone de recherche, il est intéressant de mettre en surbrillance les zones qui correspondent dans le résultat de votre recherche.

Voiçi une interface que j’ai réalisée pour un projet :

HighlightConverter[1]

Mon treeView est bindé à une collection spécialisée “class TreeList<T> : ObservableCollection<TreeNode<T>>, INotifyPropertyChanged ” dans laquelle je manipule les propriétes pour ouvrir / fermer / cacher / afficher les noeuds de la treeview. Le binding est le  suivant.

<Style x:Key="TreeViewItemStyle" TargetType="{x:Type TreeViewItem}">
  <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
  <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
  <Setter Property="Visibility" Value="{Binding IsHidden, Converter={StaticResource ResourceKey=InverseBoolToVisibilityConverter}}" />

Le résultat d’une recherche sera un textBlock comprenant un champ de type Run avec un style différent pour identifier le texte trouvé.

Il sera donc nécessaire d’avoir 3 objets Run :     

– Start  :  début du résultat qui peut être vide,

– Find  :  partie du résulat comprenand le terme de la recherche, identifié en rouge,

– End   :  fin du résultat qui peut etre vide 

Comme il y à 2 binding pour déterminer le résultat à renvoyer, il faudra donc un converter Multi-valué

 

        <TextBlock>
          <TextBlock.Inlines>
            <Run>
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="Start">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
            <Run Style="{DynamicResource HighlightStyle}">
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="Find">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
            <Run>
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="End">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
          </TextBlock.Inlines>
        </TextBlock>

 

Maintenant le code du converter multi-valué :

 

public class HighlightConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var value = System.Convert.ToString(values[0]);
        var terms = System.Convert.ToString(values[1]);
        var param = System.Convert.ToString(parameter);

        if (!string.IsNullOrEmpty(value) && !string.IsNullOrEmpty(terms))
        {
            if (value.ToLower().Contains(terms.ToLower()))
            {
                var findIndex = value.ToLower().IndexOf(terms.ToLower(), System.StringComparison.Ordinal);
                switch (param)
                {
                    case "Start":
                        return value.Substring(0, findIndex);
                    case "Find":
                        return value.Substring(findIndex, terms.Length);
                    case "End":
                        return value.Substring(findIndex + terms.Length);
                }
            }
        }
        if (param == "Start")
        {
            return value;
        }
        return "";
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

 

Le code Xaml avec la treeVIew:

<Grid x:Name="GridSearchCompte" Grid.Row="1">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <TextBox Name="SearchBox"
           Margin="5,2"
           HorizontalAlignment="Stretch"
           VerticalAlignment="Stretch"
           Text="{Binding Path=SearchCompteGeneral,
                            Delay=700,
                            Mode=TwoWay,
                            UpdateSourceTrigger=PropertyChanged}"
           controls:TextboxHelper.ClearTextButton="True"
           controls:TextboxHelper.Watermark="Recherche rubrique">
    <TextBox.Style>
      <Style BasedOn="{StaticResource SearchMetroTextBox}" TargetType="{x:Type TextBox}">
        <Style.Triggers>
          <Trigger Property="controls:TextboxHelper.HasText" Value="True">
            <Setter Property="controls:TextboxHelper.ButtonTemplate" Value="{DynamicResource ChromelessButtonTemplate}" />
          </Trigger>
        </Style.Triggers>
      </Style>
    </TextBox.Style>
  </TextBox>
  <TextBlock Grid.Row="1"
             Margin="5,0"
             HorizontalAlignment="Right"
             FontSize="12"
             Foreground="{DynamicResource ColorBleu}"
             Text="{Binding TreeRubriques.SelectedItem}" />
  <TreeView Name="TreeViewGeneral"
            Grid.Row="2"
            ItemContainerStyle="{DynamicResource TreeViewItemStyle}"
            ItemsSource="{Binding Path=TreeRubriques}">
    <TreeView.ItemTemplate>
      <HierarchicalDataTemplate ItemsSource="{Binding Children}">
        <TextBlock>
          <TextBlock.Inlines>
            <Run>
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="Start">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
            <Run Style="{DynamicResource HighlightStyle}">
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="Find">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
            <Run>
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="End">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
          </TextBlock.Inlines>
        </TextBlock>
      </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
  </TreeView>
</Grid>

,

Poster un commentaire

%d blogueurs aiment cette page :