You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@archiva.apache.org by sk...@apache.org on 2015/06/26 11:27:52 UTC
svn commit: r1687726 [9/14] - in /archiva/site-content: ./ css/ developers/
errors/ images/ js/ jsui/
Modified: archiva/site-content/jsui/index.html
URL: http://svn.apache.org/viewvc/archiva/site-content/jsui/index.html?rev=1687726&r1=1687725&r2=1687726&view=diff
==============================================================================
--- archiva/site-content/jsui/index.html (original)
+++ archiva/site-content/jsui/index.html Fri Jun 26 09:27:51 2015
@@ -1,486 +1,432 @@
-<!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="20150406" />
- <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>
-
- <!-- Google Analytics -->
- <script type="text/javascript">
-
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-140879-5']);
- _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 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.2.0/" title="Release 2.2.0">Release 2.2.0</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.1-SNAPSHOT/" title="Dev 2.2.1-SNAPSHOT">Dev 2.2.1-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: 06 Apr 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><a name="Archiva_Javascript_Web_Application"></a>Archiva Javascript Web Application</h2>
-
-<div class="section">
-<h3><a name="General_design"></a>General design</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><a name="Runtime_Properties"></a>Runtime Properties</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><a name="Used_Javascript_frameworks"></a>Used Javascript frameworks</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><a name="Sources_organisation"></a>Sources organisation</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><a name="js_directory"></a>js directory</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><a name="Start_page"></a>Start page</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><a name="Gridedit_model"></a>Grid/edit model</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>
+<!DOCTYPE html>
+<!--
+ | Generated by Apache Maven Doxia
+ | Rendered using Apache Maven Fluido Skin 1.4
+-->
+<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="20150625" />
+ <meta http-equiv="Content-Language" content="en" />
+ <title>Archiva – Archiva Javascript application General design</title>
+ <link rel="stylesheet" href="../css/apache-maven-fluido-1.4.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.4.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.2.0/" title="Release 2.2.0">Release 2.2.0</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.1-SNAPSHOT/" title="Dev 2.2.1-SNAPSHOT">Dev 2.2.1-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>
+ </ul>
+
+ <form id="search-form" action="https://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="https://www.google.com/coop/cse/brand?form=search-form"></script>
+
+
+
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+ <div id="banner">
+ <div class="pull-left">
+ <div id="bannerLeft">
+ <h2>Archiva</h2>
+ </div>
+ </div>
+ <div class="pull-right"> </div>
+ <div class="clear"><hr/></div>
+ </div>
+
+ <div id="breadcrumbs">
+ <ul class="breadcrumb">
+
+
+ <li id="publishDate">Last Published: 2015-06-25
+ <span class="divider">|</span>
+ </li>
+ <li id="projectVersion">Version: 1-SNAPSHOT
+ </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><a name="Archiva_Javascript_Web_Application"></a>Archiva Javascript Web Application</h2>
+
+<div class="section">
+<h3><a name="General_design"></a>General design</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><a name="Runtime_Properties"></a>Runtime Properties</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><a name="Used_Javascript_frameworks"></a>Used Javascript frameworks</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><a name="Sources_organisation"></a>Sources organisation</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><a name="js_directory"></a>js directory</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><a name="Start_page"></a>Start page</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 class="prettyprint">
+
+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><a name="Gridedit_model"></a>Grid/edit model</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">
+
+<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>
+ </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="https://www.ohloh.net/p/6670/widgets/project_basic_stats.js"></script>
+ </div>
+ </div>
+ </footer>
+ </body>
</html>
\ No newline at end of file
Modified: archiva/site-content/jsui/knockout-binding.html
URL: http://svn.apache.org/viewvc/archiva/site-content/jsui/knockout-binding.html?rev=1687726&r1=1687725&r2=1687726&view=diff
==============================================================================
--- archiva/site-content/jsui/knockout-binding.html (original)
+++ archiva/site-content/jsui/knockout-binding.html Fri Jun 26 09:27:51 2015
@@ -1,451 +1,398 @@
-<!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-Creation-yyyymmdd" content="20120119" />
- <meta name="Date-Revision-yyyymmdd" content="20150406" />
- <meta http-equiv="Content-Language" content="en" />
- <title>Archiva – Knockout binding</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>
-
- <!-- Google Analytics -->
- <script type="text/javascript">
-
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-140879-5']);
- _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 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.2.0/" title="Release 2.2.0">Release 2.2.0</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.1-SNAPSHOT/" title="Dev 2.2.1-SNAPSHOT">Dev 2.2.1-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 ">Knockout binding</li>
-
-
-
- <li id="publishDate" class="pull-right">Last Published: 06 Apr 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. --><!-- NOTE: For help with the syntax of this file, see: --><!-- http://maven.apache.org/guides/mini/guide
-apt-format.html --><div class="section">
-<h2><a name="Knockout_binding"></a>Knockout binding</h2>
-<p>Explanation on the managed repositories list/edit/add screen.</p>
-<ul>
-<li><a href="#Knockout_binding">Knockout binding</a>
-<ul>
-<li><a href="#Javascript_Beans">Javascript Beans</a></li>
-<li><a href="#View_Model">View Model</a>
-<ul>
-<li><a href="#First_you_must_insert_your_template_in_the_main-content_div">First you must insert your template in the #main-content div</a></li>
-<li><a href="#You_can_now_create_your_view_model.">You can now create your view model.</a></li>
-<li><a href="#Grid_binding">Grid binding</a></li></ul></li>
-<li><a href="#View_definition">View definition</a>
-<ul>
-<li><a href="#Binding_definition">Binding definition</a></li>
-<li><a href="#Template_content">Template content</a></li></ul></li></ul></li></ul>
-<div class="section">
-<h3><a name="Javascript_Beans"></a>Javascript Beans</h3>
-<p>First you must map the json response on a Javascript bean (a bit borying task :-) )</p>
-<div class="source">
-<pre>Java class with fields
-
-public class ManagedRepository
- //private String id;
-
- //private String name;
- ....
-
-Javascript
-ManagedRepository=function(id,name,.....){
-
- this.id=ko.observable(id);
-
- this.name=ko.observable(name);
-
-mapping function (to map the json result to your javascript beans)
-
- mapManagedRepositories=function(data){
- var mappedManagedRepositories = $.map(data.managedRepository, function(item) {
- return mapManagedRepository(item);
- });
- return mappedManagedRepositories;
- }
- mapManagedRepository=function(data){
- if (data==null){
- return null;
- }
- return new ManagedRepository(data.id,data.name,data.layout,data.indexDirectory,data.location,data.snapshots,data.releases,
- data.blockRedeployments,data.cronExpression,
- data.scanned,data.daysOlder,data.retentionCount,data.deleteReleasedSnapshots,data.stageRepoNeeded);
- }
-</pre></div>
-<p><tt>NOTE to have access to field values you must now managedRepository.name() </tt></p></div>
-<div class="section">
-<h3><a name="View_Model"></a>View Model</h3>
-<div class="section">
-<h4><a name="First_you_must_insert_your_template_in_the_main-content_div"></a>First you must insert your template in the #main-content div</h4>
-<div class="source">
-<pre>// it's a jquery template as we do some i18n transformations
-$("#main-content").html($("#repositoriesMain").tmpl());</pre></div></div>
-<div class="section">
-<h4><a name="You_can_now_create_your_view_model."></a>You can now create your view model.</h4>
-<div class="source">
-<pre>ManagedRepositoriesViewModel=function(){
- //field which will receive values
- this.managedRepositories=ko.observableArray([]);
- // method which will edit an entry: an other view model is created
- editManagedRepository=function(managedRepository){
- var viewModel = new ManagedRepositoryViewModel(managedRepository,true,self);
- ...
- ko.applyBindings(viewModel,$("#main-content #managed-repository-edit").get(0));
- ..
- }
- // method which will delete an entry
- removeManagedRepository=function(managedRepository){
- ......
- }
-}</pre></div></div>
-<div class="section">
-<h4><a name="Grid_binding"></a>Grid binding</h4>
-<p>The ManagedRepositoriesViewModel is used as it with a custom grid binding (knockout has a feature to create own binding so we use one called <tt>simpleGrid</tt> which will display grids.</p>
-<p>Grid view initialisation code (some details omitted) :</p>
-<div class="source">
-<pre> var managedRepositoriesViewModel = new ManagedRepositoriesViewModel();
-
- $.ajax("restServices/archivaServices/managedRepositoriesService/getManagedRepositories", {
- type: "GET",
- dataType: 'json',
- success: function(data) {
- // data mapping json -> javascript
- managedRepositoriesViewModel.managedRepositories(mapManagedRepositories(data));
- // we define here our grid view model for fields only displayed
- managedRepositoriesViewModel.gridViewModel = new ko.simpleGrid.viewModel({
- data: managedRepositoriesViewModel.managedRepositories,
- columns: [
- {
- headerText: $.i18n.prop('identifier'),
- rowText: "id"
- },
- {
- headerText: $.i18n.prop('name'),
- rowText: "name"
- },
- {
- headerText: $.i18n.prop('type'),
- rowText: "getTypeLabel",
- // FIXME i18n
- title: "Repository type (default is Maven 2)"
- }
- ],
- // max items per size, the binding has a pagination feature
- pageSize: 5,
- // we can define here a callback function which be called on all grid change (adding/updating/removing values from the array)
- gridUpdateCallBack: function(){
- $("#main-content #managed-repositories-table [title]").tooltip();
- }
- });
- // apply the binding on the specified node
- ko.applyBindings(managedRepositoriesViewModel,$("#main-content #managed-repositories-table").get(0));
- }
- }
- );</pre></div></div></div>
-<div class="section">
-<h3><a name="View_definition"></a>View definition</h3>
-<div class="section">
-<h4><a name="Binding_definition"></a>Binding definition</h4>
-<p>We have applyed binding on the node with id "#managed-repositories-table". The binding definition is:</p>
-<div class="source">
-<pre> <table class="bordered-table zebra-striped" id="managed-repositories-table"
- data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_managed-repositoriesGrid',pageLinksId:'managed-repositoriesPagination',data:'managedRepositories'">
- </table></pre></div>
-<ul>
-<li>simpleGrid: gridViewModel = field name for the view model (see sample above)</li>
-<li>simpleGridTemplate:'ko_managed-repositoriesGrid' = name of the template to use (see below)</li>
-<li>pageLinksId:'managed-repositoriesPagination' = name of the template to use for pagination.</li>
-<li>data:'managedRepositories' = fields which contains data to pass to pass to the template</li></ul></div>
-<div class="section">
-<h4><a name="Template_content"></a>Template content</h4>
-<p>Template used for grid display (some details omitted).</p>
-<div class="source">
-<pre><script id='ko_managed-repositoriesGrid' type='text/x-jquery-tmpl'>
- <thead>
- <tr>
- // display read only fields defined in ko.simpleGrid.viewModel.columns (see above)
- {{each(i, columnDefinition) columns}}
- <th title="${ columnDefinition.title }">${ columnDefinition.headerText }</th>
- {{/each}}
- <th>Releases</th>
- .....
- // custom columns
- <th>${$.i18n.prop('edit')}</th>
- <th>${$.i18n.prop('delete')}</th>
- </tr>
- </thead>
- <tbody>
- {{each(i, row) itemsOnCurrentPage()}}
- <tr>
- // display read only fields defined in ko.simpleGrid.viewModel.columns (see above)
- {{each(j, columnDefinition) columns}}
- <td>${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }</td>
- {{/each}}
- // custom columns which images depending on a value
- <td>
- {{if row.releases() == true}}
- <img src="images/weather-clear.png" title="${$.i18n.prop('release.included')}"/>
- {{else}}
- <img src="images/dialog-error.png" title="${$.i18n.prop('release.notincluded')}"/>
- {{/if}}
- </td>
- .....
- // custom columns with binding mapped to ManagedRepositoriesViewModel methods
- <td><a href="#" data-bind="click: function(){ editManagedRepository(row) }">${$.i18n.prop('edit')}</a></td>
- <td>
- <a href="#" data-bind="click: function(){ removeManagedRepository(row) }">
- <img src="images/edit-cut.png" title="${$.i18n.prop('delete')}"/>
- </a>
- </td>
- .....
- </tr>
- {{/each}}
- </tbody>
-</pre></div></div></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>
+<!DOCTYPE html>
+<!--
+ | Generated by Apache Maven Doxia
+ | Rendered using Apache Maven Fluido Skin 1.4
+-->
+<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-Creation-yyyymmdd" content="20120119" />
+ <meta name="Date-Revision-yyyymmdd" content="20150625" />
+ <meta http-equiv="Content-Language" content="en" />
+ <title>Archiva – Knockout binding</title>
+ <link rel="stylesheet" href="../css/apache-maven-fluido-1.4.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.4.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.2.0/" title="Release 2.2.0">Release 2.2.0</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.1-SNAPSHOT/" title="Dev 2.2.1-SNAPSHOT">Dev 2.2.1-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>
+ </ul>
+
+ <form id="search-form" action="https://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="https://www.google.com/coop/cse/brand?form=search-form"></script>
+
+
+
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+ <div id="banner">
+ <div class="pull-left">
+ <div id="bannerLeft">
+ <h2>Archiva</h2>
+ </div>
+ </div>
+ <div class="pull-right"> </div>
+ <div class="clear"><hr/></div>
+ </div>
+
+ <div id="breadcrumbs">
+ <ul class="breadcrumb">
+
+
+ <li id="publishDate">Last Published: 2015-06-25
+ <span class="divider">|</span>
+ </li>
+ <li id="projectVersion">Version: 1-SNAPSHOT
+ </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. --><!-- NOTE: For help with the syntax of this file, see: --><!-- http://maven.apache.org/guides/mini/guide
-apt-format.html --><div class="section">
+<h2><a name="Knockout_binding"></a>Knockout binding</h2>
+<p>Explanation on the managed repositories list/edit/add screen.</p>
+<ul>
+<li><a href="#Knockout_binding">Knockout binding</a>
+<ul>
+<li><a href="#Javascript_Beans">Javascript Beans</a></li>
+<li><a href="#View_Model">View Model</a>
+<ul>
+<li><a href="#First_you_must_insert_your_template_in_the_main-content_div">First you must insert your template in the #main-content div</a></li>
+<li><a href="#You_can_now_create_your_view_model.">You can now create your view model.</a></li>
+<li><a href="#Grid_binding">Grid binding</a></li></ul></li>
+<li><a href="#View_definition">View definition</a>
+<ul>
+<li><a href="#Binding_definition">Binding definition</a></li>
+<li><a href="#Template_content">Template content</a></li></ul></li></ul></li></ul>
+<div class="section">
+<h3><a name="Javascript_Beans"></a>Javascript Beans</h3>
+<p>First you must map the json response on a Javascript bean (a bit borying task :-) )</p>
+<div class="source"><pre class="prettyprint">Java class with fields
+
+public class ManagedRepository
+ //private String id;
+
+ //private String name;
+ ....
+
+Javascript
+ManagedRepository=function(id,name,.....){
+
+ this.id=ko.observable(id);
+
+ this.name=ko.observable(name);
+
+mapping function (to map the json result to your javascript beans)
+
+ mapManagedRepositories=function(data){
+ var mappedManagedRepositories = $.map(data.managedRepository, function(item) {
+ return mapManagedRepository(item);
+ });
+ return mappedManagedRepositories;
+ }
+ mapManagedRepository=function(data){
+ if (data==null){
+ return null;
+ }
+ return new ManagedRepository(data.id,data.name,data.layout,data.indexDirectory,data.location,data.snapshots,data.releases,
+ data.blockRedeployments,data.cronExpression,
+ data.scanned,data.daysOlder,data.retentionCount,data.deleteReleasedSnapshots,data.stageRepoNeeded);
+ }
+
+</pre></div>
+<p><tt>NOTE to have access to field values you must now managedRepository.name() </tt></p></div>
+<div class="section">
+<h3><a name="View_Model"></a>View Model</h3>
+<div class="section">
+<h4><a name="First_you_must_insert_your_template_in_the_main-content_div"></a>First you must insert your template in the #main-content div</h4>
+<div class="source"><pre class="prettyprint">// it's a jquery template as we do some i18n transformations
+$("#main-content").html($("#repositoriesMain").tmpl());
+</pre></div></div>
+<div class="section">
+<h4><a name="You_can_now_create_your_view_model."></a>You can now create your view model.</h4>
+<div class="source"><pre class="prettyprint">ManagedRepositoriesViewModel=function(){
+ //field which will receive values
+ this.managedRepositories=ko.observableArray([]);
+ // method which will edit an entry: an other view model is created
+ editManagedRepository=function(managedRepository){
+ var viewModel = new ManagedRepositoryViewModel(managedRepository,true,self);
+ ...
+ ko.applyBindings(viewModel,$("#main-content #managed-repository-edit").get(0));
+ ..
+ }
+ // method which will delete an entry
+ removeManagedRepository=function(managedRepository){
+ ......
+ }
+}
+</pre></div></div>
+<div class="section">
+<h4><a name="Grid_binding"></a>Grid binding</h4>
+<p>The ManagedRepositoriesViewModel is used as it with a custom grid binding (knockout has a feature to create own binding so we use one called <tt>simpleGrid</tt> which will display grids.</p>
+<p>Grid view initialisation code (some details omitted) :</p>
+<div class="source"><pre class="prettyprint"> var managedRepositoriesViewModel = new ManagedRepositoriesViewModel();
+
+ $.ajax("restServices/archivaServices/managedRepositoriesService/getManagedRepositories", {
+ type: "GET",
+ dataType: 'json',
+ success: function(data) {
+ // data mapping json -> javascript
+ managedRepositoriesViewModel.managedRepositories(mapManagedRepositories(data));
+ // we define here our grid view model for fields only displayed
+ managedRepositoriesViewModel.gridViewModel = new ko.simpleGrid.viewModel({
+ data: managedRepositoriesViewModel.managedRepositories,
+ columns: [
+ {
+ headerText: $.i18n.prop('identifier'),
+ rowText: "id"
+ },
+ {
+ headerText: $.i18n.prop('name'),
+ rowText: "name"
+ },
+ {
+ headerText: $.i18n.prop('type'),
+ rowText: "getTypeLabel",
+ // FIXME i18n
+ title: "Repository type (default is Maven 2)"
+ }
+ ],
+ // max items per size, the binding has a pagination feature
+ pageSize: 5,
+ // we can define here a callback function which be called on all grid change (adding/updating/removing values from the array)
+ gridUpdateCallBack: function(){
+ $("#main-content #managed-repositories-table [title]").tooltip();
+ }
+ });
+ // apply the binding on the specified node
+ ko.applyBindings(managedRepositoriesViewModel,$("#main-content #managed-repositories-table").get(0));
+ }
+ }
+ );
+</pre></div></div></div>
+<div class="section">
+<h3><a name="View_definition"></a>View definition</h3>
+<div class="section">
+<h4><a name="Binding_definition"></a>Binding definition</h4>
+<p>We have applyed binding on the node with id "#managed-repositories-table". The binding definition is:</p>
+<div class="source"><pre class="prettyprint"> <table class="bordered-table zebra-striped" id="managed-repositories-table"
+ data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_managed-repositoriesGrid',pageLinksId:'managed-repositoriesPagination',data:'managedRepositories'">
+ </table>
+</pre></div>
+<ul>
+<li>simpleGrid: gridViewModel = field name for the view model (see sample above)</li>
+<li>simpleGridTemplate:'ko_managed-repositoriesGrid' = name of the template to use (see below)</li>
+<li>pageLinksId:'managed-repositoriesPagination' = name of the template to use for pagination.</li>
+<li>data:'managedRepositories' = fields which contains data to pass to pass to the template</li></ul></div>
+<div class="section">
+<h4><a name="Template_content"></a>Template content</h4>
+<p>Template used for grid display (some details omitted).</p>
+<div class="source"><pre class="prettyprint"><script id='ko_managed-repositoriesGrid' type='text/x-jquery-tmpl'>
+ <thead>
+ <tr>
+ // display read only fields defined in ko.simpleGrid.viewModel.columns (see above)
+ {{each(i, columnDefinition) columns}}
+ <th title="${ columnDefinition.title }">${ columnDefinition.headerText }</th>
+ {{/each}}
+ <th>Releases</th>
+ .....
+ // custom columns
+ <th>${$.i18n.prop('edit')}</th>
+ <th>${$.i18n.prop('delete')}</th>
+ </tr>
+ </thead>
+ <tbody>
+ {{each(i, row) itemsOnCurrentPage()}}
+ <tr>
+ // display read only fields defined in ko.simpleGrid.viewModel.columns (see above)
+ {{each(j, columnDefinition) columns}}
+ <td>${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }</td>
+ {{/each}}
+ // custom columns which images depending on a value
+ <td>
+ {{if row.releases() == true}}
+ <img src="images/weather-clear.png" title="${$.i18n.prop('release.included')}"/>
+ {{else}}
+ <img src="images/dialog-error.png" title="${$.i18n.prop('release.notincluded')}"/>
+ {{/if}}
+ </td>
+ .....
+ // custom columns with binding mapped to ManagedRepositoriesViewModel methods
+ <td><a href="#" data-bind="click: function(){ editManagedRepository(row) }">${$.i18n.prop('edit')}</a></td>
+ <td>
+ <a href="#" data-bind="click: function(){ removeManagedRepository(row) }">
+ <img src="images/edit-cut.png" title="${$.i18n.prop('delete')}"/>
+ </a>
+ </td>
+ .....
+ </tr>
+ {{/each}}
+ </tbody>
+
+</pre></div></div></div></div>
+ </div>
+ </div>
+
+ <hr/>
+
+ <footer>
+ <div class="container">
+ <div class="row">
+
+<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>
+ </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="https://www.ohloh.net/p/6670/widgets/project_basic_stats.js"></script>
+ </div>
+ </div>
+ </footer>
+ </body>
</html>
\ No newline at end of file