Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] jQuery + WebFOCUS
Page 1 2 

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] jQuery + WebFOCUS
 Login/Join
 
Master
posted
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,


------------------------------------
WF Environment:
------------------------------------
Server/Client, ReportCaster, Dev Studio: 7.6.11
Resource Analyzer, Resource Governor, Library, Maintain, InfoAssist
OS: Windows Server 2003
Application/Web Server: Tomcat 5.5.25
Java: JDK 1.6.0_03
Authentication: LDAP, MRREALM Driver
Output: PDF, EXL2K, HTM

------------------------------------
Databases:
------------------------------------
Oracle 10g
DB2 (AS/400)
MSSQL Server 2005
Access/FoxPro
 
Posts: 561 | Registered: February 03, 2010Report This Post
Virtuoso
posted Hide Post
Read this for some insights.



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
 
Posts: 1533 | Registered: August 12, 2005Report This Post
Expert
posted Hide Post
I really want to dive into jQuery as well, but I haven't had a chance yet.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Virtuoso
posted Hide Post
Seems like we have homework then Wink



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
 
Posts: 1533 | Registered: August 12, 2005Report This Post
Platinum Member
posted Hide Post
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,



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Virtuoso
posted Hide Post
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!



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
 
Posts: 1533 | Registered: August 12, 2005Report This Post
Master
posted Hide Post
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


------------------------------------
WF Environment:
------------------------------------
Server/Client, ReportCaster, Dev Studio: 7.6.11
Resource Analyzer, Resource Governor, Library, Maintain, InfoAssist
OS: Windows Server 2003
Application/Web Server: Tomcat 5.5.25
Java: JDK 1.6.0_03
Authentication: LDAP, MRREALM Driver
Output: PDF, EXL2K, HTM

------------------------------------
Databases:
------------------------------------
Oracle 10g
DB2 (AS/400)
MSSQL Server 2005
Access/FoxPro
 
Posts: 561 | Registered: February 03, 2010Report This Post
Expert
posted Hide Post
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.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Platinum Member
posted Hide Post
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!



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Platinum Member
posted Hide Post
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


prod:7.6.9, win2k3 mre, caster, bid, devstudio 7.6.9
 
Posts: 242 | Location: Minneapolis | Registered: February 16, 2006Report This Post
Expert
posted Hide Post
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...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Platinum Member
posted Hide Post
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


prod:7.6.9, win2k3 mre, caster, bid, devstudio 7.6.9
 
Posts: 242 | Location: Minneapolis | Registered: February 16, 2006Report This Post
Platinum Member
posted Hide Post
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,
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Platinum Member
posted Hide Post
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. Smiler

I'm inspired to examine JQuery more closely now.

Thanks again,

Norb


prod:7.6.9, win2k3 mre, caster, bid, devstudio 7.6.9
 
Posts: 242 | Location: Minneapolis | Registered: February 16, 2006Report This Post
Master
posted Hide Post
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


------------------------------------
WF Environment:
------------------------------------
Server/Client, ReportCaster, Dev Studio: 7.6.11
Resource Analyzer, Resource Governor, Library, Maintain, InfoAssist
OS: Windows Server 2003
Application/Web Server: Tomcat 5.5.25
Java: JDK 1.6.0_03
Authentication: LDAP, MRREALM Driver
Output: PDF, EXL2K, HTM

------------------------------------
Databases:
------------------------------------
Oracle 10g
DB2 (AS/400)
MSSQL Server 2005
Access/FoxPro
 
Posts: 561 | Registered: February 03, 2010Report This Post
Expert
posted Hide Post
Don't forget about the jQuery User Interface for even more fab stuff.

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


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Platinum Member
posted Hide Post
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.



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Platinum Member
posted Hide Post
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



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Platinum Member
posted Hide Post
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


prod:7.6.9, win2k3 mre, caster, bid, devstudio 7.6.9
 
Posts: 242 | Location: Minneapolis | Registered: February 16, 2006Report This Post
Expert
posted Hide Post
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


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Virtuoso
posted Hide Post
Francis, I am sure you already gave us that hint before but we keep forgetting about it Frowner.

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



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
 
Posts: 1533 | Registered: August 12, 2005Report This Post
Virtuoso
posted Hide Post
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.

Nice Thread



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
 
Posts: 1533 | Registered: August 12, 2005Report This Post
Platinum Member
posted Hide Post
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!



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Expert
posted Hide Post
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.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Virtuoso
posted Hide Post
Cool! Thanks Francis. That's certainly something I'll attempt to play with.

Best,
Neftali.



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
 
Posts: 1533 | Registered: August 12, 2005Report This Post
Platinum Member
posted Hide Post
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!!! Wink

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


prod:7.6.9, win2k3 mre, caster, bid, devstudio 7.6.9
 
Posts: 242 | Location: Minneapolis | Registered: February 16, 2006Report This Post
Expert
posted Hide Post
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]




Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Platinum Member
posted Hide Post
Thanks Francis - I couldn't for the life of me figure out why it wasn't working !!!!! Mad

Now it' displayed twice - groovy.


prod:7.6.9, win2k3 mre, caster, bid, devstudio 7.6.9
 
Posts: 242 | Location: Minneapolis | Registered: February 16, 2006Report This Post
Member
posted Hide Post
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.


8.0.0.6, Ubuntu 12.04, All
 
Posts: 12 | Location: South Africa | Registered: February 07, 2007Report This Post
Master
posted Hide Post
@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.


------------------------------------
WF Environment:
------------------------------------
Server/Client, ReportCaster, Dev Studio: 7.6.11
Resource Analyzer, Resource Governor, Library, Maintain, InfoAssist
OS: Windows Server 2003
Application/Web Server: Tomcat 5.5.25
Java: JDK 1.6.0_03
Authentication: LDAP, MRREALM Driver
Output: PDF, EXL2K, HTM

------------------------------------
Databases:
------------------------------------
Oracle 10g
DB2 (AS/400)
MSSQL Server 2005
Access/FoxPro
 
Posts: 561 | Registered: February 03, 2010Report This Post
  Powered by Social Strata Page 1 2  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] jQuery + WebFOCUS

Copyright © 1996-2020 Information Builders