src/site/xdoc/jsui/index.xml - archiva-site - Git at Google

 <?xml version="1.0"?>

 <!--
   ~ 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.
   -->

 <document>
   <properties>
     <title>Archiva Javascript application General design</title>
     <author>Olivier Lamy</author>
   </properties>
   <body>

     <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>


     <macro name="toc"/>

     <section name="Archiva Javascript Web Application">
       <subsection name="General design">
         <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 href="http://twitter.github.com/bootstrap" target="_blank">twitter bootstrap css</a>.
         </p>
       </subsection>
       <subsection name="Runtime Properties">
         <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
           <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>
         </p>
       </subsection>
       <subsection name="Used Javascript frameworks">
         <p>
         We use some well known javascript framework librairies :
         <ul>
           <li><a target="_blank" href="http://jquery.com/">jquery</a>.</li>

           <li><a target="_blank" href="http://sammyjs.org">sammyjs for hash navigation</a></li>

           <li><a target="_blank" href="http://requirejs.org">requirejs</a> for template loading (see <a href="./template-loading.html">details</a>).</li>

           <li><a target="_blank" href="http://code.google.com/p/jquery-i18n-properties">jquery-i18n-properties</a> for i18n loading (see <a href="./i18n.html">details</a>).</li>

           <li><a target="_blank" href="http://knockoutjs.com">knockoutjs</a> as we use a MVVM pattern (see <a href="./knockout-binding.html">knockout binding</a>).</li>

           <li><a target="_blank" href="http://twitter.github.com/bootstrap/javascript.html">twitter bootstrap js</a> to magnify the ui.</li>

           <li><a target="_blank" href="http://bassistance.de/jquery-plugins/jquery-plugin-validation">jquery validate</a> for form validation.</li>
         </ul>
         </p>
       </subsection>
       <subsection name="Sources organisation">
         <p>
           Sources are located in src/main/webapp of the archiva-webapp module :
           <ul>
             <li>css</li>
             <li>images</li>
             <li>js</li>
           </ul>
         </p>
         <subsection name="js directory">
           <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>
         </subsection>
       </subsection>

       <subsection name="Start page">
         <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>
             <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>
           <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):
             <source>
 <![CDATA[
 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']}">
 ]]>
             </source>

           </p>
         </p>
       </subsection>

       <subsection name="Grid/edit model">
         <p>We use a tab/pill models to display grid of datas and edit/add form:
           <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.
         </p>
       </subsection>

     </section>
   </body>
 </document>
	<?xml version="1.0"?>

	<!--
	~ 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.
	-->

	<document>
	<properties>
	<title>Archiva Javascript application General design</title>
	<author>Olivier Lamy</author>
	</properties>
	<body>

	<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>


	<macro name="toc"/>

	<section name="Archiva Javascript Web Application">
	<subsection name="General design">
	<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 href="http://twitter.github.com/bootstrap" target="_blank">twitter bootstrap css</a>.
	</p>
	</subsection>
	<subsection name="Runtime Properties">
	<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
	<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>
	</p>
	</subsection>
	<subsection name="Used Javascript frameworks">
	<p>
	We use some well known javascript framework librairies :
	<ul>
	<li><a target="_blank" href="http://jquery.com/">jquery</a>.</li>

	<li><a target="_blank" href="http://sammyjs.org">sammyjs for hash navigation</a></li>

	<li><a target="_blank" href="http://requirejs.org">requirejs</a> for template loading (see <a href="./template-loading.html">details</a>).</li>

	<li><a target="_blank" href="http://code.google.com/p/jquery-i18n-properties">jquery-i18n-properties</a> for i18n loading (see <a href="./i18n.html">details</a>).</li>

	<li><a target="_blank" href="http://knockoutjs.com">knockoutjs</a> as we use a MVVM pattern (see <a href="./knockout-binding.html">knockout binding</a>).</li>

	<li><a target="_blank" href="http://twitter.github.com/bootstrap/javascript.html">twitter bootstrap js</a> to magnify the ui.</li>

	<li><a target="_blank" href="http://bassistance.de/jquery-plugins/jquery-plugin-validation">jquery validate</a> for form validation.</li>
	</ul>
	</p>
	</subsection>
	<subsection name="Sources organisation">
	<p>
	Sources are located in src/main/webapp of the archiva-webapp module :
	<ul>
	<li>css</li>
	<li>images</li>
	<li>js</li>
	</ul>
	</p>
	<subsection name="js directory">
	<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>
	</subsection>
	</subsection>

	<subsection name="Start page">
	<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>
	<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>
	<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):
	<source>
	<![CDATA[
	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']}">
	]]>
	</source>

	</p>
	</p>
	</subsection>

	<subsection name="Grid/edit model">
	<p>We use a tab/pill models to display grid of datas and edit/add form:
	<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.
	</p>
	</subsection>

	</section>
	</body>
	</document>