Monday, February 23, 2015

APEX 5.0: the way to use Theme Roller

Once you have your new application created using the Universal Theme it's time to customise your theme with Theme Roller.

Run your application and click the Theme Roller link in the APEX Developer Toolbar:


Theme Roller will open. I won't go in every section, but want to highlight the most important sections in Theme Roller in this post:
  1. Style: there're two styles that come with APEX 5.0: Blue and Gray. You can start from one of those and see how your application changes color. It will set predefined colors for the different parts of the templates.

  2. Color Wheel: when you want to quickly change your colors, an easy way to see different options is by using the Color Wheel. You've two modes: monochroom (2 points) and dual color (3 points - see screenshot). By changing one point it will map the other point to a complementary color. Next you can move the third point to play more with those colors.

  3. Global Colors: if the Color Wheel is not specific enough for what you need, you can start by customising the Global Colors. Those are the main colors of the Universal Theme and used to drive the specific components. You can still customise the different components e.g. the header by clicking further down in the list (see next screenshot).

  4. Containers etc. will allow you to define the specific components. A check icon will say it's the standard color coming with the selected style. An "x" means the color was changed and an "!" means the contrast is probably not great.
Original with style After changing colors


This is just awesome... but what if you don't like the changes you did?

Luckily you can Reset either your entire style or you can refresh the specific section by clicking the refresh icon. There's also an undo and redo button. But that is not all... for power users when you hit "ALT" when hovering a color you can just reset that color! (only that color will get a refresh icon in it and clicking it will reset it)

Note that all changes you're making are locally stored on your computer in your browsers cache (HTML5 local storage), so you don't effect other users by playing with the different colors.

Finally when you are done editing your color scheme you can hit the Save As button to save all colors to a new Style. When you close Theme Roller the style will go back how it was.
The final step to apply the new style so everybody sees that version, is to go to User Interface Details (Shared Components) and set the style to the new one.

Note that this blog post is written based on APEX 5.0 EA3, in the final version of APEX 5.0 (or 5.1) you might apply the new style from Theme Roller directly.

Want to know more about Theme Roller and the Universal Theme - we're doing an APEX 5.0 UI Training May 12th in the Netherlands.

Thursday, February 05, 2015

APEX 5.0 Fixed Headings for Interactive Reports

When you click on the Attributes of your Interactive Report there's a neath little new features included called "Heading - Fixed to" with as options: None, Region and Page


We've got this request from many customers and it has always been a pain to get it working in every condition with APEX 4.x, but no hacking anymore - it's there now in APEX 5.0.
When you start to scroll the column header will move up and the content will scroll underneath it.

Here's a quick demo:

Wednesday, February 04, 2015

APEX 5.0 EA3 - Universal Theme Styles - Gray!

In APEX 5.0 theme 42 is included - this is the Universal Theme. The theme comes with two styles: Blue and Gray.


The UI is so much improved in APEX 5, it's really a game changer. When you look at the details for example from such a style you will see it's using a Less file (Less is a CSS pre-processor) behind the scenes. So it's very easy to make changes to the CSS. But you probably even don't need to do that as the development team allows you to make customisations with ThemeRoller which generates JSON (another nice example where JSON is used - interested in JSON - I did some other posts on this blog about JSON).

To change the color for example, below you see the JSON for that.


Note that Theme Roller will generate the JSON for you. Accept from those customisations, the blue and gray style are using the exact same css.

From the Blue style many screenshots have been posted already, but I love the Gray style too, here's a screenshot when you switch the sample application's style to Gray.

Saturday, January 31, 2015

APEX 5.0 EA3 released with Universal Theme

Today Oracle released the latest Early Adopter release of APEX 5.0.


The release is packed with new features, but one of the biggest improvements you can find in the UI.

For me the Universal Theme with Theme Roller, Theme Styles and Template Options is the absolute killer feature of APEX 5.0. I can't better describe Universal Theme as how Oracle is describing it:

Universal Theme is an all-new user interface for your applications that has been built from the ground up for Application Express 5. It is a simpler, yet more capable theme that does away with excessive templates and enable effortless customization with Theme Roller, Template Options, and Theme Styles. Universal Theme is the culmination of all of our UI enhancements and aims to empower developers to build modern, responsive, sophisticated applications without requiring expert knowledge of HTML, CSS, or JavaScript.



The issue with APEX 4.x was the build-in themes became out-dated today, so many of us looked at integrating Bootstrap, Foundation or other frameworks. But APEX 5.0 has send us at WARP-speed to a new UI, suddenly out-of-the-box your applications are modern, responsive, flat, ... everything you can expect from a UI today. Many new components are now part of the UI: like the new Carousel and Cards region are some of my favourites.

If you are interested to know everything about the new UI, Roel and I teamed up with a one-day APEX 5.0 UI Training day.

Happy playing with APEX 5.0 EA3 and don't forget to give feedback to the development team, this is the last time you can before APEX 5.0 hits production.

Friday, January 30, 2015

Preparing architecture for APEX 5.0 upgrade

I doubted to set the title of this post to "Running APEX 4.2 and 5.0 in the same Oracle instance", but decided not to do that, but that is basically what I will do. Before going into details, I'll share my architecture.

In December 2013 I wrote it was time to update your APEX environment and I gave a quick overview of the architecture we're using. I thought it's time to review that post, so below you find how my preferred APEX architecture is today and tomorrow (once APEX 5 is production).


I'm using Apache as a reverse proxy in front of Tomcat. I'm not going in too much detail about which version to take: Apache v2.2 vs 2.4 and Tomcat v7 vs 8. There're many threads on the internet about that and I guess it depends your environment and your personal feeling. I've been using both versions but currently I'm on Apache v2.2 because it comes as a default with RHEL / OEL6 and SELinux is configured out of the box to protect the webserver. And for Tomcat I'm using v8 as that's the basis for the future versions of Tomcat (v9) and when you want to do Websockets for example, v8 has a more improved spec.

A few years ago we had the discussion about mod_plsql vs APEX Listener (now Oracle REST Data Services - ORDS). I think today, it's clear ORDS is the way to go as it gives you much more features and is proven technology.

For APEX I'm always on the latest version as fast as I can, as with every new release there're great improvements and fixes.

And finally the Oracle Database I'm on 12cR1 because I like the pluggable database concept and the other features it brings. I guess most people will go to 12c very soon, as 11.2 premier support ends this month. You can read more about when what is still supported in this doc.

But in this post I want to show you how easy it is to prepare your environment for APEX 5 and to test the upgrade with an architecture as above. I basically want to run APEX 4.2 and 5.0 next to each other. I'll clone my PDB and apply the APEX 5 installation on the new PDB. Next I'll configure ORDS so it knows to which database it needs to point to depending the url I'll call.

Step 1. Clone the PDB 

sqlplus / as sysdba

create pluggable database APEX50_PDB from APEX42_PDB file_name_convert=('/u01/app/oracle/oradata/cdb/APEX42_PDB','/u01/app/oracle/oradata/cdb/APEX50_PDB');


Step 2. Open the PDB and install APEX 5.0

alter pluggable database apex50_pdb open;

So now we have a new database which is a copy of our existing database open and ready to be used. Next we will need to install APEX 5.0. As the time of writing APEX 5.0 is not available yet, but it will probably be - connect to the new PDB and run @apexins... (follow the installation guide of APEX 5.0 once available!)


Step 3. Configure ORDS

With SQL Developer you can configure ORDS and add the connection to the new PDB.
In SQL Developer 4.1, first setup a connection to your ORDS (Tools > Manage REST Data Services Connections > Add Connection). Next open the ORDS Administration window (View > REST Data Services > Administration). Right click on the REST Data Services and Connect to ORDS:


You'll see the current configuration.

In order to connect to the new database we need to add a Database. Right click in Database Settings and add a new database. Before writing it back (the icon with the green up arrow - click the Test Settings button first (the icon with a v) to make sure everything is fine.

Final step is to let ORDS know that if we put in our url /apex50 we want to connect to the new database. You can do that by adding an entry in URL Mapping:


That's it...

Note: sometimes I've issues with adding the database and URL Mapping in SQL Developer, but it's as fast to do it command line too. The doc has a great example which commands to run: https://docs.oracle.com/cd/E37099_01/doc.20/e25066/config.htm#AELIG7191


Step 4. Test

When you navigate to your normal url e.g. http://localhost/ords/f?p=ABC you will see your APEX 4.2 instance, but if you navigate to http://localhost/ords/apex50/f?p=ABC you'll see the APEX 5.0 instance.

You can play a bit more with making it nicer urls or do some redirects in Apache, but I hope you get the idea how to start testing APEX 5.0 while still running APEX 4.2 too.

Tuesday, January 27, 2015

Announcement: APEX 5.0 UI Training - May 12th


APEX 5.0 will be released between now and the end of May. People who have already spent some time on the Early Adopter versions know this version is packed with new features aimed to make APEX developers even more productive, like the Page Designer.

Another striking new subset of features is aimed at creating better looking user interfaces for your APEX applications in an easy and maintainable way.

The definition of user interface components in APEX 5.0 is very different to what we're used to. For example there is a new Universal Theme with Template Options and a Theme Roller.

To get you up and running with this new toolset as quickly as possible, Dimitri Gielis of APEX R&D and Roel Hartman of APEX Consulting have joined forces and set up a one day course fully aimed at APEX 5.0 UI. So if you want to know not only how to use the new Theme, but also how to modify it to fit your needs, this is the event you should attend!

The training will be at the Mitland Hotel in Utrecht (NL) on Tuesday May 12.
More information and registration see www.apextraining.eu.

If you are from another country and think this training should be available in your country as well, please contact us - then we'll see what we can do!

Friday, January 23, 2015

JSON for APEX Developers (part 2)

In the previous post we created a service that allowed us to give our data in JSON format.

Now let's focus on consuming that JSON. In this post I want to show how to use JSON data in the client (your browser), in a future post I'll show how to use JSON on the server (in the database).

If you want to play with JSON, open the console of your browser and create some text in JSON format - easy to do - and use the JSON.parse() function to create an object from it:

var text = '{"items": {"emp":[{"empno":7369, "ename":"SMITH"},{"empno":7499, "ename":"ALLEN"} ]}}';
var obj = JSON.parse(text);  

As you will probably do a call somewhere to get JSON, I'll move on with such an example, so we will call the service we created with ORDS in the previous post and we want to use that data in our APEX page.

So edit your APEX Page in the JavaScript section "Execute when Page Loads" and put
(note you can put your own url that generates the json):

$.getJSON("https://www.apexrnd.be/ords/training/emp_json/", function(json) {
  console.log(json);
});

We just called the url from JavaScript and output the result to the console of the browser so we see what we got back:


We see the JSON (javascript object/array) we get back from the url. Note that the array starts with 0 (and not 1).

We can now do anything we want with that data. Here we set some items on the page of the first employee:

  $('#P10_EMPNO').val(json.items[0].empno);
  $('#P10_ENAME').val(json.items[0].ename);

A more interesting example is when you want to integrate Flickr foto's on your web page.
The concept is the same, call a url, once received loop over the array (see .each) and create an image tag on the fly on your page:


Another example would be when you want to include a visualisation in your page and as data it needs the data in JSON format... You could do that with an AJAX call for example (application process, plugin, ...), but that is for another post.

Hopefully this post showed how you can interact with JSON within your APEX page by using JavaScript.
You find the online example at https://www.apexrnd.be/ords/f?p=DGIELIS_BLOG:JSON