X

Shay Shmeltzer's Oracle Development Tools Tips

Recent Posts

Visual Builder

Storing Image Files in Your Database from a Visual Builder App

The business objects in Oracle Visual Builder let you store textual data, but what if you need to store some binary data such as images? You'll need to find a separate location to store those. Oracle has various solutions for this including the storage cloud and the content and experience cloud, in this blog we'll show you how to do this using Oracle ATP Database (or any other Oracle DB). The concept is simple, you create a table with a Blob type column in your DB, in that column you are going to store the images. You now need to expose that table through a REST service - and call that REST service from your Visual Builder app to load the images. In your Visual Builder app you can have a business object where one of the fields will contain the URL that is used to fetch the image back. In the video demo below I show you how to build this solution. The Database Part - ATP+ORDS I'm using an ORDS based module that exposes the get and post methods on the table. Blain Carter pointed me to this tutorial that covers creating the table and the ORDS interfaces. A couple of tips as you work through the tutorial: You need to first complete the method for getting a specific image by ID, before you can test the POST method (which depends on that GET method for the return value). The PL/SQL code I used is: declare image_id integer; begin insert into gallery (title,content_type,image) values (:title,:content_type,:body) returning id into image_id; commit; :status := 201; :location := image_id; end; And the parameters are: Note that I also needed to whitelist my VB instance on the ORDS side - so I'll be allowed to access that end point. Now that you have the backend services, it's a simple matter of building the VB based UI. The Visual Builder Part In VB you'll define service connections to work with the ORDS endpoints. Note that you'll need to switch the MediaType of the endpoints to accept image/png instead of the regular application/json. Then we use the take picture action to allow us to pick an image either from the hard-drive when running as a web app, or from the device when running as a mobile app. We then pass the file to the REST endpoint which creates a record in the DB storing the image. The REST service returns a URL address for the image location as the text value we store in the VB business object. The value is returned as part of the header - so we use this expression to get it: $chain.results.callRestEndpoint1.headers.get('location') Check out the video below to see the development process in VB: 0:00-1:30 Review the Database and ORDS structure 1:30-3:30 Define REST service connections in Visual Builder 3:30-5:30 Create Business Object and basic UI for mobile app 5:30-7:40 Creating an action chain to take a picture and load to DB 7:30-8:45 Test run in emulator 8:45-end PWA enable the app and test on device

The business objects in Oracle Visual Builder let you store textual data, but what if you need to store some binary data such as images? You'll need to find a separate location to store those. Oracle...

Visual Builder

Adding Offline Capabilities to an Oracle Visual Builder App

Visual Builder allows you to create applications that can continue to function even when your device is disconnected from the network. To do that Visual Builder leverages the Oracle JET offline persistence toolkit. This toolkit enables your application to cache data on the client and serves it back from the cache when you are issuing the same REST call but your device doesn't have access to the server. It also allows you to "execute" operations such as adding records while offline - storing those requests on the client again - and then automate replaying them back when you are connected. In the demo video below I show how to add some of these capabilities to your application. It's important to note that adding offline capabilities requires knowledge in JavaScript coding and an understanding of the offline toolkit. This is not a simple drag and drop operation - so approach carefully. Leverage the extensive logging that the offline persistence can do and monitor it's messages in the browser's dev tools console to see what is happening when. In the video you'll also see how to clear the cache on the client which is sometimes needed to see the real functionality. The Visual Builder developer guide has a section that explains the concepts of offline persistence, and provides a basic starting point code sample. In the video below, I start from that code sample, then I modify it to change the cache strategy and implement support for POST operations and synch data changes on demand. Here is a breakdown of things you'll see in the video (allowing you to skip to the section you need): 0:00-1:30 - Exposing Oracle Database Table (Oracle ATP) with REST Services using ORDS and SQLDeveloper 1:30-4:45 - Building a simple Read/Create Visual Builder App Accessing above ORDS services 4:45-8:00 - Adding caching based on the book's sample 8:00-10:30 - Switching to use cache data only when offline 10:30- End - Adding handling of POST(Create) operations As you can see the interaction with the offline persistence layer is managed in the application's JavaScript area. Below is the code used in my app, with the parts that I change from the doc sample explained below. define([ 'vbsw/helpers/serviceWorkerHelpers', /** * Add the following entries to include the toolkit classes that you'll use. More information about these * classes can be found in the toolkit's API doc. See the link to the API doc in the paragraph before * this sample file. * */ 'persist/persistenceManager', 'persist/defaultResponseProxy', 'persist/persistenceUtils', 'persist/fetchStrategies', /** * Add the following entry to enable console logging while you develop your app with the toolkit. */ 'persist/impl/logger' ], function(ServiceWorkerHelpers, PersistenceManager, DefaultResponseProxy, PersistenceUtils, FetchStrategies, Logger) { 'use strict'; function AppModule() {} function OfflineHandler() { /** * Enable console logging of the toolkit for development testing */ Logger.option('level', Logger.LEVEL_LOG); Logger.option('writer', console); var options = { /** * The following code snippets implements the toolkit's CacheFirstStrategy. This strategy * checks the application's cache for the requested data before it makes a request to cache * data. The code snippet also disables the background fetch of data. */ requestHandlerOverride: { handlePost: handlePost }, fetchStrategy: FetchStrategies.getCacheIfOfflineStrategy({ backgroundFetch: 'disabled' }) }; this._responseProxy = DefaultResponseProxy.getResponseProxy(options); } OfflineHandler.prototype.handleRequest = function(request, scope) { /** * (Optional). Write output from the OfflineHandler to your browser's console. Useful to help * you understand the code that follows. */ console.log('OfflineHandler.handleRequest() url = ' + request.url + ' cache = ' + request.cache + ' mode = ' + request.mode); /** * Cache requests where the URL matches the scope for which you want data cached. */ if (request.url.match( 'https://yourserver.oraclecloudapps.com/ords/shay' )) { return this._responseProxy.processRequest(request); } return PersistenceManager.browserFetch(request); }; OfflineHandler.prototype.beforeSyncRequestListener = function(event) { return Promise.resolve(); }; OfflineHandler.prototype.afterSyncRequestListener = function(event) { return Promise.resolve(); }; AppModule.prototype.createOfflineHandler = function() { /** Create the OfflineHandler that makes the toolkit cache data URLs */ return Promise.resolve(new OfflineHandler()); }; AppModule.prototype.isOnline = function() { return ServiceWorkerHelpers.isOnline(); }; AppModule.prototype.forceOffline = function(flag) { return ServiceWorkerHelpers.forceOffline(flag).then(function() { /** if online, perform a data sync */ if (!flag) { return ServiceWorkerHelpers.syncOfflineData(); } return Promise.resolve(); }).catch(function(error) { console.error(error); }); }; AppModule.prototype.dataSynch = function() { return ServiceWorkerHelpers.syncOfflineData(); }; // custom implementation to handle the POST request var handlePost = function(request) { if (ServiceWorkerHelpers.isOnline()) {} return PersistenceUtils.requestToJSON(request).then(function( requestData) { console.log('Inside PersistenceUtils'); console.log(requestData); requestData.status = 202; requestData.statusText = 'OK'; requestData.headers['content-type'] = 'application/json'; requestData.headers['x-oracle-jscpt-cache-expiration-date'] = ''; // if the request contains an ETag then we have to generate a new one var ifMatch = requestData.headers['if-match']; var ifNoneMatch = requestData.headers['if-none-match']; if (ifMatch || ifNoneMatch) { var randomInt = Math.floor(Math.random() * 1000000); requestData.headers['etag'] = (Date.now() + randomInt).toString(); requestData.headers['x-oracle-jscpt-etag-generated'] = requestData.headers['etag']; delete requestData.headers['if-match']; delete requestData.headers['if-none-match']; } return PersistenceUtils.responseFromJSON(requestData); }); }; return AppModule; });   To highlight the major changes in the code done in the video: Line 40 - changed the fetch strategy to fetch data from the cache only when offline - doc  Line 37-39 - define a new method that will be used to handle POST operations Lines 98-125 - the custom method that handles POST operations (line 11,19 contain the extra needed library reference) Lines 93-95 - AppModule function to force synchronization of offline changes Keep in mind that offline caching should be used with an understanding of the risks involved. For example, your cached data can get stale and not match the real situation in the server.So while caching can be a nice performance boost, you should probably use it for data that is not frequently changing. Also since data is cached on the client, other people could access it if they get access to the client. Don't cache sensitive data that you don't want falling into the wrong hands if you loose your device.  

Visual Builder allows you to create applications that can continue to function even when your device is disconnected from the network. To do that Visual Builder leverages the Oracle JET offline persist...

Master Detail on a Single Page with a Single REST Call

This blog entry started as a reply to a question on the Visual Builder technical forum about fetching master and detail tables. While working out a solution, I found a couple of techniques and tips that would be useful to document for future users. Let's assume you have a master/detail relationship between departments and the employees working in them. You want to be able to show on a single page a list of all the departments and when you select one of them show the full information about that department and the employees working in it, you also want to minimize the number of REST call you perform to fetch that data. In the video below I show the solution while highlighting some tips and techniques including: Enabling accessors (0:35) - this allows us to fetch related objects in a single query. You do this by configuring the relationship between your business objects and checking the box for the relationship you need. Defining a type that will control the data that will be retrieved (2:35) - We define a type that contains data from both the master and detail records. When we assign this type as the type returned (response type field) from the call to the REST end point (5:02), we  tells Visual Builder to leverage the accessor we defined. Note that when calling the REST service from other locations you can use the expand URL parameter for the REST call to fetch the details in addition to the master record (read more about the expand option here). Assigning an array into an ADP while clearing the ADP (5:35) - a little feature of our variable assignment dialog that you might have missed (I know I did until David K told me about it) - where you can specify to empty an array before you add new values into it in a declarative way. Here we go:

This blog entry started as a reply to a question on the Visual Builder technical forum about fetching master and detail tables. While working out a solution, I found a couple of techniques and tips...

Visual Builder

Filtering List Results from a REST Service with Visual Builder

I posted several blogs in the past that covered how to us the filterCriterion property of a service data provider (SDP) in order to filter the results you see in a table or a list  including how to use compound conditions for advance filtering. This works great with REST services that are exposed on the business objects you created in Visual Builder, but if you'll try and use this filterCriterion approach with other REST services, you'll notice it doesn't work out of the box. In this blog I'll show another approach to filtering REST services that populate a service data provider. First, a bit of explanation on what's going on behind the scenes when using the filter criteria. If you'll monitor the REST calls used with filter criteria, you'll notice that it generates a URL parameter that will look something like ?q=dname='Marketing' . Basically the filter criteria generates a URL parameter called q and formats your conditions correctly for that parameter.The REST services we expose on business objects know how to parse and use this q parameter (read more about the q parameter and its query capability here). Filtering is done on the server side, and the records that match the condition are returned to the client. (Important to know - REST services exposed from ADF Business Components - such as the REST services exposed by many of our SaaS apps - also support the usage of the q parameter. If you are planning on leveraging these type of services in your app, make sure to add them using the ADF Describe option in the "Service from Specification" wizard - as shown in this blog.) But not every REST service out there knows how to parse the q parameter. In fact, most of them won't know what to do with a q parameter passed to them - they'll probably just ignore it. They will be expecting the information about what exactly you want them to return using some other URL parameters. One approach to handle this will be for you to translate the filter criteria structure to the format they are expecting to get. You can do this by defining a service transform on your service as explained here. Such transformation can also let you support sorting and pagination with SDP based tables. In the video below, I'm using an alternative approach to get filtering to work directly passing the expected URL parameters for filtering to the service. Note that using this approach rather than the above mentioned "transformation" approach means that some table functionality such as sorting, and pagination won't be available out of the box. In the video I leverage a REST service from Songsterr which allow you to search their repository of song tabs. This REST service filters the results it returns by using a parameter called "pattern". You can further filter the results by adding ,a= with another value to the URL. For example, this will give you songs that have both Bob and Sheriff https://www.songsterr.com/a/ra/songs.json?pattern=Bob,a=Sheriff As you'll see I use the Service Data Provider (SDP) uriParameters attribute to pass in an object that contains the URL parameters that will be passed to the REST end point. the uriParameres expects an object that has an entry for each of the query parameters you define on the REST end point. In my case there is only one such parameter called pattern so the format of the value I pass is: {"pattern" : $page.variables.Artist+ ",a=" + $page.variables.Filter } When you work with other services the URL parameter will probably be different but the concepts should still apply. So your steps would be: Figure out the URL format for getting filtered data Define the URL parameters for the service end point Construct the value passed to the parameters in your page event (The browser's network tab is your friend when you need to debug what's going on while you go through the above process - see the end of the video)

I posted several blogs in the past that covered how to us the filterCriterion property of a service data provider (SDP) in order to filter the results you see in a table or a list  including how...

Working with ArrayDataProviders in JavaScript Functions in Visual Builder

Storing data in ArrayDataProviders (rather than SDP) is useful whenever you want to further modify the data on the client side - for example if you are looking to create updatable tables in your UI. A common follow up question is "how can I do additional processing/updates on all the records I'm storing in the ADP" - this is what this blog is about. Since the records are now stored on the client side, you can access them through JavaScript. You can, for example, write a page level module function to loop over the set of records and modify them. For example in the video below I'm using this little function to raise the salary of all the employees:   PageModule.prototype.arrayModifier = function(array){     console.log(array.length + " is what we got")       for (var i = 0; i < array.length  ; i++ ) {         array[i].salary = array[i].salary+2;         console.log("salary after " + array[i].salary);     }     return array;   } Into this function you'll pass the array of data from the ArrayDataProvider - you can do this in the parameter mapping of the function pointing to the data object like this: Once your function finished its processing of the data, you'll want to update the ArrayDataProvider back to reflect the changes you did. To do this you can use the action called "Fire Data Provider Event". This function has the option to do mutate events (update, insert, delete). You can read the doc about this and other actions parameters here. For the update you simply need to provide the array of updated data like this: That's it. You can see all the pieces of this process working together in the video below:  

Storing data in ArrayDataProviders (rather than SDP) is useful whenever you want to further modify the data on the client side - for example if you are looking to create updatable tables in your UI....

Visual Builder

Running Visual Builder Apps On Other Servers (and On-Premises)

Ever since we released Oracle Visual Builder a frequent request has been "can I take the app and run it anywhere I want?". With the latest version of Visual Builder the answer is Yes! This means that you can take apps you built in the Oracle Cloud and host it in other web servers. (Development is still cloud based only). Note that if you decide to take the visual builder server out of the picture, you are going to lose some of the functionality that runs on the Visual Builder Cloud Server, specifically: Business Objects - these run on the VB backend - so if you are not going to use our backend - you won't have a place to run them. (You could still run that part on the VB backend, and have your app UI served from another server). Identity Cloud - Visual Builder leverages Oracle's Identity Cloud to manage users and roles as well as authentication and authorization. If you are not using the VB Cloud hosting platform, it is up to you to manage these aspects of your app. Visual Builder proxy - On the Visual Builder server we have a piece of software (called the authentication proxy) that manages connections to REST services. The proxy handles things like passing in credentials and eliminating CORS (you can read more about the roles of the proxy and when to use it in this blog entry). If you don't want to use this piece of software you need to switch the connection of the services you define in VB to "Direct (bypass proxy)" and then the calls are being done directly from the browser to the remote REST service. If you are fine with these limitations, or if you have other solutions for these requirements, you can host your Oracle Visual Builder app on another web server without needing to access the VB server. (Remember that you can still choose to host your VB app somewhere else, but use the VB server for the above functionality - although if this is what you are doing, you are probably better off just hosting directly on VB). Here is a quick demo showing how to take an app and move it to run completely on your own machine (including accessing REST services and a database that is running on that machine). As you can see there are a couple of adjustments we did to our app to remove the dependency on the services that the Visual Builder server provides. We switch to use the direct access to the REST services, and we allowed anonymous access to our app (since we don't have IDCS to manage authentication). Then we used the grunt vb_build step (more on this in the blog entry about app optimization and CI/CD) to create the zip file that contains the app ready to be deployed - leveraging the archive artifact step in Developer cloud to save those files. We took the optimized version of the app and hosted it as a regular collection of HTML/JavaScript resources on a web server (Apache in the video). Then we showed how you can switch the set of services that the app is accessing by doing a "global search and replace" to replace the address of the server hosting the REST services that provides our app the data we use - this will allow you to also move your backend to be on-premise. (In the video we are using WebLogic to host ADF based REST services, accessing an Oracle XE database running in a docker image). With these simple steps you can easily host your VB applications anywhere.

Ever since we released Oracle Visual Builder a frequent request has been "can I take the app and run it anywhere I want?". With the latest version of Visual Builder the answer is Yes! This means that...

DevCS - DevOps + Agile

Automating DevSecOps for Java Apps with Oracle Developer Cloud

Looking to improve your application's security? Automating vulnerability reporting helps you prevent attacks that leverage known security problems in code that you use. In this blog we'll show you how to achieve this with Oracle's Developer Cloud. Most developers rely on third party libraries when developing applications. This helps them reduce the overall development timelines by providing working code for specific needs. But are you sure that the libraries you are using are secure? Are you keeping up to date with the latest reports about security vulnerabilities that were found in those libraries? What about apps that you developed a while back and are still running but might be using older versions of libraries that don't contain the latest security fixes? DevSecOps aims to integrate security aspects into the DevOps cycle, ideally automating security checks as part of the dev to release lifecycle. The latest release of Oracle Developer Cloud Service - Oracle's cloud based DevOps and Agile team platform - includes a new capability to integrate security check into your DevOps pipelines. Relying on the public National Vulnerability Database, the new dependency vulnerability analyzer scans the libraries used in your application against the database of known issues, and flags any security risks your app might have based on this data. The current version of DevCS support this for any Maven based Java project. Leveraging the pom files as a source of truth for the list of libraries used in your code. When running the check, you can specify your level of tolerance to issues - for example defining that you are ok with low risk issues, but not with medium to high risk vulnerabilities. When a check finds issues you can fail the build pipeline, send notifications, and in addition add an issue into the issue tracking system provided for free with Developer Cloud. Check out this demo video to see the process in action. Having these type of vulnerability scans applied to your platform can save you from situation where hackers leverage publicly known issues and out of date libraries usage to break into your systems. These checks can be part of your regular build cycle, and can also be scheduled to run on a regular basis on systems that have already been deployed - to verify that we keep them up to date with the latest security checks.  

Looking to improve your application's security? Automating vulnerability reporting helps you prevent attacks that leverage known security problems in code that you use. In this blog we'll show you how...

Visual Builder

Working with Multiple Row Selection Tables in Visual Builder

The Oracle JET table component allows you to select multiple records in one go using the regular ctrl & shift key combinations. But once the user selected rows, how do you know which rows were selected? How do you track this? The video below shows you the basics. As the JET tag documentation will show you, the table has a selection property which is an array of the selected records. This selections array is passed to the selection event on the table that you can hook to in with an action chain in VBCS. The array has a row for each range of records you selected listing their keys and indexes in the table. It's up to you to parse this information if you want to operate on these rows. The code in the JavaScript method is:     PageModule.prototype.listSelection = function(selection) {     console.log("we got " + selection.length + " selections")     for (var i = 0; i < selection.length; i++) {       console.log("start key " + selection[i].startKey.row +         ", start index " + +selection[i].startIndex.row);       console.log("end key " + selection[i].endKey.row + ", end index " +         +selection[i].endIndex.row);     }   } If you now want to access the values of the selected rows you can use the getDataForVisibleRow function of the oj-table that returns a data object with the content of the row. The code below shows you how to add that section to your code, printing out the name of each employee that was selected.   PageModule.prototype.listSelection = function(selection) {     console.log("we got " + selection.length + "selections ")     for (var i = 0; i < selection.length; i++) {       console.log("start key " + selection[i].startKey.row +         ", start index " + +selection[i].startIndex.row);       console.log("end key " + selection[i].endKey.row + ", end index " +         +selection[i].endIndex.row);         //The following loop prints the names       for (var j = selection[i].startIndex.row; j <= selection[i].endIndex         .row; j++) {         var rowdata = document.getElementById("mytable").getDataForVisibleRow(j);         console.log(rowdata.data.name)       }     }   }  

The Oracle JET table component allows you to select multiple records in one go using the regular ctrl & shift key combinations. But once the user selected rows, how do you know which rows were...

ADF & JDeveloper

Oracle ADF or Oracle JET - An Update

Back in 2015 I wrote a blog entry to help our customers get a clear picture about the Oracle ADF vs Oracle JET "debate", over the years I kept pointing people to this writeup as a simple summary of what we are aiming to do and as a guideline for picking the technology you should use. However, the technology world is an ever changing place, and I believe that it is time to do a bit of an update of that entry to reflect the current status. While the basic distinctions between the two technologies have not changed, specifically:  ADF for Java developer, JET for JavaScript developer ADF is server side framework, JET is client side focused ADF is both front and back-end framework, JET is UI layer only Some of the surrounding eco-system has changed and evolved. Client-Centric Architecture Momentum Over the past several years we saw an increase in the adoption of UI development that is focused around JavaScript-based client layer. This is something you can see for example in the results from the Stackoverflow yearly survey - back in 2016 JavaScript was used by 54% of developers and in 2018 the number stood at ~70%.  Today, most of the new projects that we see being developed will pick up a JavaScript based UI layer as their solution for front end development. The adoption of this JS/HTML UI is not limited to web apps, many mobile apps also leverage the architecture to create mobile optimized UIs deployed on devices using either a hybrid or a Progressive Web Application (PWA) architecture. Development organizations like the fact that a client-centric JavaScript/HTML architecture allows them to use a single set of skills to support multi-channel apps.  Back in 2015 many of the Oracle PaaS services were already leveraging this architecture along with Oracle JET - Oracle's Toolkit for building JavaScript based UIs. Today this trend started to extend to Oracle SaaS - Oracle's cloud apps offering. Several of the modules in Oracle SaaS have introduced UIs built with Oracle JET - leveraging its capabilities to create engaging and dynamic user interfaces. In the coming years you are going to see more and more modules offering new UIs based on Orale JET. This is a transition for Oracle's SaaS org from server-side generation UI to a client centric architecture.  In parallel Oracle JET also added a bunch of capabilities targeting mobile specific scenarios including the ability to render the components to look like native controls on both iOS and Android, the ability to package apps as hybrid mobile apps, and support for offline usage patterns. All those capabilities are further pushing the usage of Oracle JET at Oracle as the UI layer for the various mobile apps we deliver. One thing to keep in mind, since JET only provides the UI layer, there is still a need to build the backend of the application. This backend will handle data access and business logic - and it will then expose REST services that will be consumed by the JET UI. The existing backend layer for the Oracle SaaS apps was developed with Oracle ADF Business Components, and now they are able to leverage the investment they already did in that layer and expose these components through REST services. This way they get to keep the complex logic already implemented in that layer and just create a new modernized UI layer.  If you track down the "what's new" document for the versions of ADF that we released since 2015 you'll see that enhancing the out-of-the-box functionality we provide around REST enablement has been a focus area for us. As a result of this effort, when you are exposing ADF BC as REST you get capabilities such as pagination, query by example, dynamic sorting, relationship management, and more built-into the services you expose. This approach is something that ADF customers should consider if they decide to adopt the trend of new UIs being built with JavaScript based toolkit. Regardless of the UI framework that you'll choose, remember that the investment you made in the ADF backend can still be leveraged easily. Better Tooling One of the other difference I quoted between ADF and JET was the development experience. ADF was focused on providing a more visual and declarative approach to Java developers, while JET had you use code editors to manually write your code. This is another thing that changed since 2015. Oracle now offers a development platform for JET applications that is focused on a more visual way of building the app - this is Oracle Visual Builder Cloud Service. If you haven't seen a demo before - take 10 minutes and watch this video as an example. As you can see, Visual Builder provides a WYSIWYG UI design, action flow diagrams for business logic, page flow diagrams, property inspectors and more. All this while still allowing you to directly access the code when needed for direct manipulation.  Image 1 - Visual Oracle JET Development in Oracle Visual Builder (Components, Structure Pane, Visual Layout Editor, Property Inspector) With this environment you can become much more productive building UIs that leverage the power of Oracle JET. Note that Visual Builder is not just about simplifying the layout of your pages, it is also simplifying how you work with variables, binding and business logic - reducing the amount of coding you need to do. Visual Builder also simplifies the learning curve for people who are new to JavaScript development - making the transition to this new technology smoother. Our SaaS teams have also decided to leverage VB to help them deliver new generations of UI faster. For customers who already have ADF based applications, another appealing aspect of VB is its ability to understand the structure of ADF BC based REST services and the functionality they provide. Check out this demo to see how you can quickly use Visual Builder to build a JET based mobile app on top of ADF BC REST backend in a declarative way. A little side note - beyond the ability of VB to create UIs, you can also use it to quickly create tables in a database and business objects (including business logic) on top of them that are exposed as REST services. The technology that drives that layer of VB is based on the same ADF Business Components - another thing that will be of course familiar to ADF developers if they decide to pick up Visual Builder. Summary So what should you do if you are an Oracle ADF customer today? As always the answer is "it depends" :-) The first thing to think about is - "Does Oracle ADF answers my needs and does the application I built with it work as expected?" - assuming that the answer to both is positive, then you can continue as you were. If, however, there are technical or architectural needs where your existing ADF app doesn't provide the answers you need (for example on the UI side or the mobile device support needs), looking at Oracle JET and Visual Builder is definitely something you should do. Also if you are about to embark on a new project, you might want to consider if a new client-centric architecture for the UI layer is something you can benefit from, and if you think it is - again try out JET and VB and see how you like them. In both cases remember that you can leverage your existing investments in the business objects layer and expose it as REST services to be consumed by new UIs. In fact you can have the two apps running in parallel. Image 2- JET based architecture (MVVM) compared to ADF Architecture (MVC) - sharing business services One more note, many developers like to keep their skills fresh and learn new things, if you are an Oracle ADF developer, I think that picking up Visual Builder and playing with it can get you on the road to learning new JavaScript skills quite quickly while still keeping you in a fun friendly visual cloud IDE - give it a try.  

Back in 2015 I wrote a blog entry to help our customers get a clear picture about the Oracle ADF vs Oracle JET "debate", over the years I kept pointing people to this writeup as a simple summary...

Visual Builder

Displaying an "Unsaved Changes" Warning in Visual Builder

End-users are strange. Sometime they need the system we are developing to remind them when they do silly things. For example some users want us to remind them if they are trying to navigate away from a page where they did changes to data, but didn't click "save". Below I'll show you an approach for implementing such a behavior in Oracle Visual Builder Cloud Service. What we are going to do is cancel navigation actions until users acknowledge that they are ok to leave the page. I will leave it up to you to decide when this should go into effect. While some people might claim that this should be the default behavior across the app, this is debatable. For example, if I go into a "create record" type of page, and then without doing any changes decide to leave that page - should I be prompted for a "you have unsaved changes" message? Isn't me leaving the page the equivalent of saying - I don't need to do changes? As you can see the decision is not clear cut - so in the demo below I let you control when we start this "changes were made" status simply by pressing a button. In real applications these can be done for example when a value in a field changes. At the end of the day, all you need to do is set a boolean variable that tracks whether we are now in "changes were made" status. In the demo I added a simple dialog to the shell page (the page that acts as the containing template to the rest of the pages) - this dialog has a "you have unsaved changes, are you sure you want to leave?" type of warning and two buttons "Yes" and "No". (Quick tip/reminder - you can see how to add a dialog to a page here, and don't forget to include the popup import in the page's json file). I add an action chain to the shell page that will be invoked on the vbBeforeExit event - in there I check the value of the "changes made" variable and if changes were made - I show the dialog. Then I use a return action to return an object type variable that has a boolean variable called "cancelled" set to true.  Returning such an object tells the flow to stop the navigation. Now all I needed to add were action chains to the buttons for "yes" and "no" to close the dialog, and for the "yes" scenario to also set the changes made boolean variable to no - so the next time we click to navigate away we don't show the dialog. Check out the video to see the runtime behavior and the various parts that make up the solution.

End-users are strange. Sometime they need the system we are developing to remind them when they do silly things. For example some users want us to remind them if they are trying to navigate away from...

DevCS - DevOps + Agile

Connecting to Oracle Autonomous Transaction Processing (ATP) from Developer Cloud Service

The latest and greatest flavor of the Oracle Database in the cloud is Oracle Autonomous Transaction Processing (ATP). One of the Autonomous DB flavors that, it is optimized for OLTP (On-Line Transaction Processing) Applications - the type that you and I usually work on. One new feature in the world of ATP is the way that you connect to the DB, connection is done leveraging wallets to make sure that your data is secured even though you are connecting over public internet. Here are instructions on how to get such a wallet file for your instance of ATP. We introduced an enhancement to the latest version of Developer Cloud Service that allows you to connect to ATP from your CI/CD automation jobs. This can help you automate CI/CD for SQL scripts that you need to run against that DB. As I mentioned in past blogs, DevCS has built in support for the SQLcl utility, allowing you to run SQL scripts against an Oracle database as part of your CI/CD chain. If you want to connect the SQLcl utility in DevCS to ATP, it will need to have access to your wallet.zip file. You can achieve this by uploading the file into your git repository. Then in your SQLcl configuration you'll specify the user/pass like before, and then point the field titled Credentials File to the wallet.zip file location. (in the screenshot below, the zip file is at the top of the git repo connected to the build - so there is no need to add a path). In the next field, titled connection string, you specify the name used in the wallet's tnsnames.ora file to connect to the DB. Now you can continue as usual and provide inline SQL or point to SQL files from your git repository.  

The latest and greatest flavor of the Oracle Database in the cloud is Oracle Autonomous Transaction Processing (ATP). One of the Autonomous DB flavors that, it is optimized for OLTP...

Visual Builder

Adding Calculated Fields to Your Visual Builder UI

This is a quick blog to show two techniques for adding calculated fields to an Oracle Visual Builder application. Both techniques do the calculation on the client side (in the browser). Keep in mind that you might want to consider doing the calculation on the back-end of your application and get the calculated value delivered directly to your client - in some cases this results in better performance. But sometimes you don't have access to modify the backend, or you can't do calculations there, so here we go: 1. For simple calculation you can just use the value property of a field to do the calculation for you. For example if you need to know the yearly salary you can take the value in a field and just add *12 to it. You can also use this to calculate values from multiple fields for example [[$current.data.firstName + " " +$current.data.lastName]] - will get you a field with the full name. 2. For more complex calculation you might need to write some logic to arrive at your calculated value, for example if you have multiple if/then conditions. To do that you can create a client side JavaScript function in your page's JS section. Then you refer to the function from your UI component's value attribute using something like {{$functions.myFunc($current.data.salary)}} As you'll see in the demo, if you switch to the code view of your application the code editor in Oracle VB will give you code insight into the functions you have for your page, helping you eliminate coding errors.

This is a quick blog to show two techniques for adding calculated fields to an Oracle Visual Builder application. Both techniques do the calculation on the client side (in the browser). Keep in mind...

Visual Builder

Filtering Data Providers with Compound Conditions in Visual Builder

I posted in the past a basic introduction to filtering lists in Visual Builder - showing how to use the filterCriterion to filter the records shown in a ServiceDataProvider. Since I recorded this video, a few things changed, and I also saw several customers asking how can they use more complex conditions that involve more than one filter. In the video below I show how to define a basic filter with the latest versions (note that in VB 18.4.1 you no longer need to surround value with quotes ""), and then I show how to create a more complex condition that involves two filter criteria and set them to work with either an or or an and operator. When you are using business components in Visual Builder, the filterCriterion is translated into a "q" parameter that is passed to the GET method (more about this q query parameter here). If you find that you are not getting the records you are expecting, check out the browser's Network tab to see what query parameter was passed in your call to the REST service (intro to this debugging technique here). As you'll see the filterCriterion contains an array of "criteria" so you can specify several of them. In the video I'm using an approach that Brian Fry showed me that gives you a more declarative way to populate the array dragging and dropping multiple "criteria type" variables into the same array. Note however that the important thing is what is actually being populated in the json file that defines the action. You should go into this view and verify that you have the right structure there. You can also directly manipulate that source to achieve the filter you need. As you'll see in the video there are some cases where the design time for this filterCriterion adds an entry into the JSON that might not match what you want (we are tracking this issue). So as mentioned - if things don't work as expected direct manipulation of the JSON might be required.  Another issue that has been identified with the above approach is when you leave one of the field empty, the filterCriterion is not correctly created. Andrejus has a solution for this on his blog using a JavaScript method to properly construct the conditions. One more tip is - if you don't get the filtering you need working, check out the browser's network tab to see the format of the q parameter appended to the call to your business objects. Here is a clip from the JSON file of the action:         "assignVariables2": {           "module": "vb/action/builtin/assignVariablesAction",           "parameters": {             "$page.variables.travelRequestsListSDP": {               "source": {                 "filterCriterion": {                   "criteria": [                     "{{ $page.variables.locationCriteria }}",                     "{{ $page.variables.priceCriteria }}"                   ],                   "op": "$and"                 }               },               "reset": "none",               "mapping": {                 "$target.filterCriterion": {                   "source": "$source.filterCriterion",                   "reset": "empty"                 }               }             }           }         }

I posted in the past a basic introduction to filtering lists in Visual Builder - showing how to use the filterCriterion to filter the records shown in a ServiceDataProvider. Since I recorded this...

ADF & JDeveloper

Oracle JET UI on Top of Oracle ADF With Visual Builder

At Oracle OpenWorld this year I did a session about the future of Oracle ADF, and one of the demos I did there was showing the powerful combination of Oracle ADF backend with a new Oracle JET UI layer and how Oracle Visual Builder makes this integration very simple. While we have many happy Oracle ADF customers, we do hear from some of them about new UI requirements that might justify thinking about adopting a new UI architecture for some modules. These type of requirements align with an industry trend towards adopting a more client centric UI architecture that leverages the power of JavaScript on the client. While ADF (which is more of a server centric architecture) does let you leverage JavaScript on the client and provides hook points for that in ADF Faces, some customers prefer a more "puristic" approach for new user interfaces that they are planning to build. Oracle's solution for such a UI architecture is based on Oracle JET - an open source set of libraries we developed and share with the community at http://oraclejet.org. Oracle Visual Builder provides developers with a simpler approach to building Oracle JET based UIs - for both web and on-device mobile applications. Focusing on a visual UI design approach it drastically reduce the amount of manual coding you need to do to create JET based UIs.  UIs that you build in Visual Builder connect at the back to REST services, and this is where you can leverage Oracle ADF. In version 12 of JDeveloper we introduced the ability to publish ADF Business Components as REST services through a simple wizard. Note that out-of-the-box you get a very powerful set of services that support things like query by example, pagination, sorting and more. If you haven't explored this functionality already, check out the videos showing how to do it here, and this video covering cloud hosting these services. Once you have this ADF based REST services layer - you'll be glad to hear that in Visual Builder we have specific support to simplify consuming these REST services. Specifically - we understand the meta-data descriptions that these REST services provide and then are able to create services and endpoints mapping for you. You leverage our "Service from specification" dialog to add your ADF services to your Visual Builder app - and from that point on, it's quite simple to build new JET UIs accessing the data. In the video below I show how simple it is to build a JET-based on-device mobile app that leverage a set of REST services that were created from Oracle JDeveloper 12. Check it out:

At Oracle OpenWorld this year I did a session about the future of Oracle ADF, and one of the demos I did there was showing the powerful combination of Oracle ADF backend with a new Oracle JET UI...

Visual Builder

Adding Off Canvas Layout to a Visual Builder Application

Off Canvas layout is a common UI pattern for modern applications, especially on mobile devices. The concept is aimed at saving space on your page, allowing you to pop out a "drawer" of additional information. This helps reduce clatter on the main page but still provide access to important data when needed without leaving the page context. You can see an example of the runtime behavior at the top of this post.  Oracle JET provides this type of "off-canvas" behavior as a built in component, and they have a demo of it working as part of the cookbook here. In the video below I show you how to add this to a Visual Builder application. As always - you can mostly just copy and paste code from the JET cookbook, but you need to handle some of the importing of resources a little different, and use the Visual Builder approach for adding your JavaScript function. The code used in the video is: Page source:   Menu List chart Gifts JavaScript Function in the page: define(['ojs/ojcore'], function(oj) { 'use strict'; var PageModule = function PageModule() {}; PageModule.prototype.showSide = function() { var offcanvas = { "selector": "#startDrawer", "content": "#mainContent", "edge": "start", "displayMode": "push", "size": "200px" }; oj.OffcanvasUtils.open(offcanvas); } return PageModule; }); and in your page Json file add this import: "oj-offCanvas": { "path": "ojs/ojoffcanvas" }

Off Canvas layout is a common UI pattern for modern applications, especially on mobile devices. The concept is aimed at saving space on your page, allowing you to pop out a "drawer" of additional...

Visual Builder

Working with REST POST and Other Operations in Visual Builder

One of the strong features of Visual Builder Cloud Service is the ability to consume any REST service very easily. I have a video that shows you how to work with REST services in a completely declarative way, but that video doesn't show you what happens behind the scenes when you work with the quick starts. In addition, that video shows using the GET methods and several threads on our community's discussion forum asked for help working with other operations of REST. The demo video aims to give you a better insight into working with REST operations showing how to: Add service endpoints for various REST operations Create a GET form manually for retrieving single records Create a POST form manually Create type for the request and response parameters Create variables based on the types Call the POST operation passing a variable as body Get the returned values from the POST to show in a page or notifications A couple of notes: In the video I use the free REST testing platform at https://jsonplaceholder.typicode.com While I do everything here manually - you should be able to use the quick starts for creating a "create" form and map them to the post operation - as long as you marked the specific entry as a "create" entry like I did in the demo. If the concepts above such as types, variables, action chains are new to you - I would highly recommend watching this video on the VBCS Architecture and Building Blocks, it will help you better understand what VBCS is all about.        

One of the strong features of Visual Builder Cloud Service is the ability to consume any REST service very easily. I have a video that shows you how to work with REST services in a completely...

Visual Builder

Business Logic for Business Object in Visual Builder - Triggers, Object Functions, Groovy and More

The business objects that you create in Visual Builder Cloud Service (VBCS) are quite powerful. Not only can they store data, manage relationships, and give you a rich REST interface for interacting with them, they can also execute dedicated business logic that deals with the data. If you click on the Business Rules section of a business object you'll see that you can create: Triggers - allow you to react to data events such as insert, update, and delete on records. Object and field Validators - allowing you to make sure that data at the field or record level is correct. Object Functions - A way to define "service methods" that encapsulate logic related to a business object. These functions can be invoked from various points in your application, and also from outside your app. To code logic in any of these location you will leverage the Groovy language. I wanted to show the power of some of the functionality you can achieve with these hook points for logic. The demo scenario below is based on a requirement we got from a customer to be able to send an email with the details of all the children records that belong to a specific master record. Imagine a scenario where we have travel requests associated with specific airlines. When we go to delete an airline we want to send an email that will notify someoe about the travel requests that are going to be impacted by this change. To achieve this I used an accessor - an object that helps you traverse relationships between the two objects - to loop over the records and collect them. In the video below you'll see a couple of important points: Business object relationship and how to locate the name of an accessor Using a Trigger Event to send an email Passing an object function as a parameter to an email template Coding groovy in a business object For those interested the specific Groovy code I used is: def children = TravelRequests; // Accessor name to child collection def ret_val = "List of travel requests "; if (!children.hasNext()) { return "no impact"; } while (children.hasNext()) { def emprec = children.next(); def name = emprec.name; ret_val=ret_val+" " +name; } return ret_val;   By the way - if, like me, you come from a background of using Oracle ADF Business Components you might find many of the things we did here quite familiar. That's because we are leveraging Oracle ADF Business Components in this layer of Visual Builder Cloud Service. So looking up old Groovy tutorial and blogs about ADF BC might prove to be useful here too :-)    

The business objects that you create in Visual Builder Cloud Service (VBCS) are quite powerful. Not only can they store data, manage relationships, and give you a rich REST interface for interacting...

DevCS - DevOps + Agile

Automating CI/CD for Docker with Oracle Cloud Infrastructure Registry and Developer Cloud Service

In recent releases Developer Cloud Service (DevCS) has expanded to allow you to manage the full life cycle of Infrastructure in addition to software. One area where we made things simpler is in the management of CI/CD for Docker containers. In this blog entry I'll take you through the basics of setting up a CI/CD chain that publishes Docker containers into the Oracle Cloud Infrastructure Registry (OCIR) - Oracle's cloud hosted docker registry. If you need a little tutorial on getting started with OCIR and docker using command lines - you can use this one. Here is a demo video showing you how to leverage DevCS to automate the publishing process of Docker images and hook it into the Git repository in DevCS: A few notes to help you replicate the steps I take in the video: You will need to configure a DevCS build server that will have the docker software on it to run your builds. You do this from the "organization" menu under your user name (or get your org admin to do this for you). If you need tips, Abhinav shows you how to do it in this blog entry. In order to work with OCIR from DevCS you'll need to have an Oracle Compute user created and have an auth token generated for it - make sure you have this token available for you as you'll need it when working from DevCS. (Note that this is separate from the password the user uses to login into the Oracle compute dashboard). Now that you have a user, it's time to start your DevCS work. The first thing you might want to do is upload the code for a docker image into your DevCS git repository. In the video below you'll see that I'm using a very simple application and that my docker file is part of the 3 files I upload into the git repository in DevCS. (need some sample code pick up this docker getting started tutorial). Once your code is in DevCS - the next step is to create a build jobs that pushes your code into the OCI Registry. Our job has three steps that leverage the following docker commands: Login - you'll need to use your tenantName/user as the username and the auth token as the password. Your registry URL will depend on the center you are in iad - Ashburn, phx -Phoenix etc. In my case it was iad.ocir.io. Build - you'll want to specify a complete image name again using your tenant/user/imageName. Also make sure to indicate where your docker file is (or provide a docker file in that step). Push - here everything should already be filled out for you and ready to go. Here is how the completed job looks like: Now run your build - and it will build your image and if it succeed it will push it to the registry. Monitor the build's log in case you run into errors. You can hook up the docker registry section of DevCS to point to the OCIR registry - and then you'll be able to see all the images you pushed there. Again provide your tenant/user and auth token as the login info to the repository. Have fun automating your docker publishing on the Oracle Cloud!  

In recent releases Developer Cloud Service (DevCS) has expanded to allow you to manage the full life cycle of Infrastructure in addition to software. One area where we made things simpler is in the...

Visual Builder

Integrating Processes into Visual Builder Cloud Applications

If you got Visual Builder Cloud Service as part of the Oracle Integration Cloud, then you have access to a powerful process creation and management service. Process Cloud helps you to create processes that can involve multiple steps ,multiple users and roles, and run over long periods. VBCS has specific functionality built-in to allow you to integrate these type of processes into your applications. Once you configure your process cloud service connection, you'll be able to add processes that you created in process cloud to your application. Then you can invoke and interact with them from both your user interface or the logic of your business objects. In the video below you get a quick introduction to several techniques used to interact with processes from VBCS. In the video you'll see: How to add a process to your app How to invoke it from action chains How to add processes and tasks to your UI How to leverage the process integration code templates created by VBCS How to invoke processes from business objects triggers  For more on working with processes and VBCS see the Working with Business Processes documentation chapter. We also added a set of blog entries that walk you through integrating PCS with VBCS in our Visual Builder Learning Path series of blogs. For a more complete introduction to process cloud service see the process cloud getting started page .  

If you got Visual Builder Cloud Service as part of the Oracle Integration Cloud, then you have access to a powerful process creation and management service. Process Cloud helps you to create processes...

DevCS - DevOps + Agile

Managing Visual Builder Code with Developer Cloud Service

Developer Cloud Service (DevCS for short) is a foundation service in the Oracle Cloud that provides you with a full cloud platform to manage agile development processes and automate DevOps cycles. It is available for every Oracle Cloud customer. One key capability (that is actually offered for free as part of your Oracle cloud subscription) is Git based repositories that you can create to manage the code of your application. In this blog we are going to show you how to leverage Visual Builder's built in integration with DevCS to manage your code lifecycle in these Git repositories. A full introduction to Git and the way you work with it - specifically the gitflow approach to code management is outside the scope of this blog. But since Git is the most popular version management solution out there - you can find many internet tutorials that will teach you how to implement these methodologies.  With the git integration in VBCS developing application in teams with multiple developers and multiple tasks is much more organized. In addition you have a full view of the code changes in your application and the ability to easily manage versions. In the video below we teach you some of the basic steps including: Creating a DevCS project with a default Git repository Connecting VBCS to DevCS and to a specific Git branch Pushing code into the repository Creating branches Pulling and importing code from repostiories Viewing code changes in DevCS The main concept to understand is that with this development approach, the app code source of truth becomes the git repository in DevCS. Developers then pull/import the code from that place to local copies in their DevCS development environment, where they can continue to develop it pushing changes back to the central repository. There is much more that you can do with DevCS and VBCS including managing and tracking issues, agile development processes and even automating the publishing of your applications. We'll cover these in upcoming blog entries. For more tips on using Developer Cloud Service see the DevCS documentation including the tutorials. 

Developer Cloud Service (DevCS for short) is a foundation service in the Oracle Cloud that provides you with a full cloud platform to manage agile development processes and automate DevOps cycles. It...

Visual Builder

Tips and Tricks for List of Values in Visual Builder Cloud Service

While working on some customers' applications, I ran into a few performance and functionality tips related to list of values in Visual Builder Cloud Service (VBCS). While it is very tempting to use the built in quick start that binds a list to results from a service, in some cases you might want to take a different approach. One reason is performance - some lists don't change very often - and it makes more sense to fetch them only once instead of at every entry into a page. VBCS offers additional scopes for variables - and in the demo below I show how to use an application scope to only fetch a list of countries once (starting at 1:15). I also show how to define an array that will store the values of the list in a way that will allow you to access them from other locations in your app, and not just the specific UI component. The other scenario that the demo shows relates to situations where you need to get additional information on the record you selected in the list. For example, your list might have the code and label but might contain additional meaningful fields. What if you need access to those values for the selected record? In the demo below (6:40), I use a little JavaSciprt utility method that I add to the page to get the full details of the selected record from the list. The code used is (replace the two bold names with the id field and the value you want to return): PageModule.prototype.FindThreeLetter = function(list,value) {  return  list.find(record => record.alpha2_code === value).alpha3_code; } In the past, any array used for an LOV had to have "label" and "code" fields, but Oracle JET now allows you to set other fields to act in those roles this is shown at 5:54 using the options-keys property of the list component - a combobox in my case. Check it out:

While working on some customers' applications, I ran into a few performance and functionality tips related to list of values in Visual Builder Cloud Service (VBCS). While it is very tempting to use...

Visual Builder

Filtering a Table, List or Other Collections in Oracle Visual Builder Cloud Service

A common use case when working with data is to try and filter it. For example if you have a set of records shown in a table in the UI the user might want to filter those to show specific rows. In the video below I show you the basic way to achieve this using the filterCriterion of ServiceDataProvider variables - the type of variable that populates tables and lists. Basically each SDP has an attribute called filterCriterion that accepts a structure that can contain arrays of conditions. You can then map a criteria that leverage for example a page level variable connected to a field. In the criteria you'll specify an attribute - this will be the column id (not title) of your business object a value - this is the value you are filtering based on - usually a pointer to a variable in your page An operator (op) - the filterCriterion is using operators like $eq or $ne - these are based on the Oracle JET AttributeFilterOperator - a full list of the operators is here. In the video I end up with a filterCriterion that is: { "criteria": [ { "value": "{{ $page.variables.filterVar }}", "op": "{{ \"$eq\"\n }}", "attribute": "{{ \"traveler\"\n }}" } ], "op": "{{ \"$or\"\n }}" } Since you can have multiple criteria you can also specify an operator on them - either an or ($or) or an and ($and) - these are CompoudOperators from Oracle JET. By the way, this will work automatically for your Business Objects, however if you want to apply this to data from a random REST service - then that service will need to have filtering transformation defined for it.  

A common use case when working with data is to try and filter it. For example if you have a set of records shown in a table in the UI the user might want to filter those to show specific rows. In the...

Visual Builder

Reflecting Changes in Business Objects in UI Tables with Visual Builder

While the quick start wizards in Visual Builder Cloud Service (VBCS) make it very easy to create tables and other UI components and bind them to business objects, it is good to understand what is going on behind the scenes, and what the wizards actually do. Knowing this will help you achieve things that we still don't have wizards for. For example - let's suppose you created a business object and then created a UI table that shows the fields from that business object in your page. You probably used the "Add Data" quick start wizard to do that. But then you remembered that you need one more column added to your business object, however after you added that one to the BO, you'll notice it is not automatically shown in the UI. That makes sense since we don't want to automatically show all the fields in a BO in the UI. But how do you add this new column to the UI? The table's Add Data wizard will be disabled at this point - so is your only option to drop and recreate the UI table? Of course not!   If you'll look into the table properties you'll see it is based on a page level ServiceDataProvider ( SDP for short) variable. This is a special type of object that the wizards create to represent collections. If you'll look at the variable, you'll see that it is returning data using a specific type. Note that the type is defined at the flow level - if you'll look at the type definition you'll see where the fields that make up the object are defined. It is very easy to add a new field here - and modify the type to include the new column you added to the BO. Just make sure you are using the column's id - and not it's title - when you define the new field in the items array. Now back in the UI you can easily modify the code of the table to add one more column that will be hooked up to this new field in the SDP that is based on the type. Sounds complex? It really isn't - here is a 3 minute video showing the whole thing end to end: As you see - a little understanding of the way VBCS works, makes it easy to go beyond the wizards and achieve anything.

While the quick start wizards in Visual Builder Cloud Service (VBCS) make it very easy to create tables and other UI components and bind them to business objects, it is good to understand what...

Visual Builder

Leveraging "On Field Value Changes" Event in Visual Builder Cloud Service - Redone

With the new Oracle Visual Builder Cloud Service (VBCS) released this month, some of my past how-to's that shows tricks in VBCS are no longer valid/needed. The direct access we provide to both REST services and the UI components in your application make things that in the past required code or hacking much simpler. Here is one example - reacting to value change events on fields and modifying other UI components based on them. Input component have a "value" event that you can hook into and provide an action chain that will be executed when the value change. In the video below you see for example how I can use a value selected in a drop down list to control whether other components on the page are shown or hidden. [update Sep-18 - there is a better way to show/hide a component - it is using the oj-bind-if component. You can right-click any component in your UI and choose to surround it with a bind-if option. Once you do this you can assign that tag to be based on a boolean variable that you set to true/false in an event like the video below. More on this here] To do this, you define a page variable that you can change in the "value" event. You can then rely on that page variable to control another component behavior. As you can see - no coding needed - just drag and drop your way to create the functionality.    

With the new Oracle Visual Builder Cloud Service (VBCS) released this month, some of my past how-to's that shows tricks in VBCS are no longer valid/needed. The direct access we provide to both REST...

Visual Builder

Using an "On Field Value Changes" Event in Oracle Visual Builder Cloud Service

[Update May 2018 - With the new VBCS there is a better approach for this - see this blog] This entry is based on previous entries from John and Shray that deal with the same topic and provide the same type of solution. John's entry was created before VBCS provided the UI id for components, and Shray's entry is dealing with a more complex scenario that also involve fetching new data. So I figured I'll write my version here - mostly for my own future reference if I'll need to do this again. The Goal is to show how you can modify the UI shown in a VBCS page in response to data changes in fields. For example how to hide or show a field based on the value of another field. To do this, you need to hook into the HTML lifecycle of your VBCS page and subscribe to events in the UI. Then you code the changes you want to happen. Your gateway into manipulating/extending the HTML lifecycle in VBCS is the custom component available in the VBCS component palette. It provides a way to add your own HTML+JavaScript into an existing page. The video below shows you the process (along with a couple of small mistakes along the route): The basic steps to follow: Find out the IDs of the business object field whose value changes you want to listen to. You'll also need to know the IDs of the UI component you want to manipulate - this is shown as the last piece of info in the property inspector when you click on a component.  Once you have those you'll add a custom component into your page, and look up the observable that relates to the business object used in the page. This can be picked up from the "Generated Page Model (read-only)" section of the custom component and it will look something like : EmpEntityDetailArchetype Next you are going to add a listener to your custom component model. Add it after the lines  //the page view model this.pageViewModel = params.root; your code would look similar to this: this._listener = this.pageViewModel.Observables.EmpEntityDetailArchetype.item.ref2Job.currentIDSingle.subscribe(function (value) { if (value === "2") { $("#pair-currency-32717").show(); } else { $("#pair-currency-32717").hide(); } }); CustomComponentViewModel.prototype.dispose = function () { this._listener.dispose(); }; Where you will replace the following: EmpEntityDetailArchetype  should be replaced with the observable for your page model. ref2Job  should be replaced with the id of the column in the business object whose value you are monitoring. pair-currency-32717 should be replaced with the id of the UI component you want to modify. (in our case show/hide the component). You can of course do more than just show/hide a field with this approach.

[Update May 2018 - With the new VBCS there is a better approach for this - see this blog] This entry is based on previous entries from John and Shray that deal with the same topic and provide the...

Visual Builder

Date Calculations and Queries with Oracle Visual Builder Cloud Service

It's very easy to define a field in a custom object in Oracle Visual Builder Cloud Service to store a date, but when it comes to doing calculations and queries based on this date you'll find that you need to resort to a little bit of JavaScript calculations. Here are a couple of useful things to know if you are trying to do that. Calculating Age (or time passed from a date in years) Let's assume you are storing information about employees and one of the pieces of information you have is their date of birth - the Birthday field in the image below. How do you show their actual age in years on a page? You can define a calculated field in your business object - and have VBCS use the "calculate value with formula" as the source for this field. Your formula would be something like: (new Date() -new Date($birthdate) )/ (60*60*24*1000*365) You are calculating the difference between today's date and the birthday field and since the answer is in milliseconds you convert it to years by dividing by the number of milliseconds in a year. Note that as you type in your formula the dialog shows you the results of the formula below the formula field - quite useful to verify that you are doing it right. Now your page can show the age of your employees: Filtering Based on Date What if you wanted to limit the records shown in the table above to only show employees of a specific age? The tricky part is that you'll need to do the calculation against the birthday field and not against the age field. The age field is not actually stored anywhere - rather it is calculated on the fly. Let's take the table shown above and assume we want to limit it to show employees who are younger than 9 years. To do that we'll add a query condition to our table to check that the birthday is larger than the date of (today - 9 years). The calculation of the date 9 years ago will be with a formula like this: new Date($current_date-9*365*24*60*60*1000) Now your table only shows older employees. Want to have a more dynamic way to define the query criteria - you can adopt the approach I showed in the blog about Creating Custom Search/Query Pages with Visual Builder along with the techniques shown here. One last note - since not every year has 365 days - the calculation for milliseconds conversion is not completely accurate - but it is quite close.

It's very easy to define a field in a custom object in Oracle Visual Builder Cloud Service to store a date, but when it comes to doing calculations and queries based on this date you'll find that you...

Visual Builder

Conditional Navigation based on Queries in Oracle Visual Builder Cloud Service

A couple of threads on the Oracle Visual Builder Cloud Service forum asked about writing code in buttons in VBCS that compares values entered in a page to data in business objects and perform conditional navigation based on the values. In a past blog I showed the code needed for querying VBCS objects from the UI, but another sample never hurts, so here is another demo... For this demo I'm going to show how to do it in a login flow - assuming you have a business object that keeps usernames and passwords, and you want to develop a page where a user types a user/pass combination and you need to verify that this is indeed a valid combination that exist in the business object. (In reality, if you want to do user authentication in VBCS - you should use the built in security frameworks and not code it this way. I'm just using this as an example.) Here is a quick video of the working app - with pointers to the components detailed below. The first thing you'll do is create the business object that hosts the user/pass combination - note that in the video since "user" is a reserved word - the ID for the field is actually "user_" - which is what we'll use in our code later on.   Next you'll want to create a new page where people can insert a user/pass combination - to do that create a new page of type "Create" - this page will require you to associate it with a business object, so create a new business object. We won't actually keep data in this new business object. In the video and the code - this business object is called "query". Now design your page and add the user and pass fields - creating parallel fields in the query business object (quser and qpass in the video). You can then remove the "Save" button that won't be use, and instead add a "validate" button. For this new button we'll define a new custom action that will contain custom JavaScript code. Custom code should return either a success state - using resolve(); - or failure - using reject(); Based on the success or failure you can define the next action in the flow - in our case we are showing either a success or error message: Now lets look at the custom JavaScript code: require(['operation/js/api/Conditions', 'operation/js/api/Operator'], function (Conditions, Operator) { var eo = Abcs.Entities().findById('Users'); var passid = eo.getProperty('pass'); var userid = eo.getProperty('user_'); var condition = Conditions.AND( Conditions.SIMPLE(passid, Operator.EQUALS,$QueryEntityDetailArchetypeRecord.getValue('qpass') ), Conditions.SIMPLE(userid, Operator.EQUALS, $QueryEntityDetailArchetypeRecord.getValue('quser')) ); var operation = Abcs.Operations().read( { entity : eo, condition : condition }); operation.perform().then(function (operationResult) { if (operationResult.isSuccess()) { operationResult.getData().forEach(function (oneRecord) { resolve("ok"); }); } reject("none"); } ). catch (function (operationResult) { if (operationResult.isFailure()) { // Insert code you want to perform if fetching of records failed alert('didnt worked'); reject("error"); } }); }); Explaining the code: Lines 2-4 - getting the pointers to the business object and the fields in it using their field id. Lines 5-8 - defining a condition with AND - referencing the values of the fields on the page Lins 9-11 - defining the operation to read data with the condition from the business object Line 12 - executing the read operation Line 14-18 - checking if a record has been returned and if it has then we are ok to return success - there was a user/pass combination matching the condition. Line 19 - otherwise we return with a failure. One recommendation, while coding JavaScript - use a good code editor that will help highlight open/close brackets matches - it would save you a lot of time. For more on the VBCS JavaScript API that you can use for accessing business components see the doc.

A couple of threads on the Oracle Visual Builder Cloud Service forum asked about writing code in buttons in VBCS that compares values entered in a page to data in business objects and perform...

DevCS - DevOps + Agile

Introduction to Oracle Developer Cloud Service Issue Tracking REST Interfaces

The task tracking system in Oracle Developer Cloud Service (DevCS) helps your team manage your development priorities and process. DevCS offers a simple web interface for working with the system. However, in some cases you might want to build your own interfaces to interact with the issues. For example, you might want to build a system for end-users to report bugs in your app and you don't want to give them direct access to the DevCS web insterface. In the August 17 update of DevCS  we introduced a set of REST services that will let you build a custom interface that will interact with our issues repository. The official documentation for the DevCS REST services is here. I wanted to share some tips to help you get this going in your project. The results are in this short video demo, and the details are below. Figuring Out The End Points The documentation gives you the basic end-points you should be calling, but it took me a little bit of time to figure out the full URL to the end point. Turns out the URL is composed in the following way: https://server/org-id/rest/org-id+project-id/issues/v2/issues The first parts (server/org-id) are quite easy to get - just copy it from the URL of your project when you look at it in your browser. The org-id+project-id part is something you can get by looking at the details of your maven repository URL - see the image below - what you are looking for is the part before the /maven/ at the end: Note that in some projects this will also include a numeric value appended to the project name. Something like developer-oracletemplates_db-oss-devops_20266. In the video sample below the result URL for the REST that returns the list of issues currently in the system ended up being: https://myserver/developer-oracletemplates/rest/developer-oracletemplates_adf1221/issues/v2/issues Creating New Issues One of the useful services is the /issues/v2/issues/create-form service. It returns a json file that you can edit to specify information about a new task that you want to create. Note that the file start with : {"createIssue":{"links":.... Before you use the file to insert a new issue, you'll need to remove the  {"createIssue": at the start and the corresponding } at the end of the file. Only then can you use it to submit the POST operation to create an issue. In the video I used the following command to create the issue in the DevCS: curl -X POST -u shay@oracle.com https://myserver/developer-oracletemplates/rest/developer-oracletemplates_adf1221/issues/v2/issues/ -d@issue.json -H 'Content-type:application/json' (the -d allows you to specify the name of the file with the new issue, and the -H specifies the content format). Now that you have access to the information you can create new systems on top of it using your favorite development tool. At the end of the video you can see a simple issue system I built with Oracle Visual Builder Cloud Service - more on that in a future blog entry.  

The task tracking system in Oracle Developer Cloud Service (DevCS) helps your team manage your development priorities and process. DevCS offers a simple web interface for working with the system....

Visual Builder

Exporting and Importing Data from Visual Builder Cloud Service - with REST Calls

Visual Builder Cloud Service (VBCS) makes it very easy to create custom objects to store your data. A frequent request we get is for a way to load and export data from these business objects. As John blogged, we added a feature to support doing this through the command line - John's blog shows you the basic options for the command line. I recently needed to do this for a customer, and thought I'll share some tips that helped me get the functionality working properly - in case others need some help skipping bumps in the road. Here is a demo showing both import and export and how to get them to work. Exporting Data Export is quite simple - you use a GET operation on a REST service, the command line for calling this using curl will look like this: curl -u user:password https://yourserver/design/ExpImp/1.0/resources/datamgr/export > exp.zip The result is a streaming of a zip file, so I just added a > exp.zip file to the command's end. The zip file will contain CSV files for each object in your application. Don't forget to replace the bold things with your values for username and password, your VBCS server name and the name of the app you are using (ExpImp in my case). Importing Data Having the exported CSV file makes it easy to build a CSV file for upload - in the demo I just replaced and added values in that file. Next you'll use a similar curl command to call a POST method. It will look like this: curl -X POST -u user:password https://yourserver/design/ExpImp/1.0/resources/datamgr/import/Employee?filename=Employee.csv -H "Origin:https://yourserver" -H "Content-Type:text/csv" -T Employee.csv -v A few things to note. You need to specify which object you want to import into (Employee after the /import/ in the command above), and you also need to provide a filename parameter that tell VBCS which file to import. In the current release you need to work around a CORS security limitation - this is why we are adding a header (with the -H option) that indicate that we are sending this from the same server as the one we are running on. In an upcoming version this won't be needed. We use the -T option to attach the csv file to our call. Note that you should enable the "Enable basic authentication for business object REST APIs" security option for the application (Under Application Settings->Security).  Using Import in Production Apps In the samples above we imported and exported into an application that is still being developed - this is why we used the /design/ in our REST path. If you want to execute things on an application that you published then replace the /design/ with /deployment/  One special note about live applications, before you import data into them you'll need to lock them. You can do this from the home page of VBCS and the drop down menu on the application.   p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 14.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff} span.s1 {font-variant-ligatures: no-common-ligatures}

Visual Builder Cloud Service (VBCS) makes it very easy to create custom objects to store your data. A frequent request we get is for a way to load and export data from these business objects. As John...

DevCS - DevOps + Agile

Using Flyway to Manage Oracle DB Versions in the Cloud

This is another entry in my series about managing database scripts/schema as part of agile development. In the past I showed how to use simple SQL and Liquibase to manage schema creation/population scripts, and today I'll show you how to use Flyway. Flyway is a free open source solution for managing "database migrations" - or basically helping you keep multiple database in synch by tracking and applying changes to the schema structure and data. Flyway uses simple SQL scripts - which means you can use DB specific syntax - and tracks their execution in the database through a table it maintains. It is very easy to get started with and only has 6 commands that you need to be familiar with. The main command is "migrate" which will check your database status, and then run all the newer scripts that have yet to be run on that instance. Flyway uses a directory structure that contains a sql folder where you'll host all your SQL scripts. It uses a naming convention (that can be adjusted) where you start the file name with a Version number (V1, V1.1, V2.1) and then two "_" followed by a description - so something like V1__Create_Emp_Table - will show up as "Create Emp Table" when you issue the "info" command to find out what is the status of a database and which scripts have already run. By the way, the info command will also show you which new scripts are pending to be run on a specific database instance. In the video below I show how to configure and use Flyway, and how to integrate it into an automatic DevOps process leveraging Oracle Developer Cloud Service. (including task tracking, Git version management of the source, and build execution of the scripts). Flyway can integrate with various build framework (ant, maven, gradle etc), but since many DB folks are not familiar with those, I chose to use simple command lines in my demo to invoke Flyway. On my laptop and local MySQL DB I just used the Flyway command line utility. However Flyway is not installed by default in the DevCS servers, so I did a little trick: Flyway is a Java program, so into my DevCS Git repository I uploaded the Flyway directory along with needed jars for flyway and the JDBC driver. Then I looked at the script for invoking the command line and found out the Java command they used and copied it into a regular shell command in my build: java -cp lib/flyway-commandline-4.2.0.jar:lib/flyway-core-4.2.0.jar org.flywaydb.commandline.Main info -user=fw -password=$Password -url=jdbc:oracle:thin:@ipaddress:1521/servicename The $Password refers to a build parameter which is encrypted. The directory structure and files in my Git are shown in this image:  

This is another entry in my series about managing database scripts/schema as part of agile development. In the past I showed how to use simple SQL and Liquibase to manage schema creation/population...

DevCS - DevOps + Agile

Introduction to Liquibase and Managing Your Database Source Code

In previous posts I showed how you can manage SQL scripts lifecycle with the help of Oracle Developer Cloud Service (DevCS) as part of an overall Oracle DB DevOps solution. I wanted to add one more utility that might act as an alternative or addition to the SQL script managing - Liquibase. Liquibase is an open source solution for managing revisions of your databse schema scripts. It works across various types of databases, and supports various file formats for defining the DB structure. The feature that is probably most attractive in Liquibase is its ability to roll changes back and forward from a specific point - saving you from the need to know what was the last change/script you ran on a specific DB instance. Liquibase uses scripts - referred to as "changesets" - to manage the changes you do to your DB. The changesets files can be in various formats including XML, JSON, YAML, and SQL. In the examples below I'm using the XML format. As you continue to change an enhance your DB structure through the development lifecycle you'll add more changesets. A master file lists all the changeset files (or the directories where they are). In parallel Liquibase tracks in your database which changesets have already run.  When you issue a liquibase update command, liquibase looks at the current state of your DB, and identifies which changes have already happened. Then it run the rest of the changes - getting you to the latest revision of the structure you are defining. By integrating Liquibase into your overall code version management system and continuous integration platform you can synch up your database versions with your app version. In my case this would of course mean integration with Oracle Developer Cloud Service (DevCS) - which you get for free with the Oracle Database Cloud Service. In the video below I show a flow that covers: Tracking my DBA tasks in the issue system Modifying a local MySQL DB with Liquibase (doing forward and backward rolls) Adding a change set defining a new table Committing to Git Automatic build implementing the changes in Oracle Database Cloud Service Automatic testing with UT/PLSQL Here is a quick 10 minute demo: For those who want to try and replicate this, here are some resources: A changeset that creates a "department" table with three columns: A changeset that creates PL/SQL function, package and procedure. Note that in line 3 the dbms="oracle" means this script will only run when we are connected to an Oracle DB: create or replace function betwnstr( a_string varchar2, a_start_pos integer, a_end_pos integer ) return varchar2 is begin return substr( a_string, a_start_pos, a_end_pos - a_start_pos+1 ); end; create or replace package test_betwnstr as -- %suite(Between string function) -- %test(Returns substring from start position to end position) procedure basic_usage; end; create or replace package body test_betwnstr as procedure basic_usage is begin ut.expect( betwnstr( '1234567', 2, 5 ) ).to_equal('2345'); end; end; A changeset that adds a record to a table. Line 8 has the rollback tag that defines how to do a rollback for this insert: delete from department where id=20   A few tips about my DevCS project and build setup. 1. For the sake of simplicity, I loaded the liquibase and JDBC jar files into my git repository - this makes it easy for my build steps to find the files and execute them. I'm guessing you could also use Maven to host those. 2. I use a password parameter for my build so I don't need to hardcode the password adding a bit of security to my build. Reference teh parameter in your build with a $ sign - $password 3. Want to learn more about test automation with ut/PLSQL - check out this blog entry.    

In previous posts I showed how you can manage SQL scripts lifecycle with the help of Oracle Developer Cloud Service (DevCS) as part of an overall Oracle DB DevOps solution. I wanted to add one more...

A Guide to Attending Oracle OpenWorld and JavaOne for Free

This title seems like a click bait, but I'll try and show you that this is actually possible. (Especially if you act fast). A pass to both conferences is not a cheap item, and with training budgets shrinking you might be running into problems getting approval to expense this to your company. But here are a couple of tricks you can use to get free access to OOW/JavaOne. Some would get you a full pass and some will get you into specific areas and sessions. Full Pass Be a Speaker Well we are a bit late to the call for papers at this point, but you might still be able to become a co-speaker if you have a good customer story to tell that shows how you are using the product/technology that a talk is about. Oracle is always looking to feature customer stories in our sessions - it is always better when a customer shares their real live success. Look up the content catalog and locate sessions on products that you are successfully implementing - ping the speaker and they might want to add you as a co-speaker. Apply for the Awards We are late for getting in this year, but keep an eye for this for next year. There is an Oracle Excelence Award where winners get a free pass to OOW. Details here. There is also a Duke's Choice Award where you get passes to JavaOne - Details. JavaOne Special Discount Right now you can get 50% off your JavaOne ticket price if you use this code DJFS2017. Register here https://www.oracle.com/javaone/register.html (oops - turns out that promotion ended last week) Other Passes So full pass might be hard to get for free, but you can get in on a big chunk of the action for free using  The Discoverer pass A Discoverer pass lets you into the exhibit halls and various keynotes. Getting into the exhibit hall is great if you want to meet product managers and learn about the latest versions (and upcoming versions too). Most of the PMs are going to do shifts at the Oracle Demoground in their product pods - so hang out there and you'll be able to chat with us. Usually a Discoverer pass is $75 - but since you are reading this blog, you can get one for free - use the code CDFR2017. Register here. Oracle Code Want to get into some technical sessions - this year we are bringing Oracle Code back to San Francisco during OOW - and you can get into this part of the conference for free. Reg here: https://developer.oracle.com/code/sanfrancisco-oct-2017 See you at the conference in a couple of weeks.      

This title seems like a click bait, but I'll try and show you that this is actually possible. (Especially if you act fast). A pass to both conferences is not a cheap item, and with training budgets...

ADF & JDeveloper

How Do I Start Learning Oracle ADF - The 12c Edition

The most popular blog entry on my blog has been the "How do I start Learning ADF" entry for years now. That entry however was last updated in 2012 (and written in 2010) - so I figured it is time to give it another update, point to more recent resources, fix broken links, and cover additional resources that appeared over the years. So here is the ADF 12c version of that blog entry updated for 2017: Get started with Oracle ADF in 6 steps Step 1 - Learn Basic Java Oracle ADF aims to reduce the amount of coding you need to do for a lot of the tasks you'll need for building an application, and if you follow some of the tutorials mentioned later you'll see how you can build advanced apps without coding. But, at the end of the day, you will write code when developing with ADF - and that code would be written in Java. You don't have to be a Java ninja to work in ADF, but you should be familiar with basic language concepts and constructs. There are lots of resources out there that will teach you the language (by the way if you are on ADF 12.2.* you should learn the Java/JDK 8 syntax), one option is the Oracle Java Tutorials path. Searching online you'll be able to find many other resources for this task. Since Oracle ADF is based on Java EE architecture - you might want to also get a bit of understanding of that architecture - but don't worry about learning all of Java EE in details - ADF will make it much simpler for you. While learning the language you should be practicing it with the development tool that you are going to use, if you are going to developer Oracle ADF applications then that tool will be Oracle JDeveloper. Get yourself familiar with the basic IDE features for coders by running through this IDE tutorial. Step 2 - Get started with Oracle ADF Now that you know the basics of the Java language (and maybe some Java EE concepts), it's time to start using the framework that will simplify your life. Start by reading the data sheet and technical paper to understand what ADF is all about. Now get your hands dirty by completing the Overview tutorial for Oracle ADF - this will take you a couple of hours but by the end of it you'll have built a full blown application, and you will touch on most of the parts of the Oracle ADF architecture. Two other tutorials you should do next will deepen your knowledge about the Oracle ADF Controller Layer and taskflows, and the Oracle ADF Faces UI layer. If you got more time, have a run through other tutorials from our site. Step 3 - Getting Educated Now that you have hands-on experience with Oracle ADF, it would be a good point to go and get some deeper knowledge about how the framework works. You can leverage the collection of free online lessons we recorded in the ADF Essentials channel. You don't have to watch all the videos, but I would definitely recommend that at a minimum you'll watch the overview, ADF business components, ADF Controller (both parts) and ADF Faces video. And then you must watch the video about the ADF bindings internal seminars (2 parts) - these are critical for you to understand the inner working of the ADF "magic layer" that makes development so simple.  By the way if you prefer to get knowledge through live or online instructor-lead courses or by reading books - we have those too - see the list here. Step 4 - RTFM Ok, now you have a good grasp of the framework and how it works, it might be a good time to read the manual for Oracle ADF - "Developing Fusion Web Applications with Oracle Application Development Framework". This is the complete guide and you should read it to get more insight into the framework, best practices, and general guidelines. Note that the ADF documentation libraries has additional books about ADF Faces, ADF Desktop Integration, Administration guides and more. Step 5 - Become an ADF Architect Now that you know how to build ADF apps, it's time to learn how to architect more complex projects and work in a team environment. The resource to learn from is the ADF Architecture Square - where we discuss best practices, development guidelines, and most importantly how to architect a complete complex application. Here you can find docs and also a link to a set of videos on the ADF Architecture Square YouTube Channel. If you only have time to watch one video from that channel - go for the "Angels in the ADF Architecture". By the way, if you are looking for a platform for your team to collaborate on while building Oracle ADF applications - check out the Oracle Developer Cloud Service and the integration it provides with JDeveloper. Step 6 - Join the Community As you continue on your development road, there will be times when you'll want to know "How do I do X?" or "Why do I get this error?". The nice thing is that since many other developers are working with ADF, you can leverage their collective knowledge. Got a question - type it into google and it is likely that you'll find blog entries and youtube videos that explain how to solve your issue. A great place to search for answers is the indexed collection of ADF and JDeveloper blog articles. Search by keywords or topics and you'll likely get great samples to help you achieve your task. Still can't find the answer? Ask your question on our ADF community forum, just don't forget to follow the basic rules of asking questions on the forum. Things keep evolving in the world of Oracle ADF, so to keep up to speed you should follow JDeveloper on Twitter for the latest news. Over the years Oracle ADF has proven itself to be a great framework for enterprise applications, and each new release introduced further capabilities and simplifications - If you are just now joining the world of Oracle ADF you are in for a great ride. Have fun.

The most popular blog entry on my blog has been the "How do I start Learning ADF" entry for years now. That entry however was last updated in 2012 (and written in 2010) - so I figured it is time to...

DevCS - DevOps + Agile

Extending Oracle Database DevOps with Automated PL/SQL Unit Testing

  Automated testing helps you locate problems earlier in the development cycle saving you precious time down the road. This is why it should be a key part of any DevOps cycle - and your database code shouldn't be an exception to this rule.This blog entry will teach you how to execute tests automatically following code changes that you do in your Oracle database.   In previous blog entires I showed you how to use Oracle Developer Cloud Service (DevCS for short) for database development including how to track and manage tasks, version code changes, conduct code reviews, and automate code deployment to the database. This blog adds one more step to this lifecycle - automated testing.   For PL/SQL testing I'm using the open-source utPLSQL unit testing solution. The team behind this project just released a completely re-written version of the framework with features that allow you to add PL/SQL testing to continuous integration processes. A full explanation of utPLSQL is outside of the scope of this blog (They have decent documentation to get you started). But in short, the concept is that you write PL/SQL procedures that test other procedures. The framework includes functions you invoke from your test functions to evaluate results as well as annotations that deliver meaningful messages and information when reporting test results. The utPLSQL utility is comprised of a set of database objects that you install in a new schema, and then you use their ut.run() procedure to execute test cases. One nice feature built into the framework is the ability to produce test result reports in a format that is compatible with regular JUnit tests. With this functionality, I was able to get Developer Cloud Service to show me the test results nicely. Further more the built in support of DevCS for the SQLcl commands, made it simple to integrate the PL/SQL based framework as part of a generic build process without the need to install anything else on my continuous integration server. Here is a quick video showing you the result and the configuration needed. In the video I show how a check in of a PL/SQL script into the Git repository triggers a chain of events that ends with publishing test results. If the test fails the build is marked as failed - which can trigger an email being sent to you notifying you each time someone broke your code.     Some tips for configuration of such a chain: My build pipeline has two jobs. The first one runs the SQL scripts in the database. This job is triggered by any change made to my Git repository. So when I update my git repository with a SQL script that has a new definition of a database object, the build immediately takes it and updates the definition in my development or QA database. Once this build job finishes, it queues up the next job - the unit testing job. The unit testing job is using SQLcl to run the following commands: set serveroutput on; set feedback off; spool /workspace_directory/results.xml; exec ut.run(ut_xunit_reporter()); spool off; I spool the results of the test run into an xml file that I keep in the workspace directory for my job. (You can find out this directory by adding a shell command build step that does echo $WORKSPACE - an environment variable on the build server). Then I execute the ut.run procedure with the parameter that tells it to output the results as XUnit/JUnit format - doc on this option here. I turn serverouput on to get the results to show, and I turn feedback off to hide the message that the procedure successfully completed. In the post build step I archive the results.xml file, and then I indicate that I want to publish the content of this file as test results.   When your build finishes you'll see your build status visually and you can then drill down to see specific tests status. Notice that you can also ask to be notified by email on the results of the build (the CC Me button).     Click on a specific run of a job to drill down into the test results   And click on a specific test suite to get the details of each test That's it. You now have a complete chain that will notify you the minute that a database change someone did breaks any tests, helping you deliver better code faster.

  Automated testing helps you locate problems earlier in the development cycle saving you precious time down the road. This is why it should be a key part of any DevOps cycle - and your database code...

Visual Builder

Automating Processes With Application Builder and Process Cloud Services

Oracle Application Builder Cloud Service (ABCS) gives you a great way to build apps that track data, but what if your data is also involved in processes? What if you need to automate not just the data collection but also the human workflow interactions? The new integration between Oracle ABCS and Oracle Process Cloud Service (PCS) enables you to achieve this easily. You can now create processes that are associated with ABCS business objects and interact with them directly from your Oracle ABCS user interfaces. This is a two way interaction patterns, where PCS processes can access information from Oracle ABCS business objects, and ABCS user interfaces can be created on top of these PCS processes to initiate and progress processes. In the video example below I'm developing a basic approval flow for travel requests. The video will show you how the integration works covering: Associating a process with a business object Accessing the business object values from your process Setting security and connection between PCS and ABCS Initiating PCS processes from an ABCS page Creating custom to-do list pages in ABCS to show you your tasks Creating custom task details pages in ABCS to progress tasks As you'll see, all of these are quite simple and completely declarative to achieve with the visual development approach. The combination of the products provide great value to the users of each one of those. PCS customers will love the ability to persist the data they use in their processes, and the ability to design even richer interfaces and reports. ABCS users will love the ability to automate and manage long running complex processes.       

Oracle Application Builder Cloud Service (ABCS) gives you a great way to build apps that track data, but what if your data is also involved in processes? What if you need to automate not just the data...

Visual Builder

Leveraging Oracle JET Composite Components in Oracle application Builder Cloud Service

One of the new features of Oracle Application Builder Cloud Service (ABCS) in the May 2017 release is integration with Oracle JET's Composite Components Architecture (JET CCA). Based on the Web Components standard, JET CCA provides a way to define reusable UI components (with logic) that can easily be incorporated into multiple applications. The new feature in ABCS allows you to pick such components as extensions to the ABCS design time, providing an easy standard way to extend your UI capabilities. For example in the screenshot below you see a new slider component in the common components section, and how it looks like when added to the visual designer.   In this blog entry we'll start by creating a very simple JET CCA component and then see how to add it to Oracle ABCS. (Thanks goes to John Brock who helped get this sample working). To learn more about JET CCA have a look at their developer guide, and the sample in the Oracle JET Cookbook. We are going to start from that sample and build a very basic component. (For a deep guided tour of Oracle JET CCA check out Duncan's series of JET CCA blogs). Note - You are stepping into the "custom code" realm of ABCS when doing this type of integration- which means that you are in control of the integration and future upgradability of your extension. For example in the future when ABCS will adopt a newer JET version, you might need to do adjustments to your component to match the new version.  There are 5 files needed to define a component. We'll start with the loader.js file - this file provides info on the other files involved in the component. Note that in the sample we are registering "slider" as the name of the component, in this file we are also indicating which jet components we are going to use and including them in the define section. Specifically we are adding the ojs/ojslider component here. define(['ojs/ojcore', 'text!./demo-cca.html', './demo-cca', 'text!./component.json', 'css!./demo-cca','ojs/ojcomposite', 'ojs/ojslider'], function(oj, view, viewModel, metadata) { oj.Composite.register('slider', { view: {inline: view}, viewModel: {inline: viewModel}, metadata: {inline: JSON.parse(metadata)} }); } ); The next file we'll create is the component.json file. This file describes the meta data about our component. One of the key things you can define here is a set of properties that users of the components can set when they add it to their application. The nice thing in the ABCS integration is that these will show up at design time as properties in the visual editor. In our component we are defining four properties that control the title, minimum, maximum, and actual value of a slider. Note that right now ABCS is using Oracle JET 2.3 and we need to specify this in the file. { "name": "Slider", "description": "A sample Oracle JET Slider CCA", "version": "1.0.0", "jetVersion": ">=2.3.0", "properties": { "title": { "description": "Name of slider", "type": "string" }, "min": { "description": "Numeric minimum", "type": "number" }, "max": { "description": "Numeric maximum", "type": "number" }, "value": { "description": "Slider value", "type": "number" } } } Next we'll define the html file (demo-cca.html) that includes our UI. We are using regular HTML code here along with knockout.js binding of properties to values. You can use the $props prefix to refer to values of attributes we defined in the components.json file. <div data-bind="text: 'Title: '+$props.title"></div>   <input id="slider-id"      data-bind="ojComponent: {             component: 'ojSlider',             max:$props.max,             min:$props.min,             step:10,             value:$props.value             }"/>               Next there is a css file - controlling the look and feel of the component. Since we are not doing any customization on the look and feel we'll create an empty file called demo-cca.css. Next is the model file (demo-cca.js) - this file contains data and logic that can be accessed from the component. We'll create a basic file without any logic code in it. define(['knockout'], function (ko) { function model(context) { var self = this; return model; } } ) Now that you have created the 5 files - simply zip them into a single zip file. (Note - don't zip the parent directory, you want the files to be directly at the top level of the zip file). This zip file is the file you'll give to your component users. In this case to the ABCS developer. Go into your Application Settings -> Extensions in Oracle ABCS and choose to create a new UI component from zip file. Upload the zip file you just created. Then make sure to enable the component using the boolean control on the page. Switch over to the UI Designer and you'll see that there is a new component in the component palette. Drag and drop it into your page - and you'll see the HTML code. Set the properties in the property inspector and you'll see them influencing the content of your page. You can also bind the properties to the values of fields in your custom business objects. Here is a quick video showing the integration.  

One of the new features of Oracle Application Builder Cloud Service (ABCS) in the May 2017 release is integration with Oracle JET's Composite Components Architecture (JET CCA). Based on the Web...

Visual Builder

Getting Data from REST Services into Oracle Application Builder Cloud Service

In the latest version of Oracle Application Builder Cloud Service (ABCS) that we rolled out at the beginning of May we introduced a set of new code templates for creating Business Object Providers. Business Object Providers - or BOPs for short - are a mechanism that allow you to extend ABCS and have it access external REST sources of data. In the video below I'm going to show you how to use the most basic template provided for BOPs - which allows you to create a read only BOP. The template has 2 files that you need to change - one (RESTOperationProvider.js) that has the code for accessing the REST service and reading the results, and the other (RESTEntityProvider.js) has the code that defines the structure of the object you are creating. In the video I'm using this URL - https://api.github.com/users/Oracle/repos - that gets you a list of projects/repositories that Oracle owns on Github: Once you created a BOP you can add a new "external service" to your application in the data designer, and then you can use that object like you would any other. Check it out: This blog shows the basics of a read-only access, with a structure for the content that is easy to parse. Here are a couple of other blogs that will show you more advanced techniques: Reading Nested JSON Data from External REST in Visual Builder Cloud Service Create Operation for External REST in Visual Builder Cloud Service  

In the latest version of Oracle Application Builder Cloud Service (ABCS) that we rolled out at the beginning of May we introduced a set of new code templates for creating Business Object Providers. Busi...

Visual Builder

Business Logic in Oracle Application Builder Cloud Service

As you start building more complex applications in Oracle Application Builder Cloud Service, you'll might need to define more complex interactions between objects or validations on rows of data or specific fields. In the new version of ABCS that we rolled out in February we added these type of capabilities. There are several things you could do with the new Business Rules section of ABCS Triggers - allow you create logic that will be executed in specific CRUD events such as when you insert, remove or update a record. Object Validators - allowing you to define checks across multiple fields in your object Field Validators - allowing you to define a check on specific field values. Object Functions - reusable functions that can be called from the other points Note that these logic points will be running on the server side of ABCS.  In the video below I demonstrate a couple of these capabilities. You'll learn how to update one object when a specific value is set in another object's field. You'll also see how to check whether a combination of values in fields in a record is valid. Check it out: &amp;lt;p&amp;gt; &amp;lt;/p&amp;gt; Here is a screenshot of the nice logic flow editor:

As you start building more complex applications in Oracle Application Builder Cloud Service, you'll might need to define more complex interactions between objects or validations on rows of data or...

DevCS - DevOps + Agile

Automating DevOps for the Oracle Database with Developer Cloud Service and SQLcl

In the previous blog entry I showed how you can leverage Oracle Developer Cloud Service (DevCS) to manage the lifecycle of your database creation scripts (version management, branching, code reviews etc). But how do you make sure that your actual database is in synch with the changes that you make in your scripts? This is another place where DevCS can come to the rescue with the built-in continuous integration functionality it provides. Specifically with the new features for database integration including secure DB connection specification, and leveraging the powerful SQL Command Line (SQLcl) - the new command line interface to the Oracle DB - which is built-in in the DevCS build servers. In the video below I go through a process where a check-in of SQL script code change automatically initiate a build process that modifies a running database. A few points to note:   For the sake of simplicity, the demo doesn't follow the recommended step of a code review before merging changes into the master branch (you can see how to do that here). The demo automates running the build whenever a change to the scripts is done. You could also define a scenario where the build runs at a specific time every day - for example at 1am - and synch the DB to today's scripts. You can further extend the scenario shown here of dropping and re-creating objects to add steps to populate the DB with new data and even run tests on the new database. As you can see Developer Cloud Service can be a very powerful engine for your database DevOps - and it is included for free with your Oracle Database Cloud Services - so give it a try.    Related blog entries: Introduction to Liquibase and Managing Your Database Source Code Extending Oracle Database DevOps with Automated PL/SQL Unit Testing

In the previous blog entry I showed how you can leverage Oracle Developer Cloud Service (DevCS) to manage the lifecycle of your database creation scripts (version management, branching, code reviews...

DevCS - DevOps + Agile

Managing Oracle Database Code with SQL Developer, Git, and Developer Cloud Service

Are you coding SQL and PL/SQL code? Need to manage versions & branches? Want to track your to-do tasks? Need to conduct code reviews and peer programming?  Developer Cloud Service can help you! And now it comes free with your Oracle Database Cloud Service trial or license - check your service dashboard to see if you got one.  Note that even if your database is not in the cloud, but rather on-premises, you can use the same process shown in the video below. In the demo you'll learn how to: Provision a new cloud project for your team Check SQL scripts into the Git Repository in DevCS Track tasks and to-do items Branch your SQL script code Conduct code review with members of your team Merge branches of code Check it out: I blogged about this topic in the past using JDeveloper, but figured out that most of the Oracle database developers actually use SQL Developer - so I thought it would be good to give them a quick 10 minute demo of what they can do by combining the power of SQL Developer and Developer Cloud Service. (The video can also be useful to just get a basic understanding of how SQLDeveloper works with any Git repo).   More about Developer Cloud Service here. Stay tune for more blog entries on features for Database developers in Oracle Developer Cloud Service - coming soon!

Are you coding SQL and PL/SQL code? Need to manage versions & branches? Want to track your to-do tasks? Need to conduct code reviews and peer programming?  Developer Cloud Service can help you! And now...

Visual Builder

Extending Oracle HCM with Oracle Application Builder Cloud Service - It's Simple

I blogged before showing how easy it is to extend Oracle Sales Cloud using Oracle Application Builder Cloud Service. We do get a lot of customers of Oracle HCM that approach us asking if they can use the same tools to extend Oracle HCM apps. While Oracle Application Builder Cloud Service (ABCS) has the list of Oracle Sales Cloud services pre-populated in the service catalog , you can pretty easily connect ABCS to Oracle HCM services too and get data and build an application around this data. In the video demo below I'm building an application that records the details of the cars employees are allowed to bring onto campus. I leverage a REST service exposed by Oracle HCM to get the list of employees. ABCS also automates querying using the same service so you can search for a specific employee. ABCS lets me create an app with the same look and feel as Oracle SaaS displaying the specific fields that interest me in the specific layout I want. Further more I can add custom data object that tracks the details of the cars and associate it with the HCM data. Note that in the security section I'm using basic security with a fixed user for the sake of simplicity in the demo. Note however that in the selection list I can also use the currently logged in Oracle Cloud user - to synch the user of my ABCS and their HCM authorization. Check it out: Want to try it on your own - get a trial account of Oracle Application Builder Cloud Service here. 

I blogged before showing how easy it is to extend Oracle Sales Cloud using Oracle Application Builder Cloud Service. We do get a lot of customers of Oracle HCM that approach us asking if they can use...

Visual Builder

Oracle ABCS - Traversing Relationships, Conditional Navigation, Query and Update with JavaScript

Oracle Application Builder Cloud Service (ABCS) lets you do a lot of things in a declarative way, however for more complex validation and conditional logic you might need to resort to some basic coding in JavaScript. I ran into such a case with an application I was developing, and figured out that the code sample from that system will be a good way to illustrate some coding techniques in ABCS. The application I was working on allows people to register to various events. Each event has a certain capacity, so if there are too many people registered to an event, we want the rest to be added to a wait list. For each record of a person registering, we keep a reference to the event they want to attend.  So the logic flow is: Check how many open spaces are available for the event we are trying to register for. If there is space in the event, save the new person data, and show a success message. If there isn't space, update the person "Waitlisted" field to be true, save the data, and show a message saying that the person is on the wait list.  In the demo video below I'm showing how to: Define declarative conditional flow of steps based on results from custom code Traverse relationships between custom object through code Execute a conditional query and run through the results from a custom object with code Set the value for a property of a custom object through code For reference here is the complete code from the sample: require([    'operation/js/api/Conditions',    'operation/js/api/Operator'], function (Conditions, Operator) {    var lab = Abcs.Entities().findById('Lab');    var id = lab.getProperty('id');    //condition is to find a lab with the id that is in the page's drop down box    var condition = Conditions.SIMPLE(id, Operator.EQUALS, $Person.getValue('ref2Combo_Box'));    var operation = Abcs.Operations().read({        entity: lab,        condition: condition    });    //if query returned value we loop over the rows and check the capacity and registration columns    operation.perform().then(function (operationResult) {        if (operationResult.isSuccess()) {            operationResult.getData().forEach(function (oneRecord) {                if ((oneRecord.Capacity - oneRecord.Registered) < 1) {                    $Person.setValue('Waitlisted', true);                    reject("error");                } else                {                    resolve("ok");                }            });        }    }).catch(function (operationResult) {        if (operationResult.isFailure()) {            // Insert code you want to perform if fetching of records failed            alert('didnt worked');            reject("error");        }    });}); More information on the JavaScript APIs used here are in the Oracle ABCS Documentation.

Oracle Application Builder Cloud Service (ABCS) lets you do a lot of things in a declarative way, however for more complex validation and conditional logic you might need to resort to some basic...

Visual Builder

Creating Oracle Application Builder Cloud Service App Based on Oracle ADF Business Components

Oracle Application Builder Cloud Service (ABCS for short) enables you (and your business users) to create rich web and mobile apps in a quick visual way from a browser with no-coding required (but coding is possible). The UI that ABCS creates is based on Oracle JET, which many of our customers love because its responsiveness and lightness. Some Oracle ADF customers have been on the hunt for a new client-side UI solution for their apps, and Oracle JET is certainly a technology that will work for those use cases. A nice feature for Oracle ADF customers is that their data-access and business-service layer is built in a reusable way that is decoupled from the UI. And now, with the ability to expose ADF Business Components as REST service, they can use any modern UI framework to develop the UI including Oracle JET. There are already many blog entries with code samples on how to write JET apps that connect to ADF Business Components But what if we could give you the simplicity of ABCS for the UI creation, the power of JET for the UI experience, and the ability to leverage your existing investment in Oracle ADF all without writing a single line of code manually? Well, in the demo below I'll show you how you can reuse the logic you have in Oracle ADF Business Component and build a JET based UI on top of them in a declarative way with Oracle Application Builder Cloud Service. Basically you get the best of each tool - and you don't need to write a single line of code ! In the 9 minutes demo I'll show you how to: Create an ADF Business Components layer on top of Oracle Database in the Cloud - (0:00) Expose the ADF Business Components as REST service - (1:45) Deploy the REST service to Java Cloud Service (JCS) - (2:19) Create an Oracle Application Builder Cloud Service application - (6:00) Add an ADF BC REST Service as a data source to the app - (6:30) Create the user interface to your application - (7:20) (Times are indicated in case you want to skip sections you are already familiar with)  If you are interested in a bit of a background on why this is so simple, the answer is that ABCS was built to enable easy integration with Oracle SaaS leveraging the REST services they expose. To quickly build the full app with all the defaulting you are seeing in there (full CRUD with a simple drag and drop) ABCS needs to know some basic information about the data that it needs to render (primary key, data types, etc). Since Oracle SaaS is built on Oracle ADF, we built into ABCS the capability to analyze the describe that ADF BC REST services provide. This makes it dead simple to consume ADF REST service in ABCS, whether these services come from Oracle's apps - or your own ADF apps :-)  As you can see there is a great synergy between Oracle ADF, Oracle Application Builder Cloud Service and Oracle JET.  Want to try it on your own? Get a trial of Oracle Application Builder Cloud Service here. 

Oracle Application Builder Cloud Service (ABCS for short) enables you (and your business users) to create rich web and mobile apps in a quick visual way from a browser with no-coding required (but...

ADF & JDeveloper

Automatic Time-Based Dismiss for Oracle ADF Popups

This blog entry is about a nice little new feature that was introduced into ADF in the 12.2.1.1 version, and didn't get a mention in the "what's new" document. Self dismissing messages  are popping up everywhere these days (when you get an email, when you have a new calendar invite etc), and you might want to use this UI pattern in your ADF apps too. There is a new property for af:popup components - autoDismissalTimeout - that allow popups to automatically dismiss after a certain number of seconds that you can specify. This is very useful for all sort of messages that you want to show to the user, but you don't want to require the user to do any activity to dismiss. Here is an example of such a message that you can associate with a save button: And here is the code you'll need to do this:             <af:popup id="p1" animate="true" autoDismissalTimeout="2">                 <af:panelGroupLayout id="pgl1" layout="horizontal">                     <af:image source="stat_confirm_16.png" id="i1"/>                     <af:outputFormatted value="Your changes have been saved" id="of1"/>                 </af:panelGroupLayout>             </af:popup> One more (small) reason to adopt the new versions of Oracle ADF! 

This blog entry is about a nice little new feature that was introduced into ADF in the 12.2.1.1 version, and didn't get a mention in the "what's new" document. Self dismissing messages  are popping up...

ADF & JDeveloper

New Capabilities for the Status Meter Component in ADF

While building a demo of new Oracle ADF features for my OOW session, I came across some nice new functionality in the dvt status meter gauge component (dvt:statusMeterGauge), specifically the round one which has become quite popular in various Oracle Alta UIs. Turns out you can turn the dial and cut it so it shows just parts of a circle. By adding thresholds you can use it as a replacement for the dial gauge. Here is how it can look:  Here is the code used:                             <dvt:statusMeterGauge orientation="circular" inlineStyle="width:150px; height:100px;"                                                   id="statusMeterGauge1" maximum="25000"                                                   value="#{bindings.Salary.inputValue}" minimum="0" startAngle="180" angleExtent="180"                                                   title="Salary">                                 <dvt:gaugeMetricLabel rendered="true" id="gml1"/>                                 <dvt:gaugeThreshold id="gt1" maximum="4000" color="red"/>                                 <dvt:gaugeThreshold id="gt2" maximum="6000" color="yellow"/>                                 <dvt:gaugeThreshold id="gt3" maximum="20000" color="green"/>                             </dvt:statusMeterGauge>

While building a demo of new Oracle ADF features for my OOW session, I came across some nice new functionality in the dvt status meter gauge component (dvt:statusMeterGauge), specifically the round...

Oracle OpenWorld 2016 and Where You'll Find Me

It's that time of the year - Oracle OpenWorld is taking place starting on Sunday - and my calendar is full of activities. I'm going to be presenting on multiple tools and frameworks including sessions on Oracle Application Builder Cloud Service, Oracle JDeveloper and Oracle ADF, Oracle Developer Cloud Service and a session discussing which dev framework and tool is right for you.  In case you want to catch me at #OOW16 here is my schedule: Simplified Multichannel App Development for Business Users [CON2884] Monday, Sep 19, 1:45 p.m. | Moscone West - 2005 - A session where I'll demo how easy it is to create and host your own applications with Oracle Application Builder Cloud Service. Oracle Application Development Framework and Oracle JDeveloper: What’s New [CON1226]Tuesday, Sep 20, 4:00 p.m. | Moscone West - 2018 - A quick review of the new features we added in the 12.2.* releases of JDeveloper and ADF Oracle Development Tools and Frameworks: Which One Is Right for You? [MTE6650] Tuesday, Sep 20, 6:15 p.m. | Moscone South - 301- A session for all of those who are not sure which technology is right for them, or for those who want to ask me "is Oracle [fill in the product name] dead?" A Guide to Cloud-Based Agile Development Methodology Adoption [CON1947]Wednesday, Sep 21, 12:15 p.m. | Moscone West - 2018 - A demo focused session that show cases how Oracle Developer Cloud Service helps your team adopt agile development.  No Code Required: Application Development and Publishing Made Easy [HOL7402] Tuesday, Sep 20, 11:30 a.m. | Hotel Nikko - Nikko Ballroom III (3rd Floor)Monday, Sep 19, 4:15 p.m. | Hotel Nikko - Nikko Ballroom III (3rd Floor) - Your two chances to try out  the new Oracle Application Builder Cloud Service and develop your first app Agile Development Management and Continuous Integration Simplified [HOL7403]Wednesday, Sep 21, 8:00 a.m. | Hotel Nikko - Nikko Ballroom III (3rd Floor) - Your chance to manage a whole development team agile process using Oracle Developer Cloud Service I'm also going to be in the mobile theater in the mobile area in the demo ground on Tue and Wed at 10:30 doing a quick demo of ABCS and its mobile capabilities. In between these sessions, you'll be able to find me at the Oracle Demoground doing some shifts in the Oracle ADF booth (which is in Moscone South far left corner) - the rest of our pods are close by including JET, DevCS, ABCS and even Forms :-) And if I'll have any spare time, I'll try and catch some of the other session on this list of Dev tools and framework sessions See you next week.

It's that time of the year - Oracle OpenWorld is taking place starting on Sunday - and my calendar is full of activities. I'm going to be presenting on multiple tools and frameworks including sessions...

DevCS - DevOps + Agile

CI, DevOps and ALM for Oracle SOA Suite with Oracle Developer Cloud Service

We have a lot of developers who are using JDeveloper to develop applications with Oracle SOA Suite, and in this blog I wanted to show them how the combination of JDeveloper along with Oracle Developer Cloud Service can help automate their whole development and delivery lifecycle. One unique aspect of Developer Cloud Service is that it has an instance of JDeveloper available in the build environment. This allows customers who are building Oracle SOA artifacts to leverage the OJDeploy mechanism to package their applications as part of a continuous integration cycle just like they do during development time. With the improved DevCS integration that we added in JDeveloper 12.2.1, developers can go beyond integration with the Git server offered by DevCS and can now interact with the DevCS task tracking system directly as well as associate code changes to specific tasks they are working on.   In this 10 minutes video I show: Creating Ant based builds for Oracle SOA artifacts Automating Continuous Integration build and packaging for Oracle SOA from Developer Cloud Service Managing SOA project code with Git and Developer Cloud Service  Tracking tasks from JDeveloper and monitor agile development in Developer Cloud Service By the way, for those who rather use Maven to automate their builds - this is totally possible and supported in DevCS as well. There is a set of videos that show you how to do that here.  (If you haven't seen how quick and easy it is to create a DevCS project, create a git repo, track tasks and create agile team boards - see this video and this one too). Note that developers get access to Developer Cloud Service with every subscription to the Oracle SOA Cloud Service.  Here are the two ant files used in the video: Note that in the build.properties you'll want to change the application and project names to match the ones you are working on. As you see in the video the build.xml is generated for you automatically and you just need to add the line: <property environment="env" /> build.properties oracle.commons=../../../../oracle_common/oracle.commons=../../../../oracle_common/install.dir=../../../..oracle.home=${env.ORACLE_HOME_SOA_12_2_1}oracle.jdeveloper.workspace.path=${env.WORKSPACE}/e2e-1201-composites.jwsmiddleware.home=${env.MIDDLEWARE_HOME_SOA_12_2_1}workspace=${env.WORKSPACE}oracle.jdeveloper.ant.library=${env.ORACLE_HOME_SOA_12_2_1}/jdev/lib/ant-jdeveloper.jaroracle.jdeveloper.deploy.dir=${env.WORKSPACE}/ProcessOrder/deployoracle.jdeveloper.ojdeploy.path=${oracle.home}/jdev/bin/ojdeployjavac.nowarn=offoracle.jdeveloper.project.name=ProcessOrderoracle.jdeveloper.deploy.outputfile=${env.WORKSPACE}/e2e-1201-composites/ProcessOrder/deploy/${profile.name}output.dir=classesjavac.deprecation=offoracle.jdeveloper.deploy.profile.name=*javac.debug=on build.xml <?xml version="1.0" encoding="UTF-8" ?><!--Ant buildfile generated by Oracle JDeveloper--><!--Generated Jul 25, 2016 5:11:09 PM--><project xmlns="antlib:org.apache.tools.ant" name="ProcessOrder" default="all" basedir="."> <property environment="env" /> <property file="build.properties"/> <path id="library.SOA.Designtime"> <pathelement location="${install.dir}/soa/plugins/jdeveloper/extensions/oracle.sca.modeler.jar"/> </path> <path id="library.SOA.Runtime"> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.fabric_11.1.1/fabric-runtime.jar"/> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.fabric_11.1.1/tracking-api.jar"/> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.fabric_11.1.1/tracking-core.jar"/> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.fabric_11.1.1/edn.jar"/> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.mgmt_11.1.1/soa-infra-mgmt.jar"/> <pathelement location="${oracle.commons}/modules/com.oracle.webservices.fabric-common-api.jar"/> </path> <path id="library.BPEL.Runtime"> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.bpel_11.1.1/orabpel.jar"/> </path> <path id="library.Mediator.Runtime"> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.mediator_11.1.1/mediator_client.jar"/> </path> <path id="library.MDS.Runtime"> <pathelement location="${oracle.commons}/modules/oracle.mds/mdsrt.jar"/> </path> <path id="library.BC4J.Service.Runtime"> <pathelement location="${oracle.commons}/modules/oracle.adf.model/adfbcsvc.jar"/> <pathelement location="${oracle.commons}/modules/oracle.adf.model/adfbcsvc-share.jar"/> <pathelement location="${oracle.commons}/modules/commonj.sdo.backward.jar"/> <pathelement location="${oracle.commons}/modules/commonj.sdo.jar"/> <pathelement location="${oracle.commons}/modules/oracle.toplink/eclipselink.jar"/> <pathelement location="${oracle.commons}/modules/com.oracle.webservices.fmw.wsclient-impl.jar"/> <pathelement location="${oracle.commons}/modules/com.oracle.webservices.fmw.jrf-ws-api.jar"/> <pathelement location="${oracle.commons}/modules/com.oracle.webservices.fmw.web-common-schemas-impl.jar"/> </path> <path id="classpath"> <path refid="library.SOA.Designtime"/> <path refid="library.SOA.Runtime"/> <path refid="library.BPEL.Runtime"/> <path refid="library.Mediator.Runtime"/> <path refid="library.MDS.Runtime"/> <path refid="library.BC4J.Service.Runtime"/> </path> <target name="init"> <tstamp/> <mkdir dir="${output.dir}"/> </target> <target name="all" description="Build the project" depends="deploy,compile,copy"/> <target name="clean" description="Clean the project"> <delete includeemptydirs="true" quiet="true"> <fileset dir="${output.dir}" includes="**/*"/> </delete> </target> <target name="deploy" description="Deploy JDeveloper profiles" depends="init"> <taskdef name="ojdeploy" classname="oracle.jdeveloper.deploy.ant.OJDeployAntTask" uri="oraclelib:OJDeployAntTask" classpath="${oracle.jdeveloper.ant.library}"/> <ora:ojdeploy xmlns:ora="oraclelib:OJDeployAntTask" executable="${oracle.jdeveloper.ojdeploy.path}" ora:buildscript="${oracle.jdeveloper.deploy.dir}/ojdeploy-build.xml" ora:statuslog="${oracle.jdeveloper.deploy.dir}/ojdeploy-statuslog.xml"> <ora:deploy> <ora:parameter name="workspace" value="${oracle.jdeveloper.workspace.path}"/> <ora:parameter name="project" value="${oracle.jdeveloper.project.name}"/> <ora:parameter name="profile" value="${oracle.jdeveloper.deploy.profile.name}"/> <ora:parameter name="nocompile" value="false"/> <ora:parameter name="outputfile" value="${oracle.jdeveloper.deploy.outputfile}"/> </ora:deploy> </ora:ojdeploy> </target> <target name="compile" description="Compile Java source files" depends="init"> <javac destdir="${output.dir}" classpathref="classpath" debug="${javac.debug}" nowarn="${javac.nowarn}" deprecation="${javac.deprecation}" encoding="UTF8" source="1.8" target="1.8"> <src path="SOA/SCA-INF/src"/> </javac> </target> <target name="copy" description="Copy files to output directory" depends="init"> <patternset id="copy.patterns"> <include name="**/*.GIF"/> <include name="**/*.JPEG"/> <include name="**/*.JPG"/> <include name="**/*.PNG"/> <include name="**/*.cpx"/> <include name="**/*.dcx"/> <include name="**/*.ejx"/> <include name="**/*.gif"/> <include name="**/*.ini"/> <include name="**/*.jpeg"/> <include name="**/*.jpg"/> <include name="**/*.png"/> <include name="**/*.properties"/> <include name="**/*.sva"/> <include name="**/*.tag"/> <include name="**/*.tld"/> <include name="**/*.wsdl"/> <include name="**/*.xcfg"/> <include name="**/*.xlf"/> <include name="**/*.xml"/> <include name="**/*.xsd"/> <include name="**/*.xsl"/> <include name="**/*.exm"/> <include name="**/*.xml"/> <exclude name="build.xml"/> </patternset> <copy todir="${output.dir}"> <fileset dir="SOA/SCA-INF/src"> <patternset refid="copy.patterns"/> </fileset> <fileset dir="."> <patternset refid="copy.patterns"/> </fileset> </copy> </target></project>

We have a lot of developers who are using JDeveloper to develop applications with Oracle SOA Suite, and in this blog I wanted to show them how the combination of JDeveloper along with Oracle Developer...

Visual Builder

Extending Oracle SaaS with Oracle Application Builder Cloud Service - Simplified PaaS for SaaS

One of the focus area for us when developing the new Oracle Application Builder Cloud Service (ABCS) was to create a tool that would make it very simple to enrich Oracle SaaS applications. This integration is a key part of Oracle's PaaS for SaaS offering - where we have unique capabilities in our Platform as a Service offering for our Software as a Service customers. With ABCS it is very easy to pick up objects from Oracle SaaS (through the built in service catalog) and then design new web and mobile interfaces that show data from those. In addition you can then add your own custom fields and related objects with additional data you want to track. Once your application is complete - you can then either run it as a stand-alone app, or embed it into an Oracle SaaS interface.  I wrote two blogs and recorded two videos that show you the basics. Creating Oracle ABCS application connected to Oracle SaaS Embedding Oracle Application Builder Cloud Service Apps in Oracle Sales Cloud &lt;span id=&quot;XinhaEditingPostion&quot;&gt;&lt;/span&gt; These videos are part of the new Oracle Application Builder Cloud Service YouTube Channel And the blogs are published on the Oracle Application Builder Cloud Service OTN Community We have more tutorials there to help you go even further - so check them out! 

One of the focus area for us when developing the new Oracle Application Builder Cloud Service (ABCS) was to create a tool that would make it very simple to enrich Oracle SaaS applications. This...

DevCS - DevOps + Agile

Continuous Integration for Database Developers - Updated

[Update Feb 2017 - new SQLcl functionality in Developer Cloud Service makes the "deployment" step even simpler - see this blog entry.] About a year ago I posted a demo showing how to manage the full development lifecycle of your database code with the help of Developer Cloud Service. Since then we released new versions of both Developer Cloud Service and JDeveloper that make the experience even smoother and add more features - so I figured I'll record a small updated demo. In this demo I'm starting from an existing project that has a list of tasks being tracked in a development sprint in the new Agile tab in Developer Cloud Service - which gives you a great view of your development effort and progress.  (If you want to see how you create the initial project and add issues to it check out the previous demo).  A few new things you'll see in this demo: The new Agile/Sprint management dashboard in Developer Cloud Service Task tracking integration in JDeveloper Updating definition of database objects in JDeveloper and generating SQL scripts Branching Git repositories Code review for SQL files Build automation for DB changes with Ant - including deployment to a cloud database Note that in this video I'm using a cloud instance of an Oracle database where port 1521 is open for SQLNet communication. The instructions for opening this port for communication on an Oracle Cloud Database are here. Another approach that you can take is to use scripts that execute commands using SSH on the Database Cloud Service - you can see this approach in action in this video showing Developer Cloud Service managing an Oracle APEX Lifecycle.   The Ant script used in the sample is:  <?xml version="1.0" encoding="UTF-8" ?><project xmlns="antlib:org.apache.tools.ant" default="init">  <target name="init">    <tstamp/>  </target>  <path id="antclasspath">    <fileset dir=".">      <include name="ojdbc7.jar"/>    </fileset>  </path>  <target name="deploy">    <sql driver="oracle.jdbc.OracleDriver" userid="C##xxxx" password="xxxx"         url="jdbc:oracle:thin:@xxx.xxx.xxx.xxx:1521:ORCL" src="./database/DATABASE1/dbcreate.sql"         classpathref="antclasspath" onerror="continue"/>  </target></project> Note that you need the Oracle JDBC jar file to be accessible from the Ant script - I just included it in my git repository. If you like to try this out with your own database development project - get a trial of Oracle Developer Cloud Service here. 

[Update Feb 2017 - new SQLcl functionality in Developer Cloud Service makes the "deployment" step even simpler - see this blog entry.] About a year ago I posted a demo showing how to manage the full...

ADF & JDeveloper

Calling REST Services from Application Builder Cloud Service

[Update May 2017 - There are new features making the consumption of REST service easier - check out this blog entry about BOPs] One of the frequent requests we get when we demo ABCS is - can I invoke some external functionality that is exposed as a REST service and pass parameters to it. Well, with a minimal amount of JavaScript coding you can do it in the current version.  I recorded the demo below that shows you how to do that. I'm leveraging a public REST API that github exposes to get a list of repositories for a user. The service is available at https://api.github.com/users/oracle/repos I then design an ABCS page that has a parameter field, a button that invokes the REST/JSON call, and a placeholder for results. It looks like this:    In addition the video also shows some other techniques that are useful, including:   How to create a new blank data entry page How to add custom component that renders HTML content How to add a button that calls a REST service How to pass a parameter to the JavaScript custom code How to set a page to be the default page of the app How to stage your application for external testing   &amp;amp;amp;amp;amp;lt;span id=&amp;amp;amp;amp;amp;quot;XinhaEditingPostion&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;gt; It seems that right now you are restricted to accessing REST services that are secured over HTTPS protocol (which is a good thing). Note that you of course don't have to stage the app to see it run, you can just go into live mode, or run it to see it working. I just wanted to make sure I have a demo out there that shows how staging works. The JavaScript snippet I'm using in the video is:  $.getJSON("https://api.github.com/users/"+ +"/repos", function(result){ $.each(result, function(i, field){ $('[name="myOutput"]').append(field.name + " ");   });         }); resolve();  If you'll actually add a $('[name="results"]').empty();  as the first link, it will clear the field for you each time you re-press the button.   

[Update May 2017 - There are new features making the consumption of REST service easier - check out this blog entry about BOPs] One of the frequent requests we get when we demo ABCS is - can I invoke...

DevCS - DevOps + Agile

Agile Development with Oracle Developer Cloud Service and JDeveloper 12.2.1

I blogged in the past about using Oracle Developer Cloud Service (DevCS) together with JDeveloper/ADF to manage your code and automate your builds. Since I wrote those blog entries, we released a new version of JDeveloper (12.2.1) that added deeper integration with the Developer Cloud Service functionality for tracking tasks/issues. In parallel Developer Cloud Service also added various features with one of the new areas being covered is managing sprints and an agile development processes.  I thought it might be interesting to show some of the new features of both products working togethers. In the video below you'll see how to: Connect to DevCS and its projects from inside JDeveloper Leverage the Team view in JDeveloper (tasks, builds, and code repositories) Interact with Tasks/Issues in JDeveloper Handle Git transactions Associate code commits with specific tasks Monitor team activity in the Team Dashboard Create Agile boards and manage sprints in Developer Cloud Service One other interesting feature I'm not showing above is the ability to do code reviews on your code by team members - before those are merged into your main code line. If you want to try Developer Cloud Service out, just get a trial account of the Oracle Java Cloud Service - and you'll get an instance of the Developer Cloud Service that you can use to test this new way of working. 

I blogged in the past about using Oracle Developer Cloud Service (DevCS) together with JDeveloper/ADF to manage your code and automate your builds. Since I wrote those blog entries, we released a new...

ADF & JDeveloper

Developing with Oracle MAF and Oracle ADF Business Components - The REST Edition

When Oracle ADF Mobile was released over 3 years ago, one of the first blogs I created on this topic showed how to leverage Oracle ADF Business Components to access a server database and create a mobile front end on top of it. Since then both frameworks have matured, and we learned some best practices doing implementations internally and for customers. Today I'm going to show you a better way to build this type of applications, specifically leveraging REST as the communication protocol between the ADF backend and the Oracle MAF front end. REST based integration performs much better than SOAP for this mobile scenario, and as you'll see development is as simple. Specifically I'm leveraging the Oracle A-Team Mobile Persistence Accelerator (AMPA) JDeveloper Extension- this extension simplifies MAF's interacting with REST backends, and has some cool extra features if your  REST services are based on ADF BC. I used JDeveloper 12.2.1 to expose REST services from my ADF Business Components.  If you are not familiar with how to do that, see this blog on exposing ADF BC as REST services, and then this blog about enabling CORS for ADF Business Components. The video below picks up the same application (Application14) and continues from where the previous two ended.  Now let's see the MAF development part: As you can see, it is quite easy to create your MAF UI. The AMPA extension does a lot of work for you making the access to the REST backend as easy as possible. (thanks goes out to Steven Davelaar). The AMPA extension can also generate a complete UI for you - so you can give that wizard a try to if you are  looking for even more productivity. 

When Oracle ADF Mobile was released over 3 years ago, one of the first blogs I created on this topic showed how to leverage Oracle ADF Business Components to access a server database and create a...

ADF & JDeveloper

Doughnut Chart - a Yummy Addition to Oracle ADF Faces

Another new feature in Oracle ADF 12.2.1 is the new Doughnut Chart capability. It looks like this: When I first tried to create this one, I couldn't find the option for doughnut chart in the JDeveloper wizard. Then I was told that a doughnut is just a pie with a hole in the center - so you actually just need to create a pie chart, and then specify some properties. And indeed, if you'll look at the property inspector for pie charts you'll see a few new properties you can leverage.  For example there is the InnerRadius property - that expects a value between 1 and 0 - this controls how big is the hole in your doughnut. Another nice capability is the you can put some filling in your doughnut - basically put some text that will go in the middle empty area. You do this by using centerLabel property. In the example above I used the center of the doughnut to report the total salary of a department - using a groovy sum expression in the Departments ViewObject - learn how here. (Don't forget to use the centerLabelStyle property to assign it a bigger font - a best practice from the Oracle Alta UI book). Here is the code from the JSF page: <dvt:pieChart selectionListener="#{bindings.EmployeesView4.collectionModel.makeCurrent}" dataSelection="single" id="pieChart1" var="row" value="#{bindings.EmployeesView4.collectionModel}" centerLabel="Total Salary: #{bindings.SumSalary.inputValue}" innerRadius="0.7" centerLabelStyle="font-size:large;" title="Salary BreakDown" sliceLabelPosition="inside"> <dvt:chartLegend id="cl1" position="bottom"/> <dvt:pieDataItem id="di1" label="#{row.LastName}" value="#{row.Salary}"/></dvt:pieChart> Try it out - it's a yummy new addition to Oracle's set of bakery based charts. 

Another new feature in Oracle ADF 12.2.1 is the new Doughnut Chart capability. It looks like this: When I first tried to create this one, I couldn't find the option for doughnut chart in the JDeveloper...

ADF & JDeveloper

Enabling CORS for ADF Business Component REST Services

CORS (which stands for Cross-Origin Resource Sharing) is a setting that will enable your REST services running on one server to be invoked from applications running on another server. I first encountered this when I was trying to run an Oracle JET project in my NetBeans IDE that will access a set of REST services I exposed using Oracle ADF Business Component in my JDeveloper environment. Since NetBeans runs the HTML on a GlassFish instance, while JDeveloper ran the ADF BC layer on a WebLogic instance I got the dreaded No 'Access-Control-Allow-Origin' header is present error:  XMLHttpRequest cannot load http://127.0.0.1:7101/Application14-RESTWebService-context-root/rest/1/dept/20. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access. There is no built-in functionality to enable CORS for ADF BC in JDeveloper, but I found it very easy to leverage the CORS Filter libraries to do this. All you need to do is add the two JAR files it provides to your project and configure the web.xml to support the filter and the specific REST operations you want to enable CORS for. Here is a quick video showing you the complete setup (using the REST ADF BC project created here). The web.xml addition is:    <filter>    <filter-name>CORS</filter-name>    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>            <init-param>                <param-name>cors.supportedMethods</param-name>                <param-value>GET, POST, HEAD, PUT, PATCH, DELETE</param-value>        </init-param>  </filter>  <filter-mapping>    <filter-name>CORS</filter-name>    <url-pattern>/*</url-pattern>  </filter-mapping> If you follow my approach in the video and add the JARs as a new user library to JDeveloper and don't forget to check the "Deploy by Default" check box for the library.

CORS (which stands for Cross-Origin Resource Sharing) is a setting that will enable your REST services running on one server to be invoked from applications running on another server. I first...

ADF & JDeveloper

Remote TaskFlows/Remote Region - For Advanced Reusability in Oracle ADF

A new feature in Oracle ADF 12.2.1 is Remote TaskFlows (or Remote Regions) - this allows one application to have regions inside it that are populated from taskflows that are running as part of another application. Initially some of you might be a bit confused - "wasn't this something that we were able to do with ADF libraries already? We could just package a taskflow from one app as an ADF library and use that library in the other application". The slight distinction here is that the library approach had the taskflow running as part of your consuming application. Remote task flows on the other hand have the taskflow running as part of the other application and don't require the creation of a library. As a result they also don't require an ADF library update when the taskflow changes- the minute the changes are deployed on the remote server, your application will get the new version.  One way of thinking about remote taskflows is as adding a "portal" like functionality to your ADF app - allowing one app to display parts of another app leveraging the other app resources for executing any logic.  Here is a quick video demoing how to configure and run this. The URLs you'll need for creating the remote region resource connection are: http://yourserver:port/your-context-root/rtfquery and http://yourserver:port/your-context-root/rr Note that there are some limitation on the type and functionality of taskflows that can be exposed as remote taskflows. And there are other things to consider such as security and session timeout settings. So have a read through the remote region documentation before you start leveraging this feature. A couple of notes. 1. In the currently available 12.2.1 version of JDeveloper from OTN, there is a slight bug that will prevent you from creating the connection to the remote task flow - there is a patch available for this from Oracle Support - request the patch for bug 22132843 or 22093099. 2. At my OOW session about new features I mentioned that remote task flows are loaded in parallel, that is actually still not the case, while we started work on this capability - it didn't made it into 12.2.1. So remote task flows behave like other task flows and load in sequential way right now. 

A new feature in Oracle ADF 12.2.1 is Remote TaskFlows (or Remote Regions) - this allows one application to have regions inside it that are populated from taskflows that are running as part of another...

ADF & JDeveloper

REST based CRUD with Oracle ADF Business Components

A key new feature in Oracle ADF 12.2.1 is the ability to expose ADF Business Components through REST/JSON interfaces. REST/JSON is the preferred interface for many client side UI technologies to access remote backend services - as examples both Oracle JET and Oracle MAF leverage REST as the way to access data from remote servers.  Oracle ADF makes it very simple to expose your existing business components as REST services - all through a declarative set of dialogs. Once you published the service interface for a view object, you should be able to do the full set of CRUD operation on that object through different REST action: GET - will do a Read POST - will do a Create PATCH - will do an Update DELETE - will do a Delete One thing that you'll want to verify is that when you are passing JSON data back into the REST interface you specify in the header that: Content-Type is application/vnd.oracle.adf.resourceitem+json otherwise you'll get an error along the lines of: oracle.adf.internal.model.rest.core.exception.CannotParseContentException: The content type is not a ADFm REST entity. Content-Type: text/plain  In the video below I show very quickly how to expose a REST interface and then how to invoke all the CRUD operations directly from the chrome app "Postman".  These new feature can make your Oracle ADF business services part of any new application that prefers to use REST/JavaScript/HTML5 type of architecture. Read more about exposing Oracle ADF BC as REST in the documentation. 

A key new feature in Oracle ADF 12.2.1 is the ability to expose ADF Business Components through REST/JSON interfaces. REST/JSON is the preferred interface for many client side UI technologies to access...

ADF & JDeveloper

Responsive UI in Oracle ADF 12.2.1 with the MatchMediaBehavior Tag

Another very powerful addition to the responsive capabilities of ADF Faces in version 12.2.1 is the new af:matchMediaBehavior tag. It allows you to control almost every bit of your UI and change properties in response to changes in the viewport size. Check out what it can do in this video: Note that in the mediaQuery you can use other type of CSS media queries.  The code for the page in the demo is        <af:panelSplitter id="ps1" orientation="horizontal" splitterPosition="201">                <f:facet name="first">                    <af:panelFormLayout id="pfl1" labelAlignment="start">                        <af:matchMediaBehavior matchedPropertyValue="top" propertyName="labelAlignment"                                               mediaQuery="screen and (max-width: 768px)"/>                        <af:inputText label="Label 1" id="it1"/>                        <af:inputText label="Label 2" id="it2"/>                        <f:facet name="footer"/>                    </af:panelFormLayout>                </f:facet>                <f:facet name="second">                    <af:panelFormLayout id="pfl2" labelAlignment="start" rows="2">                        <af:matchMediaBehavior matchedPropertyValue="top" propertyName="labelAlignment"                                               mediaQuery="screen and (max-width: 900px)"/>                        <af:matchMediaBehavior matchedPropertyValue="4" propertyName="rows"                                               mediaQuery="screen and (max-width: 800px)"/>                        <af:inputText label="Label 1" id="it3"/>                        <af:inputText label="Label 2" id="it4"/>                        <f:facet name="footer"/>                        <af:inputListOfValues label="Label 1" popupTitle="Search and Result Dialog" id="ilov1"/>                        <af:inputFile label="Label 1" id="if1"/>                    </af:panelFormLayout>                </f:facet>                <af:matchMediaBehavior matchedPropertyValue="vertical" propertyName="orientation"                                       mediaQuery="screen and (max-width: 768px)"/>                <af:matchMediaBehavior matchedPropertyValue="100" propertyName="splitterPosition"                                       mediaQuery="screen and (max-width: 768px)"/>            </af:panelSplitter>     

Another very powerful addition to the responsive capabilities of ADF Faces in version 12.2.1 is the new af:matchMediaBehavior tag. It allows you to control almost every bit of your UI and...

ADF & JDeveloper

Introducing the Masonry Layout in Oracle ADF 12.2.1

One of the focus areas for Oracle ADF 12.2.1 was simplifying the creation of responsive UIs, and one of the new components that supports this is the af:masonryLayout component. It allows you to define areas on your page that act as tiles and automatically re-arrange themselves to match the browser's window size. This layout is very useful for dashboard type of pages where you are showing all sorts of information.  In the video below I show you the very basic way to use this out of the box. As mentioned in the video there are built in styleClasses in ADF for the size of masonry tiles. They are in the format of AFMasonryTileSize1x1 with support for 1x2,1x3,2x1,2x2,3x1,3x2 The Masonry Layout can contain any component you want (not just group layout as shown in the page), as long as you give that component the right AFMasonryTileSize style.  You can further control the sizing and coloring of the tiles using styleClasses that you define in a skin file. For example in the video I used the following style to make sure you can actually see the panelGroupLayout tiles on the page.  .tileStyle{background-color:gray;border: black;border-width: 2px; } The actual code in the JSF page is:<af:masonryLayout id="ml1"> <af:panelGroupLayout id="pgl1" styleClass="AFMasonryTileSize2x1 tileStyle"/> <af:panelGroupLayout id="pgl2" styleClass="AFMasonryTileSize2x1 tileStyle"/> <af:panelGroupLayout id="pgl3" styleClass="AFMasonryTileSize1x1 tileStyle"/> <af:panelGroupLayout id="pgl4" styleClass="AFMasonryTileSize3x1 tileStyle"/></af:masonryLayout>

One of the focus areas for Oracle ADF 12.2.1 was simplifying the creation of responsive UIs, and one of the new components that supports this is the af:masonryLayout component. It allows you to define...

ADF & JDeveloper

OOW and JavaOne 2015 - Where I'll Be

It's that time of the year again, and next week is going to be crazy busy for us at Oracle OpenWorld and at JavaOne. In case you want to catch me, here is a list of the locations where I'll be: Building iOS Apps with Java 8 [CON1588] Monday, Oct 26, 12:30 p.m. | Hilton—Continental Ballroom 4 Build Responsive Web Applications with Oracle ADF [HOL10380] Monday, Oct 26, 5:00 p.m. | Hotel Nikko—Nikko Ballroom III (3rd Floor) General Session: Revolutionizing Application Development with Oracle Cloud [GEN9500]  Tuesday, Oct 27, 11:00 a.m. | Moscone South—103  Meet the Experts: Oracle’s Development Tools and Frameworks [MTE10022] Tuesday, Oct 27, 6:15 p.m. | Moscone South—300 Oracle Application Development Framework and Oracle JDeveloper—What’s New and How to Use It [CON8333] Wednesday, Oct 28, 1:45 p.m. | Moscone South—304 Building iOS Apps with Java 8 [CON1588] Thursday, Oct 29, 9:00 a.m. | Hilton—Continental Ballroom 1/2/3 Moving Oracle ADF to the Cloud—Development and Deployment in the New Age [CON8332] Thursday, Oct 29, 1:15 p.m. | Moscone South—270 In between you could also catch me at the Oracle demo ground in Moscone south (mostly in the Oracle Application Builder Cloud Service), and at the JavaOne GeekBar on Monday. At the rest of the time, I'll try and catch some of the sessions on this list. See you there...

It's that time of the year again, and next week is going to be crazy busy for us at Oracle OpenWorld and at JavaOne. In case you want to catch me, here is a list of the locations where I'll be: Building...

ADF & JDeveloper

Hot Deployment in JDeveloper 12c - Don't Stop/Start Your App

Old habits are hard to get rid off, and I still see long time users of JDeveloper (and also many new users) who are stopping/starting their application on the embedded WebLogic each time that they make a change or addition to their code. Well you should stop it! (I mean stop stopping the application). For a while now, JDeveloper has support for hot deployment that means that when you do most of the changes to your code you just need to do save-all followed by a rebuild of your viewController project - and that's it. You can then go to your browser and reload your page - and the changes will be reflected there.  This will not only save you the time it takes to undeploy and redeploy your app, it will also reduce the amount of memory you use since frequent redeployment of the app on the embedded WebLogic leads to bigger memory consumption. In the demo below I use JDeveloper 12.1.3 to show you that I can just do the save->rebuild and pick up: Changes in the JSF file Changes to the JSF configuration file adfc-config.xml New classes that are added to both the model and viewController projects Changed to the ADF configuration files (pagedefs, data binding, data controls) So for most cases, you should be covered with this hot-deployment capability. There are some cases that will require a redeploy of the application (for example if you add a new skin css file, or if you change some runtime configuration of your app in web.xml) but for most cases you don't need to continue with the stop/start habit.

Old habits are hard to get rid off, and I still see long time users of JDeveloper (and also many new users) who are stopping/starting their application on the embedded WebLogic each time that they...

Leveraging Oracle Developer Cloud Service in SQL and PL/SQL Projects - lifecycle and team collaboration

[Note - A newer version of this demo uses new functionality in DevCS to execute SQLcl command - see these entries - Part 1, Part 2] Usually my demos are targeted at Java developers, but I realize that a lot of developers out there are not using Java, for example in the Oracle install base there is a huge section of PLSQL developers. This however doesn't change their requirements from a development platform. They can still benefit from version management and code review functionality. They still need to track bugs/issues and requirements from their users, and they still need to collaborate in a team environment.  So I decided to try out and see what would be the development lifecycle experience for a PL/SQL developer if they'll leverage the services provided by the Oracle Developer Cloud Service - here is a demo that shows a potential experience.  What you'll see in the demo:   Using JDeveloper to create DB Diagrams, Tables and PL/SQL code Version manage PL/SQL and SQL with Git Defining a cloud project and adding users Check code in, and branch PL/SQL functions Tracking tasks for developers Code review by team members Build automation (with Ant) - and almost a deploy to the DB   As you can see it is quite a nice complete solution that is very quick to setup and use. It seems that the concepts of continuous integration in the world of PL/SQL development are not yet a common thing. In the demo I use the Ant SQL command to show how you could run a SQL script you created to create the objects directly in the database - which is probably the equivalent of doing a deployment in the world of Java. However if you prefer you can use Ant for example to copy files, zip them, or do many other tasks such as run automated testing frameworks. The Ant task I used is this:   <path id="antclasspath">     <fileset dir=".">       <include name="ojdbc7.jar"/>     </fileset>   </path>    <target name="deploy">     <sql driver="oracle.jdbc.OracleDriver" userid="hr2" password="hr"          url="jdbc:oracle:thin:@//server:1521/sid" src="./script1.sql" classpathref="antclasspath"/>   </target>  I had both the ojdbc7.jar file and the script file at the root of the project for convenience.  While my demo uses JDeveloper - you should be able to achieve similar functionality with any tool that supports Git. In fact if you rather not use a tool you can simply use command lines to check your files directly into the cloud.    

[Note - A newer version of this demo uses new functionality in DevCS to execute SQLcl command - see these entries - Part 1, Part 2] Usually my demos are targeted at Java developers, but I...

ADF & JDeveloper

Leveraging Icon Fonts (Font Awesome) in Oracle ADF - 500 New Icons for your app

Icon fonts are a growing trend among web developers, they make it quite simple to add icons to your web site and resize them for better responsive design. Font Awesome is a popular open source icon font - providing over 500 icons that you can add to your application. I got several questions over the past couple of weeks about using these icons in ADF applications, so here is a short video showing you how to set this up with ADF 12.1.3 and using skins. (Quick note - before 12.1.3 you couldn't include these type of font in the skin css file - and you would have needed to directly refer to the CSS file from each page in your app - one more reason to upgrade your application to 12.1.3). The basic steps: Create a new skin for your ADF application (if you don't know how to do this, see this blog entry). Download font awesome and copy the font-awesome-4.3.0 directory into your new skin directory Copy the @font-face entry from the font-awesome.min.css file into your new skin.css file Update the path in the various URI entries so it reflects the new relative location of the font files Create class entries in your skin CSS for the icons you want to use - remember to add a font-family: FontAwesome; to make sure they use the new font. Assign the classes to the styleclass property of your ADF Faces components. Here is a demo showing how it is set up and how it works: The skin1.css in the video is this: @charset "UTF-8"; /**ADFFaces_Skin_File / DO NOT REMOVE**/ @namespace af "http://xmlns.oracle.com/adf/faces/rich"; @namespace dvt "http://xmlns.oracle.com/dss/adf/faces"; @font-face {     font-family: 'FontAwesome';     src: url('font-awesome-4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0');     src: url('font-awesome-4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0')format('embedded-opentype'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0')format('woff2'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0')format('woff'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0')format('truetype'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')format('svg');     font-weight: normal;     font-style: normal; } .heart:before {     content: "\f004";     font-family: FontAwesome; } .mail:before {     content: "\f003";     font-family: FontAwesome; }  If you want to see how this could help with responsive design try this in your CSS as an example. Then resize the width of the browser window to see how the icons will change their size dynamically: .heart:before {     content: "\f004";     font-family: FontAwesome;     font-size: x-large; } .mail:before {     content: "\f003";     font-family: FontAwesome;     font-size: x-large; } @media screen and (max-width:950px) {     .heart:before {         content: "\f004";         font-family: FontAwesome;         font-size: small;     }     .mail:before {         content: "\f003";         font-family: FontAwesome;         font-size: small;     }

Icon fonts are a growing trend among web developers, they make it quite simple to add icons to your web site and resize them for better responsive design. Font Awesome is a popular open source icon...

ADF & JDeveloper

Oracle Developer Cloud Service - Automating Builds for Oracle ADF Applications

Following up on the previous blog that showed how to get your ADF application into the Developer Cloud Service git repository, this entry will show you the next step in the lifecycle - executing builds. The Oracle Developer Cloud Service (DevCS) supports build automation with both Maven and Ant scripts - and in this demo I'm showing you how to use the Ant option. One of the unique aspects of DevCS for customers who are  using Oracle ADF and JDeveloper is that the cloud comes pre-configured with the ADF libraries needed to compile your code, and also with support for OJDeploy so you can leverage deployment profiles that you defined for your application. In fact DevCS comes with support for two ADF versions - 11.1.1.7.1 and 12.1.3 (as of the time of this blog). In the video below you'll see How to add a build file for your ADF application How to  configure the build file to work in the cloud environment How to define a build job and execute it How to look at the log files for the build job How to automate the build execution to happen when changes are committed to the git repository The build in the example above just does the packaging, but in more realistic scenarios you can use similar build processes to create ADF libraries from projects, automate testing, modify configuration and more. There are a couple of files that are used in the demo that you might want to use in your implementation: The build.xml file:  <property environment="env" /> <property file="build.properties"/><target name="deploy" description="Deploy JDeveloper profiles"><taskdef name="ojdeploy" classname="oracle.jdeveloper.deploy.ant.OJDeployAntTask" uri="oraclelib:OJDeployAntTask" classpath="${oracle.jdeveloper.ant.library}"/><ora:ojdeploy xmlns:ora="oraclelib:OJDeployAntTask" executable="${oracle.jdeveloper.ojdeploy.path}" ora:buildscript="${oracle.jdeveloper.deploy.dir}/ojdeploy-build.xml" ora:statuslog="${oracle.jdeveloper.deploy.dir}/ojdeploy-statuslog.xml"><ora:deploy><ora:parameter name="workspace" value="${oracle.jdeveloper.workspace.path}"/><ora:parameter name="profile" value="${oracle.jdeveloper.deploy.profile.name}"/><ora:parameter name="nocompile" value="false"/><ora:parameter name="outputfile" value="${oracle.jdeveloper.deploy.outputfile}"/></ora:deploy></ora:ojdeploy></target> The build.properties file I used can be found here. The mask for the build automatic execution is */1 * * * * Note that in the properties file there are references to environment variables that you will need to change if you are looking to deploy an 11.1.1.* app - specifically the options for 12 and 11 are:WLS_HOME_12C3=/opt/Oracle/Middleware12c3/wlserverWLS_HOME_11G=/opt/Oracle/Middleware/wlserver_10.3 MIDDLEWARE_HOME_12C3=/opt/Oracle/Middleware12c3 MIDDLEWARE_HOME_11G=/opt/Oracle/MiddlewareORACLE_HOME_12C3=/opt/Oracle/Middleware12c3/jdeveloper ORACLE_HOME_11G=/opt/Oracle/Middleware/jdeveloperThe next logical step in your app lifecycle is to automate the deployment of the ADF application to the Oracle Java Cloud Service. If you are interested in this check out - Automating Deployment of the Summit ADF Sample Application to the Oracle Java Cloud Service

Following up on the previous blog that showed how to get your ADF application into the Developer Cloud Service git repository, this entry will show you the next step in the lifecycle - executing...

ADF & JDeveloper

Using the Oracle Developer Cloud Service for Git version management for JDeveloper/ADF apps

The Oracle Developer Cloud Service (DevCS for short) provides a complete cloud-hosted development platform for your team. This makes it very easy to start adopting development best practices for your team, and adopt a more agile development approach. If you haven't tried it yet, you should! It's simple to get a free trial instance - just sign up for a trial of the Java cloud service (which, by the way, will take you through anOracle ADF based registration wizard) and an instance of the Developer cloud service will be provisioned for you as part of the trial. No need for any additional machines or installations on your side. I'm going to write a couple of blogs about the various features that DevCS provides such as build and continuous integration, but let's start with the very basic feature we all should be using - source code management. Every project needs to do version management - even if you are a single developer - and with DevCS there is no server and network setup required. Create a new DevCS project and 10 seconds later you have your git server accessible from any computer that has internet access. The demo below is using JDeveloper 12.1.3 and the sample summit ADF application that you can get from OTN.  In the demo I start from scratch and demo how to create a new DevCS project check code into the git repository branch my code to work on fixes submit the changes back how to do code review by team members merge fixes to the master branch Go ahead try it out with your project and your team. If you are new to git (which has quickly became the new standard for source management) - check out the Oracle A-Team blog entry that explains a good workflow for team work with git that you can adopt. Have any further questions about using the Developer Cloud Service? Ask them on the DevCS community page. 

The Oracle Developer Cloud Service (DevCS for short) provides a complete cloud-hosted development platform for your team. This makes it very easy to start adopting development best practices for your...

ADF & JDeveloper

Dynamically refresh a part of a page (PPR) in Oracle MAF

A common question for developers who are just starting with Oracle MAF, especially if they have a background in Oracle ADF, is how do you do a partial page refresh in Oracle MAF. Partial Page Refresh basically means that I want to change something in my UI based on another event in the UI - for example hide or show a section of the page. (In ADF there is a partialTrigger property for components which is not there in MAF). In MAF the UI behaves differently - it is not based on JSF after all - the UI directly reflects changes in managed beans as long as it knows about changes there. How does it know about changes? For this you need to enable firing change event notifications. This is actually quite easy to do - just turn on the checkbox in JDeveloper's accessors generation and it will do the job for you. Here is a quick demo showing you how to achieve  this: Here is the code used. in AMX page:     <amx:tableLayout id="tl1">      <amx:rowLayout id="rl1">        <amx:cellFormat id="cf2">          <amx:listView var="row" showMoreStrategy="autoScroll" bufferStrategy="viewport" id="lv1">            <amx:listItem id="li1">              <amx:outputText value="ListItem Text" id="ot2"/>              <amx:setPropertyListener id="spl1" from="#{'true'}" to="#{viewScope.backingPPR.showIt}"                                       type="swipeRight"/>              <amx:setPropertyListener id="spl2" from="#{'false'}" to="#{viewScope.backingPPR.showIt}"                                       type="swipeLeft"/>            </amx:listItem>          </amx:listView>        </amx:cellFormat>      </amx:rowLayout>      <amx:rowLayout id="rl2" rendered="#{viewScope.backingPPR.showIt}">        <amx:cellFormat id="cf1">          <amx:commandButton text="commandButton1" id="cb3"/>        </amx:cellFormat>      </amx:rowLayout>    </amx:tableLayout> in managed bean:     boolean showIt = false;    public void setShowIt(boolean showIt) {        boolean oldShowIt = this.showIt;        this.showIt = showIt;        propertyChangeSupport.firePropertyChange("showIt", oldShowIt, showIt);    }    public boolean isShowIt() {        return showIt;    }    public void addPropertyChangeListener(PropertyChangeListener l) {        propertyChangeSupport.addPropertyChangeListener(l);    }    public void removePropertyChangeListener(PropertyChangeListener l) {        propertyChangeSupport.removePropertyChangeListener(l);    }

A common question for developers who are just starting with Oracle MAF, especially if they have a background in Oracle ADF, is how do you do a partial page refresh in Oracle MAF. Partial Page Refresh...

ADF & JDeveloper

Implementing the Tree Navigation Oracle Alta UI Design Pattern

The Oracle Alta UI design patterns offer many new approaches for navigation in your application as you can see in the navigation patterns section. One of those is the Tree Navigation pattern - which is an updated approach to the way that many applications display menus today. While the "old" way of building these menus was using the tree component, the new design uses an interface that works better on mobile devices and is easier on the eyes. It uses animation to do in-place replacement of one level in the menu with the next one.  old new You could also use this approach to represent other types of hierarchical/master-detail relationships.  In the demo below I show you how to quickly implement such navigation pattern with ADF Faces and a combination of af:listView components along with the af:deck component. There are a bunch of further things you might want to do in your actual application beyond what the demo does. One is to show on the right side of the page the information on the object you select on the left side. Using a deck component there you can also switch that section to show either Dept or Emp data in the same area. You'll already have the actionListener in place to do the switch of display, and ADF already has the right record selected - so just dropping the same data control on the right as a form will be enough. Another nice enhancement would be to condition the showing of the right caret to be based on whether there are actually details. This should be easy to achieve with a calculated attribute using groovy - as shown here.  In the demo I also show how to invoke the makeCurrent row selection functionality from a managed bean, this allows me to do two operations when a menu option is selected. The code I use ,which is based on code I found on Ashish's blog, is: public void deptSelect(SelectionEvent selectionEvent) {        ELContext elcontext = FacesContext.getCurrentInstance().getELContext();        MethodExpression methodExpression =            FacesContext.getCurrentInstance().getApplication().getExpressionFactory().createMethodExpression(elcontext,                                                "#{bindings.DepartmentsView1.treeModel.makeCurrent}",                                                                                                             Object.class, new Class[] {                                                                                                             SelectionEvent.class });        methodExpression.invoke(elcontext, new Object[] { selectionEvent });        deck.setDisplayedChild("pgl2");        AdfFacesContext.getCurrentInstance().addPartialTarget(deck);    }  I also use styleClass="AFAppNavbarButton" for the "back" button to make it look a bit better.  The full source of the JSF page is: <?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html><f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">    <af:document title="untitled3.jsf" id="d1">        <af:messages id="m1"/>        <af:form id="f1">            <af:pageTemplate viewId="/oracle/templates/tabletFirstTemplate.jspx" id="pt1">                <f:facet name="header"/>                <f:facet name="status"/>                <f:facet name="appNav"/>                <f:facet name="globalLinks"/>                <f:facet name="footer"/>                <f:facet name="center"/>                <f:facet name="start">                    <af:deck id="d2" binding="#{mb3.deck}" displayedChild="pgl1">                        <af:panelGroupLayout id="pgl1">                            <af:listView value="#{bindings.DepartmentsView1.collectionModel}" var="item"                                         emptyText="#{bindings.DepartmentsView1.viewable ? 'No data to display.' : 'Access Denied.'}"                                         fetchSize="#{bindings.DepartmentsView1.rangeSize}" id="lv1" selection="single"                                         selectionListener="#{mb3.deptSelect}">                                <af:listItem id="li1">                                    <af:panelGridLayout id="pgl3">                                        <af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="gr1">                                            <af:gridCell marginStart="5px" width="80%" id="gc1">                                                <af:outputFormatted value="#{item.bindings.DepartmentName.inputValue}"                                                                    id="of1"/>                                            </af:gridCell>                                            <af:gridCell marginStart="5px" width="20%" marginEnd="5px" id="gc2">                                                <af:image source="func_caretright_16_ena.png" id="i1"/>                                            </af:gridCell>                                        </af:gridRow>                                    </af:panelGridLayout>                                </af:listItem>                            </af:listView>                        </af:panelGroupLayout>                        <af:panelGroupLayout id="pgl2">                            <af:button text="#{bindings.DepartmentName.inputValue}" id="b1"                                       actionListener="#{mb3.backToDept}" styleClass="AFAppNavbarButton"                                       icon="/func_caretleft_16_ena.png"/>                            <af:listView value="#{bindings.EmployeesView4.collectionModel}" var="item"                                         emptyText="#{bindings.EmployeesView4.viewable ? 'No data to display.' : 'Access Denied.'}"                                         fetchSize="#{bindings.EmployeesView4.rangeSize}" id="lv2">                                <af:listItem id="li2">                                    <af:panelGridLayout id="pgl4">                                        <af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="gr2">                                            <af:gridCell marginStart="5px" width="80%" id="gc3">                                                <af:outputFormatted value="#{item.bindings.LastName.inputValue}"                                                                    id="of2"/>                                            </af:gridCell>                                            <af:gridCell marginStart="5px" width="20%" marginEnd="5px" id="gc4">                                                <af:image source="func_caretright_16_ena.png" id="i2"/>                                            </af:gridCell>                                        </af:gridRow>                                    </af:panelGridLayout>                                </af:listItem>                            </af:listView>                        </af:panelGroupLayout>                        <af:transition triggerType="forwardNavigate" transition="slideLeft"/>                        <af:transition triggerType="backNavigate" transition="slideRight"/>                    </af:deck>                </f:facet>                <f:facet name="end"/>                <f:attribute name="endWidth" value="0px"/>                <f:attribute name="startWidth" value="200px"/>            </af:pageTemplate>        </af:form>    </af:document></f:view> 

The Oracle Alta UI design patterns offer many new approaches for navigation in your application as you can see in the navigation patterns section. One of those is the Tree Navigation pattern - which...

ADF & JDeveloper

Dynamcially add components to an Oracle MAF AMX page & show and hide components

A question I saw a couple of times about Oracle MAF AMX pages is "how can I add a component to the page at runtime?". In this blog entry I'm going to show you a little trick that will allow you to dynamically "add" components to an AMX page at runtime, even though right now there is no API that allows you to add a component to an AMX page by coding. Let's suppose you want to add a bunch of buttons to a page at runtime. All you'll need to have is an array that contain entries for every button you want to add to the page. We are going to use the amx:iterator component that is bounded to the above array and simply goes over the records and renders a component for each one. Going one step beyond that, I'm going to show how to control which components from that array actually shows up, based on another value in the array. So this is another thing you get to see in this example and this is how to dynamically show or hide a component in an AMX page with conditional EL. Usually you'll use this EL in the rendered property of a component, but in the iterator situation we need to use another approach using the inlineStyle that you change dynamically. You can further refine this approach to control which type of component you render - see for example this demo I did for regular ADF Faces apps and apply a similar approach. By the way - this demo is done with Eclipse using OEPE - but if you are using JDeveloper it should be just as easy :-)  &amp;lt;p&amp;gt; &amp;lt;/p&amp;gt; Here is the relevant code from the AMX page: <amx:iterator value="#{bindings.emps1.collectionModel}" var="row" id="i2"> <amx:commandButton id="c1" text="#{row.name}" inlineStyle="#{row.salary >4000 ? 'display: none;' : 'display: inline;'}"> <amx:setPropertyListener id="s1" from="#{row.name}" to="#{viewScope.title}"/> </amx:commandButton> </amx:iterator> 

A question I saw a couple of times about Oracle MAF AMX pages is "how can I add a component to the page at runtime?". In this blog entry I'm going to show you a little trick that will allow you to...

ADF & JDeveloper

Developing Your First Oracle Alta UI page with Oracle ADF Faces

At Oracle OpenWorld this year Oracle announced the new Oracle Alta UI - a set of UI guidelines that will help you create better looking and functioning applications. We use these guidelines to build all our modern cloud based applications and products - and you can use it too today if you are on JDeveloper 12.1.3.  The Alta UI site is at http://bit.ly/oraclealta Take a look for example at one page from the master details pattern page: You might be wondering how do I go about starting to create such an Alta page layout? Below is a quick video that shows you how to build such a page from scratch. A few things you'll see during the demo: Basic work with the panelGridLayout - for easier page structure Working with the new tablet first page template  Enabling selection on a listView component Working with the circular status meter The new AFAppNavbarButton style class  Hot-swap usage to reduce page re-runs One point to raise about this video is that it focuses more on getting the layout and look rather then the Alta way of designing an application flow and content. In a more complete Alta mind-set you'll also figure out things like fields that probably don't need to be shown (such as the employee_id), you'll think more about "why is the user on this page and what will he want to do here?" which might mean you'll add things like a way to see all the employees in a department in a hierarchy viewer rather than a form that scroll a record at a time.  There are more things you can do to this page to get even better functionality, but on those in future blog entries... 

At Oracle OpenWorld this year Oracle announced the new Oracle Alta UI - a set of UI guidelines that will help you create better looking and functioning applications. We use these guidelines to build...

ADF & JDeveloper

An OOW Summary from the ADF and MAF perspective

Another Oracle OpenWorld is behind us, and it was certainly a busy one for us. In case you didn't have a chance to attend, or follow the twitter frenzy during the week, here are the key take aways that you should be aware of if you are developing with either Oracle ADF or Oracle MAF.  Oracle Alta UI We released our design patterns for building modern applications for multiple channels. This include a new skin and many samples that show you how to create the type of UIs that we are now using for our modern cloud based interfaces. All the resources are at http://bit.ly/oraclealta The nice thing is that you can start using it today in both Oracle ADF Faces and Oracle MAF - just switch the skin to get the basic color scheme. Instructions here. Note however that Alta is much more than just a color change, if you really want an Alta type UI you need to start designing your UI differently - take a look at some of the screen samples or our demo application for ideas. Cloud Based Development A few weeks before OOW we released our Developer Cloud Service in production, and our booth and sessions showing this were quite popular. For those who are not familiar, the Developer Cloud Service, gives you a hosted environment for managing your code life cycle (git version management, Hudson continuos integration, and easy cloud deployment), and it also gives you a way to track your requirements, and manage team work. While this would be relevant to any Java developing team, for ADF developers there are specific templates in place to make things even easier. You can get to experience this in a trial mode by getting a trial Java service account here. Another developer oriented cloud service that got a lot of focus this year was on the upcoming Oracle Mobile Cloud Service - which includes everything your team will need in order to build mobile backends (APIs, Connectors, Notification, Storage and more). We ran multiple hands-on labs and sessions covering this, and it was featured in many keynotes too.  In the Application development tools general session we also announced that in the future we'll provide a capability called Oracle Mobile Application Accelerator (which we call Oracle MAX for short) which will allow power users to build on device mobile applications easily through a web interface. The applications will leverage MAF as the framework, and as a MAF developer you'll be able to provide additional templates, components and functionality for those. Another capability we showed in the same session was a cloud based development environment that we are planning to add to both the Developer Cloud Service and the Mobile Cloud Service - for developers to be able to code in the cloud with the usual functions that you would expect from a modern code editor. The Developer Community is Alive and Kicking The ADF and MAF sessions were quite full this year, and additional community activities were successful as well. Starting with a set of ADF/MAF session by users on the Sunday courtesy of ODTUG and the ADF EMG. In one of the sessions there members of the community announced a new ADF data control for XML. Check out the work they did! ODTUG also hosted a nice meet up for ADF/MAF developers, and announced their upcoming mobile conference in December. They also have their upcoming KScope15 summer conference that is looking for your abstract right now! Coding Competition Want to earn some money on the side? Check out the Oracle MAF Developer Challenge - build a mobile app and you can earn prizes that range from $6,000 to $1,000. Sessions With so many events taking place it sometime hard to hit all the sessions that you are interested in. And while the best experience is to be in the room, you might get some mileage from just looking at the slides. You can find the slides for many sessions in the session catalog here. And a list of the ADF/MAF sessions here. See you next year. 

Another Oracle OpenWorld is behind us, and it was certainly a busy one for us. In case you didn't have a chance to attend, or follow the twitter frenzy during the week, here are the key take aways...

ADF & JDeveloper

Required Field Validation in Oracle MAF

A short entry to explain how to do field validation in Oracle MAF. As an example let's suppose you want a field to have a value before someone clicks to do an operation. To do that you can set the field's attribute for required and "show required" like this:   <amx:inputText label="label1" id="it1" required="true" showRequired="true"/>  Now if you run your page, leave the field empty and click a button that navigates to another page, you'll notice that there was no indication of an error. This is because you didn't tell the AMX page to actually do a validation.   To add validation you use an amx:validationGroup tag that will surround the fields you want to validate. For example:      <amx:validationGroup id="vg1">     <amx:inputText label="label1" id="it1" required="true" showRequired="true"/>     </amx:validationGroup> Then you can add a amx:validateOperation tag to the button that does navigation and tell it to validate the group you defined before (vg1 in our example).        <amx:commandButton id="cb2" text="go" action="gothere">         <amx:validationBehavior id="vb1" group="vg1"/>       </amx:commandButton> Now when you run the page and try to navigate you'll get your validation error.

A short entry to explain how to do field validation in Oracle MAF. As an example let's suppose you want a field to have a value before someone clicks to do an operation. To do that you can set the...

ADF & JDeveloper

REST enable your Database for CRUD with TopLink/EclipseLink and JDeveloper

It seems that REST interfaces are all the rage now for accessing your backend data, this is especially true in the world of mobile development. In this blog I'm going to show you how easy it is to provide a complete REST interface for your database by leveraging TopLink/EclipseLink and JDeveloper. This relies on a capability that is available in TopLink 12c where every JPA entity that you have created can be RESTified with a simple servlet that TopLink provides. All you need to do is locate the file toplink-dataservices-web.jar on your machine (this is included in the JDeveloper install so you can just search that directory) and then package your project as a WAR. At that point you'll be able to get a complete CRUD set of operation for this entity. In the video below I'm to retrieving departments by their id using a URL like this: http://127.0.0.1:7101/TLServices-Project1-context-root/persistence/v1.0/out/entity/Departments/30 (out - name of my persistence unit. Departments - name of my entity)  A complete list of all the REST URL syntax is here part of the TopLink documentation on this feature.: http://docs.oracle.com/middleware/1213/toplink/solutions/restful_jpa.htm#CHDEGJIG Check out how easy the process is in this video (using MySQL database): Here are some additional URL samples for getting other types of queries:Get all the Employees -  http://127.0.0.1:7101/TLServices/persistence/v1.0/out/query/Employees.findAllGet all the Employees in department 50 - http://127.0.0.1:7101/TLServices/persistence/v1.0/out/entity/Departments/50/employeesListExecuting a specific named query (@NamedQuery(name = "Employees.findByName", query = "select o from Employees o where o.first_name like :name order by o.last_name"))  -http://127.0.0.1:7101/TLServices/persistence/v1.0/out/query/Employees.findByName;name=John

It seems that REST interfaces are all the rage now for accessing your backend data, this is especially true in the world of mobile development. In this blog I'm going to show you how easy it is...

ADF & JDeveloper

ADF Faces Responsive Design - 12.1.3 Update

Update Nov2016 - if you are using ADF 12.2.1 there are new features that make responsive design with JDeveloper even simpler. See Responsive UI in Oracle ADF 12.2.1 with the MatchMediaBehavior Tag and Introducing the Masonry Layout in Oracle ADF 12.2.1I while back I blogged about a technique for doing responsive design with JDeveloper 12.1.2 using media queries and css, but it is time for a small update for those who are using 12.1.3 - since there are some new capabilities that you can leverage.  (I would still recommend watching the other video as it shows some other things you can do with the same technique like changing the size of icons/fonts). The major change in 12.1.3 is that you can now include your media query and style classes inside the skin definition. When you combine this with page templates you get very clean pages that don't need to include code for responsiveness. See the demo below for how it works. One note - in the houses demo I actually used a region that is replicated on the left side and in the panel drawer. This way you only need to code that part once. Here is the code for the skin's css file: .wide {     display: inline; } .narrow {     display: none; } @media screen and (max-width:950px) {             .narrow {                 display: inline;             }             .wide {                 display: none;             }         } And here is the code for the page template:  <?xml version='1.0' encoding='UTF-8'?> <af:pageTemplateDef xmlns:af="http://xmlns.oracle.com/adf/faces/rich" var="attrs" definition="private"                     xmlns:afc="http://xmlns.oracle.com/adf/faces/rich/component">     <af:xmlContent>         <afc:component>             <afc:description/>             <afc:display-name>collapseTemplate</afc:display-name>             <afc:facet>                 <afc:facet-name>right</afc:facet-name>             </afc:facet>             <afc:facet>                 <afc:facet-name>drawer</afc:facet-name>             </afc:facet>             <afc:facet>                 <afc:facet-name>center</afc:facet-name>             </afc:facet>         </afc:component>     </af:xmlContent>     <af:panelGridLayout id="pt_pgl1">         <af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="pt_gr1">             <af:gridCell marginStart="5px" width="20%" id="pt_gc1" >             <af:panelGroupLayout layout="vertical" styleClass="wide">                 <af:facetRef facetName="right"/>                 </af:panelGroupLayout>             </af:gridCell>             <af:gridCell marginStart="5px" marginEnd="5px" width="80%" id="pt_gc2">                 <af:facetRef facetName="center"/>             </af:gridCell>             <af:gridCell  halign="stretch" width="auto" id="pt_gc3" >             <af:panelGroupLayout layout="vertical" styleClass="narrow">                 <af:panelDrawer  id="pt_pd1" height="500px">                     <af:showDetailItem id="dr1" shortDesc="Drawer 1">                         <af:facetRef facetName="drawer"/>                     </af:showDetailItem>                 </af:panelDrawer>                 </af:panelGroupLayout>             </af:gridCell>         </af:gridRow>     </af:panelGridLayout> </af:pageTemplateDef> As before you should also be setting the web.xml contextual parameter org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION  =  true

Update Nov2016 - if you are using ADF 12.2.1 there are new features that make responsive design with JDeveloper even simpler. See Responsive UI in Oracle ADF 12.2.1 with the MatchMediaBehavior Tag and...

ADF & JDeveloper

Book Review - Oracle ADF Enterprise Application Development Made Simple (Second Edition)

I got a copy of the new edition of Sten Vesterli's book about enterprise development with ADF, so I wanted to give a quick review update. I reviewed the first edition three years ago - and you can read that review here.The second edition is not drastically different from the first one, and it shouldn't be. Most of the best practices that Sten pointed out in his original book still apply today. What might have changed a bit over the years are some of the tools used by enterprises to manage their application - and this is what some of  the updates are about - for example in addition to covering Subversion there is a Git section now. In addition Sten incorporate a few more architectural and conceptual bits and pieces that he collected over the past three years working with various customers. If you want to get a video summary of the type of topics Sten covers in this books you can watch this seminar he recorded for one of our virtual developer days. This is definitely a book that should be part of the reading material for groups about to embark on Oracle ADF development project - it will save them from some common mistakes and will put them on the right track to a well structured project and team.It is worthwhile mentioning also that over the past year we at Oracle have been quite actively increasing the amount of material we are producing around those aspects and we centralize them in our ADF Architecture Square on OTN.If you haven't visited that site or subscribed to the ADF Architecture YouTube channel - it's time you'll do this to. 

I got a copy of the new edition of Sten Vesterli's book about enterprise development with ADF, so I wanted to give a quick review update. I reviewed the first edition three years ago - and you...