Hello World ( Olá mundo ) , User control básico

Original Version

O propósito deste documento é explicar como criar um simples user control (UC) "Hello World - Olá Mundo". Após completar este exemplo passo a passo você terá um novo user control chamado "Hello World" na sua barra de ferramentas. O que este controle fará ? Após arrastá-lo ao seu formulário(assim como vc faz com os textboxes, grids e outros) , este user control irá mostrar uma mensagem "Hello World"  na sua aplicação Genexus com a cor e fonte que será configurado nas propriedades deste user control.

Provavelmente, criando o user control "Hello World" não terá tanta utilidade, mas lembre-se que está sendo criado apenas como fim de apredizado. Após ler este tutorial você poderá iniciar seus conhecimentos reais sobre outros interessantes user controles, como Menus, Treeviews, controles SilverLight  e tantos outros. Necessitando apenas definir qual user control vc irá fazer.

Definição do User Control "Hello world"

O controle irá fazer o seguinte:

• mostrar uma mensagem "Hello world"
• permitir ao programador configurar a cor do texto "Hello Wolrd"
• permitir ao programador configurar a fonte do texto "Hello World"
• permitir ao programador configurar o tamanho da fonte do texto "Hello World"

Criando o Controle

    Execute "UserControlEditor.exe" localizado sobre o diretório de instalação do GeneXus e click em New button. Informe o nome do the user control e a pasta de localização. Todos os user controls deverão estar sobre a pasta UserControls que está abaixo da instalação da pasta do GeneXus 

2) Under the Control Definition tab, set the "Icon (used in toolbox)" property. In this case we are using an Icon named HelloWorldIcon.ico which has to be placed under the HelloWorld folder that we have created in step 1. Because this is a simple example, there isn't any more work to do in this tab.

3) As we stated before, the control must have 3 properties that will allow us to set the "Hello World" text, font and size. Consequently, under the Properties tab we have to create 3 properties:

• FontFace
  • Type: Combo
  • Default: Verdana
  • Values: Arial=Arial,Verdana=Verdana,Comic Sans MS=Comic Sans MS
• FontColor
  • Type: Text
  • Default: #000000 (black)
• FontSize
  • Type: Text
  • Default: 10

4) At the time of rendering our control, GeneXus will invoke the Show method of our runtime render file (specified under the control definition tab). This file can be acceded under the JScript Runtime Render tab and is where we will have to program all the main logic of our control. In this case, as we only want to display a "Hello World" message with a given font, color and size, the render file will contain the following: 

Bear in mind that all the code shadowed in grey is automatically generated by the editor so you will only have to add the "Hello World" text with the parameters (font, color and size) that you receive from GeneXus. In this case this line is:

 

var buffer= '<a id="hworld1" href="#" style="color:rgb(' + this.FontColor.R + ',' + this.FontColor.G + ',' + this.FontColor.B + ')' + '; font-family:' + this.FontFace+ ';font-size:' + 
this.FontSize + 'pt;">Hello World!!!</a>';			
				
		this.setHtml(buffer); 						
		
		document.getElementById("hworld1").onclick = this.HelloWorldClicked;

 

5) This step is optional: when creating a user control, indicate how to display your control at design time (in the GeneXus IDE). You can, for example, display an image representing your control or you can do more sophisticated things like rendering the control dynamically according to its properties as in GXChart. In this case, let's just display a simple "Hello World Control" text when the control is dragged to the web form. In order to do that, it is necessary to edit the runtime render file under the XSL Designer Render tab by adding only the "Hello World Control" text, as follows:

Após isto, seu controle irá mostrar conforme abaixo:

Feche GeneXus (se estiver aberto) e digite "Genexus.exe /install" Na pasta de instalaçãoGeneXus . Então inicie GeneXus como usual.

Finalmente, seu controle está terminado e pronto para ser usado!!

Usando o Controle

Agora, podemos usar o controle que nós criamos. Este é um processo muito simples:

1) Crie um web panel e arrasta o controle "HelloWorld" da barra de ferramentas.

2) Configurando suas propriedades

3) Executando!

Download de Exemplo

Exemplo para Download  aqui