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