Moving Blog Platforms

Posted on September 22nd, 2017

Just for info, I’ve decided to move platforms for this blog from Postach.io, to a Wordpress instance.

Many reasons for this, but the ability to easily display code blocks was the main one.


See you over there.

Richard

APEX and Accessibility Validation using tota11y

Posted on September 14th, 2017

This blog post has been migrated to here

I’ve spent time over the years looking at how to improve the accessibility of applications that we, as Developers create to meet the needs of all users of our applications.

In my past life as an Oracle Forms Developer it was far more cumbersome to meet Web Content Accessibility Guidelines than it is in Oracle APEX. APEX 5.x, the Universal Theme and Theme Roller have been massive strides in improving how we build accessible and compliant applications - even though you may not even know it.

In my experience there are occasions (rightly or wrongly) when developing applications, that we have had to move away from standard APEX functionality and create our own components that might not meet these standards.

Identifying issues where an application violates accessibility rules has always been a challenge.

Google Chrome has many extensions available such as the Accessibility Developer Tools and Site Improve Accessibility Checker that I have used over time, but recently I came across tota11y.

I will let you read the full details, but tota11y is an interesting concept, as it is a single javascript file - tota11y.min.js that you can add into your application.

That will add a menu to the bottom left of your APEX application (and doesn’t look too out of place with the Developer Toolbar).





Click on the button, and this menu is displayed:



There are several features to the tool, and just wanted to cover a couple now that have really sparked my interest.

Headings - as it says above the plugin checks the order of the heading elements in your page and highlights any issues were the order is not in the defined, for example as h1 -> h2 -> h3.

See below, I’ve added a h1 and a (imaginatively titled “This is an h3 element") h3 element but no h2. This is a breach of accessibility rules.



Whilst this might seen like a small issue, when it comes to accessible websites and applications, but correct ordering an structure this is key to providing in-page navigation for external accessibility tools - it is much more than a bigger font.

Not only does tota11y, highlight each element that it find in your page, the Errors tab also shows you what rules you are breaching:



The one feature that made me go “wow" is the "Screen Reader Wand", this is a hover over tool that shows the text that will be used by a screen reader.

In this example, tota11y captures the text of the Interactive Grid header for the “Abbreviation" column, and as the Interactive Grid is written in such a way that it is compliant with accessibility standards, it also identifies the ability to Sort Ascending and Descending.

Also, APEX is pretty clever with the badges in the left hand for screen readers as it surfaces both the name and the value.



Website accessibility is a massive subject that will take more than this basic blog post, but when designing applications, have a think about what you are doing and if it is compliant and maybe this tool will be of help but basically the APEX Team have done most of the hard work for us.

Any comments, you can find me on twitter @rcdacre.

APEX Login Page - Video Background

Posted on August 11th, 2017

This blog post has been migrated to here


A short and sweet blog post but hopefully of interest.

There have been a few tweets recently about customising the login page in APEX to have background images, and I thought it was about time I blogged again about something I setup for a very small piece of John’s KSCOPE17 presentation.

Basically, the request was to add a video to the background of a single page application (which had no login page).

So, I’ve decided to document how to do this on the Login Page.

You just need a mp4 file of the video of choice (I used https://videos.pexels.com/ for the stock video), and upload to static files in your application.

Then from a coding side, there are only really two components to it:

Add the following CSS into your application:



Then in the HTML Header of Page 101, add the following:



That’s it.

Check out the demo in Chrome (unfortunately probably wont work in IE7) , and change the select list to get some more examples - here

Obviously, consider the size of the videos you are embedding but I think the output is pretty impressive.

Any comments, please contact me via Twitter @RCDacre


Get A Birdseye View of an APEX App

Posted on June 6th, 2017

This blog post has been migrated to here

Over the years, one of the age old problems when speaking to users of applications, is that they can’t get to information they need quickly. There could be a range of reasons for this, badly designed flow, missing information or just simply too much scrolling on the screen - the latter being the reason for this post.

The enhancements in APEX 5 and 5.1 have made a massive difference to how we build APEX apps, also the likes of Regional Display Selectors, and collapsable regions are great features. These allow regions to be displayed in a different way based on user action. Even though, we still get queries like “I still want to see everything though!" - this is obviously subject to performance etc.

So looking about for potential solutions, I came across Birdview.js.

Birdview.js is a simple Javascript plugin, that at the press of a button will show a high level (birdseye) view of your application. Take a look at the demo on the site, and just press the “Z" button on your keyboard.

This library is pretty new, less than a couple of weeks old, but took the opportunity of seeing how easily it could be embedded into APEX. Answer: very easy.

Demo
Check out the demo here (username = demo password = demo):


The test case is pretty simple, this is the standard Sample Database Application, and page 5 has been updated to include all the charts on a single page. As with the plugin site, press the “Z" button. This will show the overview, you are then able to click anywhere on the overview and the screen will scroll to that section. Pretty neat.

Installation
To install, follow the instructions below:

  1. Download the css and js files from here: http://achrafkassioui.com/birdview/js/birdview.js and http://achrafkassioui.com/birdview/css/birdview.css
  2. In your APEX application, load as Static Files (or wherever you store your reference files)


  1. Reference Files in User Interface Defaults:


  1. On Page 0, create a "Page Load" Dynamic Action with the following settings:
    • True Action:
      • Action: “Execute Javascript"
      • Code:
      • birdview.init();

That should be all you need to do, every page that needs to scroll with have the option by pressing the “Z" on the keyboard

You can also pass in the button parameter into the init command, which will hide the icon at the top right of the screen, for example:

birdview.init({
button: false
});



Caveats
This has been tested in Apex 5.1 at this stage, but will look at 5.0 and look under the hood a bit more in the near future to see if there is anything else of interest and post back here.

This has been tested on Safari and Chrome on Mac and IE11 on Windows 7. Also tested on iPhone, the pinch / zoom works well.

Any questions or ideas, please get in touch via my twitter

(on a side note - it’s been a while since my last post - not the weekly updates I hoped, but I’ve got a couple of blogs saved and ready to publish - honest!)

Hello World (or anyone that's looking)

Posted on February 11th, 2017

This blog post has been migrated to here


And so it begins, my first journey into blogging about Oracle APEX and other exciting (?) stuff.

Ok, so I'm not sure how you ended up here but welcome! This is just a quick first post to start things going and say what you may/may not expect from visiting this place.

So let's kick off with a bit about me. I'm a Senior Developer at APEX Evangelists, spending most of my time developing software solutions in Oracle APEX (of all things). I've been in the IT industry since the late 90's (yes - I know I don't look old enough), and I've turned my hand at many roles - you name it, I've probably done it.

So why Blog now? Well after a change of role just over two years ago, I was lucky enough to start working at AE, and everyday I realise how good a tool Oracle APEX is. So it's about time I tried to share some ideas and experiences. Previously about ten percent of my week was developing software, but now it's the core of my working day. The selling point to me about APEX is how quickly you can spin up a tool that will make a difference, whether it be a simple customer logging application or a full blown ERP.

So what's to come? I hope to blog, not just about APEX but hopefully the wider world that is IT, but bringing it back to the APEX world when i can.

How frequent will I blog, I hear you ask! Well my personal aim is once a week, but realistically that will turn in to every two weeks but if anyone is actually reading this in 2024 and this is the only post - I have failed on many levels.

So, upcoming posts I'm thinking of, include some funky SVG stuff, some nice data integration items and try and bring some original IoT ideas into the mix.

Ok that's it for now, at least the page is blank no more. Check back soon though!



Richard Dacre

Senior Developer at APEX Evangelists.