Tutorial on: Easy to use custom scrollbars

Hey everyone i seen a few discussions around that people need customscrollbars
i have now gathered to must easy to use out of the box project
It works down to IE6 and works in all device - nicescroll
$(function() {                
   $("#thisdiv").niceScroll({ 
     cursorcolor:"#00F",      
     cursoropacitymin: 0.3    
Do a ready function and then call nicescroll on your element inside
remember to add the nicescroll lib
which you can get here
add it inside the head after jquery but before
you call it so it could look like this
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="your/path/jquery.nicescroll.js"></script>
    <script type="text/javascript" src="your/path/jquery.main.js"></script>
</head>
<body>
     <div id="thisdiv">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
</body>
</html>
To see more go to the libary's home
at: http://areaaperta.com/nicescroll/
Best regards
SP

On the home page on the free to register technology network
http://www.oracle.com/technetwork/middleware/bi-publisher/overview/index.html
you will find resources such as
* Oracle BI Publisher Datasheet - a 3 page overview document
* Oracle BI Publisher Overview Presentation - (Recorded Presentation with Sound - 18 min)
* Oracle BI Publisher - Benefits - Flash
* Oracle BI Publisher - Quick Tour - Flash
some sample reports
http://www.oracle.com/technetwork/middleware/bi-publisher/xmlpsamples-099828.html
and a tutorial with screen shots
Getting Started with Oracle BI Publisher 11g
http://st-curriculum.oracle.com/obe/fmw/bi/bip/bip11g/gettingstarted/gettingstarted.htm

Similar Messages

  • HTML Frames not using custom scrollbar in Flex 3 mx:HTML

    I've been working on an app that uses a custom skin in Flex 3. The app has a help window. The help contains an HTML with frames. Problem is, the main app vertical scrollbar custom skin is being ignored for the HTML Frames scrollbar (what looks like the classic version of Halo - maybe). This only happens with frames. It happens no matter how or where I place my HTML or HTMLLoader. If I dont have frames the custom scrollbar is used. Is there a node im missing in my skin css (obviously not VScrollBar or ScrollBar - the two standard used by Flex)? or some other way to connect the HTML Frames scrollbar to my custom skin.
    I'm not a noob but not an expert.
    Thanks.
    See attached image for example.

    Take the code of the jsp file :
    <%@ page language="java" %>
    <%@ taglib uri="WEB-INF/struts-html.tld" prefix="html" %>
    <html>
       <head>
         <title> First Struts Application </title>
       </head>
         <body>
            <table width="500" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td> </td>
            </tr>
            <tr bgcolor="#36566E">
              <td height="68" width="48%">
                <div align="left">
                  <img src="images/hht.gif" width="220" height="74">
                </div>
              </td>
            </tr>
            <tr>
             <td> </td>
            </tr>     
           </table>
           <html:form action="Lookup"
                      name="lookupForm"
                      type="wiley.LookupForm" >
           <table width="45%" border="0">
            <tr>
              <td>Symbol:</td>
              <td><html:text property="symbol" /> </td>
            </tr>
             <tr>       
              <td colspan="2" align="center"><html:submit/> </td>
             </tr>       
            </table>              
          </html:form>
         </body>
    </html>

  • Any easy to way to use custom scripts?

    Is there any plug-in or whatever that gives me a separate window where i can just click to use custom script? Any other easy ways are fine.

    You should be able to use the Actions palette for this. You can record the selection of a Script as an Insert Menu Item step in an Action. But this has been broken almost since the scripting functionality was added, in that the steps which invoke the scripts disappear from your stored Actions after Illustrator is quit and relaunched.
    It would be a hugely useful thing if Adobe ever bothered to fix this. You could automate things that are a combination of operations that can be performed by Actions but not by scripts, and vice-versa. But people have been after Adobe to fix this for something like seven versions now.
    You can organize the Scirpts menu into folders. And you can organize the Actions palette into Sets. It's just idiotic that Illustrator provides no mechanism for easy access to that organization, as does InDesign. Typical half-baked feature implementation.
    But it's a moot point now, anyway. I really no longer care whether Adobe gets around to fixing the many, many things that Illustrator has so long needed, because I'm not going to pay monthly rent for Illustrator, even if they do. ;-)
    JET

  • Tutorial:  Creating, saving and re-using Custom Shapes

    I've beeen experimenting with custom shapes for the last couple of days, and thought I'd share some of the tips and techniques I found.
    First of all, what are custom shapes?
    Well, they're vector objects.  That means that they are not built out of millions of individual pixels (like images are), but rather they're a series of mathematical statements that describe how to draw a line from point to point to create the vector shape.  This means that custom shapes are "resolution independent", and that they can be grossly shrunk or enlarged and still retain razor sharp edges, curves and corners.
    What are custom shapes good for?
    Pretty much anything where you want to use a good, sharp object.  In particular, using a custom shape as a clipping mask for an image that's been placed as a Smart Object is an outstanding technique, and really shows off the power that PSE is capable of.
    PSE comes with a lot of ready-to-use custom shapes for its Custom Shape tool, and there are probably hundreds of thousands available on the Web -- just search for "photoshop shapes".  Typically, those shapes will be supplied as Adobe CSH (Custom SHape) files, and simply copying the CSH files into the
    "C:\Program Files (x86)\Adobe\Photoshop Elements 10\Presets\Custom Shapes"
    directory will make them available for use with the Custom Shape tool.
    Sooner or later, though, you'll get the itch to create your own custom shapes.  Out of the box, PSE does not have the capability to let you create custom shapes and add them to the CSH files like the "big" Photoshop does, so we'll need to use a workaround:  store your custom shapes as layers in a PSD file, and when you want to use them simply copy them into your image. 
    N.B.:  To create custom shapes you'll have to use the reasonably priced Elements+ add-in:
    http://elementsplus.net/
    So, the procedure goes like this:
    Create a new image, using the PSE defaults, and save it as "CustomShapes01.psd", keeping it open.
    Open an image containing an object that you want to use as a custom shape.
    Use any of the selection tools to make an accurate selection of the object:
    In the Effects panel, use the Elements+...Paths effect and choose the Create New Path...From Current Selection:
    Use the Elements+...Paths again, choosing "Convert to Shape", giving it a name and colour of your choosing.  This will create a Shape Layer using that name.
    Important:  If your shape has "holes",
    use the Shape Selection tool and click on the shape to select it.  Then hit the "Combine" button in the Options Bar.  This will combine all the individual shapes used to create the shape and its "holes" into one shape, and prevent beaucoup problems later.
    Switch to the Move tool and drag the shape onto the tab of your "CustomShapes01.psd" image, keeping your mouse button pressed.  That image will become activated and you can move your cursor onto the image itself and drop your shape onto it.  Your PSD file will now have your custom shape as a shape layer:
    Save that "CustomShapes01.psd" file.
    You can repeat the process for as many custom shapes as you want, and they will each become a layer in the "CustomShapes01.psd" file.
    To use your custom shape, open the "CustomShapes01.psd" file and your target image and do the drag and drop with the Move tool to copy the custom shape onto your target image.
    I mentioned that using a custom shape as a clipping mask for an image placed as a Smart Object is a very powerful technique.  It's powerful because the custom shape can be altered at any time and still keep its sharpness, and because the Smart Object can also be resized without becoming pixellated.  Of course, that custom shape layer can have any number of layer styles applied to it and those layer styles will "follow" the shape if the shape is moved, resized or rotated.
    Here are three examples of using the custom shapes as clipping masks for Smart Objects:
    In this example, each custom shape is used as a clipping mask for an image Smart Object, as usual:
    Here, one custom shape was used as a clipping mask for an image Smart Object and they were linked. 
    Then the shape and image were duplicated and moved, rotated and resized.  Because of the linking, the Smart Object automatically kept its orientation and size relative to the custom shape throughout:
    If you want to use custom shapes as a "combined" clipping mask, the procedure is a little more complicated because you need to get all your custom shapes on one shape layer. 
    So, after copying your shapes into the target image (as separate shape layers), use the Shape Selection tool to select one of the shapes.  Using Edit...Cut will cut that shape layer to the Clipboard, and you can select one of the other shape layers and use Edit...Paste to paste the custom shape into that shape layer.  Repeat as necessary, and you will get all of your custom shapes on one shape layer.  Then use that single shape layer as your clipping mask:
    The neat thing is that the individual shapes can be selected with the Shape Selection tool and independently moved, resized or rotated as necessary.
    Enjoy!
    Ken

    Thanks, Michel.
    I forgot to mention one point about copying shape layers into one shape layer:  when you initially use the Shape Selection tool to select a shape for cutting, make sure the option for the Shape Selection tool is set to "Add to Selection".
    MichelBParis wrote:
    The problem with Elements+ is that it has so many features you soon forget what it can give you !
    Truer words were never spoken! 
    Ken

  • Custom Scrollbar Help

    Hello! Does anyone know any decent AS2 custom scrollbar tutorials?  I'm looking to create a basic scrollbar that has a white up arrow and a white down arrow, but none of the tutorials I've tried end up working properly..... I've done way more complex stuff without any issues, so I don't know why I'm having so much trouble with scrollbars.    Any help or suggestions would be much appreciated!
    Thank you,
    Nicole

    Thanks!  unfortunately you have to shell out $20 to view the tutorial found on that web page, but I did find another one that worked after I played around with it for a very, very long time.  I'll post it incase anyone else would find it useful:
    http://www.kirupa.com/developer/flash8/scrollbar.htm
    After I altered the colors, content, and sizing, I saved the scroll area as it's own .swf.  I then loaded it as an external movie clip into another page on my Flash site and it worked perfectly!

  • How to create a custom scrollbar?

    I don't have much knowledge on using Adobe Edge but I do have a custom scrollbar that I created in Flash Catalyst that I would like to make viewable on just an html site. Here's the flash based scrollbar on my site
    http://www.justdesignstudio.net/about.html
    Is it possible to create the exact same scrollbar in Adobe Edge? If so, how do I go about doing this?
    Justin

    Hi.
    Heathrowe has helped me with something similar, recently.
    You should check out Heathrowe's tutorials on scrollbars.
    All credits to him.

  • How to use custom tag in jsp

    sir
    plz tell me how to use custom tag in jsp.plz describe it.
    i will be thankful to u

    Do you want to use taglibs or develop custom tags? Either way take a look at these:
    http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/JSPTags.html
    http://www.stardeveloper.com/articles/display.html?article=2001081301&page=1
    http://www.onjava.com/pub/a/onjava/2000/12/15/jsp_custom_tags.html
    http://jakarta.apache.org/taglibs/tutorial.html
    http://www.ibm.com/developerworks/edu/j-dw-java-custom-i.html
    http://www.herongyang.com/jsp/tag.html

  • Flex 4: Custom ScrollBar not working in Custom DropDownList

    Hello,
    I'm having an odd issue that I just cannot figure out. I have a custom DropDownList .as component (to pass color values) and a custom skin. In this skin I am using a custom Scroller (same AS file component with mxml skin). When I use this configuration, clicking on the scrollbar just closes the DropDown. If I remove the skin from my custom scrollbar it works, which leads me to believe it has something to do with the DropDown skin. Even if I revert my custom Scroller to the spark Scroller, it still doesn't work. I've narrowed it down to what seems like a problem with my DropDownList skin.
    Not really sure what code to put here, but all I've been doing is right clicking my project and making new ActionScript components and MXML skins from the default skin. Here is my DropDownList skin, not sure if I should paste any other code? I have no idea what would be causing this, so I don't really know what code to place.
          [HostComponent("ccm.DropDown.DropDownList")]          

    Woops, the code didn't place correctly, here it is:
    <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" xmlns:Scroller="ccm.Scroller.*" xmlns:DropDown="ccm.DropDown.*">
        <fx:Metadata>
              [HostComponent("ccm.DropDown.DropDownList")]
         </fx:Metadata>
        <!-- host component -->
         <fx:Script fb:purpose="styling">
              <![CDATA[           
                   import flash.filters.BitmapFilterQuality;
                   import flash.filters.BitmapFilterType;
                   import mx.controls.Alert;
                   import spark.filters.*;
                   /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
                   static private const contentFill:Array = [];
                    * @private
                   override public function get contentItems():Array {return contentFill};
                    * @private
                   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                        openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
                        super.updateDisplayList(unscaledWidth, unscaledHeight);
              ]]>
         </fx:Script>
         <s:states>
              <s:State name="normal" />
              <s:State name="open" />
              <s:State name="disabled" />
         </s:states>
         <!---
         The PopUpAnchor control that opens the drop-down list.
         <p>In a custom skin class that uses transitions, set the
         <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
         -->
         <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
                           left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
                           popUpPosition="below" popUpWidthMatchesAnchorWidth="true" >
              <!---
              This includes borders, background colors, scrollers, and filters.
              @copy spark.components.supportClasses.DropDownListBase#dropDown
              -->
              <s:Group maxHeight="134" minHeight="22" >
                   <s:Rect id="fill" left="1" right="1" top="1" bottom="0" bottomLeftRadiusX="16.5" bottomRightRadiusX="16.5" topLeftRadiusX="16.5" topRightRadiusX="16.5" >
                        <s:fill>
                             <s:SolidColor color="0xFFFFFF" />
                        </s:fill>
                        <s:filters>
                             <s:GlowFilter
                                  color="0x000000"
                                  alpha=".35"
                                  blurX="6"
                                  blurY="6"
                                  strength="1"
                                  quality="{BitmapFilterQuality.HIGH}"
                                  inner="true"
                                  knockout="false"/>
                        </s:filters>
                   </s:Rect>
                   <!--- @private -->
                   <Scroller:Scroller id="scroller" left="8" top="8" right="8" bottom="8" hasFocusableChildren="false" minViewportInset="1"
                                          showButtons="false"
                                          trackColor="{hostComponent._trackColor}"
                                          thumbColor="{hostComponent._thumbColor}"
                                          skinClass="ccm.Scroller.ScrollerSkin">
                        <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                        <s:DataGroup id="dataGroup" itemRenderer="ccm.DropDown.DropDownItemRenderer">
                             <s:layout>
                                  <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                             </s:layout>
                        </s:DataGroup>
                   </Scroller:Scroller>
              </s:Group>
         </s:PopUpAnchor>
         <!---  The default skin is DropDownListButtonSkin.
         @copy spark.components.supportClasses.DropDownListBase#openButton
         @see spark.skins.spark.DropDownListButtonSkin -->
         <DropDown:DropDownButton id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
                                        skinClass="ccm.DropDown.DropDownButtonSkin"
                                        buttonColor="{hostComponent._buttonColor}"
                                        /> 
         <!--- @copy spark.components.DropDownList#labelDisplay -->
         <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
                    mouseEnabled="false" mouseChildren="false"
                    left="12" right="30" top="2" bottom="2" width="75" verticalCenter="1" />
    </s:SparkSkin>

  • Using custom fonts in iBooks Author

    I have a book in South Asian (Indic) script. The encoding is Unicode. I wanted to see how different fonts would look on iPad. Using iBook Author i created two different versions of the book. One used Gujarati MT, Apple supplied font. The second used open source TTF font. It checked out fine by MacOS when I installed it. The rendering of conjuncts (which would use additional glyph present in the font file) on iBook Author  looks good. When I use "preview" function of iBook Author to see how the content would look on iPad, conjuncts dont use special glyph but only standard character (I guess GSUB is not utilized). I tried the same experiment with Arial Unicode MS and Shruti both are standard fonts provided under Windows. it appears that only Apple supplied fonts have correct glyph substitution on iPad.
    Is there a way to fix it?
    If the issue is with iBook Author, I can use another software. My book is plain text so Author is an overkill. I was using it to test embedding of custom fonts because Author is easy to use.
    If the issue is missing definition in the font that is required by iPad rendering engine, I can get the font author to enhance the font.
    I attach four images. First two are from iBook Author where rendering is correct. The next two are from iPad where rendering using non Apple font is messed up.

    rajeshfrompalo alto wrote:
    Is comment about enhancing the font to support AAT still relevant? Are you saying that iOS needs those AAT extension that macOS does not need? Is this mostly around MORX table?
    iOS (and OS X) comes with two Gujarati fonts, Gujarati MT and Gujarati Sangam MN.  So the easiest thing to do is to use one of those.   Other platforms will probably have their own default Gujarati fonts with different names.
    If you want to embed a different Gujarati font in your .ibooks format book, then you will indeed have to convert that font from OpenType to AAT before iBooks will display it correctly.   It's not true that OS X no longer needs AAT Indic fonts -- Pages for example still cannot use Opentype Indic fonts.
    To convert an Opentype Indic font to an AAT Indic font I think someone will have to add a morx table along the lines of what is contained in Gujarati MT.
    Bear in mind that iBooks Author creates a format that can only be read on an iPad (unless you want to export to PDF).  If you want to produce books for all platforms and readers, then you need to use .epub format and a different app, like Pages or Indesign.   With epub format you would probably not normally try to embed fonts but just  rely on the reader to supply whatever Gujarati font is already on the device.

  • How to use custom control in Dialog Programming?

    How can I call a subscreen using custom control in Dialog Programming?
    The required subscreen contains a calender. Any class or something available for this purpose. Please suggest.

    As [vinraaj|http://forums.sdn.sap.com/profile.jspa?userID=3968041] wrote, call transaction SE51, there is a Wizard to help you generate the table control, it will create the table control and some includes with PBO/PAI modules > Read [Using the Table Control Wizard|http://help.sap.com/saphelp_bw/helpdata/en/6d/150d67da1011d3963800a0c94260a5/frameset.htm]
    Also there is a tutorial in the wiki, read [Learn Making First Table Control |http://wiki.sdn.sap.com/wiki/display/ABAP/LearnMakingFirstTableControl] by [Krishna Chauhan|http://wiki.sdn.sap.com/wiki/display/~nc0euof]
    Regards,
    Raymond

  • How to get custom scrollbar in captivate

    I am working with Adobe captivate V 3.0. I need custom
    scrollbar by which i can scroll some images.
    Does this software provide this facility? If Yes, how can i
    get it?
    Thanks!

    Hi semaphorian and welcome to our community
    Assuming I'm understanding what you are asking, Captivate in
    and of itself does not provide such a facility.
    Now that I've tossed that out, I should probably state what I
    understood you to ask. When you asked if Captivate could use a
    custom scrollbar to scroll images, I'm assuming you mean to ask if
    you are able to insert an image that is actually larger than the
    slide itself. Then you would use a scroll bar to pan the image to
    bring the hidden areas into view.
    I do suppose it's possible that you meant to ask if you could
    have a series of images similar to a slide show. Then use a scroll
    bar to move from image to image. And if that is what you are
    asking, I'm thinking that Captivate could actually accomplish that.
    Basically you would simply insert an image on each slide (or create
    a project based on images) and use a playback control as the
    *scrollbar* to move from slide to slide and display the different
    images.
    Hopefully something here was helpful to you... Rick

  • Using Custom Targets with Monaco Profiler??

    Does anyone know how to use custom RGB or CMYK profiling targets and import them into Monaco Profiler to build color profiles?
    I usually use Bill Atkinson's RGB targets and build RGB profiles with my driver using ProfileMaker, but want to build some profiles using Monaco Profiler. Monaco generates its own targets, but they are massive and use 3 to 4 times as much paper. For example, I can print Bill Atkinson's 1728 patch RGB target on one 11x17 sheet of paper. A 1728 patch target created from Monaco Profiler requires three 17x22 sheets of paper!  That's 6X the paper.  Besides, I already have saved measurement readings from MeasureTool for over 20 papers, and would like to avoid reprinting and remeasuring.  (This is for a Canon iPF6100 printer).
    I know this has been done before, but the targets have to be sequenced and reformatted properly so they will import into MP, and I don't know how to do it. Bill Atkinson has a script to do the conversion, but unfortunately it is Mac only, and I'm on a PC operating WinXP Pro.
    Thanks in advance,
    Lou

    I used to use Monaco, but have not for a few years now.  But, if I recall correctly, I thought you could trim the amount of swatch patches down if you wanted to in the user interface.  I used to use an xRite spectro and would read as many patches as possible ( the thinking was, the more the merrier ).  It seemed to be fairly easy to name and save the final .icc profile and then import it into Wasatch RIP in the calibration process.  But, when Monaco printed the patches, I remember they recommended all profiles and settings turned off in the RIP ( so, in theory, there were no adjustments made to the RAW prints which were then read by Monaco where it created an adjusted .icc profile which then could be used in the RIP ).  However, there was one profile made before the prints from Monaco and that was for Ti ( total ink ) which could then be setup in the RIP.  Not sure about the Canon, but I was profiling an HP 5500.  Once I was done with Monaco, the .icc profile I created via Monaco was then imported into the RIP where I could set my individual RGB and CMYK parameters.  I did many, many different variants in every conceivable scenario, but got the best results setting RGB and CMYK in the RIP which were based on the application color settings.
    But, I do not think it wise to use custom RGB's or CMYK's in the Monaco Profiler and am not sure you can.  This would defeat the purpose of doing a custom .icc print profile, in my thinking.  Perhaps I'm mistaken and you can apply custom RGB and CMYK profiles, then I would think you'd turn them off in the RIP.  Again, it's been a few years since I used Monaco, but I'm pretty sure they recommended not to use any profiles when printing the patches.

  • Custom scrollbar

    Good day
    based on this post
    http://forums.adobe.com/message/5526380#5526380
    about the custom scrollbar thanks to zaxist for providing just one question how can i stop the scrollbar from duplicating when a button that takes me to a LABEL on the timeline is clicked because that is were my scrollable text is at the scrollbar works but it just duplicate itself on click.
    am using this code
    yepnope({nope:[ 'jquery.mCustomScrollbar.css',
                                                       'jquery.mousewheel.min.js',
                                                       'jquery.mCustomScrollbar.js',
                                                       'jquery-ui-1.8.21.custom.min.js',
                                                       'jquery-1.8.3.min.js',
                                                      ],complete: init});
              function init (){
                                  sym.$("Fordnews").mCustomScrollbar({
                                            scrollInertia:500,
                                            scrollEasing:"easeOutCirc",
                                            scrollButtons:{
                                                      enable:true
    thanks for your time
    st

    import javax.swing.*;
    import java.awt.*;
    import java.awt.event.*;
    class Testing
      JButton btnAtTop, btnAtBottom;
      public void buildGUI()
        JScrollPane sp = new JScrollPane (new JTextArea(20,20));
        sp.getVerticalScrollBar().setUI(new javax.swing.plaf.metal.MetalScrollBarUI(){
          protected JButton createIncreaseButton(int orientation){
            btnAtBottom = super.createIncreaseButton(orientation);
            return btnAtBottom;
          protected JButton createDecreaseButton(int orientation){
            btnAtTop = super.createDecreaseButton(orientation);
            return btnAtTop;
        JFrame f = new JFrame();
        f.getContentPane().add(sp);
        f.setSize(400,300);
        f.setLocationRelativeTo(null);
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setVisible(true);
        btnAtTop.addActionListener(new ActionListener(){
          public void actionPerformed(ActionEvent ae){
            System.out.println("Going up");
        btnAtBottom.addActionListener(new ActionListener(){
          public void actionPerformed(ActionEvent ae){
            System.out.println("Going down");
      public static void main(String[] args)
        SwingUtilities.invokeLater(new Runnable(){
          public void run(){
            new Testing().buildGUI();
    }

  • Absolute pôsitionning vs custom layout using custom constraints

    Hello,
    Context:*
    my team has developped a custom PlanningPanel that show a kind of time sheet or planning: this display shows "task" objects (which represent operations performed by industrial equipments) and "result" objects (which represent the products and byproducts of the operations).
    We needed rather simple edition functionalities, not a full-fledged Gantt-diagram (critical path highlighting, etc), so we dismissed trying to find a planning edition library and we went our own way.
    We decided on absolute positionning (null Layout). It was a lot of work, but has worked quite well, until recent maintenance caused some regressions, and proved a bit hard to evolve.
    I'm afraid I can't post an SSCCE; what I want to do in this thread is discuss alternatives (what other solutions did we have, or could we switch to). I may be spwaning dedicated forum threads to ask on specific issues.
    Requirements:*
    Display:
    - each task is on its own line (and the x axis represents the clock)
    - several tasks can have a common clock span (they are executed in parallel)
    - each task shows up as a rectangle
    - results shows as icons under their task
    - contextual tooltips are displayed when hovering over the tasks/results areas
    Edition:
    - the user can select a task, or a result (and edit a contextual form)
    - resize the rectangles (which edits the task duration)
    - move (drag and drop) a task, moving its results along (changes the start time and end time, or reorder lines for clarity)
    - define dependencies (so that one task's inputs are made of former tasks' results) as connecting lines.
    The system is also used to drive the task execution (generates command scripts for task-specific systems and spawns the adequate processes). The application provides a read-only view of the tasks in action (for monitoring purposes), which shows each task as a colored rectangle that fills up as the process advances
    - the monitoring view enable to select a task/result to open a detailed state view, or pause/resume a task
    - but the user can not add/delete/move anything
    - Both editor and monitor views are close enough so that we wanted to factor the layout code
    Design Choice(s):*
    The developper decided on absolute positionning across the whole panel.
    Thinking back, the lines could easily have been laid out in a GridLayout, but for the rest, it seemed a good option.
    Thinking further, here are the alternatives I may have proposed (the app is in production as of today, but it is still possible to rework the thing along the next version if it decreases maitenance costs).
    - initial thought: custom PlanningPanel with one big paint method. The paintComponent() would use the model to draw the appropriate rectangles on its Graphics2D.
    - the current solution: custom PlanningPanel with absolute positionning of children panels: the PlanningPanel has a null Layout, its children are TaskPanel and ResultPanel instances, which are positionned manually (+setBounds()+).
    - custom Panel with Renderers: there would be only one panel, whose paintComponent() method would use a couple of flyweight TaskRenderer and ResultRenderer.
    - custom LayoutManager: there would be only one regular JPanel, whose Layout would be a custom PlanningLayout, that knows how to translate TaskModel properties (start time, duration,...) into coordinates
    In all cases above the dependency lines are drawn in the main panel's paintComponent(). The lines could also have been empty non-opaque JPanels, laid out consistently, and overriding their paintComponent() that would simply draw the appropriate diagonal.
    In all cases, the coordinates are computed by custom code, based on the properties of the tasks, and the moderate complexity of this computing is the same in all cases, provided their is a handy mapping between each "widget" and its corresponding entity (+TaskModel+, ResultModel).
    The approaches merely differ in how they integrate with event and repaint handling.
    We considered the Renderer approach, but I was afraid it would complicate the interactions (DnD, resizing, click, even contextual tooltip), same thing for the big paint method approach.
    It still think the current model where each task and result is an instane of some subclass of JComponent is quite straightforward in this regard:
    theTaskPanel.addMouseListener(new MouseListener() {
        public void mouseClicked(...) {
            contextualFormArea.showFormForTask(theTaskPanel.getTaskId());
    });Moreover, both first two approaches would have made it harder to "optimize" the drawing (painting only the areas that need change).
    The current solution works nicely on these aspects. However it exhibits some erratic problems, such as:
    - some tasks are blank rectangles when the planning panel is scrolled within a JScrollPane, whereas the correct painting comes back when the window is resized.
    - sometimes the contextual tooltip shows another task's state
    What I haven't considered until that day is developping a custom LayoutManager. I naivley think this might correct the painting problems or at least isolate it, as it would separate the positionning and the "edition" codes (the custom PlanningPanel contains methods to add a task, create IDs, handle drop points,... and is a fairly big intimidating class.
    Indeed it seems this separation would be the main advantage of the custom LayoutManager.
    The painting code (filling rectangles, switching colors), is mostly separated already, in TaskPanel and ResultPanel.
    --> I am correct so far? Any other alternative? Any argument pro/against the custom LayoutManager approach?*
    In particular, is it worth the trouble to devise a custom Layoutmanager that has only two use cases?
    Edited by: jduprez on May 28, 2009 11:24 AM

    Thank you for following up (and forgiving my interference in your own thread).
    However I disagree with most of your arguments.
    What you described seems to fit with the Model-View-Controller pattern with some nice OOD thrown in :).Sorry, I don't understand this sentence.
    1) Constraint objects may be over-engineering the problemDesigning Constraint as Adapters may be a bit far-fetched, right, but I think designing Constraints helps in making the layout reusable (remember, the layout would be used to represent two sets of entities whose classes have no inheritance relationship).
    2) Use a Grid Layout if that makes life easier, otherwise use a custom layout. I mentioned GridLayout about vertically stacking "lines" of tasks, but a GridLayout sure doesn't fit putting task widgets of different width (duration) on a horizontal timeline.
    i think it may be more clean to simply override the size methods (min, max pref size, etc.) that the layout manager will call and calculate the desired size there (or have them call a method that does it and return that.) This way, each object knows how to provide its desired size instead of relying on some other [constraint] object to provide it.Thank you for this suggestion. This is an interesting point of view, I'll think more about it, but on first read it doesn't seem to fit for several reasons.
    - this assumes the object has all the information necessary to compute its, say, preferred size. That's not the case out of the box: there is this "scale factor", that currently is known by the container, and there's also the constraint that a task with results is drawn thinner so that the result icons fit underneath. You couldn't guess those constraints, and admittedly I could rework my TaskPanel so that it receives the missing info
    - I think it would go contrary to what a LayoutManager generally does. Think about GridLayout: each child component has no clue as to how big it will render. And the GridLayout silently ignores all desired (min/max/pref'd) sizes. The LayoutManager has all the info (the list of children, their desired sizes, additional constraints, and the layout-specific rules) and arbitrates between desired sizes, which are no more than suggestions.
    - In particular, I don't se what it brings to split "how big am I" and "where do I go" across two classes, especially since in my case both will essentially convert times or durations into numbers of pixels.
    - Eventually, I have two situations, with in particular two "duration-dependant widgets" (TaskDefinitionPanel and TaskExecutionPanel). Reusing the same layout logic (duration/width conversion included) forces them to share some code (be it to delegate to a common class).
    To summarize, put the "How big am I?" code in the over-ridden size methods, and the "where do I go?" code in the layout manager.I understand you refer to my specific situation (because this maxim, although it sounds well, is not a correct description of how standard LayoutManagers work). Thank you for the refreshing point of view, but I think I'll keep the size code out of the widget classes (they already contain the painting and event-handling logic).
    Thank you anyway. Regards.
    J.

  • Why use custom wsdl vs. generic wsdl?

    I downloaded the custom wsdl and it's generic version and the generic version is double the size of the custom one.
    1) Why generic version is so big?
    2) Why would you use custom wsdl vs. generic version other than the fact the name is easy to read for custom wsdl?
    Thanks

    #1, because custom wsdl only contains the fields you used, while generic version show all of them.
    #2, like you mentioned, custom name is easy to read. what's more, if you have some functional extension integration development experience, you will find it will much more convenient for developer to build and maintain the code.

Maybe you are looking for