<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="/img/fav.png">
<!-- Author Meta -->
<meta name="author" content="vitor viana">
<!-- Meta Description -->
<meta name="description" content="vf-os portal">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>vf-OS Developer Portal | vf-OAK Frontend</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!--
CSS
============================================= -->
<link rel="stylesheet" href="/css/linearicons.css">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/magnific-popup.css">
<link rel="stylesheet" href="/css/nice-select.css">
<link rel="stylesheet" href="/css/animate.min.css">
<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<header id="header" id="home">
<div class="container main-menu">
<div class="row align-items-center justify-content-between d-flex">
<div id="logo">
<a href="/"><img src="/img/vf-OS_logo_v2.png" style="width: 115px;" alt="vf-OS Logo" /></a>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="/">Home</a></li>
<li><a href="/showcases-for-industry/">Showcases for Industry</a></li>
<li><a href="/components-for-industry/">Open Source Components for industry</a></li>
</ul>
</nav><!-- #nav-menu-container -->
</div>
</div>
</header><!-- #header -->
<!-- start banner Area -->
<section class="banner-area relative" id="home">
<div class="overlay overlay-bg"></div>
<div class="container">
<div class="row d-flex align-items-center justify-content-center">
<div class="about-content col-lg-12">
<h1 class="text-white">
vf-OAK Frontend
</h1>
<p class="text-white link-nav"><a href="/components-for-industry/application-development/oak-toolkit/">OAK Toolkit</a><span class="lnr lnr-arrow-right"></span><a href="/components-for-industry/application-development/oak-toolkit/oak-studio">vf-OAK Frontend</a></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-12 text-center mb-3">
<div class="container">
<a target="_blank" href="https://vfos-docs.ascora.eu/#frontend-environment" class="genric-btn primary-border circle arrow">Technical Manual<span class="lnr lnr-arrow-right font-weight-bold"></span></a>
</div>
</div>
<div class="col-lg-4 col-sm-12 text-center mb-3">
<div class="container">
<a target="_blank" href="https://opensourceprojects.eu/p/vfos/oak/frontend/code" class="genric-btn primary-border circle arrow">Source Code<span class="lnr lnr-arrow-right font-weight-bold"></span></a>
</div>
</div>
<div class="col-lg-4 col-sm-12 text-center mb-3">
<div class="container">
<a target="_blank" href="http://158.42.105.151/mediawiki/index.php/Category:FrontEnd_Environments" class="genric-btn primary-border circle arrow">Get Help<span class="lnr lnr-arrow-right font-weight-bold"></span></a>
</div>
</div>
</div>
</div>
</section>
<!-- End banner Area -->
<!-- Section highlight topics-->
<section class=" relative">
<div class="container">
<div class="row">
<div class="col-lg-12 align-items-center">
<div class="row no-gutters" style="margin-top: 25px;">
<div class="single-services col">
<span class="lnr lnr-cog" style="font-size:40px; color:#988fff;margin-top: 30px;">
</span>
<h4>vApp-Customisation</h4>
<p>
An amount of around 70 nestable GUI-templates in combination with self-implemented logic allows a high degree of
vApp-customization.
</p>
</div>
<div class="single-services col" style="margin-left: 10px;">
<span class="lnr lnr-rocket" style="font-size:40px; color:#988fff;margin-top: 30px;"></span>
<h4>Rapid Prototyping</h4>
<p>
Templates are addable with one single click and automatically formed into a clickable Prototype, allowing very fast
initial development.
</p>
</div>
</div>
<div class="row no-gutters">
<div class="single-services col">
<span class="lnr lnr-earth" style="font-size:40px; color:#988fff;margin-top: 30px;"></span>
<h4>Internationalisation</h4>
<p>
Developers can provide own text translations, offering multi-lingual vApps at the end.
</p>
</div>
<div class="single-services col" style="margin-left: 10px;">
<span class="lnr lnr-chart-bars" style="font-size:40px; color:#988fff;margin-top: 30px; "></span>
<h4>Data Representation</h4>
<p>
GUI-Templates allow the visual representation of external data in a clear, understandable way.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of section highlight topics-->
<!-- Start service Area -->
<section class="service-area" style="padding-bottom: 10px;" id="service">
<div class="container">
<div class="section-top-border">
<div class="row">
<div class="col-md-7 mt-sm-20 left-align-p">
<h2>vf-OAK Frontend</h2>
<br>
<p>
The OAK-Frontend Environment (FE) offers a GUI-Editor to allow vApp developers the implementation of end-user interfaces for
their solutions. It will be accessible from within the Studio as a plain browser consuming external microservices. These services
provide large ranges of visual templates implemented in HTML5 + CSS3.
</p>
<p>
Developers can combine these templates within the GUI editor to achieve enclosed vApp visualisations at the end. The templates can
stand for themselves (eg customised GUI elements) or contain additional behaviour and logic (eg registration forms or error representation).
vApp developers thus will have a high degree of flexibility and power as there are barely any restrictions in merging templates.
</p>
<p>
The FE will still develop an abstraction layer concept, subordinating the entities into abstraction levels. This strategy will produce
additional guidance for the developer and speed up the process of rapid prototyping. The editor also allows external configuration like
translations for internationalisation, as well as internal, individual configurations for each template itself. The module is subdivided
in lower-level modules:
</p>
<ul class="fa-ul">
<li><i class="fa-li fa fa-square"></i>The Client-Module is a single HTML file, processing user inputs and forwarding them to the mircoservices module, where necessary calculations for representing vApps take place.</span> </li>
<li><i class="fa-li fa fa-square"></i>The Server-Module consists out of multiple Mircoservices working together, which listen to user inputs and transform them into clickable prototypes of a vApp.</span> </li>
</ul>
</div>
<div class="col-md-5">
<img src="img/fe_icon.png" alt="" class="img-fluid" style="margin-top: 33%;">
</div>
</div>
</div>
</div>
</section>
<!-- End service Area -->
<!-- Video section here -->
<!-- <section class="section-gap-small relative" style="background: #f9f9ff;">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="row no-gutters">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/P7C1Yw4euz8?rel=0"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- End video section -->
<!-- start footer Area -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6>About vf-OS</h6>
<p>
vf-OS offers a manufacturing orientated cloud platform, supporting a multi-sided market
ecosystem that provides a range of services for the connected factory of the future,
allowing manufacturing companies to develop and integrate better manufacturing and
logistics processes
</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6>Navigation Links</h6>
<div class="row">
<div class="col">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/components-for-industry/environment/">Environment</a></li>
<li><a href="/components-for-industry/application-development/">Application Development</a></li>
<li><a href="/components-for-industry/application-services-and-middleware/">Application
Service & Middleware</a></li>
<li><a href="/components-for-industry/application-deployment/">Application Deployment</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="http://www.vf-os.eu/technologies">Technologies</a></li>
<li><a href="http://www.vf-os.eu/partners">Partners</a></li>
<li><a href="http://www.vf-os.eu/blog">Blog</a></li>
<li><a href="http://www.vf-os.eu/contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row footer-bottom d-flex justify-content-between align-items-center">
<div class="col-lg-8 col-sm-12 footer-text m-0">
<img src="/img/europe.png">
<p>This project has received funding from the European Union���s Horizon 2020 research and innovation programme
under grant
agreement No 723710.</p>
</div>
</p>
<div class="col-lg-4 col-sm-12 footer-social">
<a href="https://www.facebook.com/vfoseuropeanproject/"><i class="fa fa-facebook"></i></a>
<a href="http://www.vf-os.eu"><i class="fa fa-globe"></i></a>
<a href="https://www.youtube.com/channel/UCN-5AXqIaXjXItq8jJuoW1w"><i class="fa fa-youtube-play"></i></a>
<a href="https://www.linkedin.com/in/vf-os-project/"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- End footer Area -->
<script src="/js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="/js/easing.min.js"></script>
<script src="/js/hoverIntent.js"></script>
<script src="/js/superfish.min.js"></script>
<script src="/js/mn-accordion.js"></script>
<script src="/js/jquery.ajaxchimp.min.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/jquery.nice-select.min.js"></script>
<script src="/js/jquery.circlechart.js"></script>
<script src="/js/mail-script.js"></script>
<script src="/js/main.js"></script>
</body>
</html>