Anyone have any experience with using jQuery with WebFOCUS HTML front-ends? I'm just starting to get into the HTML front-ends with WebFOCUS and am considering using jQuery (not sure for what yet, but every solution needs a problem, right?)

Any gotchas or tips I should know about before diving in?

This message has been edited. Last edited by: Kerry,

Read this for some insights.

I really want to dive into jQuery as well, but I haven't had a chance yet.

Seems like we have homework then

I have developed a few applications using JQuery and it is a great tool for simplifying HTML user interface tasks.

I am a Senior WebFocus/Focus developer with 25 years experience, but my javascript skills are pretty basic. I was looking for a way to create rounded corners on a front-end WebFocus usage statistics page that contained several summary reports and graphs. I did not want to use images for the corners. And, again, with my Javascript skillset, building a rounded corner function from scratch seems a pretty daunting effort.

So I did the Google search thing and found plenty of different Javascript/CSS/DHTML frameworks/libraries to accomplish this goal. These frameworks are a big help in doing what I can't do (or don't want to do) on my own.

I chose JQuery for several reasons: tons of online documentation, published books, lively forums, examples, actively upgraded, small footprint. I found it to be the best tool offering the least amount of coding on my part to create the rounded corner effect I wanted. Using it and an associated rounded corner plugin (plus a color gradient shading plugin) helped me create a very professional looking page.

JQuery can be found here: JQuery

To view a comparison of various frameworks/libraries, go here Framework Comparison.

My only tip is if you use JQuery, don't be locked into it. You still have to do some research/testing to find the right plug-in for JQuery and it may not always be the best tool for every task. For example, a few months ago I was looking for a JQuery plug-in to do a vertical data grid tree accordian report (the WebFocus horizontal accordian is just not usable), but while there are a few accordian plug-ins, none did what I needed. I finally looked outside of JQuery and found a stand alone library specifially made for the task that allowed me to create what I needed.

Good luck and have fun learning!

This message has been edited. Last edited by: DavSmith,

Wow! This is very useful information.

I've used prototype.js in the past but I've also found many positive reviews about jQuery. My initial need was to simplify the creation and interaction with Ajax objects which in my opinion is very well structured in prototype.js. I'll definitely read more (and play with) jQuery to see what else it brings to the table.

Thanks much DavSmith!

DavSmith - thanks for the info and I think that does add some context as this post goes down into the annals of history and helps to promote the overall cause to the undoctrinated.

As for my specific question, I was hoping to get a dialog about any specific issues or things to watch out for regarding the interaction of jQuery and WebFocus together (as WebFOCUS has it's own js libraries (not quite enough to be called a framework, but integral to the authoring/display of HTML front-ends)). Anyone's jQuery get in the way of their ibi provided js (or vice versa)? Is the head-first approach of IBIs javascript integration useful or hindering to using external js libraries?

- ABT

I am pretty sure that the two libraries will not clobber each other, though it might be difficult (impossible?) integrating jQuery into WebFOCUS GUI generated web pages.

If I needed to have a web page with controls peculiar to WebFOCUS, my approach might be to use the WebFOCUS Dev Studio GUI to design a basic page using the control and then apply the jQuery stuff to the code and never open the page in the GUI again.
DavSmith, thanks very much for the valuable information you provided.

ABT,

I can't answer your question regarding WebFocus/JQuery conflicts directly because for the 3 projects I used JQuery, I did not combine with WebFocus generated JS. I built each HTML launch page from scratch.

Conficts are possible, though. Experimenting with JQuery plug-ins, I found a one or two that worked individually on their own but when combined together, no go.

It usually happens when two plug-ins require usage of ID or CLASS attributes on the same object. Yet some plug-ins do play well together under the same situation.

To answer your question specifically (in my best wishy washy manner), I would expect some plugins will work and others not when combined with WebFocus JS libraries.

You will just need to experiment.

Francis, that is exactly how I would approach it, also. Thanks!

Hi Dave,

I'm curious how you are placing the multiple reports and graphs on the page? What are the containers or are you creating a compound report within WebFocus?

Can you provide a screen shot? Presenting data in a clear, concise manner is always interesting.

BTW - I've looked at JQuery and at the time it looked like overkill for what I was doing. I have a small Ajax library that works well. I might have to look again.

Thanks,

Norb

It's only overkill is you overuse it. You don't have to understand or use every line of JS code in the library, just the ones you need... I think it's the Holy Grail of JavaScript Libraries, but I haven't applied it to any real world projects yet...

The "Holy Grail"!!!?? Oh my. I'm actually surprised that you haven't applied this framework to your projects already.

I do have to dig into the plug-ins for JQuery as I have embarked on a large analytics project and would really like some sizzle displayed onscreen. Flex is just too much of a learning curve at this point and I've seen very good effects available with the JQuery plug-ins.

Best wishes,

Norb

Hey Norb,

Here is the pic image link for my first project using JQuery. Note the rounded corners and the color gradient in the top frame.



Here is the actual HTML code so you can see how I did the page:

<HEAD>
 
<TITLE>WebFocus MRE Statistics</TITLE>
 
<!-- Following 3 javascripts were pulled from www.jquery.com-->
 
<!-- load latest build of jquery.js -->
<script type="text/javascript" src="\\infobrpt\mreprod\ibi\apps\js\jquery-1.4.1.min.js"></script>
 
<!-- load jquery.corner.js (a dependency) -->
<SCRIPT type="text/javascript" src="\\infobrpt\mreprod\ibi\apps\js\jquery.corner.js"></SCRIPT>
 
<!-- load jquery.gradient.js (a dependency) -->
<SCRIPT type="text/javascript" src="\\infobrpt\mreprod\ibi\apps\js\jquery.gradient.js"></SCRIPT>
 
<SCRIPT type="text/javascript">
  $(function() {
   $("#main").corner("10px");
   $("#box1").gradient({from: '99AABB', to: '999966', direction: 'horizontal'});
   $("#box1").corner("top 10px");
   $("#box6").corner("bottom 10px");
  });
</SCRIPT>
<LINK type="text/css" rel="stylesheet" href="\\infobld01\mreprod\ibi\apps\css\focstats2.css" >
 
</HEAD>
 
<BODY>
 
<DIV id="main">
<DIV id="box1">WebFocus MRE Statistics</DIV>
<DIV id="box2">!IBI.FIL.CREPORT1;</DIV>
<DIV id="box3">!IBI.FIL.CGRAPH1;</DIV>
<DIV id="box4">!IBI.FIL.CGRAPH2;</DIV>
<DIV id="box5">!IBI.FIL.CREPORT2;</DIV>
<div id="box6">!IBI.FIL.CGRAPH3;</DIV>
</DIV>
 
</BODY>
</HTML>

This message has been edited. Last edited by: DavSmith,

Well Dave that certainly looks good. Nice job.

Thank you so much for showing your finished product and some of the associated code. You sure make it look easy.

I'm inspired to examine JQuery more closely now.

Thanks again,

Norb

Don't forget, you can use hosted jQuery, so there is no download/install. You can just reference it from google or other providers (http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery).

There is virtually no barrier to entry with this method. Thought I'd throw the reminder in for those on the fence but thinking it was too much to try to sneak onto the server.

- ABT

Don't forget about the jQuery User Interface for even more fab stuff.

DavSmith, that MRE Stats dashboard gives me quite a few ideas!

Excellent point, ABT. It's also a great way to stay up with the most current release. Though, that could cause a problem if an enhancement/change/fix breaks something in your WebFocus project. It depends on if you're pointing to a specific version or to the generic version.

The footprint for the code is small and you can even use what is called a minified version. Contains the same code, it's just stored as one long line with no line breaks.

Francis,

I've love to hear what ideas you come up with. Glad I could be of some inspiration after all the help you have given in the last few years.

David

Hey - Guess what!!!???? I used JQuery to load a cute little popup box with sales order line details. How cool is that?

And I was gonna post a screen shot here but I couldn't figure out how in the **** to do it!

Norb

Norb, please post a screen shot of this.

I use www.tinypic.com. Save the screenshot in jpg, gif or png format. Then navigate to tinypic and click Browse to find your image file. Then click Upload. After the upload is complete, the confirmation screen provides you with a link to the image. It even provides the code to insert into your FocalPoint posting. Some corporate environments may prevent you from accessing tinypic.

Francis, I am sure you already gave us that hint before but we keep forgetting about it .

Could this one be a good candidate for a [SHARED] topic?

Now, if only I knew of a way to make some of the great posts here sort of "sticky" it would really simplify the process of finding them; it is of course possible that I don't know how to use the features of this forum and therefore I'm here just showing my ignorance for which I apologise. It's just that my list of bookmarks/favourites is getting a bit unmanageable due to the so many darn good hints at Focal Point to keep track of.

Yes...I saw Francis' earlier post about tinypic and used that to post the PIC of my MRE Stats page. Simple and quick to load.

I think it should be a FEATURED topic along with Francis' tip on using HTML/FOCUS code in your post.

Francis, can you do that again?

Norb, can't wait to see what you've done with the popup!

Neftali, I use Firefox as my preferred web browser. I have a plugin to regularly refresh the tab with FocalPoint. I have a plugin to use Delicious to tag web pages that interest me. These are synced across computers (Mac & PC). I don't bother to use Bookmarks anymore and only use IE for WebFOCUS.

Cool! Thanks Francis. That's certainly something I'll attempt to play with.

Best,
Neftali.

Ok here's the stuff: Nothing fancy but clean. I'm displaying order detail from the underlying table grid. The popup is displayed when the user clicks the order # hyperlink in the table row. Pretty straight forward. I usually just pop this up in a new window but this was interesting.



Frankly, I think an area on FocalPoint for screen shots and discussion along with code examples or routines would be very helpful. Certainly people are doing lots and lots of very cool things with open, standard web technologies and WebFocus. And that area should limit it's level of political correctness too!!! I noticed my post was scrubbed because I referred to Hades. Sheesh!!!

This message has been edited. Last edited by: Norb Eckert,

Norb,

I once had a post rejected (not on FocalPoint) because I used the word s-c-r-e-w, as if a "A cylindrical rod incised with one or more helical or advancing spiral threads" is a bad thing!

By the way, to have the image actually show up in FocalPoint, just copy/paste the code in the "IMG Code for Forums & Message Boards" box:

This is

[IMG]http://i43.tinypic.com/2qjhev5.jpg[/IMG]

Thanks Francis - I couldn't for the life of me figure out why it wasn't working !!!!!

Now it' displayed twice - groovy.

I've not used JQuery but I have used Prototype extensively in my projects and the one gotcha I've experienced is multi-drill doesn't work. There is some interference between the IB JS libraries and approach. The workaround is tricky but involves placing pages have multi-drilldown in iframes.

@Roy D - Thanks for the feedback, that is right in line with what I was wanting to capture in this thread. Please feel free to add more if you recall them or come across more.