mirror of https://github.com/apache/archiva.git
doc moved
git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1384583 13f79535-47bb-0310-9956-ffa450edef68
This commit is contained in:
Olivier Lamy
parent
f6300f9941
commit
53c26e1ce7
|
|
@ -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.
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
||||||
+-------------------
|
|
||||||
|
|
||||||
<<<NOTE to have access to field values you must now managedRepository.name() >>>
|
|
||||||
|
|
||||||
* 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 <<<simpleGrid>>> 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:
|
|
||||||
|
|
||||||
+----------------
|
|
||||||
<table class="bordered-table zebra-striped" id="managed-repositories-table"
|
|
||||||
data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_managed-repositoriesGrid',pageLinksId:'managed-repositoriesPagination',data:'managedRepositories'">
|
|
||||||
</table>
|
|
||||||
+----------------
|
|
||||||
|
|
||||||
* 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).
|
|
||||||
|
|
||||||
+----------------
|
|
||||||
<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>
|
|
||||||
|
|
||||||
+----------------
|
|
||||||
|
|
@ -1,181 +0,0 @@
|
||||||
-----
|
|
||||||
REST Services
|
|
||||||
-----
|
|
||||||
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
|
|
||||||
|
|
||||||
Expose Rest Services
|
|
||||||
|
|
||||||
|
|
||||||
The {{{http://cxf.apache.org}Apache CXF}} is used to expose some classes/methods as REST Services.
|
|
||||||
|
|
||||||
Services use the standard interface/implementation pattern:
|
|
||||||
|
|
||||||
* interfaces and beans are located in archiva-rest-api maven module
|
|
||||||
|
|
||||||
* implementation are located in archiva-rest-services maven module
|
|
||||||
|
|
||||||
[]
|
|
||||||
|
|
||||||
%{toc}
|
|
||||||
|
|
||||||
* Steps to expose your class as a REST Service.
|
|
||||||
|
|
||||||
Here all the steps to expose a new class as a REST service.
|
|
||||||
|
|
||||||
** Interface and data beans
|
|
||||||
|
|
||||||
All interfaces and data beans are added in the module archiva-rest-api:
|
|
||||||
|
|
||||||
* interface in the package: org.apache.archiva.rest.api.services .
|
|
||||||
|
|
||||||
* data beans in the package: org.apache.archiva.rest.api.model .
|
|
||||||
|
|
||||||
[]
|
|
||||||
|
|
||||||
*** Beans
|
|
||||||
|
|
||||||
As we want to be able to expose result as json or xml type, all beans use javax.xml.bind.annotation root element :
|
|
||||||
|
|
||||||
+---------------------
|
|
||||||
@XmlRootElement( name = "artifact" )
|
|
||||||
public class Artifact
|
|
||||||
implements Serializable
|
|
||||||
|
|
||||||
All services will be able to return json or xml
|
|
||||||
@Produces( { MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML } )
|
|
||||||
+---------------------
|
|
||||||
|
|
||||||
*** JAXRS annotations
|
|
||||||
|
|
||||||
As we use interfaces/implementations pattern jaxrs annotations are only in interfaces level.
|
|
||||||
|
|
||||||
+---------------------
|
|
||||||
@Path( "/managedRepositoriesService/" )
|
|
||||||
public interface ManagedRepositoriesService
|
|
||||||
{
|
|
||||||
// simple GET method no parameter
|
|
||||||
@Path( "getManagedRepositories" )
|
|
||||||
@GET
|
|
||||||
@Produces( { MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML } )
|
|
||||||
List<ManagedRepository> getManagedRepositories()
|
|
||||||
throws ArchivaRestServiceException;
|
|
||||||
|
|
||||||
// GET method with a path parameter
|
|
||||||
@Path( "getManagedRepository/{repositoryId}" )
|
|
||||||
@GET
|
|
||||||
@Produces( { MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML } )
|
|
||||||
@RedbackAuthorization( permissions = ArchivaRoleConstants.OPERATION_MANAGE_CONFIGURATION )
|
|
||||||
ManagedRepository getManagedRepository( @PathParam( "repositoryId" ) String repositoryId )
|
|
||||||
throws ArchivaRestServiceException;
|
|
||||||
|
|
||||||
// POST method to pass a data bean
|
|
||||||
@Path( "addManagedRepository" )
|
|
||||||
@POST
|
|
||||||
@Consumes( { MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML } )
|
|
||||||
@Produces( { MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML } )
|
|
||||||
@RedbackAuthorization( permissions = ArchivaRoleConstants.OPERATION_MANAGE_CONFIGURATION )
|
|
||||||
ManagedRepository addManagedRepository( ManagedRepository managedRepository )
|
|
||||||
throws ArchivaRestServiceException;
|
|
||||||
+---------------------
|
|
||||||
|
|
||||||
** CXF/Spring configuration
|
|
||||||
|
|
||||||
REST services implementations are marked with the Spring annotation @Service
|
|
||||||
|
|
||||||
+---------------------
|
|
||||||
package org.apache.archiva.rest.services;
|
|
||||||
......
|
|
||||||
@Service( "managedRepositoriesService#rest" )
|
|
||||||
public class DefaultManagedRepositoriesService
|
|
||||||
extends AbstractRestService
|
|
||||||
implements ManagedRepositoriesService
|
|
||||||
+---------------------
|
|
||||||
|
|
||||||
Spring beans are declared as REST/CXF services in the Spring configuration
|
|
||||||
|
|
||||||
+---------------------
|
|
||||||
<jaxrs:server id="archivaServices" address="/archivaServices">
|
|
||||||
.....
|
|
||||||
<jaxrs:serviceBeans>
|
|
||||||
<ref bean="managedRepositoriesService#rest"/>
|
|
||||||
</jaxrs:serviceBeans>
|
|
||||||
.....
|
|
||||||
</jaxrs:server>
|
|
||||||
|
|
||||||
Note as we use @Service annotation package scanning must declared in spring configuration
|
|
||||||
|
|
||||||
<beans xmlns="http://www.springframework.org/schema/beans"
|
|
||||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
||||||
xmlns:context="http://www.springframework.org/schema/context"
|
|
||||||
xsi:schemaLocation="http://www.springframework.org/schema/context
|
|
||||||
http://www.springframework.org/schema/context/spring-context-3.0.xsd ....">
|
|
||||||
...
|
|
||||||
<context:annotation-config/>
|
|
||||||
<context:component-scan
|
|
||||||
base-package="org.apache.archiva.rest.services"/>
|
|
||||||
|
|
||||||
...
|
|
||||||
</beans>
|
|
||||||
+---------------------
|
|
||||||
|
|
||||||
CXF servlet is declared as:
|
|
||||||
|
|
||||||
+---------------------
|
|
||||||
<servlet>
|
|
||||||
<servlet-name>CXFServlet</servlet-name>
|
|
||||||
<servlet-class>org.apache.cxf.transport.servlet.CXFServlet</servlet-class>
|
|
||||||
<load-on-startup>1</load-on-startup>
|
|
||||||
</servlet>
|
|
||||||
|
|
||||||
<servlet-mapping>
|
|
||||||
<servlet-name>CXFServlet</servlet-name>
|
|
||||||
<url-pattern>/restServices/*</url-pattern>
|
|
||||||
</servlet-mapping>
|
|
||||||
+---------------------
|
|
||||||
|
|
||||||
So as it, REST services are availble in the following url <<restServices/archivaServices/>>.
|
|
||||||
|
|
||||||
** Redback security annotation
|
|
||||||
|
|
||||||
Some REST methods need some karma, so to prevent anonymous access methods can be marked as it:
|
|
||||||
|
|
||||||
+---------------------
|
|
||||||
|
|
||||||
@RedbackAuthorization( permissions = ArchivaRoleConstants.OPERATION_MANAGE_CONFIGURATION )
|
|
||||||
ManagedRepository addManagedRepository( ManagedRepository managedRepository )
|
|
||||||
throws ArchivaRestServiceException;
|
|
||||||
+---------------------
|
|
||||||
|
|
||||||
This method will need the current user to have the operation manage-configuration level.
|
|
||||||
|
|
||||||
For more details, have a look at {{{http://redback.codehaus.org/integration/rest.html}Redback REST}}.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,76 +0,0 @@
|
||||||
-----
|
|
||||||
Javascript template loading
|
|
||||||
-----
|
|
||||||
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
|
|
||||||
|
|
||||||
Html/Javascript templates loading
|
|
||||||
|
|
||||||
Templates are loaded on application loaded and added in the hidden div <<#html-fragments>>.
|
|
||||||
|
|
||||||
They are loaded using requirejs and the text plugin.
|
|
||||||
|
|
||||||
archiva templates are loaded as it <<<NOTE: the no cache is activated only on dev mode>>>
|
|
||||||
|
|
||||||
+-------------------------
|
|
||||||
require(["text!archiva/templates/menu.html?"+timestampNoCache(),"text!archiva/templates/topbar.html?"+timestampNoCache(),
|
|
||||||
"text!archiva/templates/message.html?"+timestampNoCache(),"text!archiva/templates/modal.html?"+timestampNoCache(),
|
|
||||||
"text!archiva/templates/grids-generics.html?"+timestampNoCache(),
|
|
||||||
"text!archiva/templates/repositories.html?"+timestampNoCache()],
|
|
||||||
function(menu,topbar,message,modal,grids_generics,repositories) {
|
|
||||||
|
|
||||||
// template loading
|
|
||||||
$.tmpl( menu ).appendTo("#html-fragments");
|
|
||||||
$.tmpl( topbar ).appendTo("#html-fragments");
|
|
||||||
$("#html-fragments").append(message);
|
|
||||||
$.tmpl( modal ).appendTo("#html-fragments");
|
|
||||||
$("#html-fragments").append(grids_generics);
|
|
||||||
$("#html-fragments").append(repositories);
|
|
||||||
$.log("main-tmpl.js menu loaded");
|
|
||||||
}
|
|
||||||
);
|
|
||||||
+-------------------------
|
|
||||||
|
|
||||||
* i18n in templates
|
|
||||||
|
|
||||||
** static templates
|
|
||||||
|
|
||||||
Some templates which are only simple html which only need i18n are executed immediatly.
|
|
||||||
|
|
||||||
Simply use:
|
|
||||||
|
|
||||||
+-------------------------
|
|
||||||
$.tmpl( menu, $.i18n.map ).appendTo("#html-fragments");
|
|
||||||
to get i18n values in your template you can use
|
|
||||||
${register} or ${$.i18n.prop('register')}
|
|
||||||
|
|
||||||
Note if you use the simple form ${register} and the property is not available, the template system will try to use if exists the function register
|
|
||||||
|
|
||||||
+-------------------------
|
|
||||||
|
|
||||||
|
|
||||||
** dynamic templates
|
|
||||||
|
|
||||||
The others are only inserted in #html-fragments.
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 192 KiB |
|
|
@ -1,18 +0,0 @@
|
||||||
$(document).ready(function(){
|
|
||||||
$("a.single_image").fancybox({
|
|
||||||
'transitionIn' : 'elastic',
|
|
||||||
'transitionOut' : 'elastic',
|
|
||||||
'speedIn' : 600,
|
|
||||||
'speedOut' : 200,
|
|
||||||
'overlayShow' : true
|
|
||||||
});
|
|
||||||
$("a.gallery_image").fancybox({
|
|
||||||
'transitionIn' : 'elastic',
|
|
||||||
'transitionOut' : 'elastic',
|
|
||||||
'speedIn' : 600,
|
|
||||||
'speedOut' : 200,
|
|
||||||
'overlayShow' : true,
|
|
||||||
'titlePosition': 'inside'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
<?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>Generics Javascript</title>
|
|
||||||
<author>Olivier Lamy</author>
|
|
||||||
</properties>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<script src="js/jquery-1.7.js" type="text/javascript"></script>
|
|
||||||
<script src="js/jquery.fancybox.pack-2.0.4.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.0.4.css" type="text/css" media="screen" />
|
|
||||||
<script type="text/javascript" src="js/fancy-box-activation.js"></script>
|
|
||||||
|
|
||||||
<macro name="toc"/>
|
|
||||||
|
|
||||||
<section name="Generics Javascript">
|
|
||||||
<p>Some common/generic javascript methods are available.</p>
|
|
||||||
<subsection name="User messages">
|
|
||||||
<p>A div "user-messages" is reserved for user messages.</p>
|
|
||||||
<subsection name="Success message">
|
|
||||||
<p>
|
|
||||||
Javascript function:
|
|
||||||
<source>
|
|
||||||
displaySuccessMessage($.i18n.prop('managedrepository.added'));
|
|
||||||
// the second parameter is optionnal by default user-messages id is used
|
|
||||||
displaySuccessMessage=function(text,idToAppend){
|
|
||||||
</source>
|
|
||||||
<a href="images/success-message.png" class="single_image" title="Success Message">
|
|
||||||
<img src="images/success-message.png" width="150" height="93" style="border: 1px solid silver; margin-left: 0.25em; margin-bottom: 0.25em" alt="" /><br/>
|
|
||||||
Success Message
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</subsection>
|
|
||||||
|
|
||||||
<subsection name="Error message">
|
|
||||||
<p>
|
|
||||||
Javascript function:
|
|
||||||
<source>
|
|
||||||
displayErrorMessage($.i18n.prop('managedrepository.added'));
|
|
||||||
// the second parameter is optionnal by default user-messages id is used
|
|
||||||
displayErrorMessage=function(text,idToAppend){
|
|
||||||
</source>
|
|
||||||
<a href="images/error-message.png" class="single_image" title="Error Message">
|
|
||||||
<img src="images/error-message.png" width="150" height="93" style="border: 1px solid silver; margin-left: 0.25em; margin-bottom: 0.25em" alt="" /><br/>
|
|
||||||
Error Message
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</subsection>
|
|
||||||
</subsection>
|
|
||||||
<subsection name="Modal Confirm dialog">
|
|
||||||
<p>
|
|
||||||
Javascript function:
|
|
||||||
<source>
|
|
||||||
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)
|
|
||||||
</source>
|
|
||||||
<a href="images/modal-confirm-dialog.png" class="single_image" title="Modal Confirm dialog">
|
|
||||||
<img src="images/modal-confirm-dialog.png" width="150" height="93" style="border: 1px solid silver; margin-left: 0.25em; margin-bottom: 0.25em" alt="" /><br/>
|
|
||||||
Modal Confirm dialog
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</subsection>
|
|
||||||
</section>
|
|
||||||
</body>
|
|
||||||
</document>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,167 +0,0 @@
|
||||||
<?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-1.7.js" type="text/javascript"></script>
|
|
||||||
<script src="js/jquery.fancybox.pack-2.0.4.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.0.4.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://labjs.com">labjs</a> for javascript loading.</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 <a target="_blank" href="http://svn.apache.org/repos/asf/archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/">src/main/webapp</a> :
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue