Paso 9: Revisar, comentar y probar el códigoStep 9: Review, comment, and test your code

A continuación, se agrega un comentario al código.You next add a comment to your code. Un comentario es una nota que no cambia la forma de comportarse del programa.A comment is a note that doesn't change the way the program behaves. Hace que resulte más fácil entender el código a la persona que lo lee.It makes it easier for someone who is reading your code to understand what it does. Agregar comentarios al código es un hábito recomendable.Adding comments to your code is a good habit to get into. En Visual C#, se utilizan dos barras diagonales (//) para marcar una línea como comentario.In Visual C#, two forward slashes (//) mark a line as a comment. En Visual Basic, se utiliza una comilla sencilla (') para marcar una línea como comentario.In Visual Basic, a single quotation mark (') is used to mark a line as a comment. Después de agregar un comentario, se prueba el programa.After you add a comment, you test your program. Es recomendable ejecutar y probar el código con frecuencia mientras trabaja en sus proyectos para que pueda detectar y corregir pronto cualquier problema, antes de que la complejidad del código aumente.It's good practice to run and test your code frequently while you're working on your projects, so you can catch and fix any problems early, before the code gets more complicated. Esto se denomina prueba iterativa.This is called iterative testing.

Acaba de compilar algo que funciona y, aunque todavía no está terminado, ya es capaz de cargar una imagen.You just built something that works, and although it's not done yet, it can already load a picture. Antes de agregar un comentario al código y probarlo, dedique un tiempo a revisar los conceptos del código, porque los utilizará con frecuencia:Before you add a comment to your code and test it, take time to review the code concepts, because you will use these concepts frequently:

  • Al hacer doble clic en el botón Show a picture (Mostrar una imagen) en el Diseñador de Windows Forms, el IDE agregó automáticamente un método al código del programa.When you double-clicked the Show a picture button in Windows Forms Designer, the IDE automatically added a method to your program's code.

  • Los métodos permiten organizar el código: son la manera de agrupar las partes del código.Methods are how you organize your code: It's how your code is grouped together.

  • Casi siempre, un método realiza una cantidad reducida de acciones en un orden concreto; por ejemplo, el método showButton_Click() muestra un cuadro de diálogo y, a continuación, carga una imagen.Most of the time, a method does a small number of things in a specific order, like how your showButton_Click() method shows a dialog box and then loads a picture.

  • Un método se compone de instrucciones o líneas de código.A method is made up of code statements, or lines of code. Podemos considerar que un método es una manera de empaquetar instrucciones de código juntas.Think of a method as a way to bundle code statements together.

  • Cuando se ejecuta un método, o se le llama, se ejecutan las instrucciones que contiene en orden, una tras otra, empezando por la primera.When a method is executed, or called, the statements in the method are executed in order, one after another, starting with the first one.

    A continuación, se muestra un ejemplo de una instrucción.The following is an example of a statement.

    pictureBox1.Load(openFileDialog1.FileName);
    
    pictureBox1.Load(openFileDialog1.FileName)
    

    Las instrucciones son lo que permite que el programa haga cosas.Statements are what make your programs do things. En Visual C#, una instrucción finaliza siempre en un signo de punto y coma.In Visual C#, a statement always ends in a semicolon. En Visual Basic, el final de una línea es el final de una instrucción.In Visual Basic, the end of a line is the end of a statement. (No se necesita indicar el signo de punto y coma en Visual Basic.) La instrucción anterior ordena al control PictureBox que cargue el archivo que el usuario ha seleccionado con el componente OpenFileDialog.(No semicolon is needed in Visual Basic.) The preceding statement tells your PictureBox control to load the file that the user selected with the OpenFileDialog component.

    vínculo al vídeoPara obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic (vídeo 5) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 5).link to videoFor a video version of this topic, see Tutorial 1: Create a picture viewer in Visual Basic - Video 5 or Tutorial 1: Create a picture viewer in C# - Video 5. En estos vídeos se utilizó una versión anterior de Visual Studio, por lo que hay ligeras diferencias en algunos comandos de menú y otros elementos de la interfaz de usuario.These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual Studio.However, the concepts and procedures work similarly in the current version of Visual Studio.

Para agregar comentariosTo add comments

  1. Agregue el siguiente comentario al código.Add the following comment to your code.

    Private Sub showButton_Click() Handles showButton.Click
    
        ' Show the Open File dialog. If the user clicks OK, load the
        ' picture that the user chose.
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    
    private void showButton_Click(object sender, EventArgs e)
    {
        // Show the Open File dialog. If the user clicks OK, load the
        // picture that the user chose.
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);
        }
    }
    

    Note

    El controlador de eventos Click del botón showButton ya está completado y funciona.Your showButton button's Click event handler is now finished, and it works. Ha empezado a escribir código, comenzando por una instrucción if.You have started writing code, starting with an if statement. Una instrucción if es la manera de ordenar al programa: "Compruebe esto y, si se cumple, realice estas acciones".An if statement is how you tell your program, "Check this one thing, and if it's true, do these actions." En este caso, le está diciendo al programa que abra el cuadro de diálogo Abrir archivo y que, si el usuario selecciona un archivo y elige el botón Aceptar, cargue ese archivo en PictureBox.In this case, you tell your program to open the Open File dialog box, and if the user selects a file and chooses the OK button, load that file in the PictureBox.

    Tip

    El IDE se ha creado para facilitar la tarea de escribir código. Los fragmentos de código constituyen una manera de conseguirlo.The IDE is built to make it easy for you to write code, and code snippets are one way it does that. Un fragmento de código es un acceso directo que se expande para crear un bloque pequeño de código.A snippet is a shortcut that gets expanded into a small block of code.

    Puede ver todos los fragmentos de código disponibles.You can see all of the snippets available. En la barra de menús, elija Herramientas > Administrador de fragmentos de código.On the menu bar, choose Tools > Code Snippets Manager. En Visual C#, el fragmento de código if está en Visual C#.For Visual C#, the if snippet is in Visual C# . En Visual Basic, los fragmentos de código if están en Condicionales y bucles > Code Patterns (Patrones de código).For Visual Basic, the if snippets are in Conditionals and Loops > Code Patterns. Este administrador se puede utilizar para examinar los fragmentos de código existentes o agregar los suyos propios.You can use this manager to browse existing snippets or add your own snippets.

    Para activar un fragmento de código mientras está especificando el código, escríbalo y elija la tecla Tab.To activate a snippet when typing code, type it and choose the Tab key. Muchos fragmentos de código aparecen en la ventana IntelliSense, motivo por el cual la tecla Tab se elige dos veces: la primera para seleccionar el fragmento de código en la ventana IntelliSense y la segunda para indicarle al IDE que lo use.Many snippets appear in the IntelliSense window, which is why you choose the Tab key twice: first to select the snippet from the IntelliSense window, and then to tell the IDE to use the snippet. (IntelliSense admite el fragmento de código if, pero no el fragmento de código ifelse.)(IntelliSense supports the if snippet, but not the ifelse snippet.)

  2. Guarde el programa antes de ejecutarlo, para ello, elija el botón de la barra de herramientas Guardar todo, que se muestra a continuación.Before you run your program, save your program by choosing the Save All toolbar button, which appears as follows.

    Botón de barra de herramientas Guardar todo Botón Guardar todoSave All toolbar button Save All button

    Si quiere, para guardar el programa, elija Archivo > Guardar todo en la barra de menús.Alternatively, to save your program, on the menu bar, choose File > Save All. El procedimiento recomendado consiste en guardar desde el principio y a menudo.It's a best practice to save early and often.

    Mientras se ejecuta, el programa debería parecerse a la siguiente imagen.When it's running, your program should look like the following picture.

    Visor de imágenes Picture ViewerPicture Viewer Picture Viewer

Para probar el programaTo test your program

  1. Elija la tecla F5 o el botón de la barra de herramientas Iniciar depuración.Choose the F5 key or choose the Start Debugging toolbar button.

  2. Elija el botón Show a picture (Mostrar una imagen) para ejecutar el código que acaba de escribir.Choose the Show a picture button to run the code you just wrote. Primero, el programa abre un cuadro de diálogo Abrir archivo.First, the program opens an Open File dialog box. Compruebe que los filtros aparecen en la lista desplegable Tipo de archivo en la parte inferior del cuadro de diálogo.Verify that your filters appear in the Files of type drop-down list at the bottom of the dialog box. A continuación, navegue hasta una imagen y ábrala.Then navigate to a picture and open it. Normalmente, encontrará imágenes de ejemplo que se distribuyen con el sistema operativo Windows en la carpeta Mis documentos, dentro de la carpeta Mis imágenes\Imágenes de muestra.You can usually find sample pictures that ship with the Windows operating system in your My Documents folder, inside the My Pictures\Sample Pictures folder.

    Note

    Si no ve ninguna imagen en el cuadro de diálogo Select a picture file (Seleccionar un archivo de imagen), asegúrese de que el filtro Todos los archivos (*.*) esté seleccionado en la lista desplegable situada en la parte inferior derecha del cuadro de diálogo.If you don't see any images in the Select a picture file dialog box, be sure that the All files (*.*) filter is selected in the drop-down list on the lower right side of the dialog box.

  3. Cargue una imagen y esta aparecerá en el control PictureBox.Load a picture, and it appears in your PictureBox. A continuación intente cambiar el tamaño del formulario arrastrando los bordes.Then try resizing your form by dragging its borders. Como el control PictureBox está acoplado dentro de un control TableLayoutPanel, que a su vez está acoplado en el formulario, el ancho del área de imagen se ajustará al ancho del formulario y el alto ocupará el 90 por ciento superior del formulario.Because you have your PictureBox docked inside a TableLayoutPanel, which itself is docked inside the form, your picture area will resize itself so that it's as wide as the form, and fills the top 90 percent of the form. Por este motivo hemos utilizado los contenedores TableLayoutPanel y FlowLayoutPanel: mantienen el tamaño del formulario correcto cuando el usuario lo modifica.That's why you used the TableLayoutPanel and FlowLayoutPanel containers: They keep your form sized correctly when the user resizes it.

    En este momento, las imágenes más grandes sobrepasan los bordes del visor de imágenes.Right now, larger pictures go beyond the borders of your picture viewer. En el paso siguiente, agregará código para que las imágenes se ajusten a la ventana.In the next step, you'll add code to make pictures fit in the window.

Para continuar o revisarTo continue or review