| <!DOCTYPE html> |
| <!-- |
| | Generated by Apache Maven Doxia |
| | Rendered using Apache Maven Fluido Skin 1.3.1 |
| --> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="author" content="Olivier Lamy" /> |
| <meta name="Date-Revision-yyyymmdd" content="20150226" /> |
| <meta http-equiv="Content-Language" content="en" /> |
| <title>Archiva - |
| Archiva Javascript application General design</title> |
| <link rel="stylesheet" href="../css/apache-maven-fluido-1.3.1.min.css" /> |
| <link rel="stylesheet" href="../css/site.css" /> |
| <link rel="stylesheet" href="../css/print.css" media="print" /> |
| |
| |
| <script type="text/javascript" src="../js/apache-maven-fluido-1.3.1.min.js"></script> |
| |
| |
| |
| <script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); |
| document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script> |
| |
| |
| <script type="text/javascript">var pageTracker = _gat._getTracker("UA-140879-5"); |
| pageTracker._initData(); |
| pageTracker._trackPageview();</script> |
| |
| </head> |
| <body class="topBarEnabled"> |
| |
| |
| |
| |
| |
| <div id="topbar" class="navbar navbar-fixed-top "> |
| <div class="navbar-inner"> |
| <div class="container"><div class="nav-collapse"> |
| |
| |
| <ul class="nav"> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">Introduction <b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| |
| <li> <a href="../index.html" title="About">About</a> |
| </li> |
| |
| <li> <a href="../download.html" title="Downloads">Downloads</a> |
| </li> |
| |
| <li> <a href="../versions.html" title="Versions">Versions</a> |
| </li> |
| |
| <li> <a href="../mail-lists.html" title="Mailing Lists">Mailing Lists</a> |
| </li> |
| |
| <li> <a href="../security.html" title="Security">Security</a> |
| </li> |
| |
| <li class="dropdown-submenu"> |
| <a href="../" title="Documentation">Documentation</a> |
| <ul class="dropdown-menu"> |
| <li> <a href="../docs/2.1.1/" title="Release 2.1.1">Release 2.1.1</a> |
| </li> |
| <li> <a href="../docs/1.3.9/" title="Preview 1.3.9">Preview 1.3.9</a> |
| </li> |
| <li> <a href="../docs/2.2.0-SNAPSHOT/" title="Dev 2.2.0-SNAPSHOT">Dev 2.2.0-SNAPSHOT</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">Development <b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| |
| <li> <a href="../developers/building.html" title="Build Apache Archiva">Build Apache Archiva</a> |
| </li> |
| |
| <li> <a href="../get-involved.html" title="Get involved">Get involved</a> |
| </li> |
| |
| <li> <a href="../developers/how-we-do-things.html" title="How we do things">How we do things</a> |
| </li> |
| |
| <li> <a href="../redback" title="Redback">Redback</a> |
| </li> |
| |
| <li> <a href="../redback/components" title="Redback Components">Redback Components</a> |
| </li> |
| |
| <li class="dropdown-submenu"> |
| <a href="../jsui/index.html" title="Javascript application Architecture">Javascript application Architecture</a> |
| <ul class="dropdown-menu"> |
| <li> <a href="../jsui/rest.html" title="Rest service">Rest service</a> |
| </li> |
| <li> <a href="../jsui/template-loading.html" title="JS Template loading">JS Template loading</a> |
| </li> |
| <li> <a href="../jsui/i18n.html" title="i18n">i18n</a> |
| </li> |
| <li> <a href="../jsui/knockout-binding.html" title="Knockout Binding">Knockout Binding</a> |
| </li> |
| <li> <a href="../jsui/generics-js.html" title="Generic Javascipts">Generic Javascipts</a> |
| </li> |
| </ul> |
| </li> |
| |
| <li> <a href="../developers/releasing.html" title="Releasing">Releasing</a> |
| </li> |
| |
| <li> <a href="../developers/publishing-site.html" title="Site Publish">Site Publish</a> |
| </li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">ASF <b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| |
| <li> <a href="http://www.apache.org/foundation/how-it-works.html" title="How Apache Works">How Apache Works</a> |
| </li> |
| |
| <li> <a href="http://www.apache.org/foundation/" title="Foundation">Foundation</a> |
| </li> |
| |
| <li> <a href="http://www.apache.org/foundation/sponsorship.html" title="Sponsoring Apache">Sponsoring Apache</a> |
| </li> |
| |
| <li> <a href="http://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a> |
| </li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project Documentation <b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| |
| <li class="dropdown-submenu"> |
| <a href="../project-info.html" title="Project Information">Project Information</a> |
| <ul class="dropdown-menu"> |
| <li> <a href="../integration.html" title="Continuous Integration">Continuous Integration</a> |
| </li> |
| <li> <a href="../mail-lists.html" title="Mailing Lists">Mailing Lists</a> |
| </li> |
| <li> <a href="../issue-tracking.html" title="Issue Tracking">Issue Tracking</a> |
| </li> |
| <li> <a href="../license.html" title="Project License">Project License</a> |
| </li> |
| <li> <a href="../team-list.html" title="Project Team">Project Team</a> |
| </li> |
| <li> <a href="../source-repository.html" title="Source Repository">Source Repository</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| |
| <form id="search-form" action="http://www.google.com/search" method="get" class="navbar-search pull-right" > |
| |
| <input value="http://archiva.apache.org/" name="sitesearch" type="hidden"/> |
| <input class="search-query" name="q" id="query" type="text" /> |
| </form> |
| <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=search-form"></script> |
| |
| |
| |
| </div> |
| |
| </div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div id="banner"> |
| <div class="pull-left"> |
| <a href="../index.html" id="bannerLeft"> |
| <img src="../images/archiva.png" alt="Apache Archiva"/> |
| </a> |
| </div> |
| <div class="pull-right"> <a href="http://www.apache.org/" id="bannerRight"> |
| <img src="http://www.apache.org/images/asf_logo_wide.png" alt="Apache Software Foundation"/> |
| </a> |
| </div> |
| <div class="clear"><hr/></div> |
| </div> |
| |
| <div id="breadcrumbs"> |
| <ul class="breadcrumb"> |
| |
| |
| <li class=""> |
| <a href="http://www.apache.org/" class="externalLink" title="Apache"> |
| Apache</a> |
| <span class="divider">/</span> |
| </li> |
| <li class=""> |
| <a href="../" title="Archiva"> |
| Archiva</a> |
| <span class="divider">/</span> |
| </li> |
| <li class="active "> |
| Archiva Javascript application General design</li> |
| |
| |
| |
| <li id="publishDate" class="pull-right">Last Published: 26 Feb 2015</li> |
| |
| </ul> |
| </div> |
| |
| |
| |
| <div id="bodyColumn" > |
| |
| <!-- ~ Licensed to the Apache Software Foundation (ASF) under one |
| ~ or more contributor license agreements. See the NOTICE file |
| ~ distributed with this work for additional information |
| ~ regarding copyright ownership. The ASF licenses this file |
| ~ to you under the Apache License, Version 2.0 (the |
| ~ "License"); you may not use this file except in compliance |
| ~ with the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, |
| ~ software distributed under the License is distributed on an |
| ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| ~ KIND, either express or implied. See the License for the |
| ~ specific language governing permissions and limitations |
| ~ under the License. --> |
| |
| |
| <script src="../js/jquery.fancybox.pack.2.1.5.js" type="text/javascript"></script> |
| <script src="../js/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script> |
| <link rel="stylesheet" href="../css/jquery.fancybox.2.1.5.css" type="text/css" media="screen" /> |
| <script type="text/javascript" src="../js/fancy-box-activation.js"></script> |
| |
| |
| |
| <ul> |
| <li><a href="#Archiva_Javascript_Web_Application">Archiva Javascript Web Application</a> |
| <ul> |
| <li><a href="#General_design">General design</a></li> |
| <li><a href="#Runtime_Properties">Runtime Properties</a></li> |
| <li><a href="#Used_Javascript_frameworks">Used Javascript frameworks</a></li> |
| <li><a href="#Sources_organisation">Sources organisation</a></li> |
| <li><a href="#js_directory">js directory</a></li> |
| <li><a href="#Start_page">Start page</a></li> |
| <li><a href="#Gridedit_model">Grid/edit model</a></li></ul></li></ul> |
| |
| |
| <div class="section"> |
| <h2>Archiva Javascript Web Application<a name="Archiva_Javascript_Web_Application"></a></h2> |
| |
| <div class="section"> |
| <h3>General design<a name="General_design"></a></h3> |
| |
| <p> |
| The goal is to have a "one page loading" javascript application. |
| <br /> |
| For this the only html page will contains a div with id "main-content" this div will be populated |
| by jquery template execution (see <a href="./template-loading.html">template loading</a>). |
| <br /> |
| The server will be contacted only for REST request/response (see <a href="./rest.html">details</a>). |
| <br /> |
| <b>All UI rendering will be done only on client side.</b> |
| <br /> |
| As we are not designer :-), the application will use the <a class="externalLink" href="http://twitter.github.com/bootstrap" target="_blank">twitter bootstrap css</a>. |
| </p> |
| </div> |
| |
| <div class="section"> |
| <h3>Runtime Properties<a name="Runtime_Properties"></a></h3> |
| |
| <p>The application is designed to use http cache mechanism for css, javascript. Except REST call to get datas which will never use cache as a query timestamp parameter is used. |
| But as this can cause issue in developpement phase, two system properties (disabled by default) prevent can prevent caching and/or help debuging |
| </p> |
| <ul> |
| |
| <li>archiva.devMode=true/false: if true will add a timestamp query parameter for loading js and html templates.</li> |
| |
| <li>archiva.javascriptLog=true/false: will activate javascript log, method available with $.log(msg)</li> |
| |
| <li>archiva.logMissingI18n=true/false: will activate remote logging of missing i18n key in the servlet container log: INFO archivaMissingi18n.logger - missing i18n key : 'proxy-connectors.grid.managedrepo.title'</li> |
| </ul> |
| |
| </div> |
| |
| <div class="section"> |
| <h3>Used Javascript frameworks<a name="Used_Javascript_frameworks"></a></h3> |
| |
| <p> |
| We use some well known javascript framework librairies : |
| </p> |
| <ul> |
| |
| <li><a class="externalLink" href="http://jquery.com/" target="_blank">jquery</a>.</li> |
| |
| |
| <li><a class="externalLink" href="http://sammyjs.org" target="_blank">sammyjs for hash navigation</a></li> |
| |
| |
| <li><a class="externalLink" href="http://requirejs.org" target="_blank">requirejs</a> for template loading (see <a href="./template-loading.html">details</a>).</li> |
| |
| |
| <li><a class="externalLink" href="http://code.google.com/p/jquery-i18n-properties" target="_blank">jquery-i18n-properties</a> for i18n loading (see <a href="./i18n.html">details</a>).</li> |
| |
| |
| <li><a class="externalLink" href="http://knockoutjs.com" target="_blank">knockoutjs</a> as we use a MVVM pattern (see <a href="./knockout-binding.html">knockout binding</a>).</li> |
| |
| |
| <li><a class="externalLink" href="http://twitter.github.com/bootstrap/javascript.html" target="_blank">twitter bootstrap js</a> to magnify the ui.</li> |
| |
| |
| <li><a class="externalLink" href="http://bassistance.de/jquery-plugins/jquery-plugin-validation" target="_blank">jquery validate</a> for form validation.</li> |
| </ul> |
| |
| </div> |
| |
| <div class="section"> |
| <h3>Sources organisation<a name="Sources_organisation"></a></h3> |
| |
| <p> |
| Sources are located in src/main/webapp of the archiva-webapp module : |
| </p> |
| <ul> |
| |
| <li>css</li> |
| |
| <li>images</li> |
| |
| <li>js</li> |
| </ul> |
| |
| </div> |
| <div class="section"> |
| <h3>js directory<a name="js_directory"></a></h3> |
| |
| <p> |
| Root directory contains external libraries. |
| </p> |
| |
| <p> |
| archiva directory contains archiva js files with a subdirectory templates which contains templates |
| </p> |
| |
| <p> |
| redback directory contains redback js files with a subdirectory templates which contains templates |
| </p> |
| </div> |
| |
| |
| |
| <div class="section"> |
| <h3>Start page<a name="Start_page"></a></h3> |
| |
| <p> |
| The main page will load javascript files, load <a href="./i18n.html">i18n</a>, <a href="./template-loading.html">load templates</a> and insert menu. |
| <br /> |
| This main page is divided in 3 parts: |
| |
| <p> |
| <a href="../images/start-screen.png" class="single_image" title="Start Page"> |
| <img src="../images/start-screen.png" width="150" height="93" style="border: 1px solid silver; margin-left: 0.25em; margin-bottom: 0.25em" alt="" /><br /> |
| Start Page |
| </a> |
| </p> |
| |
| <p> |
| </p> |
| <ul> |
| |
| <li>#topbar-menu-container is populated with the template js/archiva/templates/topbar.html.</li> |
| |
| <li>#sidebar-content is populated with the template js/archiva/templates/menu.html.</li> |
| |
| <li>#main-content is the place where screen will appear.</li> |
| |
| <li>hidden #html-fragments will contains loaded templates.</li> |
| </ul> |
| |
| |
| <p> |
| Link are visible/hide depending on needed redback karmas. |
| You can configure redback operations needed for a link using the attribute redback-permissions in your html element |
| (by default element needed karma must be marked display: none): |
| </p> |
| <div class="source"> |
| <pre> |
| |
| Support array: at least one operation is needed: |
| <div .... redback-permissions="{permissions: ['archiva-manage-users','archiva-manage-configuration']}" style="display: none"> |
| Support single value: |
| <li style="display: none" redback-permissions="{permissions: ['archiva-manage-users']}"> |
| |
| </pre></div> |
| |
| |
| |
| </div> |
| |
| |
| <div class="section"> |
| <h3>Grid/edit model<a name="Gridedit_model"></a></h3> |
| |
| <p>We use a tab/pill models to display grid of datas and edit/add form: |
| </p> |
| <ul> |
| |
| <li> |
| One tab/pill display the grid |
| <a href="../images/repo-grids.png" class="single_image" title="Repositories Grid"> |
| <img src="../images/repo-grids.png" width="150" height="93" style="border: 1px solid silver; margin-left: 0.25em; margin-bottom: 0.25em" alt="" /><br /> |
| Repositories Grid |
| </a> |
| </li> |
| |
| <li> |
| One tab/pill display the edit/add form. <b>As we use knockout framework grid will be updated with new value from add/edit form automatically.</b> |
| <a href="../images/repo-edit.png" class="single_image" title="Repositories Edit/Add"> |
| <img src="../images/repo-edit.png" width="150" height="93" style="border: 1px solid silver; margin-left: 0.25em; margin-bottom: 0.25em" alt="" /><br /> |
| Repositories Edit/Add |
| </a> |
| </li> |
| </ul> |
| Have a look at the page <a href="./knockout-binding.html">knockout-binding</a> for more explanation. |
| |
| </div> |
| |
| </div> |
| |
| |
| </div> |
| </div> |
| |
| <hr/> |
| |
| <footer> |
| <div class="container"> |
| <div class="row"> |
| <p >Copyright © 2006–2015 |
| <a href="http://archiva.apache.org/">The Apache Software Foundation</a>. |
| All rights reserved. |
| |
| </p> |
| </div> |
| |
| |
| <div class="row pull-left">Apache Archiva, Archiva, Apache, the Apache feather logo, and the Apache Archiva project logos are trademarks of The Apache Software Foundation.</div> |
| |
| <div class="row pull-left"> |
| <a href="http://archiva.apache.org/privacy-policy.html">Privacy Policy</a> |
| </div> |
| |
| <p id="poweredBy" class="pull-right"> |
| <a href="http://maven.apache.org/" title="Built by Maven" class="poweredBy"> |
| <img class="builtBy" alt="Built by Maven" src="../images/logos/maven-feather.png" /> |
| </a> |
| </p> |
| |
| |
| |
| |
| |
| <div id="ohloh" class="pull-right"> |
| <script type="text/javascript" src="http://www.ohloh.net/p/6670/widgets/project_basic_stats.js"></script> |
| </div> |
| </div> |
| </footer> |
| </body> |
| </html> |
