Object oriented programming

[skota]

Hi,

can we create components in object oriented manner, for example in our prototype we have multiple tabs and every tab has same combination of components. Is there any way we can create one class for total tab content and we can use that object for every tab and they will act as individually with out defining different variable names for each component in different tabs.If we can do it please give me some examples.

also for OO we want to have capability to update the contents dynamically
for example when we create and object...and stick it to the outer container panel
and then we should write the methiods to update it at the object level
so object contains visual representation
and data model as well
where visual representation added to outer frames
and data model is inbuilt with in the object so that for new and modify
we will update either with default values or database values....by takign the reference of the object
and the layout part of it is to be added to the outer containment
so basically contianment and layout is one part of the object and each object we should define the model where model level we will expose the methods for public access and inside it will update the calls to the compoenent values...

basically for the outer layout object how to have the model representaiton like AWT...i guess we can do that...but if we have examples that isbetter...if we look at the table data example we will know how to maintain the presentation and model side...basically the MVC part how to make it happen

please check our prototype at http://apache.cricnjoy.com/simpics/SmartClient/smartclientSDK/examples/myAtoks/prototype1.html

in our prototype when we click "Show Search Options" or "Hide Search Options" we are getting flicker why we are getting is there any problem with setting attributes.

Thank you,

[Isomorphic]

creating custom components

Yes, SmartClient makes it easy to create custom components.

QuickStart Guide chapter 9: Extending SmartClient provides an overview of custom component development.

There are examples in the downloadable SDK. From the SDK Explorer pick Examples > Custom Components. The most appropriate example for your scenario is probably "Simple Header". I've copied the code for the SimpleHeader example into this reply at the end.

If you need to update subcomponents that your class has generated, simply call the same APIs you would on a standalone component. This is how the built-in SmartClient components do things too: for example, the SmartClient Window class has a setTitle() method that updates a Label subcomponent.

Data models are handled similarly. For instance, the SmartClient ListGrid has a property listGrid.data, which is a ResultSet instance that manages caching, paging and sorting data.

Let us know if you have further questions. Code for the SimpleHeader example is below.

/*---------->    SimpleHeader.js    <----------*/


ClassFactory.defineClass("SimpleHeader", HLayout);


SimpleHeader.addProperties({
    // --- Instance Properties --- 
	width:"100%", // full width
	imageSrc:"",
	imageWidth:null,
	imageHeight:null, // will use this.height if not specified
	titleText:"blank title",
	titleStyle:"simpleHeaderTitle",

    // --- Instance Methods ---
    initWidget : function () {
        // call superclass implementation
        this.Super("initWidget", arguments);
    
        // on init, create the parts of this header
        this.addMembers([
        
            // img for logo image
            Img.create({
                ID:this.getID()+"_image",
                src:this.imageSrc,
                width:this.imageWidth,
                height:this.imageHeight || this.height,
                layoutAlign:"center"
            }),
            
            // spacer to stretch
            LayoutSpacer.create({
                ID:this.getID()+"_spacer"
            }),
            
            // label for text title
            Label.create({
                ID:this.getID()+"_title",
                valign:"center",
                styleName:this.titleStyle,
                contents:this.titleText,
                wrap:false
            })
        ]);
    }


});

[skota]

Performance

Hi,

Thank you

I am able to create class for content in the tab, after that the performance in the page is became slow what should be the reason.

Please check our prototype at
http://apache.cricnjoy.com/simpics/SmartClient/smartclientSDK/examples/myAtoks/prototype2.html

I written class in seperate js js/myAtoks.js please check it...

While i moving from one tab to another tab, while creating new tab or while clicking "show search options" we are getting blink what we should do to make it smooth..

Thank you

[Isomorphic]

re: performance

All components are still being drawn twice. You can see that this is happening by looking in the Developer Console at the "clears" count underneath the Log Messages are in the Results tab.

If you set the 'clears' log category threshold to 'INFO' via the Logging Preferences pulldown in the upper left of the Results Tab in the Developer Console, you'll notice these log messages:

11:21:09.796:INFO:clears:isc_HLayout_28:clear() (12 children) 11:21:10.687:INFO:clears:isc_VLayout_55:clear() (43 children)
11:21:11.234:INFO:clears:Tab0:clear() (44 children)
11:21:12.031:INFO:clears:resultsLayout:clear() (54 children)

I've taken a look at your code and I can see that you've set autoDraw: false on a lot of components, but I think you missed a few. Once you're familiar with the autoDraw behavior, the best approach is to simply turn autoDraw off globally and instead specify autoDraw: true for components you want to draw.

You can do this by doing this right after loading SmartClient:

isc.Canvas.setInstanceProperty("autoDraw", false);

You can then remove all of your autoDraw: false settings and simply specify autoDraw: true on the outer TabSet or call tabSet.draw() to draw it.

On the flicker issue - I'm not seeing it in IE7 or FF2.0 on my system. What OS/Browser are you using and what does the flicker look like - is the the whole page or just a portion? Where?

[skota]

we are using IE6, FF2.0, Flock0.7.4.1

I kept
isc.Canvas.setInstanceProperty("autoDraw", false);
in the very begining of the
http://apache.cricnjoy.com/simpics/SmartClient/smartclientSDK/examples/myAtoks/prototype2.html

Even after adding the above property the tabs creation and closing taking lot of time. Not sure if we are doing anything wrong.

when we close a tab then the whole screen refreshes quickly, I couldn't take screenshot as it is very fast. The flickr appears like an yellow background shown up for a moment and goes away. The flick period is slow enough to tell repaint is happening but fast enough to take snapshot.

Thanks,
-SK

[Isomorphic]

Hi skota,

Remember to always keep the Developer Console open in order to see errors and warnings. You currently have several errors being reported, but the following error may explain the rest:

19:50:00.804:WARN:TabContent:Tab1:This widget has overflow specified as false. This overflow setting is not supported - defaulting to overflow:"visible".

You are setting overflow:false in myAtoks.js. You probably mean overflow:"hidden". This probably explains both the flash and the performance problem.

Note: elsewhere, in the main prototype2.html, you have set 'overFlow:"auto"'. Note the capital F. The correct property name is "overflow" so this setting is not currently active.