Author: olamy
Date: Mon Jan 23 20:45:12 2012
New Revision: 1234980
URL: http://svn.apache.org/viewvc?rev=1234980&view=rev
Log:
doc on knockout binding
Modified:
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/i18nload.js
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/index.xml
Modified:
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
URL:
http://svn.apache.org/viewvc/archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html?rev=1234980&r1=1234979&r2=1234980&view=diff
==============================================================================
---
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
(original)
+++
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
Mon Jan 23 20:45:12 2012
@@ -44,7 +44,13 @@
baseUrl: "js/"
});
// CacheBust is for dev purpose use false in prod env !
-
$LAB.setGlobalDefaults({AlwaysPreserveOrder:true,BasePath:"js/",explicit_preloading:false,CacheBust:true});
+ var options = {
+ AlwaysPreserveOrder:true,
+ BasePath:"js/",
+ explicit_preloading:false,
+ CacheBust:true
+ };
+ $LAB.setGlobalDefaults(options);
$LAB
.script("jquery.tmpl.js").wait()
.script("archiva/utils.js").wait()
@@ -62,11 +68,11 @@
.script("bootstrap-tabs.js")
.script("bootstrap-modal.js")
.script("bootstrap-alerts.js")
- .script("bootstrap-dropdown.js").wait()
- .script("bootstrap-twipsy.js").wait()
+ .script("bootstrap-dropdown.js")
+ .script("bootstrap-twipsy.js")
.script("bootstrap-popover.js")
- .script("knockout.simpleGrid.js").wait()
- .script("knockout.mapping-latest.debug.js").wait()
+ .script("knockout.simpleGrid.js")
+ .script("knockout.mapping-latest.debug.js")
.script("redback/user.js").wait()
.script("redback/users.js").wait()
.script("redback/redback.js").wait()
@@ -74,9 +80,7 @@
.script("redback/permission.js").wait()
.script("redback/resource.js").wait()
.script("redback/roles.js").wait()
- .script("archiva/main.js").wait(function(){
- //startArchivaApplication();
- });
+ .script("archiva/main.js");
</script>
Modified:
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/i18nload.js
URL:
http://svn.apache.org/viewvc/archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/i18nload.js?rev=1234980&r1=1234979&r2=1234980&view=diff
==============================================================================
---
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/i18nload.js
(original)
+++
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/i18nload.js
Mon Jan 23 20:45:12 2012
@@ -29,12 +29,12 @@ $(function() {
// -- archiva
// load default
//loadAndParseFile("restServices/archivaServices/commonServices/getAllI18nResources",
{cache:false, mode: 'map',encoding:'utf-8'});
- //if (browserLang!='en'){
+
var options = {
cache:false,
mode: 'map',
encoding:'utf-8'
};
loadAndParseFile("restServices/archivaServices/commonServices/getAllI18nResources?locale="+browserLang,options
);
- //}
+
});
\ No newline at end of file
Modified:
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt
URL:
http://svn.apache.org/viewvc/archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt?rev=1234980&r1=1234979&r2=1234980&view=diff
==============================================================================
---
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt
(original)
+++
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt
Mon Jan 23 20:45:12 2012
@@ -26,4 +26,196 @@
~~ NOTE: For help with the syntax of this file, see:
~~ http://maven.apache.org/guides/mini/guide-apt-format.html
-Knockout binding
\ No newline at end of file
+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]").twipsy();
+ }
+ });
+ // 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>
+
++----------------
Modified:
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/index.xml
URL:
http://svn.apache.org/viewvc/archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/index.xml?rev=1234980&r1=1234979&r2=1234980&view=diff
==============================================================================
---
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/index.xml
(original)
+++
archiva/trunk/archiva-modules/archiva-web/archiva-webapp-js/src/site/xdoc/index.xml
Mon Jan 23 20:45:12 2012
@@ -111,19 +111,20 @@ Support single value:
<ul>
<li>
One tab/pill display the grid
- <a href="images/repo-grids.png" class="single_image"
title="Start Page">
+ <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="Start
Page">
+ <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>
