Discussion :

[Citylight]

Bonjour à tous,
Lorsqu'un userControl contient une image et du texte paramétrés via une nouvelle propriété affectée au userControl, comment fait-on pour rafraichir son apparence dans l'éditeur après avoir renseigné le paramètre ? (comme c’est le cas avec le contrôle serveur asp:ImageButton de la boîte à outils de Visual Web Dev lorsqu’on renseigne le paramètre url)

Pour info : j'utilise Visual Web Dev express 2008 et on m'a déjà suggéré d'aller voir la librairie MSDN http://msdn.microsoft.com/fr-fr/library/ms171820.aspx.
Mais je trouve que c'est beaucoup de boulot au regard du résultat. Y'a forcément plus simple.

Merci d'avance pour vos suggestions

[MABROUKI]

bonjour Citylight

Si c'est un winform c'est assez simple:

Methode 1
-expose ton texte comme prop browsable pour etre visible dans designer
- idem pour la prop image

exemple avec un textbox et un picturebox droppes sur ton user control:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
 
namespace WindowsFormsApplication2
{
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
            this.pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
            this.textBox1.Text = "hello world";
            this.MyImage=null;
        }
        private string  mytext ="hello world";
        [Browsable(true)]
        public string  MyText
        {
            get { return mytext; }
            set 
            { 
                mytext = value;
                this.textBox1.Text = mytext;
                this.textBox1.Update();
            }
        }
        private Image myimage;
        [Browsable(true)]
        public Image MyImage
        {
            get { return myimage; }
            set { 
                myimage = value;
                this.pictureBox1.Image  = myimage;
                this.pictureBox1.Update();
 
            }
        }
 
    }
}

Methode 2
-expose ton texte comme prop browsable pour etre visible dans designer
-expose carrement ton control picturebox comme prop browsable etc...
la methode 2 offre l'avantage que toutes les props du picbox sont disponibles via designer et surtout son sizemode....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
 
namespace WindowsFormsApplication2
{
    public partial class UserControl2 : UserControl
    {
        public UserControl2()
        {
            InitializeComponent();
            this.textBox1.Text = "hello world";
        }
        private string mytext = "hello world";
        [Browsable(true)]
        public string MyText
        {
            get { return mytext; }
            set
            {
                mytext = value;
                this.textBox1.Text = mytext;
                this.textBox1.Update();
            }
        }
 
        [Browsable(true)]
        public PictureBox MyPic
        {
            get { return this.pictureBox1 ; }
        }
    }
}

bon code.......

[Citylight]

Bonjour MABROUKI,
"Malheureusement" non, mon projet concerne le web...mais je vais étudier ta proposition.
A titre indicatif, je joint mes codes...
Le contenu du contrôle utilisateur (page .ascx) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="btn_bille.ascx.vb" Inherits="SiteTTT.btn_bille" %>
' L'image du bouton
<asp:ImageButton ID="id_imgBtn" runat="server" 
    ImageUrl="" 
    PostBackUrl="~/pages/page_acc.aspx"/>
 
	<br />
' Le titre du bouton
<asp:Label ID="id_lbl_btn" runat="server" Text="<%$ Resources:TTT_ress, bill_accueil %>"></asp:Label>

Le code behind associé (page .vb):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
Imports System.ComponentModel
 
Partial Public Class btn_bille
    Inherits System.Web.UI.UserControl
 
    ' Valeurs possibles pour le paramètre « Titre_Menu » du contrôle utilisateur 
    Public Enum l_titreMenu
        Accueil = 1
        Actu = 2
        EspaceClient = 3
        NousContacter = 4
        Références = 5
    End Enum
 
    Dim l_titre As l_titreMenu
 
    <Description("Sélectionner le titre du menu associé au contrôle utilisateur"), _
    Category("Paramètre(s) à compléter"), Browsable(True)> _
    Public Property Titre_Menu() As l_titreMenu
        Get
            Return l_titre
        End Get
        Set(ByVal value As l_titreMenu)
            l_titre = value
        End Set
    End Property
 
 
    Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)
 
        Dim l_fichierImg As String 'le nom du fichier img
        Dim l_textMenu As String 'le titre du menu
        Dim l_pageDest As String  'l'url de la page à afficher
 
 
        Select Case l_titre
            Case 1
                l_fichierImg = "bille_tpi.png"
                l_pageDest = "~/pages/page_acc.aspx"
                l_textMenu = "bill_accueil"
 
            Case 2
                l_fichierImg = "bille_bleu.png"
                l_pageDest = "~/pages/page_actu.aspx"
                l_textMenu = "bill_actu"
 
' ...
 
 
            Case Else
                l_fichierImg = "bille_tpi.png"
                l_pageDest = "~/pages/page_acc.aspx"
                l_textMenu = "bill_accueil"
        End Select
 
        id_imgBtn.ImageUrl = "~/images/" & l_fichierImg
        id_imgBtn.PostBackUrl = l_pageDest
        id_lbl_btn.Text = GetGlobalResourceObject("TTT_ress", l_textMenu)
 
 
    End Sub
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
    End Sub
 
End Class

Donc, lorsque je modifie la propriété "Titre_menu" dans le tableau des propriétés du contrôle, je souhaiterai que l'img et le titre du bouton soient rafraîchis.

Je re-précise que j'utilise Visual Web Dev 2008 express. Est-ce que je lui en demande trop ?
La "doc" de VWD express ne contient rien à ce sujet mais comme mon extension de métadonnées ne fonctionne que partiellement (l'attribut "Description" dans le code ci-dessus ne fonctionne pas), je doute.
Qu'en pensez-vous ?

[MABROUKI]

rebonjour Citylight

1/le lien MSDN que tu mentionnes c'est pour les winform ...

Je ne suis pas specialiste du developpement Web mais le designer VS Web ne permets pas ce que permets le designer VS Winforms pour les usercontrol..

Mais le Designer Host pour les Controls Web archi simple est donne sur un autre lien MSDN ..pour un CompositeControl (usercontrol) et un WebControl(custom control)..
En particulier le CompositeControl demande un code simple semblable à celui des UserControls winform...et le code du DesignerHost se reduit à la prop AllowResize...

Pour ce faire c'est simple:
1/Creer un projet lib control server asp net dll (ServerControl1)
- supprimer le control ServerControl cree par defaut
- creer un class ServerControl1
- ajouter la ref a l'assembly System.Design.dll
- dans le class ServerControl1 ajouter le code ci-apres(voir ci-apres)...
- generer
2/Ajouter a la solution un projet web application vide pour test
-ajouter un web form
-ajouter une reference au projet projet lib control server
(ajouter ref ->tab projets)
-generer pour avoir l'intellisense
-dans fenetre code du web forms ajouter:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
Imports ServerControl2

- dans fenetre source (source script html ) apres balise Page ajouter ces 2lignes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
Page Language="VB" %>
<%@ register tagprefix="aspSample" 
  assembly="ServerControl2" 
  namespace="ServerControl2" %>

Le reste du script html du form consiste à decrire et formatter la presentation du CompositeControl1 et CompositeControl2 de l'exemple avec un Button,un TextBox et Un Control Image Web (implemente suivant methode 2 post precedent)...
Le seul inconvenient des controls web c'est la partie script html:
-si tu apportes une modif au code vb du ControlComposite dans le projet Lib
il faut regerener la solution mais -attention mettre en commentaire la partie script html rajoute manuellement au web form...
Apres regegenation la decommenter ...
C'est logique car c'est nous qui l'avons rajouter et non le designer...

bref
code .vb du projet Lib :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
 
Imports System
Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.Drawing
Imports System.Web.UI
Imports System.Web.UI.Design
Imports System.Web.UI.Design.WebControls
Imports System.Web.UI.WebControls
 
 
<Designer(GetType(SimpleCompositeControlDesigner))> _
Public Class SimpleCompositeControl1
    Inherits CompositeControl
    Public Sub New()
        Pic.ID = "pic"
        Pic.Width = 100
        Pic.Height = 100
        Pic.ImageUrl = String.Empty
 
        MyButton.ID = "mybutton"
        MyButton.Text = "button1"
        MyButton.BackColor = Color.Blue
        MyButton.ForeColor = Color.Red
 
 
        MyTextBox.ID = "mytextbox"
        MyTextBox.Text = "Citylight"
        MyTextBox.BackColor = Color.White
        MyTextBox.ForeColor = Color.DarkBlue
 
    End Sub
    Dim _button As Button = New Button
    Overridable Property MyButton() As Button
        Get
            Dim o As Object
            o = ViewState("MyButton")
            If o Is Nothing Then
                Return _button
            Else
                Return CType(o, Button)
            End If
        End Get
        Set(ByVal value As Button)
            ViewState("MyButton") = value
        End Set
    End Property
    Dim _mytextbox As TextBox = New TextBox
    Overridable Property MyTextBox() As TextBox
        Get
            Dim o As Object
            o = ViewState("MyTextBox")
            If o Is Nothing Then
                Return _mytextbox
            Else
                Return CType(o, TextBox)
            End If
        End Get
        Set(ByVal value As TextBox)
            ViewState("MyTextBox") = value
        End Set
    End Property
    Dim _pic As New System.Web.UI.WebControls.Image
    Public Property Pic() As System.Web.UI.WebControls.Image
        Get
            Dim o As Object
            o = ViewState("Pic")
            If o Is Nothing Then
                Return _pic
            Else
                Return CType(o, System.Web.UI.WebControls.Image)
            End If
        End Get
        Set(ByVal value As System.Web.UI.WebControls.Image)
            ViewState("Pic") = value
        End Set
    End Property
    Protected Overrides Sub CreateChildControls()
 
        'ajout Button
        Me.Controls.Add(MyButton)
 
        'ajout TextBox
        Me.Controls.Add(MyTextBox)
 
 
        'ajout Image
        Me.Controls.Add(Pic)
 
 
        MyBase.CreateChildControls()
    End Sub
End Class
<Designer(GetType(CompositeControlDesigner))> _
Public Class SimpleCompositeControl2
    Inherits SimpleCompositeControl1
End Class
Public Class SimpleCompositeControlDesigner
    Inherits CompositeControlDesigner
    ' Set this property to prevent the designer from being resized.
    Public Overrides ReadOnly Property AllowResize() As Boolean
        Get
            Return False
        End Get
    End Property
End Class

code script html du projet web application test(web form):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<%@ Page Language="vb" AutoEventWireup="false" 
CodeBehind="WebForm2.aspx.vb" 
Inherits="WebApplication2.WebForm2" %>
 
 <%-- RAJOUT APRES BALISE PAGE--%>
<%@ register tagprefix="aspSample" 
  assembly="ServerControl1" 
  namespace="ServerControl1" %>
    <%--FIN RAJOUT --%>
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Designer UserControl Page</title>
</head>
<body>
     <form id="form1" runat="server">
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Composite UserControl Designers
        </p>
      <%--CompositeControl1 est non resizable par defaut --%>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl1 id="SimpleControl1" runat="server" 
             />
        <br /><br />
 
        <%--CompositeControl2 est resizable --%>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2" runat="server"  
            height="151px" width="290px" 
            />
        <br /><br />
 
    </div>
    </form>
</body>
</html>

code vb simplistic du web form:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
Imports ServerControl2
Public Class WebForm2
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
    End Sub
 
End Class

Pour le bon lien MSDN il s'intitule :
Walkthrough: Creating a Basic Control Designer for a Web Server Control


lien anglais:
http://www.google.fr/url?q=http://ms...5tDiXrqIvOjTZQ


lien francais(basculer en mode traduction)

http://www.google.fr/url?q=http://ms...A3Iupw8UYUf6ug

bon code....