tomee-9.0/es/examples/vaadin-vxx-simple.html - tomee-site-pub - Git at Google

 <!DOCTYPE html>
 <html lang="en">

 <head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Apache TomEE</title>
 	<meta name="description"
 		  content="Apache TomEE is a lightweight, yet powerful, JavaEE Application server with feature rich tooling." />
 	<meta name="keywords" content="tomee,asf,apache,javaee,jee,shade,embedded,test,junit,applicationcomposer,maven,arquillian" />
 	<meta name="author" content="Luka Cvetinovic for Codrops" />
 	<link rel="icon" href="../../../favicon.ico">
 	<link rel="icon"  type="image/png" href="../../../favicon.png">
 	<meta name="msapplication-TileColor" content="#80287a">
 	<meta name="theme-color" content="#80287a">
 	<link rel="stylesheet" type="text/css" href="../../../css/normalize.css">
 	<link rel="stylesheet" type="text/css" href="../../../css/bootstrap.css">
 	<link rel="stylesheet" type="text/css" href="../../../css/owl.css">
 	<link rel="stylesheet" type="text/css" href="../../../css/animate.css">
 	<link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome-4.1.0/css/font-awesome.min.css">
 	<link rel="stylesheet" type="text/css" href="../../../fonts/eleganticons/et-icons.css">
 	<link rel="stylesheet" type="text/css" href="../../../css/jqtree.css">
 	<link rel="stylesheet" type="text/css" href="../../../css/idea.css">
 	<link rel="stylesheet" type="text/css" href="../../../css/cardio.css">

 	<script type="text/javascript">

       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-2717626-1']);
       _gaq.push(['_setDomainName', 'apache.org']);
       _gaq.push(['_trackPageview']);

       (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
       })();

     </script>
 </head>

 <body>
     <div class="preloader">
 		<img src="../../../img/loader.gif" alt="Preloader image">
 	</div>
 	    <nav class="navbar">
 		<div class="container">
 		  <div class="row">          <div class="col-md-12">

 			<!-- Brand and toggle get grouped for better mobile display -->
 			<div class="navbar-header">
 				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 					<span class="sr-only">Toggle navigation</span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
 				<a class="navbar-brand" href="/">
 				    <span>


                         <img src="../../../img/logo-active.png">


                     </span>
 				    Apache TomEE
                 </a>
 			</div>
 			<!-- Collect the nav links, forms, and other content for toggling -->
 			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 				<ul class="nav navbar-nav navbar-right main-nav">
 					<li><a href="../../../docs.html">Documentation</a></li>
 					<li><a href="../../../community/index.html">Community</a></li>
 					<li><a href="../../../security/security.html">Security</a></li>
 					<li><a href="../../../download-ng.html">Downloads</a></li>
 				</ul>
 			</div>
 			<!-- /.navbar-collapse -->
 		   </div></div>
 		</div>
 		<!-- /.container-fluid -->
 	</nav>


     <div id="main-block" class="container main-block">
         <div class="row title">
           <div class="col-md-12">
             <div class='page-header'>

               <h1>null</h1>
             </div>
           </div>
         </div>
         <div class="row">

             <div class="col-md-12">
                 <div class="sect1">
 <h2 id="_actual_plataforma_vaadin_simple_aplicación_web_en_java">Actual Plataforma Vaadin  - Simple Aplicación Web en Java</h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>Este ejemplo muestra como iniciar con una simple aplicación web que usa Vaadin Flow,
 basada totalmente en Java y ejecutandose en TomEE (webprofile). La versión actual de Vaadin Flow
 empleada en este ejemplo es la última disponible. Si se requiere una
 versión LTS, dirijase a uno de los ejemplos en esta sección del repositorio con
 el prefijo LTS.</p>
 </div>
 <div class="paragraph">
 <p>La Plataforma Vaadin es OpenSource y se encuentra disponible en:
 <a href="https://github.com/vaadin/platform">Github</a></p>
 </div>
 <div class="sect2">
 <h3 id="_construir_este_ejemplo">Construir este ejemplo</h3>
 <div class="paragraph">
 <p>Para construir este ejemplo, simplemente ejecute: <em>mvn clean install tomee:run</em> y la
 aplicación se ejecutara bajo: <a href="http://localhost:8080/" class="bare">http://localhost:8080/</a></p>
 </div>
 </div>
 <div class="sect2">
 <h3 id="_implementación">Implementación</h3>
 <div class="paragraph">
 <p>Esta implementación usa el <a href="https://vaadin.com/flow">Flow API</a> de la
 plataforma Vaadin.</p>
 </div>
 <div class="listingblock">
 <div class="content">
 <pre class="highlight"><code class="language-java" data-lang="java">@Route("")
 public class HelloVaadinV10 extends Composite&lt;Div&gt; {
     public HelloVaadinV10() {
         final VerticalLayout layout = new VerticalLayout();
         layout
             .add(new Button("click me",
                             event -&gt; layout.add(new Label("clicked again"))
             ));
         //set the main Component
         getContent().add(layout);
     }
 }</code></pre>
 </div>
 </div>
 <div class="paragraph">
 <p>La documentacion para la actual plataforma Vaadin se encuentra disponible en:
 <a href="https://vaadin.com/docs/">aqui</a></p>
 </div>
 </div>
 <div class="sect2">
 <h3 id="_información_de_soporte">Información de Soporte</h3>
 <div class="paragraph">
 <p>A partir de Vaadin 10, Vaadin se esta moviendo a un modele de versionado con
 Cuatro versiones cada año. Esto permite liberar nueva funcionalidad de una manera
 mas rapida para los desarrolladores. Vaadin continua su compromiso con la estabilidad
 ofreciendo versiones con Long-Term Support (LTS). Las versiones LTS serán liberadas
 aproximadamente cada dos años ofreciendo 5 años de soporte.</p>
 </div>
 </div>
 </div>
 </div>
             </div>

         </div>
     </div>
 <footer>
 		<div class="container">
 			<div class="row">
 				<div class="col-sm-6 text-center-mobile">
 					<h3 class="white">Be simple.  Be certified. Be Tomcat.</h3>
 					<h5 class="light regular light-white">"A good application in a good server"</h5>
 					<ul class="social-footer">
 						<li><a href="https://www.facebook.com/ApacheTomEE/"><i class="fa fa-facebook"></i></a></li>
 						<li><a href="https://twitter.com/apachetomee"><i class="fa fa-twitter"></i></a></li>
 						<li><a href="https://plus.google.com/communities/105208241852045684449"><i class="fa fa-google-plus"></i></a></li>
 					</ul>
 				</div>
 				<div class="col-sm-6 text-center-mobile">
 					<div class="row opening-hours">
 						<div class="col-sm-3 text-center-mobile">
 							<h5><a href="../../../latest/docs/" class="white">Documentation</a></h5>
 							<ul class="list-unstyled">
 								<li><a href="../../../latest/docs/admin/configuration/index.html" class="regular light-white">How to configure</a></li>
 								<li><a href="../../../latest/docs/admin/file-layout.html" class="regular light-white">Dir. Structure</a></li>
 								<li><a href="../../../latest/docs/developer/testing/index.html" class="regular light-white">Testing</a></li>
 								<li><a href="../../../latest/docs/admin/cluster/index.html" class="regular light-white">Clustering</a></li>
 							</ul>
 						</div>
 						<div class="col-sm-3 text-center-mobile">
 							<h5><a href="../../../latest/examples/" class="white">Examples</a></h5>
 							<ul class="list-unstyled">
 								<li><a href="../../../latest/examples/simple-cdi-interceptor.html" class="regular light-white">CDI Interceptor</a></li>
 								<li><a href="../../../latest/examples/rest-cdi.html" class="regular light-white">REST with CDI</a></li>
 								<li><a href="../../../latest/examples/ejb-examples.html" class="regular light-white">EJB</a></li>
 								<li><a href="../../../latest/examples/jsf-managedBean-and-ejb.html" class="regular light-white">JSF</a></li>
 							</ul>
 						</div>
 						<div class="col-sm-3 text-center-mobile">
 							<h5><a href="../../../community/index.html" class="white">Community</a></h5>
 							<ul class="list-unstyled">
 								<li><a href="../../../community/contributors.html" class="regular light-white">Contributors</a></li>
 								<li><a href="../../../community/social.html" class="regular light-white">Social</a></li>
 								<li><a href="../../../community/sources.html" class="regular light-white">Sources</a></li>
 							</ul>
 						</div>
 						<div class="col-sm-3 text-center-mobile">
 							<h5><a href="../../../security/index.html" class="white">Security</a></h5>
 							<ul class="list-unstyled">
 								<li><a href="http://apache.org/security" target="_blank" class="regular light-white">Apache Security</a></li>
 								<li><a href="http://apache.org/security/projects.html" target="_blank" class="regular light-white">Security Projects</a></li>
 								<li><a href="http://cve.mitre.org" target="_blank" class="regular light-white">CVE</a></li>
 							</ul>
 						</div>
 					</div>
 				</div>
 			</div>
 			<div class="row bottom-footer text-center-mobile">
 				<div class="col-sm-12 light-white">
 					<p>Copyright &copy; 1999-2016 The Apache Software Foundation, Licensed under the Apache License, Version 2.0. Apache TomEE, TomEE, Apache, the Apache feather logo, and the Apache TomEE project logo are trademarks of The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of their respective owners.</p>
 				</div>
 			</div>
 		</div>
 	</footer>
 	<!-- Holder for mobile navigation -->
 	<div class="mobile-nav">
         <ul>
           <li><a hef="../../../latest/docs/admin/index.html">Administrators</a>
           <li><a hef="../../../latest/docs/developer/index.html">Developers</a>
           <li><a hef="../../../latest/docs/advanced/index.html">Advanced</a>
           <li><a hef="../../../community/index.html">Community</a>
         </ul>
 		<a href="#" class="close-link"><i class="arrow_up"></i></a>
 	</div>
 	<!-- Scripts -->
 	<script src="../../../js/jquery-1.11.1.min.js"></script>
 	<script src="../../../js/owl.carousel.min.js"></script>
 	<script src="../../../js/bootstrap.min.js"></script>
 	<script src="../../../js/wow.min.js"></script>
 	<script src="../../../js/typewriter.js"></script>
 	<script src="../../../js/jquery.onepagenav.js"></script>
 	<script src="../../../js/tree.jquery.js"></script>
 	<script src="../../../js/highlight.pack.js"></script>
     <script src="../../../js/main.js"></script>
 		</body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Apache TomEE</title>
	<meta name="description"
	content="Apache TomEE is a lightweight, yet powerful, JavaEE Application server with feature rich tooling." />
	<meta name="keywords" content="tomee,asf,apache,javaee,jee,shade,embedded,test,junit,applicationcomposer,maven,arquillian" />
	<meta name="author" content="Luka Cvetinovic for Codrops" />
	<link rel="icon" href="../../../favicon.ico">
	<link rel="icon" type="image/png" href="../../../favicon.png">
	<meta name="msapplication-TileColor" content="#80287a">
	<meta name="theme-color" content="#80287a">
	<link rel="stylesheet" type="text/css" href="../../../css/normalize.css">
	<link rel="stylesheet" type="text/css" href="../../../css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="../../../css/owl.css">
	<link rel="stylesheet" type="text/css" href="../../../css/animate.css">
	<link rel="stylesheet" type="text/css" href="../../../fonts/font-awesome-4.1.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="../../../fonts/eleganticons/et-icons.css">
	<link rel="stylesheet" type="text/css" href="../../../css/jqtree.css">
	<link rel="stylesheet" type="text/css" href="../../../css/idea.css">
	<link rel="stylesheet" type="text/css" href="../../../css/cardio.css">

	<script type="text/javascript">

	var _gaq = _gaq \|\| [];
	_gaq.push(['_setAccount', 'UA-2717626-1']);
	_gaq.push(['_setDomainName', 'apache.org']);
	_gaq.push(['_trackPageview']);

	(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();

	</script>
	</head>

	<body>
	<div class="preloader">
	<img src="../../../img/loader.gif" alt="Preloader image">
	</div>
	<nav class="navbar">
	<div class="container">
	<div class="row"> <div class="col-md-12">

	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="/">
	<span>


	<img src="../../../img/logo-active.png">


	</span>
	Apache TomEE
	</a>
	</div>
	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav navbar-right main-nav">
	<li><a href="../../../docs.html">Documentation</a></li>
	<li><a href="../../../community/index.html">Community</a></li>
	<li><a href="../../../security/security.html">Security</a></li>
	<li><a href="../../../download-ng.html">Downloads</a></li>
	</ul>
	</div>
	<!-- /.navbar-collapse -->
	</div></div>
	</div>
	<!-- /.container-fluid -->
	</nav>


	<div id="main-block" class="container main-block">
	<div class="row title">
	<div class="col-md-12">
	<div class='page-header'>

	<h1>null</h1>
	</div>
	</div>
	</div>
	<div class="row">

	<div class="col-md-12">
	<div class="sect1">
	<h2 id="_actual_plataforma_vaadin_simple_aplicación_web_en_java">Actual Plataforma Vaadin - Simple Aplicación Web en Java</h2>
	<div class="sectionbody">
	<div class="paragraph">
	<p>Este ejemplo muestra como iniciar con una simple aplicación web que usa Vaadin Flow,
	basada totalmente en Java y ejecutandose en TomEE (webprofile). La versión actual de Vaadin Flow
	empleada en este ejemplo es la última disponible. Si se requiere una
	versión LTS, dirijase a uno de los ejemplos en esta sección del repositorio con
	el prefijo LTS.</p>
	</div>
	<div class="paragraph">
	<p>La Plataforma Vaadin es OpenSource y se encuentra disponible en:
	<a href="https://github.com/vaadin/platform">Github</a></p>
	</div>
	<div class="sect2">
	<h3 id="_construir_este_ejemplo">Construir este ejemplo</h3>
	<div class="paragraph">
	<p>Para construir este ejemplo, simplemente ejecute: <em>mvn clean install tomee:run</em> y la
	aplicación se ejecutara bajo: <a href="http://localhost:8080/" class="bare">http://localhost:8080/</a></p>
	</div>
	</div>
	<div class="sect2">
	<h3 id="_implementación">Implementación</h3>
	<div class="paragraph">
	<p>Esta implementación usa el <a href="https://vaadin.com/flow">Flow API</a> de la
	plataforma Vaadin.</p>
	</div>
	<div class="listingblock">
	<div class="content">
	<pre class="highlight"><code class="language-java" data-lang="java">@Route("")
	public class HelloVaadinV10 extends Composite<Div> {
	public HelloVaadinV10() {
	final VerticalLayout layout = new VerticalLayout();
	layout
	.add(new Button("click me",
	event -> layout.add(new Label("clicked again"))
	));
	//set the main Component
	getContent().add(layout);
	}
	}</code></pre>
	</div>
	</div>
	<div class="paragraph">
	<p>La documentacion para la actual plataforma Vaadin se encuentra disponible en:
	<a href="https://vaadin.com/docs/">aqui</a></p>
	</div>
	</div>
	<div class="sect2">
	<h3 id="_información_de_soporte">Información de Soporte</h3>
	<div class="paragraph">
	<p>A partir de Vaadin 10, Vaadin se esta moviendo a un modele de versionado con
	Cuatro versiones cada año. Esto permite liberar nueva funcionalidad de una manera
	mas rapida para los desarrolladores. Vaadin continua su compromiso con la estabilidad
	ofreciendo versiones con Long-Term Support (LTS). Las versiones LTS serán liberadas
	aproximadamente cada dos años ofreciendo 5 años de soporte.</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	</div>
	</div>
	<footer>
	<div class="container">
	<div class="row">
	<div class="col-sm-6 text-center-mobile">
	<h3 class="white">Be simple. Be certified. Be Tomcat.</h3>
	<h5 class="light regular light-white">"A good application in a good server"</h5>
	<ul class="social-footer">
	<li><a href="https://www.facebook.com/ApacheTomEE/"><i class="fa fa-facebook"></i></a></li>
	<li><a href="https://twitter.com/apachetomee"><i class="fa fa-twitter"></i></a></li>
	<li><a href="https://plus.google.com/communities/105208241852045684449"><i class="fa fa-google-plus"></i></a></li>
	</ul>
	</div>
	<div class="col-sm-6 text-center-mobile">
	<div class="row opening-hours">
	<div class="col-sm-3 text-center-mobile">
	<h5><a href="../../../latest/docs/" class="white">Documentation</a></h5>
	<ul class="list-unstyled">
	<li><a href="../../../latest/docs/admin/configuration/index.html" class="regular light-white">How to configure</a></li>
	<li><a href="../../../latest/docs/admin/file-layout.html" class="regular light-white">Dir. Structure</a></li>
	<li><a href="../../../latest/docs/developer/testing/index.html" class="regular light-white">Testing</a></li>
	<li><a href="../../../latest/docs/admin/cluster/index.html" class="regular light-white">Clustering</a></li>
	</ul>
	</div>
	<div class="col-sm-3 text-center-mobile">
	<h5><a href="../../../latest/examples/" class="white">Examples</a></h5>
	<ul class="list-unstyled">
	<li><a href="../../../latest/examples/simple-cdi-interceptor.html" class="regular light-white">CDI Interceptor</a></li>
	<li><a href="../../../latest/examples/rest-cdi.html" class="regular light-white">REST with CDI</a></li>
	<li><a href="../../../latest/examples/ejb-examples.html" class="regular light-white">EJB</a></li>
	<li><a href="../../../latest/examples/jsf-managedBean-and-ejb.html" class="regular light-white">JSF</a></li>
	</ul>
	</div>
	<div class="col-sm-3 text-center-mobile">
	<h5><a href="../../../community/index.html" class="white">Community</a></h5>
	<ul class="list-unstyled">
	<li><a href="../../../community/contributors.html" class="regular light-white">Contributors</a></li>
	<li><a href="../../../community/social.html" class="regular light-white">Social</a></li>
	<li><a href="../../../community/sources.html" class="regular light-white">Sources</a></li>
	</ul>
	</div>
	<div class="col-sm-3 text-center-mobile">
	<h5><a href="../../../security/index.html" class="white">Security</a></h5>
	<ul class="list-unstyled">
	<li><a href="http://apache.org/security" target="_blank" class="regular light-white">Apache Security</a></li>
	<li><a href="http://apache.org/security/projects.html" target="_blank" class="regular light-white">Security Projects</a></li>
	<li><a href="http://cve.mitre.org" target="_blank" class="regular light-white">CVE</a></li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	<div class="row bottom-footer text-center-mobile">
	<div class="col-sm-12 light-white">
	<p>Copyright © 1999-2016 The Apache Software Foundation, Licensed under the Apache License, Version 2.0. Apache TomEE, TomEE, Apache, the Apache feather logo, and the Apache TomEE project logo are trademarks of The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of their respective owners.</p>
	</div>
	</div>
	</div>
	</footer>
	<!-- Holder for mobile navigation -->
	<div class="mobile-nav">
	<ul>
	<li><a hef="../../../latest/docs/admin/index.html">Administrators</a>
	<li><a hef="../../../latest/docs/developer/index.html">Developers</a>
	<li><a hef="../../../latest/docs/advanced/index.html">Advanced</a>
	<li><a hef="../../../community/index.html">Community</a>
	</ul>
	<a href="#" class="close-link"><i class="arrow_up"></i></a>
	</div>
	<!-- Scripts -->
	<script src="../../../js/jquery-1.11.1.min.js"></script>
	<script src="../../../js/owl.carousel.min.js"></script>
	<script src="../../../js/bootstrap.min.js"></script>
	<script src="../../../js/wow.min.js"></script>
	<script src="../../../js/typewriter.js"></script>
	<script src="../../../js/jquery.onepagenav.js"></script>
	<script src="../../../js/tree.jquery.js"></script>
	<script src="../../../js/highlight.pack.js"></script>
	<script src="../../../js/main.js"></script>
	</body>

	</html>