15 Developing a Client-Side Website
Would you like to develop a website for highly interactive applications and mobile sites? Your site can be a responsive application, a single-page application, and much more. Oracle WebCenter Sites APIs let you create such websites to render on client side and run in the browser client.
Before proceeding further, it is recommended that you familiarize yourself with the WebCenter Sites Aggregate REST services. See the Aggregate REST API Reference for Oracle WebCenter Sites.
Topics:
15.1 About Client-Side Websites
REST APIs enable you to build websites that render on the client side and execute entirely in the browser client. Such websites include, but are not limited to, single-page applications. These websites are particularly useful for highly interactive applications (or portions of websites) and mobile sites.
In client-side rendering, usually client-side libraries generate the mark up, which helps in limiting the interactions between the client and server to just data elements. This interaction takes place usually in the form of JSON. As users navigate from page to page, requests are made to the server for specific data components while the JavaScript to generate the markup stays loaded in the browser. REST APIs mirror features of server-side Java APIs in general.
REST services in WebCenter Sites are exposed to clients so that they can get data and build their custom sites using their Client side frameworks. Client-Side APIs enable you to build JavaScript-based web applications that have no server-side logic or JSPs. These APIs can aggregate asset data for an entire page in a single REST call. A single call is sufficient to retrieve content up to any level of depth, its related information, and even an entire website.
Responses to REST services can potentially be cached in the browser cache, which can lead to a better performing experience. These APIs let consumers retrieve data from sites and present it in their own templates, without having to use WebCenter Sites templates. This feature allows customers to use WebCenter Sites as a data storage.
15.2 REST Calls for Developing REST-Avisports: Examples
REST-avisports is a sample website that demonstrates client-side website development using the WebCenter Sites REST API. This sample website is included in the WebCenter Sites installation download.
To configure this website, see Configuring and Deploying the REST-avisports Sample Site in Oracle Fusion Middleware Installing and Configuring Oracle WebCenter Sites.
This section provides some examples of REST calls used in developing the REST-avisports client-side website, which is similar to the avisports sample site. These examples give site developers some ideas about efficiently developing a full-fledged client-side website using REST calls. Developing the REST-avisports website involves the following:
15.2.1 Getting Navigation Menus
The following call renders Home and Skiing navigation menus on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/navigation/Default?assetDepth=0&fields=Page(children,name,id);SiteNavigation(children)&expand=Page
This call uses the following query parameters: assetDepth, fields, and expand.
The response looks something like this:
The navigation shown in this figure is rendered:
Figure 15-2 Navigation Rendered from the JSON Response
Description of "Figure 15-2 Navigation Rendered from the JSON Response"
15.2.2 Getting the Home Page
The following call renders the Home page asset on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1327351719456?assetDepth=1&fields=Page(banner,teaserImages,teaserText,bannerText);AVIImage(imageFile,width,height)&expand=Page,AVIImage
This call uses the following query parameters: assetDepth, fields, and expand.
The response looks something like this:
Figure 15-3 JSON Response to Render the Home Page
Description of "Figure 15-3 JSON Response to Render the Home Page"
The page shown in this image is rendered:
Figure 15-4 Avisports Home Page Rendered from the JSON Response
Description of "Figure 15-4 Avisports Home Page Rendered from the JSON Response"
15.2.3 Getting an Additional Website Page
The following call renders the Skiing page on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1329326970440?assetDepth=2&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,titleContent1,titleContent2,Assoc_Named_contentList1,Assoc_Named_contentList2);AVIImage(imageFile,smallThumbnail,ClargeThumbnail);YouTube(externalid)&expand=Page,AVIImage,AVIArticle,YouTube
This call uses the following query parameters: assetDepth, fields, and expand.
The response looks something like this:
Figure 15-5 JSON Response to Render the Skiing Page
Description of "Figure 15-5 JSON Response to Render the Skiing Page"
The Skiing page shown in this image is rendered on the avisports sample website.
Figure 15-6 Skiing Page Rendered from the JSON Response
Description of "Figure 15-6 Skiing Page Rendered from the JSON Response"
15.2.4 Calling an Article from a Page
The following call renders an article that is displayed in the Also In the News section on the Skiing page on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/AVIArticle/1328196047241?assetDepth=2&fields=category,author,postDate,subheadline,relatedLinks,relatedStories,relatedImage,body;AVIArticle(id,headline,abstract,relatedImage);AVIImage(imageFile,caption,width,height,sidebarThumbnail)&expand=AVIArticle,AVIImage
This call uses the following query parameters: assetDepth, fields, and expand.
The response looks something like this:
Figure 15-7 JSON Response to Render an Article Displayed on the Skiing Page
Description of "Figure 15-7 JSON Response to Render an Article Displayed on the Skiing Page"
The article shown in this figure is rendered:
Figure 15-8 Article Rendered from the JSON Response
Description of "Figure 15-8 Article Rendered from the JSON Response"
15.2.5 Calling a Collection Resource with Pagination
The following call renders a collection resource with pagination (with navigation buttons on the bottom of the page) on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/ContentQuery/1395380847207/items?assetDepth=1&fields=AVIArticle(id,headline,abstract,relatedImage);AVIImage(imageFile,smallThumbnail)&expand=AVIArticle,AVIImage&offset=0&limit=8
This call uses the following query parameters: assetDepth, fields, and expand.
The response looks something like this:
Figure 15-9 JSON Response to Render a Collection Resource with Pagination
Description of "Figure 15-9 JSON Response to Render a Collection Resource with Pagination"
The page shown in this figure is rendered:
Figure 15-10 Collection Resource Rendered from the JSON Response
Description of "Figure 15-10 Collection Resource Rendered from the JSON Response"
15.2.6 Calling a Search Resource
The following call renders the search results (which is a collection resource) for the criterion "How To" on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/search/sites/avisports/types/AVIArticle/assets?field:name:startswith=How+to
This call uses the following query parameters: field name starts with.
The JSON response looks something like this:
Figure 15-11 JSON Response to Render Search Results
Description of "Figure 15-11 JSON Response to Render Search Results"
The page shown in this figure is rendered:
Figure 15-12 Search Results from the JSON Response
Description of "Figure 15-12 Search Results from the JSON Response"
15.2.7 Calling Page Segments
Topics:
15.2.7.1 Calling a Page Without Segments
The following call renders the Running page without segments on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1361217259137?assetDepth=1&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,recommendation);AVIImage(imageFile,smallThumbnail,largeThumbnail);AdvCols(items)&expand=Page,AVIImage,AdvCols,AVIArticle
This call uses the following query parameters: assetDepth, fields, and expand.
The JSON response looks like this:
Figure 15-13 JSON Response to Render a Page Without Segments
Description of "Figure 15-13 JSON Response to Render a Page Without Segments"
The page shown in this image is rendered:
Figure 15-14 Page with No Segments Rendered
Description of "Figure 15-14 Page with No Segments Rendered"
15.2.7.2 Calling a Page with Segments That Target Specific Visitors
The following call renders the Running page with segments that target men on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1361217259137?assetDepth=1&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,recommendation);AVIImage(imageFile,smallThumbnail,largeThumbnail);AdvCols(items)&expand=Page,AVIImage,AdvCols,AVIArticle&segments=Male
This call uses the following query parameters: assetDepth, fields, expand, and segments.
The JSON response looks like this:
Figure 15-15 JSON Response to Render a Page with Segments That Target Men
Description of "Figure 15-15 JSON Response to Render a Page with Segments That Target Men"
The page shown in this figure is rendered:
Figure 15-16 Rendered Page with Segments That Target Men
Description of "Figure 15-16 Rendered Page with Segments That Target Men"
15.2.7.3 Calling a Page with Segments That Target Different Visitors
The following call renders the Running page with segments that target women on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1361217259137?assetDepth=1&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,recommendation);AVIImage(imageFile,smallThumbnail,largeThumbnail);AdvCols(items)&expand=Pag,AVIImage,AdvCols,AVIArticle&segments=Female
This call uses the following query parameters: assetDepth, fields, expand, and segments.
The JSON response looks like this:
Figure 15-17 JSON Response to Render a Page with Segments That Target Women
Description of "Figure 15-17 JSON Response to Render a Page with Segments That Target Women"
The page shown in this image is rendered:
Figure 15-18 Rendered Page with Segments That Target Women
Description of "Figure 15-18 Rendered Page with Segments That Target Women"
15.2.7.4 Calling a Page with Segments That Target More Visitors
The following call renders the Running page with segments that target both women and men on the avisports sample website:
http://<host>:<port>/<context>/REST/resources/v1/aggregates/avisports/Page/1361217259137?assetDepth=1&fields=AVIArticle(id,relatedImage,abstract,headline);Page(banner,recommendation);AVIImage(imageFile,smallThumbnail,largeThumbnail);AdvCols(items)&expand=Page,AVIImage,AdvCols,AVIArticle&segments=Male,Female
This call uses the following query parameters: assetDepth, fields, expand, and segments.
The JSON response looks like this:
Figure 15-19 JSON Response to Render a Page with Segments That Target Women and Men
Description of "Figure 15-19 JSON Response to Render a Page with Segments That Target Women and Men"
The page shown in this image is rendered:
Figure 15-20 Rendered Page with Segments That Target Women and Men
Description of "Figure 15-20 Rendered Page with Segments That Target Women and Men"