blob: 3f611498d082f8143aeb6bb26396f7d73af24e57 [file] [log] [blame]
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Eclipse Scout - A one-stop framework to develop professional business applications</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta property="og:title" content="Eclipse Scout - A one-stop framework to develop professional business applications">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!-- FAVICON - Generator: https://www.favicon-generator.org/ -->
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="img/favicon/apple-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<meta name="msapplication-TileImage" content="img/favicon/ms-icon-144x144.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header>
<div id="eclipse-scout-logo"><div class="logo"></div><div class="text"></div></div>
<nav id="main-navigation">
<div class="navigation-item lv1 first"><a href="https://eclipsescout.github.io/11.0/getstarted.html" target="_blank" class="text"
title="Get started with Eclipse Scout">Tutorial</a></div>
<div class="navigation-item lv1"><a href="https://eclipsescout.github.io/" target="_blank" class="text">Docs</a></div>
<div class="navigation-item lv1 has-children">
<div class="text">Community</div>
<div class="navigation-lv2-panel hidden">
<a href="https://www.eclipse.org/forums/index.php?t&#x3D;thread&amp;frm_id&#x3D;174" target="_blank" class="navigation-item lv2 first" id="icon-eclipse-scout-forum">
<div class="navigation-item-container">
<div class="title">Eclipse Scout Forum</div>
<div class="text">Need help? Ask the experts</div>
</div>
</a>
<a href="https://stackoverflow.com/tags/eclipse-scout" target="_blank" class="navigation-item lv2" id="icon-stack-overflow">
<div class="navigation-item-container">
<div class="title">StackOverflow</div>
<div class="text">Another source of help</div>
</div>
</a>
<a href="https://github.com/eclipse-scout/scout.rt/tree/releases/11.0/" target="_blank" class="navigation-item lv2 last" id="icon-git-hub">
<div class="navigation-item-container">
<div class="title">GitHub</div>
<div class="text">View source code. Contribute</div>
</div>
</a>
</div>
</div>
<div class="navigation-item lv1 last"><a href="features.html" class="text">Features</a></div>
<div class="navigation-item lv1 mobile-only"><a href="versions.html" class="text">Versions</a></div>
<div class="navigation-item lv1 mobile-only"><a href="javascript:onGetStartedLinkClick()" class="text">Get Started</a></div>
</nav>
<a href="versions.html#v11" id="scout-version-button" class="desktop-only">
<svg height="36" width="36" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="17" stroke="#014786" stroke-width="2" fill="white" />
</svg>
<div>v11</div>
</a>
<button id="get-started-button" class="desktop-only">Get Started</button>
<button id="mobile-navigation-button" class="mobile-only"></button>
</header>
<div id="wrapper">
<!-- **** INTRO **** -->
<div id="intro-panel">
<div class="intro-column first">
<img src="img/screenshot/intro-screen.png">
</div>
<div class="intro-column last">
<h1>Business&nbsp;Applications Made Easy</h1>
<p><strong>Eclipse Scout</strong> is a one-stop framework with straight concepts,
a strong application model and a versatile UI. It enables you to develop professional
software in Java or JavaScript.</p>
</div>
</div>
<!-- **** FEATURES **** -->
<div id="features-panel">
<h2><a id="features-and-highlights">Features and Highlights</a></h2>
<p>Hundreds of commercial projects rely on Eclipse Scout. It is a mature, stable, open-source framework
with active development, backed by a successful software company. Here are some of the benefits you
get when working with Scout. Check the <a href="features.html">Features</a> page for more details.</p>
<div class="features-grid">
<div class="features-grid-row first">
<div class="features-grid-tile">
<a href="features.html#widgets">
<img src="img/light/analytics-graph-bar.svg">
<div>Powerful Widgets</div>
<p>Scout provides a mature widget library to build beautiful and stable web-based user interfaces.</p>
</a>
</div>
<div class="features-grid-tile">
<a href="features.html#web">
<img src="img/light/programming-browser.svg">
<div>Web Toolstack</div>
<p>Modern web toolstack with ES6+, Webpack and Babel</p>
</a>
</div>
<div class="features-grid-tile last">
<a href="features.html#responsive">
<img src="img/light/responsive-design-1.svg">
<div>Responsive UI</div>
<p>Build responsive applications for desktop and mobile devices.</p>
</a>
</div>
</div>
<div class="features-grid-row">
<div class="features-grid-tile">
<a href="features.html#full-stack">
<img src="img/light/layers-stacked-1.svg">
<div>Full Stack</div>
<p>From frontend to backend to database: Scout helps you with every tier.</p>
</a>
</div>
<div class="features-grid-tile">
<a href="features.html#tools">
<img src="img/light/outdoors-swiss-knife.svg">
<div>Comprehensive Tools</div>
<p>Dependency management, i18n, Transaction handling, Testing, REST, Web services, Authentication...</p>
</a>
</div>
<div class="features-grid-tile last">
<a href="features.html#programming-language">
<img src="img/light/coffee-machine.svg">
<div>Java and JavaScript</div>
<p>Choose your favorite language to develop in Scout.</p>
</a>
</div>
</div>
</div>
</div>
<!-- **** DEMO-APPS **** -->
<div id="demo-apps-panel">
<h2><a id="demo-apps">Scout Demo Apps</a></h2>
<div id="demo-apps-navigation">
<div class="donut-line"></div>
<div class="demo-apps-buttons">
<div class="demo-app-button-column first">
<div class="demo-app-button active" data-show-container="contacts">
<svg class="demo-app-button-donut" height="50" width="50" viewBox="0 0 50 50">
<circle class="outer" cx="25" cy="25" r="24" fill="#014786" />
<circle class="inner" cx="25" cy="25" r="5" fill="white" />
</svg>
<div class="demo-app-button-label">
Contacts
</div>
</div>
</div>
<div class="demo-app-button-column">
<div class="demo-app-button" data-show-container="scout-classic-widgets">
<svg class="demo-app-button-donut" height="50" width="50" viewBox="0 0 50 50">
<circle class="outer" cx="25" cy="25" r="24" fill="#014786" />
<circle class="inner" cx="25" cy="25" r="5" fill="white" />
</svg>
<div class="demo-app-button-label">
Scout Classic<br/>Widgets
</div>
</div>
</div>
<div class="demo-app-button-column last">
<div class="demo-app-button" data-show-container="scout-js-widgets">
<svg class="demo-app-button-donut" height="50" width="50" viewBox="0 0 50 50">
<circle class="outer" cx="25" cy="25" r="24" fill="#014786" />
<circle class="inner" cx="25" cy="25" r="5" fill="white" />
</svg>
<div class="demo-app-button-label">
Scout JS<br/>Widgets
</div>
</div>
</div>
</div>
</div>
<div id="demo-app-container-wrapper">
<!-- Contacts -->
<div class="demo-app-container" id="contacts">
<div class="demo-app-description">
<div>Contacts</div>
<p>This lean business application written in <span class="tooltip" data-tooltip-text="scout.classic">Scout Classic</span> features patterns and best practices used in Scout applications.</p>
<a href="https://scout.bsi-software.com/contacts/" target="_blank" class="launch-app-link">Launch app</a>
</div>
<div class="demo-app-image">
<a href="https://scout.bsi-software.com/contacts/" target="_blank"><img src="img/screenshot/demo-app-contacts-preview.png"></a>
</div>
</div>
<!-- Scout Classic Widgets -->
<div class="demo-app-container hidden" id="scout-classic-widgets">
<div class="demo-app-description">
<div>Scout Classic Widgets</div>
<p>A Java application featuring all available widgets in <span class="tooltip" data-tooltip-text="scout.classic">Scout Classic</span>.</p>
<a href="https://scout.bsi-software.com/widgets/" target="_blank" class="launch-app-link">Launch app</a>
</div>
<div class="demo-app-image">
<a href="https://scout.bsi-software.com/widgets/" target="_blank"><img src="img/screenshot/demo-app-scout-classic-preview.png"></a>
</div>
</div>
<!-- Scout JS Widgets -->
<div class="demo-app-container hidden" id="scout-js-widgets">
<div class="demo-app-description">
<div>Scout JS Widgets</div>
<p>A JavaScript application featuring all available widgets in <span class="tooltip" data-tooltip-text="scout.js">Scout JS</span>.</p>
<a href="https://scout.bsi-software.com/jswidgets/" target="_blank" class="launch-app-link">Launch app</a>
</div>
<div class="demo-app-image">
<a href="https://scout.bsi-software.com/jswidgets/" target="_blank"><img src="img/screenshot/demo-app-scout-js-preview.png"></a>
</div>
</div>
</div> <!-- EOF demo-apps-container-wrapper -->
</div>
<!-- **** GETTING STARTED **** -->
<div id="getting-started-panel">
<div id="getting-started-panel-columns">
<div class="getting-started-column first">
<h3><a id="getting-started-java">Java Developers</a></h3>
<p>Learn how to build a <span class="tooltip inverted" data-tooltip-text="scout.classic">Scout Classic</span> application written in Java
with a server-side application model.</p>
<a href="https://eclipsescout.github.io/11.0/helloscout.html" class="get-started-link" target="_blank">Get started</a>
</div>
<div class="getting-started-column center">
<img src="img/light/space-rocket-flying.svg">
</div>
<div class="getting-started-column last">
<h3><a id="getting-started-javascript">JavaScript Developers</a></h3>
<p>Learn how to build a <span class="tooltip inverted" data-tooltip-text="scout.js">Scout JS</span> application written in JavaScript.<br/><br/></p>
<a href="https://eclipsescout.github.io/11.0/helloscout-js.html" class="get-started-link" target="_blank">Get started</a>
</div>
</div>
</div>
<!-- **** TRY SCOUT JS **** -->
<div id="try-scout-js-panel">
<div id="try-scout-js-columns">
<div class="try-scout-js-column first">
<h3><a id="try-scout-js">Try Scout JS</a></h3>
<p>See how simple it is to develop in Scout: Change the code in this
CodePen and click the "Rerun" button to update the Hello World app.</p>
</div>
<div class="try-scout-js-column last">
<p class="codepen" data-height="350" data-theme-id="dark" data-default-tab="js,result" data-user="eclipse-scout" data-slug-hash="BaQPjom"
style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Scout JS Hello World" data-editable="true">
<span>See the Pen <a href="https://codepen.io/eclipse-scout/pen/BaQPjom">
Scout JS Hello World</a> by Eclipse Scout (<a href="https://codepen.io/eclipse-scout">@eclipse-scout</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<!-- **** FOOTER **** -->
<footer>
<div id="social-media-bar">
<a href="https://www.eclipse.org/forums/index.php?t&#x3D;thread&amp;frm_id&#x3D;174" target="_blank" title="Eclipse Scout Forum"><img src="img/bold/conversation-question-warning-1-alternate.svg" class="small"></a>
<a href="https://stackoverflow.com/tags/eclipse-scout" target="_blank" title="Eclipse Scout on StackOverflow"><img src="img/bold/developer-community-stack-overflow.svg"></a>
<a href="https://github.com/eclipse-scout/scout.rt/tree/releases/11.0/" target="_blank" title="Eclipse Scout on GitHub"><img src="img/bold/developer-community-github-1.svg"></a>
</div>
<div id="copyright">
Copyright © Eclipse Foundation, <br class="mobile-only"/>Inc. All Rights Reserved.
</div>
<nav id="eclipse-navigation-bar">
<a href="http://www.eclipse.org/" target="_blank">Eclipse Home</a>
<a href="http://www.eclipse.org/legal/privacy.php" target="_blank">Privacy Policy</a>
<a href="http://www.eclipse.org/legal/termsofuse.php" target="_blank">Terms of Use</a>
<a href="http://www.eclipse.org/legal/copyright.php" target="_blank">Copyright Agent</a>
<a href="http://www.eclipse.org/legal" target="_blank">Legal</a>
</nav>
</footer>
</div>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/vendor/jquery-3.5.1.slim.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-29181496-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-29181496-1');
</script>
</body>
</html>