Thursday, March 31, 2011

Book Released: Oracle Application Express 4.0 with Ext JS

I'm very happy to announce that my book Oracle Application Express 4.0 with Ext JS is now officially published.

A printed copy turned up in the mail recently, and I'm very pleased with the final result.


 The table of contents for the book as well as a sample chapter is available on the Packt website.



Sue Harper blogged about the three phases of book writing:

  • before the book - Seems like a good idea
  • during the book - Not a good idea, will this ever end? Who's idea was this anyway?
  • after the book - That was easy ... what's next?

After spending most evenings and weekends writing until midnight for the last 15 months, I've definitely done the first two phases, but haven't quite reached the last phase yet.

Still to do
The code bundle available to download on the Packt website includes code from each of the chapters.
I will be updating it in the next couple of weeks to:

  • include the Ext JS library, so the stand-alone examples work when the bundle is unzipped
  • add the APEX TEMPLATE application, CSS, JavaScript and image files used in the book
  • include a few extras that didn't make it into the book.
I'll write another blog post when the updated code bundle is available.

Then after that my demo site definitely needs an overhaul, it's looking sadly neglected...

26 comments:

Laurie said...

Congratulations on this Herculean feat Mark!
When you consulted at DIER several years ago I was always in admiration of your amazing SQL queries.
I work in the private arena now as a geologist - and still dabble a little with Oracle, having created an Apex drill hole database for our Company.

Cheers,
Laurie Veska,
Hobart, TAS

Mark Lancaster said...

Hi Laurie

Nice to hear from you after all this time.

I ran into Jeremy at a conference last year, so enjoyed the chance to catch up.

Hope all is well with you.

Regards

Mark

Anonymous said...

Hi Mark,


Very nice book.


I am still trying to work out the realtionship between the www_flow as URL and the paramNames and baseParams.
Do you have any examples coming up for this?

Thx.

Anibal

Mark Lancaster said...

Hi Anibal

wwv_flow is the name of the database package executed by the web-server.
This is one of the main "gateways" into the APEX engine. By examining the package spec you can see the names of the parameters it is expecting.

baseParams are passed by every request using that Reader, really just a convenience. Just like any other parameter these are appended to the GET/POST request. View the actual request details in Firebug to see the final request.

paramNames are used to override Ext names, for example the paging toolbar used for Grids uses start, limit, sort and dir. So to integrate the paging toolbar into a APEX Classic Report PPR request you override start with "pg_min_row", and limit with "pg_max_rows" because that's what APEX is expecting.

Hope this answers your questions.

I'm still wrapping up a demo template application, based on all the examples in the book. Hope to have that out reasonably soon, it will update the code download on the Packt website.

Regards

Mark

Sohil Bhavsar said...

Hi Mark,


The book is quite interesting. I feel it will be very helpful to the APEX community.

Because, there are very limited resources available for integration of ExtJS and Oracle APEX and the way the book is written it is very easy to understand the concepts of ExtJS.

APEX team has already integrated jQuery in Oracle APEX 4.0 onwards, so before reading the book I had a mindset that jQuery is better then ExtJS but now I feel for Rich User Experience ExtJs is quite good option and APEX Developmt Team should focus towards that.


Thanks,


Sohil Bhavsar

Mark Lancaster said...

Hi Sohil

Thanks for the feedback, hope you find the book useful.

Mark

OracleDev said...

Mark I purchased your book and it is very excellent. I am in dire need of assistance with Chapter 10 and the document tab section. I for some reason cannot transfer the prototype that you built to work with Apex. I know in the book you stated that you are just going to show the prototype but I desperately need the actual code and please let me know if there is anything that I can do to obtain.

Mark Lancaster said...

Hi OracleDev

Do you have an email I can contact you on?

Mark

OracleDev said...

Sure thing. It is mjfigur@me.com. I have been working on the layout and just been trying to make it all work. Cannot thank you enough for your help and if needed would be willing to compensate for your time.

Sergei Martens said...

Hi Mark,

At this moment i am studying your book. At same time i am working on making a EXT JS theme in Apex as you describe in the book.

My compliments about the book! Because i'm new to EXT JS it is exactly what i was searching for.

But... i can't get the standard EXT JS Report working.

At page 159 you reference "playpen-book.css" in chapter 5 of the "download code".
After a search in the donwload code the CSS seems not to be included. Can you help me with the proper CSS?

Thanx in advance,

Sergei Martens

Sergei Martens said...

For your interest:
You can see my work at:
http://apex.warp11.nl/apex/f?p=104:1:0:::::

Mark Lancaster said...

Hi Sergi

Send me your email if you want the CSS file right away.

Otherwise, I'm hoping to wrap up a new code bundle this weekend to upload to the Packt website.

It includes a "template" application which demonstrates all the components from the book.

From your demo, it looks like you making good progress.

Regards

Mark

Sergei Martens said...

You can email me to smartens@smart-holding.eu

Thanx for the quick response.

Rafael said...

Hello Mark,

Could you help me please.
I want to change this code to EXT JS 4, but it's not working.

Ext.ns('Ext.apex');
Ext.apex.IFrameComponent = Ext.extend(Ext.BoxComponent, {
url : Ext.SSL_SECURE_URL,
onRender : function(ct, position){
var url = this.url;
this.el = ct.createChild({tag: 'iframe', id: 'iframe-' + this.
id, frameBorder: 0, src: url});
}
});
Ext.reg('iframe', Ext.apex.IFrameComponent);

Ext.apex.PopupWindow = Ext.extend(Ext.Window, {
url: Ext.SSL_SECURE_URL,
title: document.title,
width: 700,
height: 600,
initComponent: function(){
// starting config, can't be modified externally
var config = {
border: false,
closable: true,
closeAction: 'close',
header: true,
items: [new Ext.apex.IFrameComponent({
url: this.url
})],
layout: 'fit',
maximizable: true,
modal: true,
plain: true
};
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.apex.PopupWindow.superclass.initComponent.call(this);
this.addEvents(
/**
* @event success
* Fires when iframed page has been processed
* successfully.
* @param {Ext.apex.PopupWindow} this
*/
'success');
},
processSuccessful: function(){
this.fireEvent("success", this);
this[this.closeAction]();
}
});

Mark Lancaster said...

Hi Rafael

I haven't had a chance to play with Ext 4 yet, too much on my plate.

Best look at the Sencha forums, this post looked likely http://www.sencha.com/forum/showthread.php?129984-Ext.ux.SimpleIFrame-Simple-IFrame-component&highlight=iframe+Ext

Mark

Anonymous said...

Great book Mark,

Just as Sergei found out before I could not locate the chapter 5 playpen-book.css. Would you be able to share it? If so, I provide you with my email address: diegodelamelena@yahoo.com

Stephan said...

Hello Mark,

I am experimenting with the examples from your book. So far everything was fine :-), but when I try to use the tree list template as described on pp 116/117, APEX does not substitute my #LIST_ITEM_ID# placeholders but always returns html code as follows (simple list with 3 items A, B, and C used):

...
var treeRegion = 'tree#LIST_ITEM_ID#';
var treeData = {text:"Root Node", expanded:true, children:
[{id:"#LIST_ITEM_ID#", text:"A", href:"f?p=303:0:7208115979760340:::::", leaf:true},{id:"#LIST_ITEM_ID#",text:"B",href:"f?p=303:0:7208115979760340:::::",leaf:true},{id:"#LIST_ITEM_ID#",text:"C",href:"f?p=303:0:7208115979760340:::::",leaf:true}]};
...

I am using APEX 4.0.2. Can you help me?

Thank you + regards,

Stephan

Mark Lancaster said...

Hi Stephan

I have never heard of this issue.

APEX does the substitutions of the tags, so either your typing it incorrectly or you have a modified/faulty APEX package.

Please verify it on the apex.oracle.com instance.

Let me know how you go.

Anonymous said...

Hi Mark,


How is going with the new examples demo?

Do you have also an example on file browse/upload for ExtJS/APEX for the new demo?
If not do you have this where you can share this?

Let me know.

Anibal

graypz said...

Mark
I attended your excellent presentation at InSycn11 in Sydney yesterday. I can't find anywhere on your blog on how I can contact you to ask about Ext JS.

Regards
Phil Gray
DJAG Qld.

Mark Lancaster said...

Hi Phil

Glad you enjoyed the presentation.

You can contact me at president.qld "at" ausoug.org.au

Mark

Anonymous said...

Hi Mark,

Is there a way to load the ExtJS library ones in APEX instead of doing this by every template?


Let me know.

Anibal

Mark Lancaster said...

Hi Anibal

I'm not completely sure what your question is.

In each page template you need to include an external reference to the CSS and JS files.
Typically you will only have a few page templates, so there is very little to maintain.

For each page request your browser issues a GET request to the web-server for the external files.
Typically the web-server responds with "last modified" information; the browser compares this with it's locally cached version to determine whether to use the cached version, or download the file again.

If you can prove the files are being downloaded for every page request, I would check with your web-server administrator. Perhaps a configuration setting has been set to automatically expire all JS files, and has not been reset.

Ultimately the issue will be on the web-server, and is a general issue. Not an APEX + ExtJS issue.

Regards

Mark

Anonymous said...

Hi Mark,


I use ExtJS4 and APEX.
I have included all needed files in the apex tamplate(s).
The functionality is build in javascript files.

I use an ExtJS viewport with a three like your exmample where a ExtJS tab will be opened in the centre region area.

If i do a check with the tool page-speed it does not looks like the web-server is checking for last modification on the files!

Any hint or help will be much appreciated.


Thank you.

Anibal

Mark Lancaster said...

Hi Anibal

Time for you to read up on enabling caching on your web-server.

It's a very straight forward configuration option.

Mark

Anonymous said...

Hi Mark,


It is really strange that when runing the page in development mode it is opened really fast and when running in deploymnet mode trough the three call in the centre region area in a tabpanel it's going slow!

Still cannot fing any particular reason why it is doing this!

You may have a hint on this?

Thank you,

Anibal