Overblog
Editer l'article Suivre ce blog Administration + Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

 

Recherche

Recherche

 

Articles RÉCents

 

CatÉGories

 

Liens

 

2 mai 2014 5 02 /05 /mai /2014 23:38

Windows Store avec HTML/JS et Xaml/C# - Introduction

1-Présentation

  • « Fast and fluid » .Les  applications Windows Store doivent se concentrer sur le contenu, proposer une bonne expérience utilisateur(UX) et ne jamais être bloquées .

  • Snapping : on peut afficher  2 applications dans un écran partagé.L’une étant « Filled » et l’autre « Snapped »

  • Charms : (menu) supportent l’intégration avec Windows

  • App bar : barre pour les actions spécifiques de l’application

win81 

http://msdn.microsoft.com/fr-fr/windows/apps/br229512.aspx

Référence http://msdn.microsoft.com/fr-fr/library/windows/apps/br211377.aspx

Projets Windows Store : HTML/JavaScript/CSS ou XAML/C# C++ VB

Types de Projets Windows Store

  • Vide (Blank)

  • Grid si on a beaucoup de collections à afficher        

  • Split pour un scénario de vue Maitre détail

  • Visual Studio 2013 RC2 en ajoute des nouveaux dont les applications universelles qui devraient permettre de cibler avec une seule application Windows Phone et WinRT     

3 états d’application:

  • En cours (Running)

  • Suspendue (Suspended)

  • Finie (Terminated) .Par exemple l’application peut être fermée si windows a besoin de ressources .C’est pour cela qu’il faut veiller à sauvegarder l’état de son application au passage à l’état « suspendu »(on a 5 secondes maximum pour cela)

Controls  En plus des classiques boutons, checkbox, listView, listBox …

 win82.png

Appxmanifest : informations sur l’application, ses capacités, etc.     

win83

2- Hello World

Hello World HTML/JS 

http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465493.aspx

Avec un projet vide Windows Store HTML/JS.On a :

  • La page html default.html

  • Le fichier JavaScript default.js

  • La feuille de style default.css

Dans la page html

<body>

    <label for="tbMessage">Message : </label>

    <input id="tbMessage" type="text" /><br/>

    <input id="btSubmit" type="button" value="submit" /><br />

    <span id="lbResult" />

</body>

 

Dans le fichier javascript

app.onloaded = function () {

 

        var bt = document.getElementById("btSubmit");

        bt.addEventListener("click", function () {

            var tb = document.getElementById("tbMessage");

            var lb = document.getElementById("lbResult");

            lb.innerHTML = tb.value;

        });

 

    }

Et dans la feuille de style

#lbResult {

   color:brown;

}

 

Hello World Xaml/C#

Avec un projet vide Windows Store Xaml/C# ,on a :

  • Mainpage.xaml

  • App.xaml

Mainpage

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="1*"/>

            <ColumnDefinition Width="3*"/>

        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Grid.Row="0"  HorizontalAlignment="Left" Margin="10" Text="Message :"/>

        <TextBox Name="tb" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Margin="10" />

        <Button Name="bt"  Grid.Column="1" Grid.Row="1" Content="OK" Click="bt_Click" />

        <TextBlock Name="lb" Grid.Column="1" Grid.Row="2" Style="{StaticResource resultStyle}" />

    </Grid>

Code behind

  public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

 

        private void bt_Click(object sender, RoutedEventArgs e)

        {

            lb.Text = tb.Text;

        }

    }

Et on ajoute un style dans App.xaml (ou dans un dictionnaire de ressources, etc.)

<Application.Resources>

        <Style x:Key="resultStyle" TargetType="TextBlock">

            <Setter Property="Foreground" Value="Brown" />

        </Style>

</Application.Resources>

 

win84

 

WinJS

UI Surfaces

  • App bar

  • Message dialogs (ruban qui traverse la page ,exemple lorsqu’on clique sur un lien PDF)

  • Context menu

  • Flyout

  • Etc .

http://msdn.microsoft.com/en-us/library/windows/apps/br229782.aspx

Navigation

  • PageControlNavigator

  • Page Control (création fichiers *.js,*.css,*.html )

http://msdn.microsoft.com/fr-fr/library/windows/apps/hh452761.aspx

Controls

  • Utilise les controls HTML Standards

http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465451.aspx        

http://www.w3schools.com/html/html_forms.asp

http://www.w3schools.com/html/html5_new_elements.asp

 

+data-win-control attribut pour <div> (exemple DatePicker)    

+ data-win-options    

Databind

Animation

http://msdn.microsoft.com/fr-fr/library/windows/apps/xaml/hh452701.aspx

Tile(tuile)

http://msdn.microsoft.com/fr-fr/library/windows/apps/hh761491.aspx

 

Partager cet article
Repost0
Published by Romagny13 - dans WinRT
commenter cet article …

commentaires