APEX-AT-WORK by Tobias Arnhold: UILayout

Browsing "Older Posts"

Browsing Category "UILayout"

UILayout for Universal Theme

Von Tobias Arnhold → 1.24.2016

Some of you may know the plugin "UILayout for APEX" I developed in 2011. It is based on the jQuery plugin called "UI Layout"

I'm currently develop a new version running only inside the Universal Theme (UT). This version is completely redesigned and focused only to work with the UT.

Actually it is quite cool because it supports some really handy features:

UILayout

UILayout and S3Slider Plugin - Usability Update

Von Tobias Arnhold → 9.19.2012

After a lot of mails and requests I decided to create an example application and an extended documentation to each of the plugins. It will be published in the next weeks.

UILayout for APEX:
http://www.apex-plugin.com/oracle-apex-plugins/dynamic-action-plugin/uilayout-part-1-initialize_77.html
S3Slider for APEX
http://www.apex-plugin.com/oracle-apex-plugins/region-plugin/s3slider-for-apex_165.html

Cheers
Tobias

UILayout

Looking for UILayout plug-in beta tester (APEX 4.1 only)

Von Tobias Arnhold → 10.17.2011

I added some fixes to the UILayout plug-in in combination with APEX 4.1 and the Interactive Report appearance.

I'm quite busy with the Plugin App and looking out for some testers. If there is anybody out there then please contact me.

The following issues are fixed under APEX 4.1:

Format options position

Rows Per Page position

Column options

I don't know if it works for all themes? If you know about more issues or even have some improvement ideas please inform me. I will fix it before the final release will come out.

Tobias

UILayout

IRR: UILayout issue

Von Tobias Arnhold → 8.17.2011

If you use the UILayout plug-in for APEX with Interactive Reports you will see some issues inside the action menu. The "Rows Per Page" and the "Format" menu will be positioned above the main action menu.

To fix this use the following js snippet with a dynamic action or add it inside your page header:

$('.dhtmlSubMenuS').mouseover(function() {

  $('#apexir_ROWS_PER_PAGE_MENU').css({

    left: $('#apexir_ROWS_PER_PAGE_MENU').position().left + 200 + "px"

  });

  $('#apexir_FORMAT_MENU').css({

    left: $('#apexir_FORMAT_MENU').position().left + 200 + "px"

  });    

});

Create a Dynamic Action which fires on the refresh of your Interactive Report and executes the JS code. Run it also on page load.

I will fix it in one of the next versions of the plug-in.

UILayout

UILayout: Hide half loaded elements

Von Tobias Arnhold → 2.14.2011

One of the problems of an layout extension is the initialization time.
Normally the UILayout needs a couple of seconds to initialize (1-3). Depending on your server connection, your client hardware and your browser (IE6 is slow, FF 3.6 is fast).

To show a similar loading frame like the ExtJS Loading Icon http://apex.oracle.com/pls/apex/f?p=65555:1 use this trick:

Add the following code to the beginning of your Page Template Body or add a new HTML region (No template) on page 0:


<div style="width: 100%; height: 100%; position: absolute; left: 0pt; top: 0pt; background-color: rgb(255, 255, 255); z-index: 4000; opacity: 0.8; display: block;" id="loadingBackground">
<div style="height: auto;left: 50%;position: absolute;top: 50%;text-align: center; color: #555555;font-size: 18px;font-family:Arial,Helvetica,Geneva,sans-serif;padding:8px;42px;"> ... Loading ... </div>
</div>

After the initialization of the UILaoyut plug-in use the LoadingIcon plug-in with the option "Stop LoadingIcon"

The initialization feels much smoother now.

Example: http://apex.oracle.com/pls/apex/f?p=AAW_PLUGINS:UILAYOUT_PLUGIN

UILayout

UILayout plug-in for APEX updated to version 1.2

Von Tobias Arnhold → 1.30.2011

What's new:
- New plug-in for the styling of the UILayout. Styling is now completely supported by either the plug-in or your own CSS files.
- Bug fixes and small improvements inside the initialization plug-in.

Example application: http://apex.oracle.com/pls/apex/f?p=65560:1

Here is the complete documentation:

UILayout plug-in for APEX

View more documents from TobiasArnhold.

Update 09.02.2011:
Just released version 1.2.1 which includes some bug fixes for the initialization part.
- APEX had some issues because the div elements were out of the form element.
- Radio button just moved to next then icon when you refreshed the page. Without changing the radio item.

You can download the current version here: UILayout plug-in for APEX 1.2.1 - www.apex-plugin.com/