From 53c26e1ce79ba3156253edf2137ea4acd43c039e Mon Sep 17 00:00:00 2001 From: Olivier Lamy Date: Thu, 13 Sep 2012 22:38:19 +0000 Subject: [PATCH] doc moved git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1384583 13f79535-47bb-0310-9956-ffa450edef68 --- .../archiva-webapp-js/src/site/apt/i18n.apt | 63 ----- .../src/site/apt/knockout-binding.apt | 221 ------------------ .../archiva-webapp-js/src/site/apt/rest.apt | 181 -------------- .../src/site/apt/template-loading.apt | 76 ------ .../site/resources/images/error-message.png | Bin 121862 -> 0 bytes .../resources/images/modal-confirm-dialog.png | Bin 67812 -> 0 bytes .../src/site/resources/images/repo-edit.png | Bin 145228 -> 0 bytes .../src/site/resources/images/repo-grids.png | Bin 208309 -> 0 bytes .../site/resources/images/start-screen.png | Bin 64506 -> 0 bytes .../site/resources/images/success-message.png | Bin 197163 -> 0 bytes .../site/resources/js/fancy-box-activation.js | 18 -- .../src/site/xdoc/generics-js.xml | 92 -------- .../archiva-webapp-js/src/site/xdoc/index.xml | 167 ------------- 13 files changed, 818 deletions(-) delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/i18n.apt delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/rest.apt delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/template-loading.apt delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/resources/images/error-message.png delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/resources/images/modal-confirm-dialog.png delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/resources/images/repo-edit.png delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/resources/images/repo-grids.png delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/resources/images/start-screen.png delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/resources/images/success-message.png delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/resources/js/fancy-box-activation.js delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/generics-js.xml delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/index.xml diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/i18n.apt b/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/i18n.apt deleted file mode 100644 index a558e2071..000000000 --- a/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/i18n.apt +++ /dev/null @@ -1,63 +0,0 @@ - ----- - i18n - ----- - Olivier Lamy - ----- - 2012-01-19 - ----- - -~~ 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 - -i18n management - - The js library {{{http://code.google.com/p/jquery-i18n-properties}jquery-i18n-properties}} is used for i18n. - - On application loading, i18n properties are loaded by calling a REST services with the browser lang - or with the requested language specified by the request parameter : ?request_lang=en. - - This service will load properties in this order: - - * redback properties in en then in specified language - - * archiva properties (from org/apache/archiva/i18n/default.properties) in en then in specified language - -* Javascript method - - Simple i18n value without any value - -+----------------------- -Javascript code : -$.i18n.prop("save") will return the value for key save -+----------------------- - - - You can pass some values too (sample for property managedrepository.deleted=Managed Repository " {0} " deleted. ) - -+----------------------- -Javascript code : -$.i18n.prop("managedrepository.deleted",managedRepository.name()) -if managedRepository.name() is "foo" -response will be Managed Repository " foo " deleted. -+----------------------- - -* Missing properties - - In case of missing property, the key is returned. \ No newline at end of file diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt b/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt deleted file mode 100644 index f5dfa9680..000000000 --- a/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt +++ /dev/null @@ -1,221 +0,0 @@ - ----- - Knockout binding - ----- - Olivier Lamy - ----- - 2012-01-19 - ----- - -~~ 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 - -Knockout binding - - Explanation on the managed repositories list/edit/add screen. - -%{toc} - -* Javascript Beans - - First you must map the json response on a Javascript bean (a bit borying task :-) ) - -+------------------- -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); - } - -+------------------- - - <<>> - -* View Model - -** First you must insert your template in the #main-content div - -+--------------- -// it's a jquery template as we do some i18n transformations -$("#main-content").html($("#repositoriesMain").tmpl()); -+--------------- - -** You can now create your view model. - -+--------------- -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){ - ...... - } -} -+--------------- - -** Grid binding - - The ManagedRepositoriesViewModel is used as it with a custom grid binding (knockout has a feature to create own binding - so we use one called <<>> which will display grids. - - Grid view initialisation code (some details omitted) : - -+---------------- - 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)); - } - } - ); -+---------------- - -* View definition - -** Binding definition - - We have applyed binding on the node with id "#managed-repositories-table". The binding definition is: - -+---------------- - -
-+---------------- - - * simpleGrid: gridViewModel = field name for the view model (see sample above) - - * simpleGridTemplate:'ko_managed-repositoriesGrid' = name of the template to use (see below) - - * pageLinksId:'managed-repositoriesPagination' = name of the template to use for pagination. - - * data:'managedRepositories' = fields which contains data to pass to pass to the template - -** Template content - - Template used for grid display (some details omitted). - -+---------------- - - - - - - - - -
-

Some common/generic javascript methods are available.

- -

A div "user-messages" is reserved for user messages.

- -

- Javascript function: - -displaySuccessMessage($.i18n.prop('managedrepository.added')); -// the second parameter is optionnal by default user-messages id is used -displaySuccessMessage=function(text,idToAppend){ - - -
- Success Message - -

- - - -

- Javascript function: - -displayErrorMessage($.i18n.prop('managedrepository.added')); -// the second parameter is optionnal by default user-messages id is used -displayErrorMessage=function(text,idToAppend){ - - -
- Error Message - -

- - - -

- Javascript function: - -okFn: function to call in case of ok -okMessage: message for Ok button -cancelMessage: message for cancel button -title: modal title -bodyText: modal content (can be html) -openDialogConfirm=function(okFn, okMessage, cancelMessage, title,bodyText) - - -
- Modal Confirm dialog - -

- -
- - - - diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/index.xml b/archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/index.xml deleted file mode 100644 index 45934e64a..000000000 --- a/archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/index.xml +++ /dev/null @@ -1,167 +0,0 @@ - - - - - - - Archiva Javascript application General design - Olivier Lamy - - - - - - - - - - - - -
- -

- The goal is to have a "one page loading" javascript application. -
- For this the only html page will contains a div with id "main-content" this div will be populated - by jquery template execution (see template loading). -
- The server will be contacted only for REST request/response (see details). -
- All UI rendering will be done only on client side. -
- As we are not designer :-), the application will use the twitter bootstrap css. -

- - -

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 -

    -
  • archiva.devMode=true/false: if true will add a timestamp query parameter for loading js and html templates.
    • -
  • archiva.javascriptLog=true/false: will activate javascript log, method available with $.log(msg)
    • -
  • 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'
    • -
-

- - -

- We use some well known javascript framework librairies : -

-

- - -

- Sources are located in src/main/webapp : -

    -
  • css
    • -
  • images
    • -
  • js
    • -
-

- -

- Root directory contains external libraries. -

-

- archiva directory contains archiva js files with a subdirectory templates which contains templates -

-

- redback directory contains redback js files with a subdirectory templates which contains templates -

- - - - -

- The main page will load javascript files, load i18n, load templates and insert menu. -
- This main page is divided in 3 parts: -

- -
- Start Page - -

-

-

    -
  • #topbar-menu-container is populated with the template js/archiva/templates/topbar.html.
    • -
  • #sidebar-content is populated with the template js/archiva/templates/menu.html.
    • -
  • #main-content is the place where screen will appear.
    • -
  • hidden #html-fragments will contains loaded templates.
    • -
-

-

- 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): - - -Support single value: -

  • -]]> - - -

    -

    - - - -

    We use a tab/pill models to display grid of datas and edit/add form: -

    - Have a look at the page knockout-binding for more explanation. -

    -     - -
    • - -     - -