You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by bu...@apache.org on 2014/05/24 11:01:47 UTC
svn commit: r909793 - in /websites/staging/isis/trunk: cgi-bin/ content/
content/components/viewers/restfulobjects/angularjs-tips.html
content/documentation.html
Author: buildbot
Date: Sat May 24 09:01:46 2014
New Revision: 909793
Log:
Staging update by buildbot for isis
Added:
websites/staging/isis/trunk/content/components/viewers/restfulobjects/angularjs-tips.html
Modified:
websites/staging/isis/trunk/cgi-bin/ (props changed)
websites/staging/isis/trunk/content/ (props changed)
websites/staging/isis/trunk/content/documentation.html
Propchange: websites/staging/isis/trunk/cgi-bin/
------------------------------------------------------------------------------
--- cms:source-revision (original)
+++ cms:source-revision Sat May 24 09:01:46 2014
@@ -1 +1 @@
-1597255
+1597265
Propchange: websites/staging/isis/trunk/content/
------------------------------------------------------------------------------
--- cms:source-revision (original)
+++ cms:source-revision Sat May 24 09:01:46 2014
@@ -1 +1 @@
-1597255
+1597265
Added: websites/staging/isis/trunk/content/components/viewers/restfulobjects/angularjs-tips.html
==============================================================================
--- websites/staging/isis/trunk/content/components/viewers/restfulobjects/angularjs-tips.html (added)
+++ websites/staging/isis/trunk/content/components/viewers/restfulobjects/angularjs-tips.html Sat May 24 09:01:46 2014
@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+
+ <meta charset="utf-8">
+ <title>AngularJS Tips</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+
+ <!-- Le styles -->
+ <link href="./../../../bootstrap-3.0.0/css/bootstrap.css" rel="stylesheet">
+ <link href="./../../../prettify.css" rel="stylesheet">
+
+ <style type="text/css">
+ body {
+ padding-top: 60px;
+ }
+ .sprite {
+ display: inline-block;
+ height: 20px;
+ margin: 0 auto 4px;
+ outline: medium none;
+ text-indent: -999em;
+ width: 24px;
+ background-image: url('./../../../images/sprites.png');
+ background-repeat: no-repeat;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ .edit-page {
+ display: inline-block;
+ height: 20px;
+ margin: 0 auto 4px;
+ outline: medium none;
+ text-indent: -999em;
+ width: 24px;
+ background-image: url('./../../../images/edit.png');
+ background-repeat: no-repeat;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ .fb-share {
+ background-position: 0px -40px;
+ }
+ .gp-share {
+ background-position: 0px 0px;
+ }
+ .tw-share {
+ background-position: 0px -80px;
+ }
+ .markdown-content {
+ min-height: 500px;
+ }
+ .book-image img {
+ border: 1px;
+ border-style: solid;
+ }
+ .release-matrix .heading {
+ background-color: #eeeeee;
+ }
+ .release-matrix .new {
+ color: #dd0000;
+ font-weight: bolder;
+ }
+ .stub,.note {
+ position: relative;
+ padding: 7px 15px;
+ margin-bottom: 18px;
+ color: #404040;
+ background-color: #eedc94;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
+ background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
+ background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -o-linear-gradient(top, #fceec1, #eedc94);
+ background-image: linear-gradient(top, #fceec1, #eedc94);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #eedc94 #eedc94 #e4c652;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ border-width: 1px;
+ border-style: solid;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ }
+
+ div.XXXisis-tweak form {
+ margin-top: 6px;
+ margin-bottom: -2px;
+ }
+
+ div.row div.col-md-12 {
+ border-top: 1px solid #eeeeee;
+ }
+
+
+ /* Isis specific stuff */
+
+ div.row div.col-md-12 {
+ margin-top: 20px;
+ }
+
+ .container {
+ width: 940px;
+ }
+
+ .markdown-content .documentation .span-one-third p {
+ margin-bottom: 0px;
+ }
+
+ .markdown-content .documentation .group {
+ margin-top: 9px;
+ }
+
+ .documentation .group h2 {
+ border-bottom: 1px solid #DDD
+ }
+
+ .container h2 a[name],
+ .documentation h2 a[name] {
+ padding-top: 50px;
+ margin-top: -50px;
+ }
+
+ .container h2 a[name],
+ .documentation h2 a[name],
+ .documentation h3 a[name],
+ .documentation h4 a[name] {
+ color: black;
+ display: inline-block;
+ }
+ .documentation h2 a[name]:hover,
+ .documentation h3 a[name]:hover,
+ .documentation h4 a[name]:hover {
+ text-decoration: none;
+ }
+
+ .documentation h2 a:not([name]),
+ .documentation h3 a:not([name]),
+ .documentation h4 a:not([name]) {
+ /* same as code style */
+ padding: 0 3px 2px;
+ font-family: Monaco, Andale Mono, Courier New, monospace;
+ font-size: 12px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ padding: 1px 3px;
+ }
+
+ .carousel-indicators li {
+ border: 1px solid rgb(192,70,1);
+ }
+
+ .carousel-indicators li.active {
+ background-color: rgb(192,70,1);
+ }
+
+ .carousel-control .icon-prev,
+ .carousel-control .icon-next {
+ color: rgb(192,70,1);
+ font-size: 60px;
+ }
+
+ .page-header {
+ margin-top: 0px;
+ }
+
+ .container blockquote p {
+ font-size: small;
+ }
+
+ .container blockquote p:not([author]) {
+ font-style: italic;
+ }
+
+ .container blockquote p {
+ font-size: small;
+ font-style: italic;
+ font-weight: bold;
+ }
+
+ footer hr {
+ margin-top: 100px;
+ }
+
+ .markdown-content img {
+ margin-top: 10px;
+ margin-bottom: 20px;
+ }
+
+ .markdown-content a img {
+ margin-top: 0px;
+ margin-bottom: 0px;
+ }
+
+
+ #forkongithub a{
+ display: none;
+ background:#090;
+ color:#fff;
+ text-decoration:none;
+ font-family:arial, sans-serif;
+ text-align:center;
+ font-weight:bold;
+ padding:5px 40px;
+ font-size:1rem;
+ line-height:2rem;
+ position:relative;
+ transition:0.5s;
+ }
+ #forkongithub a:hover{
+ background:#0D0;
+ color:#fff;
+ }
+ #forkongithub a::before,
+ #forkongithub a::after{
+ content:"";width:100%;
+ display:block;
+ position:absolute;
+ top:1px;
+ left:0;
+ height:1px;
+ background:#fff;
+ z-index: 9999;
+ }
+ #forkongithub a::after{
+ bottom:1px;
+ top:auto;
+ }
+ @media screen and (min-width:800px){
+ #forkongithub{
+ position:absolute;
+ display:block;
+ top:0;
+ right:0;
+ width:250px;
+ overflow:hidden;
+ height:250px;
+ z-index: 9999;
+ }
+ #forkongithub a{
+ display:inherit;
+ width:250px;
+ position:absolute;
+ font-size:small;
+ top:40px;
+ right:-60px;
+ transform:rotate(45deg);
+ -webkit-transform:rotate(45deg);
+ box-shadow:4px 4px 10px rgba(0,0,0,0.8);
+ }
+ }
+ </style>
+
+ <!-- courtesy of http://codepo8.github.io/css-fork-on-github-ribbon/ -->
+ <span id="forkongithub">
+ <a href="https://github.com/apache/isis">Fork me on GitHub</a>
+ </span>
+
+ <script type="text/javascript">
+ function fbshare () {
+ window.open(
+ "http://www.facebook.com/sharer/sharer.php?u="+document.URL,
+ 'Share on Facebook',
+ 'width=640,height=426');
+ };
+ function gpshare () {
+ window.open(
+ "https://plus.google.com/share?url="+document.URL,
+ 'Share on Google+',
+ 'width=584,height=385');
+ };
+ function twshare () {
+ window.open(
+ "https://twitter.com/intent/tweet?url="+document.URL+"&text=AngularJS Tips",
+ 'Share on Twitter',
+ 'width=800,height=526');
+ };
+ </script>
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="./../../../images/favicon.ico">
+
+ <script src="./../../../javascript/prettify.js" type="text/javascript"></script>
+
+ <script src="//code.jquery.com/jquery.js"></script>
+ <script src="./../../../javascript/prettyprint.js"></script>
+ <script src="./../../../bootstrap-3.0.0/js/bootstrap.js"></script>
+
+
+ <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
+ <!--
+ <DISABLEDscript src="./../../../javascript/common.js"></DISABLEDscript>
+ -->
+
+
+
+
+
+ <script>
+ $(function () { prettyPrint() })
+ $().dropdown()
+ </script>
+
+
+ </head>
+
+ <body>
+
+ <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+ <div class="container">
+ <a class="navbar-brand" href="./../../../index.html">Apache Isis™</a>
+ <ul class="nav navbar-nav">
+ <li><a href="./../../../download.html">Download</a></li>
+ <li><a href="./../../../documentation.html">Documentation</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Screenshots<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="./../../../intro/elevator-pitch/isis-in-pictures.html">Screenshots</a></li>
+ <li><a href="./../../../intro/tutorials/screencasts.html">Screencasts <img src="./../../../images/tv_show-25.png"></a></li>
+ <li><a href="./../../../intro/powered-by/powered-by.html">Powered by</a></li>
+ <li><a href="http://isisdemo.mmyco.co.uk/">Online Demo</a></li>
+ </ul>
+ </li>
+
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="./../../../support.html">Mailing Lists</a></li>
+ <li><a href="http://isis.markmail.org/search/?q=">ML Archives</a></li>
+ <li><a href="https://issues.apache.org/jira/browse/ISIS">JIRA</a></li>
+ <li><a href="http://stackoverflow.com/questions/tagged/isis">Stack Overflow</a></li>
+ <li><a href="http://github.com/apache/isis">Github mirror</a></li>
+ </ul>
+ </li>
+
+ <FORM class="navbar-form navbar-right" id="searchbox_012614087480249044419:dn-q5gtwxya" action="http://www.google.com/cse">
+ <div class="form-group">
+ <input type="hidden" name="cx" value="012614087480249044419:dn-q5gtwxya">
+ <INPUT type="hidden" name="cof" value="FORID:0">
+ <INPUT class="form-control" name="q" type="text" placeholder="Search">
+ </div>
+ </FORM>
+
+ <li class="dropdown navbar-right">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apache <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="http://www.apache.org/">Apache Homepage <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/licenses/">Licenses <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/security/">Security <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/foundation/sponsorship.html">Sponsorship <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/foundation/thanks.html">Thanks <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="./../../../more-thanks.html">More thanks <i class="icon-share-alt"></i></a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+
+ </div>
+ </nav>
+
+ <div class="container">
+ <div class="markdown-content">
+
+
+<div class="page-header">
+<p><a href="./../../../documentation.html">Docs</a> » <a href="./../../../components/about.html">Components</a> » <a href="./../../../components/viewers/about.html">Viewers</a> » <a href="./../../../components/viewers/restfulobjects/about.html">Restfulobjects</a></p>
+<h1>AngularJS Tips
+
+</h1>
+</div>
+
+<p>The hypermedia API exposed by Isis' Restful Objects viewer is intended be support both bespoke custom-written viewers as well as generic viewers. Indeed, we expect most clients consuming the API will be bespoke, not generic.</p>
+
+<p>This page captures one or two tips on using AngularJS to write such a bespoke client.</p>
+
+<h3>Invoking a GET link (eg invoking a query action)</h3>
+
+<p>Suppose you have a <code>CustomerService</code> providing a <code>findCustomer</code> action:</p>
+
+<p>public class CustomerService {</p>
+
+<pre><code>public String id() { return "customers"; }
+
+@ActionSemantics(Of.SAFE)
+public Customer findCustomer(@Named("customerName") String customerName) { ... }
+</code></pre>
+
+<p>}</p>
+
+<p>Restful Objects will expose this as action with the following link that looks something like:</p>
+
+<p>{
+ "rel" : "urn:org.restfulobjects:rels/invoke",
+ "href" : "http://localhost:8080/restful/services/customers/actions/findCustomer/invoke",
+ "method" : "GET",
+ "type" : "application/json;profile=\"urn:org.restfulobjects:repr-types/action-result\"",
+ "arguments" : {
+ "customerName" : {
+ "value" : null
+ }
+ }
+ } </p>
+
+<p>You can then invoke this using AngularJs' <code>$resource</code> service as follows. </p>
+
+<p>var findCustomerAction = $resource("http://localhost:8080/restful/services/customers/actions/findCustomer/invoke?:queryString");</p>
+
+<p>var findCustomerArgs = {
+ "customerName": {
+ "value": "Fred"
+ }
+ };
+ var findCustomerArgsStringified = JSON.stringify(findCustomerArgs);</p>
+
+<p>findCustomerAction.get({queryString: findCustomerArgsStringified}, function(data) { ... } )</p>
+
+<p>Here the <code>:queryString</code> placeholder in the initial <code>$resource</code> constructor is expanded with a stringified version of the JSON object representing the args. Note how the <code>findCustomerArgs</code> is the same as the <code>"arguments"</code> attribute in the original link (with a value provided instead of <code>null</code>).</p>
+
+<h3>Invoking a PUT or POSt link</h3>
+
+<blockquote>
+ <p>The following notes need expanding. Contributions welcome</p>
+</blockquote>
+
+<p>If the method is a PUT or a POST, then no <code>:queryString</code> placeholder is required in the URL, and the args are instead part of the body. Use <code>$resource.put(...)</code> or <code>$resource.post(...)</code> instead.</p>
+
+
+
+ </div>
+
+ <div id="edit" class="modal hide fade in" style="xxxdisplay: none; ">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">x</a>
+
+ <h3>Thank you for contributing to the documention!</h3>
+ </div>
+ <div class="modal-body">
+ <h4>Any help with the documentation is greatly appreciated.</h4>
+ <p>All edits are reviewed before going live, so feel free to do much more than fix typos or links. If you see a page that could benefit from an entire rewrite, we'd be thrilled to review it. Don't be surprised if we like it so much we ask you for help with other pages :)</p>
+ <small>NOTICE: unless indicated otherwise on the pages in question, all editable content available from apache.org is presumed to be licensed under the Apache License (AL) version 2.0 and hence all submissions to apache.org treated as formal Contributions under the license terms.</small>
+ <!--[if gt IE 6]>
+ <h4>Internet Explorer Users</h4>
+ <p>If you are not an Apache committer, click the Yes link and enter a <i>anonymous</i> for the username and leave the password empty</p>
+ <![endif]-->
+
+ </div>
+ <div class="modal-footer">
+ Do you have an Apache ID?
+ <a href="javascript:void(location.href='https://cms.apache.org/redirect?uri='+escape(location.href))" class="btn">Yes</a>
+ <a href="javascript:void(location.href='https://anonymous:@cms.apache.org/redirect?uri='+escape(location.href))" class="btn">No</a>
+ </div>
+ </div>
+ <!--
+ <script src="./../../../javascript/bootstrap-modal.js"></script>
+ -->
+
+ <footer>
+ <hr/>
+ <p>
+ Copyright © 2010~2014 The Apache Software Foundation, Licensed under the Apache License, Version 2.0.
+ <br/>
+ Apache Isis, Isis, Apache, the Apache feather logo, and the Apache Isis project logo are trademarks of The Apache Software Foundation.
+ </p>
+ </footer>
+
+ </div> <!-- /container -->
+
+ </body>
+</html>
Modified: websites/staging/isis/trunk/content/documentation.html
==============================================================================
--- websites/staging/isis/trunk/content/documentation.html (original)
+++ websites/staging/isis/trunk/content/documentation.html Sat May 24 09:01:46 2014
@@ -922,7 +922,8 @@
<h4>Hints and Tips</h4>
<ul>
-<li><a href="components/viewers/restfulobjects/using-chrome-tools.html">Using Chrome Tools</a> <a href="components/viewers/restfulobjects/using-chrome-tools.html"><img src="./images/tv_show-25.png"></a>
+<li><a href="components/viewers/restfulobjects/using-chrome-tools.html">Using Chrome Tools</a> <a href="components/viewers/restfulobjects/using-chrome-tools.html"><img src="./images/tv_show-25.png"></a></li>
+<li><a href="components/viewers/restfulobjects/angularjs-tips.html">AngularJS Tips</a>
</div>
</div></li>
</ul>