Updated: 3/31/2005; 11:54:26 PM.
Chris Schalk's J2EE Weblog
This Blog Discusses Tips and Tricks for building J2EE Web Applications with Oracle JDeveloper
        

Thursday, March 31, 2005

News Flash!! News Flash!!

I've decided to switch to a New blogging solution at JRoller.com!

My new Blog location is:

http://www.jroller.com/page/cschalk

-Chris


11:54:25 PM    comment []

Tuesday, March 29, 2005

Hello,

Now that I am back to blogging again, here is a location where you can download my recent presentation from the Sun technology Days in Mexico City:

http://www.orablogs.com/cschalk/presentations/mexicocity_suntechdays.zip

-Chris

 


2:42:56 PM    comment []

Monday, March 28, 2005

Sorry for the delay in posting.. My license with Radioland got screwed up and it wasn't allowing me to post..

If I see this posting, I'll know that it's working! :)

-Chris


5:29:27 PM    comment []

Saturday, March 05, 2005

Back to the Blog... After 2 hard drive crashes and a forced relocation to a new laptop at lightning speed as mandated by our IT dep,  I am now back in business.

First off, I just completed some presentations at Sun technology days in Mexico City. My First presentation was on SOA and Web Services and on the second presentation I co-presented with Peter Zadrozny for his keynote.. Basically I was the "demo guy". :)

My first presentation was made to an audience of approx 687 J2EE enthusiasts in Mexico. I introduced the concepts of SOA and quickly jumped into how to work with by building some simple JAX-RPC Web Services using JDev 10.1.3 and then I brought our BPEL designer up and showed how to choreagraph these Web services into a business process flow. For the final demo I showed our OpenWorld 2004 ACME demo employee provisioning  SOA application*. At the end of the demo I showed how to run it which when executed calls your cell phone to tell you that your request is done..Quite cool.. Audience did a collective "Wow!" in spanish.. :)

For the keynote presentation I did with Peter, he had me speak entirely in Spanish.. which I can speak but it is not my first language. Ended up being a ton of fun.  The audience really appreciated the localized SOA and JSF demos..

I'll post the presentation links once they are hosted somewhere..

-Chris

 

 


10:20:49 AM    comment []

Wednesday, February 23, 2005

If you are reading this Blog, chances are you already have an understanding of what RSS (Really Simple Syndicate) is and that it is basically just an XML format for content on the Web.

I recently looked into how to work with RSS in Java and JSP and happened to find a nice tutorial by Rodrigo Oliveira at Sun which showed a simple RSS enabled JSP taglib:

http://java.sun.com/developer/technicalArticles/javaserverpages/rss_utilities/

In this tutorial is a link where you can download a JSP RSS Utility Tag library:

http://java.sun.com/developer/technicalArticles/javaserverpages/rss_utilities/rss_utils_1.1.zip

So after downloading unzipping the contents, I decided to play with the JSP taglib in JDeveloper 10.1.3 Preview.

Here's what I did...

After downloading, I first had to add the JSP tag library to JDeveloper. This is easily done by first adding the jar file as a "User java Library" and then adding the TLD as a JSP Tag library. This is an important process to know if you wish to import external JSP tag libraries into JDeveloper.

To start, open JDeveloper 10.1.3 and click Tools->Manage Libraries:

A picture named managelibs.jpg

 

  • Next, click on the "User" node on the and click "New".

    A picture named newlib.jpg

  • Name the library RSS and add a Classpath entry which points to the location of your rssutils.jar which you downloaded.


    A picture named newlib2.jpg

  • Next you'll want to click on the "JSP Tag Libraries" tab in the Manage Libraries dialog.

    A picture named newlib4.jpg

  • In the JSP Tag Libraries panel, click on the "User" node and and click new. This is when you will browse for the location of the RSS taglib's TLD file:

    A picture named rsstld.jpg

  • Once you've defined the location of the TLD, click ok and you'll see most off the details for the Taglib filled in. You'll want to change the default prefix to "rss" just to make it easier to work with later on. The next step is to associate the jar file or RSS library with this TLD. Click on the "Browse" button for the Libraries....

    A picture named taglib2.jpg
  • And in the next dialog, shuttle over the RSS library. Then click OK.

    A picture named newlibjar.jpg

  • Before clicking OK on the Manage Libraries dialog, make sure that the checkbox is checked for: "Show Tag Libraries in Palette". You'll need these on the palette for when you build an app. Click OK to dismiss the dialog. 
  • Now it's time to build a simple JSP Web application where we can test the tags... To start building a new application, click on File->New..->General->Application.  Give it a Name and default package prefix. Also select "No Template" for the application templates.

    A picture named newapp.jpg

  • Click OK to generate an empty Application Workspace, a create project dialog will then appear automatically. Name the project "web". (Since it will be a Web project.)

    A picture named webapp.jpg
  • Next we'll create a JSP page. File->New..->Web-Tier->JSP->JSP.

  • As the wizard invokes name it whatever you like and specify that you want to use the RSS Tag Library:

    A picture named addtaglib.jpg

  • Click OK to generate your JSP.

  • When the JSP appears in the visual editor, add an HTML banner such as "Fun with RSS". Format it to H2 using the toolbar. You can also drag and drop a CSS file onto the page to beautify it. To drop a CSS file, select the "CSS" palette page and drop on of the CSS items onto the page. It will then automatically appear with the new look and feel.

    A picture named newpage.jpg

  • Now we can start working with the tags. Change the Component Palette page to "RSS Tag Library" and drag and drop the Feed tag onto the page:
    A picture named rsstaglib.jpg

  • A dialog will appear showing the required field FeedId. Set it to "otn_news".

  • Now click on the Advanced Properties tab in the same dialog. You'll see Proxy settings and a URL field. This is where you will insert a web address pointing to a RSS page.

    Note: You won't need to set the proxy in JDeveloper if they're already set in the JDeveloper "Web Browser and Proxy" setting in the preferences. However if you deploy this to another J2EE server, you'll either need to run the server with the Proxy Server setting or just user these tag attributes for proxy settings.

  • You can find many RSS enabled pages on the Web like CNN, OTN.Oracle.com, TheServerSide.com. Let's use OTN's Main News RSS Feed. For this we need the URL: http://www.oracle.com/technology/syndication/rss_otn_news.xml

    Here's where to find the live XML feed from OTN's home page:

  • Assign the OTN RSS News URL to the URL attribute of the Feed tag dialog and click OK. This will insert a feed tag onto your page.

  • Feel free to check out the XML from the live feed. This will help you get a better feel for the data that you'll later be parsing with JSP tags.

  • Next we'll add some code to our JSP to display some data from the live feed.

  • In a new paragraph drop drag and drop the tag ChannelTitle tag from the palette. Assign the feedId to "otn_news". The source of your tag will look like:  <p><rss:channelTitle feedId="otn_news"/></p>

  • At this point you could run the page and see the title of OTN's news appear.. but let's add more tags to the page to show all the news items.. You can copy and paste the following code:

     <p><rss:channelTitle feedId="otn_news"/></p>
        <p><rss:channelImage feedId="otn_news" asLink="true"/></p>
        <p><rss:channelLink feedId="otn_news" asLink="true"/></p>
        <hr/>
     
       <rss:forEachItem feedId="otn_news">
                  <li>
                   <a href="<rss:itemLink feedId="otn_news"/>" >
                      <rss:itemTitle feedId="otn_news"/>
                   </a>
                   
                   <br/>  
                    <rss:itemDescription feedId="otn_news"/>
                  </li>
         
        </rss:forEachItem>

  • When you compare the tags and the live XML feed you'll understand how the tags pull the data out of the XML feed.

  • Save and run the page. Your JSP will have OTN's news items on the page. Cool huh!?


  • For fun, check out TheServerSide's RSS News Feed from:  http://www.theserverside.com/rss/theserverside-rss2.xml

  • To embed both OTN and TheServerSide News feeds onto my page.. You can create 2 JSP Segments  using File->New..->Web-Tier->JSP-> JSP Segment, which have just the Feed code needed to see a particular content like:

    tss.jspf - The ServerSide

    <p><rss:channelTitle feedId="tss_news"/></p>
        <p>
        <rss:channelImage feedId="tss_news" asLink="true"/>
        </p>
        <p>
          <rss:channelLink feedId="tss_news" asLink="true"/></p>
       
        <hr/>
         <ul>
          <rss:forEachItem feedId="tss_news">
           <li><a href="<rss:itemLink feedId="tss_news"/>">
                 <rss:itemTitle feedId="tss_news"/></a>
           <br/><rss:itemDescription feedId="tss_news"/></li>
          </rss:forEachItem>
         </ul>

    and the JSP segment for OTN:

    otn.jspf - For OTN

      <p><rss:channelTitle feedId="otn_news"/></p>
        <p>
        <rss:channelImage feedId="otn_news" asLink="true"/>
        </p>
        <p>
          <rss:channelLink feedId="otn_news" asLink="true"/></p>
       
        <hr/>
         <ul>
          <rss:forEachItem feedId="otn_news">
           <li><a href="<rss:itemLink feedId="otn_news"/>">
                 <rss:itemTitle feedId="otn_news"/></a><br/>
                 <rss:itemDescription feedId="otn_news"/></li>
          </rss:forEachItem>
         </ul>

  • You can then create  a master page which has a taglib directive for the RSS taglib as well as 2 feed tags for both OTN and TSS.

  • Next you can create an HTML table and drop 2 JSP Include directives onto the page which point to the different OTN and TSS jspf (segment) files.

    Here is the  code of a JSP page which shows both OTN and TheServerSide's News Feeds:

    double.jsp

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <%@ page contentType="text/html;charset=windows-1252"%>
    <%@ taglib uri="http://sun.com/cnpi/rsstag" prefix="rss"%>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
        <title>
          hellorss
        </title>
        <link href="css/jdeveloper.css" rel="stylesheet" media="screen"></link>
      </head>
      <body>
        <h2>
          Fun With RSS
        </h2>
     
        <rss:feed feedId="tss_news"
                  url="http://www.theserverside.com/rss/theserverside-rss2.xml"/>
       
        <rss:feed feedId="otn_news"
                  url="http://www.oracle.com/technology/syndication/rss_otn_news.xml"/>         
                  
        <table cellspacing="2" cellpadding="3" border="1" width="100%">
            <tr>
              <th>
                OTN
              </th>
              <th>
                TheServerSide
              </th>
            </tr>
            <tr>
              <td>
                <%@ include file="/otn.jspf"%>
              </td>
              <td>
                <%@ include file="/tss.jspf"%>
              </td>
            </tr>
          </tbody>
      </body>
    </html>

  • Neat huh?

    A picture named double.jpg

  • A final note, everything shown here is with RSS version 2.0. The taglib can also work with older version of RSS, but the examples I've shown here are all 2.0.

  • Okay one more thing!! For your homework assignment: Create a news feed page for my Blog's RSS Feed!: http://radio.weblogs.com/0130966/rss.xml


    1. 1:50:13 PM    comment []

      Tuesday, February 01, 2005

      Integrating Web Services in your JSF Applications

      Hello again,

      I just posted an HowTo article on Oracle Technology Network site which shows how to use Web Services in your JSF application. I show a very simple example of a Stock Quote JSF application which queries a live Web Service to get the current price of the symbol submitted in a form. Building this in JDeveloper 10.1.3 was quite a simple process actually..

      A picture named commandbutton.jpg

      Check it out at:

      http://www.oracle.com/technology/products/jdev/101/howtos/jsfws/index.html

      Also,

      Kudos to Kito and JSFCentral.com for publishing these simple JSF HowTos! JSFCentral even beat my blog in mentioning this latest article! (Ahh the wonders of RSS...)
      :)

       


      6:40:19 PM    comment []

      Thursday, January 27, 2005

      A (Blog only) "Exclusive" How To document on working with Web templates in JDeveloper 10g.

      Introduction

      Although JDeveloper 10g Production (10.1.2) and 10.1.3 preview have yet to offer official Web application templating support out of the box, Web developers needn't wait for JDev's final template support in order to be productive with certain basic "templating" capabilities already included in both JDeveloper 10g Production and 10.1.3 Preview.

      This How To document shows how to build Web templates in JDeveloper 10g consisting of HTML content, images, as well as Cascading StyleSheets (CSS). This document also shows how to create J2EE Web application templates as WAR files for later use in JDeveloper or other Tools and Application Servers.

      Getting Started - Building a Web Template

      In a simple manner, Web templates can be defined as::

      • Web page content - This is HTML or JSP content which could become complete Web pages or just portions of Web pages which contain often repeated Web content such as an HTML table containing an overall page layout, or portions of content such as menu bars, tab bars etc.
      • Custom images - These are the images which are presented in the Web page content. Examples include banner images, menu button images, etc.
      • Cascading StylesSheets - These provide an overall look and feel to your Web application by associating a specific visual appearance to global tags such as <H2> or to individual tags via a class attribute.

      So creating a re-usable set of templates is simply a matter of saving these types of content into a reusable form and making them available for use again in JDeveloper multiple times. This can be accomplished using several existing features in both JDeveloper 10g Production (10.1.2) as well as JDeveloper 10.1.3 Preview.

      The first step to building your Web template(s) is to start with a basic design. Create a new empty project in any Workspace and begin designing your Web content such as a page or collection of pages so it can be used later as a template(s).

      For this How To, let's build a basic Web page template which will serve as the base page for a fictitious corporate Web application: The ACME Corporation.

      1. In JDeveloper, create a new empty project: AcmeWebApp.

      2. Then create a new JSP or HTML page. You can name it anything: "ACMEPage_temp". (File->New..->Web-Tier->HTML->HTML Page).
        In step 2 of 2 (HTML Options) you can further specify the visual attributes of the page, but for this example we will leave it as is and click Finish.

      3. As the new page opens in the visual designer, you can then create your overall design of the page template. For this example we'll create an HTML table which will consist of 4 main table cells:
        • A top cell for a banner image
        • A left navigation cell for future navigation content
        • A footer cell for our future footer content
        • A main cell for the body of the actual page content.


      4. Assuming you now have images (or other HTML content) for the top, left and bottom cells, you can drag and drop them from either your desktop or Windows explorer into their respective cells.



        For this example we'll drag a banner, leftnav and footer image on the template.

      5. As you drag the image, JDeveloper will prompt you asking you to copy the image under your document root. Click "Yes".



      6. Before saving the image, we'll create an "images" subdirectory and save it there.


      7. Name the directory "images" and click OK.

        From now on we'll save all of our images to this directory.

      8. After dragging and dropping all of the images needed for this template we are almost done with our basic ACME page template.


      9. We now have a Web page design associated with some images, but now we also want to associate a CSS look and feel for this template. We could use one of JDeveloper's provided CSS stylesheets which are already accessible on the Component Palette, but instead let's review how to integrate an external CSS file onto JDeveloper's Component Palette.

        To start with, let's open up a windows explorer to the filesystem location of our new Web template. You'll notice that I can invoke the Windows Explorer directly from the JDeveloper Navigator.

        Note: JDeveloper 10.1.3 comes with a nifty feature which can quickly auto-configure commonly used external tools for use in JDeveloper. (Tools->External Tools...)



      10. In Windows explorer we can create a "css" subdirectory as a peer to the "images" directory. In the new css directory will drop in a new, custom CSS stylesheet, "acme.css".


      11. Now all we have to do is add this new ACME stylesheet to JDeveloper's Component Palette so we can use it later on. On the "CSS" Component Palette page, right-click and select "Palette Properties".

        Note: In JDeveloper 10g production (10.1.2) we can "Add (a) Component" directly to the page, but in the 10.1.3 Preview, we can only add the new CSS entry by using the Palette Properties dialog.
        (This is a known issue and is logged as bug: 4000422 )

      12. In the Palette Properties dialog, change the "Page Type:" to "CSS". You will then see all of the Components currently on the CSS palette page.
      13. Click on the "Add" button and enter the following:
        • Location: (Browse to your location of your custom CSS. This should be in your new /css sub-directory.
        • Name: ACME (Or whatever you want to call it.)

      14. Click "OK" twice and your new ACME CSS will be on the Palette page.
      15. Now you can drag and drop this onto your pages and it will update the HTML header with the new CSS link. The visual designer will also display the new look and feel.


      16. Now that we've associated a CSS based look and feel for this template, we'll now save this specific HTML design into a JDeveloper Code Snippet on the Component Palette, so we can easily generate new pages with this same design in the future.

        In the AMCEPage_temp.html page, copy the HTML table contents to the clipboard: (Ctrl-C).
        Note: Don't copy the <body> or <head> content, just the HTML table.


      17. On the Component Palette, select the "Code Snippets" page and right-click "Add Component...".


      18. In the new Snippet dialog, add the Name: "ACME Page" and paste (Ctrl-V) the HTML table design into the Code Snippet: text field.

        Click "OK" to add the snippet to the Component Palette.



      19. At this point can now create multiple new JSP or HTML pages based on this ACME page look and feel. To see how, create a new JSP page. (File->New...->Web-Tier->JSP->JSP) and name it "newacme.jsp".



      20. Click "Finish" to immediately generate a blank page.
      21. Insert the "ACME Page" code snippet into the page by dragging and dropping the snippet onto the blank page from the "Code Snippets" palette page.

        Before pasting the snippet into the page, a confirmation dialog will appear. Click "Yes" to proceed. This will allow you to insert the HTML markup in it's non-escaped format.


      22. As the new table is inserted into the page, the images will also appear since they reside in the local /images subdirectory.


      23. Since the snippet only contained the table content, and not the head, we have to apply the "ACME" look defined in the ACME css file. Select the "CSS" Component Palette page and drag and drop the ACME CSS onto the page. You'll notice the new look and feel in the "Main Content.." cell. You can also see the new CSS link in the Structure Pane.
      24. At this point you can continue building more ACME pages with a consistent look and feel. However to re-use this content in a different Web application, follow the instructions below.

      Archiving Web Templates as J2EE War Files

      In the previous steps, we have configured both JDeveloper and a single project to have a specific look and feel, however in the future we will want to create new Web applications which also have this look and feel. Instead of manually creating subdirectories CSS and images content for each new Web application, we can use JDeveloper's J2EE Web Archive (WAR) deployment feature to save an entire Web application as a template which we can then derive new projects from in the future.

      1. To archive this ACME Web application, locate the /WEB-INF/web.xml file, right-click and select "Create WAR Deployment Profile...".
        Note: This web.xml file exists because we created a JSP. In general, a web.xml will be generated whenever a J2EE Web-tier component such as a Servlet or JSP is created.


      2. Accept the default options for the WAR deployment profile and click "OK".


      3. Now deploy the application as WAR file to the local filesystem.

        This will place an archived version of the Web application in a WAR file in the local file system. You'll see where it has been deployed to in the Console:
        • "Wrote WAR file to ....TemplateFunACMEWebAppdeployacmewebapp.war
          Elapsed time for deployment: 5 seconds
          ---- Deployment finished. ---- Jan 18, 2005 6:32:28 PM

      4. To use our new Acme Application Template, we'll create a new project from the deployed WAR file.
        (File->New...->General->Projects->Project from WAR File).


      5. We'll name the new app "NewAcmeApp".



      6. On step 2, we specify the location of the recently deployed WAR file, but keep the default location for the "Root Directory for Web Module:".
        When finished, the wizard will unarchive and copy the contents of the WAR file into the new project's location.



      7. When the wizard completes, we'll have a new J2EE Web application based on the ACME Web application "template" that we created earlier. We'll also be able to create new "ACME Pages" with the same look and feel using the CSS and images that were archived into the template application!

        Important Note: If we were to move this WAR file to another JDeveloper instance, we would have to re-create the Component Palette customizations for the CSS entry and the ACME page snippet, but this easily done since the custom CSS and ACME page snippet content is now archived within the WAR file.


        Also, since the ACME Web application template is archived in a standard J2EE WAR file, it can also be migrated to any other J2EE compliant Application Server or Tool for further use.

      Summary

      This How To has hopefully provided useful tips on how to build and work with J2EE Web application design templates even before the full Templating support is available in the next JDeveloper revision. If you feel Web application Templating is a "must have" in the near future, and have specific requirements for its usage, feel free to offer your feedback here my Blog or in the JDeveloper OTN Forums.  Let us know your thoughts on how we can deliver a truly superior Templating experience in our next version of JDeveloper!


      10:05:25 AM    comment []

      © Copyright 2005 Chris Schalk.
       
      March 2005
      Sun Mon Tue Wed Thu Fri Sat
          1 2 3 4 5
      6 7 8 9 10 11 12
      13 14 15 16 17 18 19
      20 21 22 23 24 25 26
      27 28 29 30 31    
      Feb   Apr


      Search blog with Google:
       


      Home








      Click here to visit the Radio UserLand website.

      Subscribe to "Chris Schalk's J2EE Weblog" in Radio UserLand.

      Click to see the XML version of this web page.

      Click here to send an email to the editor of this weblog.