Announcement

**Isomorphic** · 31 Oct 2006, 10:34

various answers

Hi skota -

1.when I use showResizeBar:"true" to a layout in a Hlayout the slider is coming at right side of the layout if I want to get it at left side what I need to do.(In my example I need to move properties layout to right)

At the moment, the resize bar is only placeable to the right (if in HLayout/HStack) or bottom (if in VLayout/VStack) of a member component. If you want to place the resize bar to the left or on top of a component, simply move the showResizeBar:true declaration to the config block for the component immediately preceding the component in question.

2.in the properties section I added one DynamicForm in that I am using numCols:3 and colSpan:3 for all the remaining rows other than buttons but I not getting layout as required where i am doing the mistake.

Form layout is similar to a table, but has some differences. A form element typically takes up 2 columns - one for the title and one for the element. So generally, you want to increase the numCols in even increments (2, 4, 6 etc). Also, the ButtonItem class (this is what gets created when you make a form button) specifies startRow: true and endRow:true by default. These properties force buttons to appear one per row, regardless of the numCols setting on the form. You can flip these properties to get buttons to lay out horizontally in a row, but this is generally not what you want because the paired title+field form layout usually creates uneven spacing. Here's your code with these settings on:

Code:

isc.defineClass("propdyFr","DynamicForm").addProperties({width:300,numCols:4, 
defaultItems:[{name:"item1", type:"blurb", defaultValue:"Album type Resource Based :",colSpan:4},
{name:"item2", title:"Resource Type", width:150,type:"select", valueMap:resourceList, defaultValue:"i",colSpan:4},
{name:"item3", title:"Title",width:150, type:"text", defaultValue:"",colSpan:4},
{name:"item4", title:"Description",width:150, height:50, type:"textArea", defaultValue:"",colSpan:4},
{name:"item5", title:"Tags",width:150, height:50, type:"textArea", defaultValue:"",colSpan:4},
{name:"item6", title:"Allow Comments", width:100,type:"radioGroup", vertical:false,valueMap:radioList, defaultValue:"y",colSpan:4},
{name:"item7", title:"Allow Ratings", width:100,type:"radioGroup",vertical:false, valueMap:radioList, defaultValue:"y",colSpan:4},
{name: "btn1", title:"Save", width:50,type:"button", endRow: false},
{name: "btn2", title:"Cancel",width:50, type:"button", endRow: false, startRow: false},
{name: "btn3", title:"Delete", width:50,type:"button", startRow: false}
]})
isc.defineClass("statdyFr","DynamicForm").addProperties({width:300,
items:[{name:"items1", title:"Source", type:"staticText", defaultValue:"@Getty Images"},
{name:"items2", title:"Views", type:"staticText", defaultValue:"329, 286"},
{name:"items3", title:"Comments", type:"staticText", defaultValue:"0"},
{name:"items4", title:"Ratings", type:"staticText", defaultValue:"0"}

]})

Just replace your "propdFr" class with the one above to see how it looks. As I was saying - this is probably not what you want, so I recommend splitting the buttons out into an HStack below the form so you can set even spacing. Also, take a look at the formLayout topic in our reference guide for more information on how form layouts behave:

http://www.smartclient.com/devcenter...pic=formLayout

I'll answer your third question in a separate post. Your prototype looks pretty good by the way :)

**skota** · 31 Oct 2006, 11:46

moving across the tabs is very slow. Is there any way we can fix that? Also the look we are trying to have is sleek yahoo email (new itnerface look) or flickr light weight look insteead of heavy componenets. Do you have examples of chaning themes and to check what themes available.

BTW, the below question is posted my DEV team, they will check your response tommorow, I truely appreciate your support.

Thanks,
-SK

**Isomorphic** · 31 Oct 2006, 15:19

1) skin switching

To use one of the other built-in skins, all you need to do is change this line:

Code:

<SCRIPT SRC=../../isomorphic/skins/SmartClient/load_skin.js></SCRIPT>

.. to eg this line, to load the built-in "fleet" skin:

Code:

<SCRIPT SRC=../../isomorphic/skins/fleet/load_skin.js></SCRIPT>

The other two built-in skins are "Cupertino" (similar to MacOS9) and "standard" (similar to Win2k).

To customize a skin, best practice is to identify the built-in skin that is closest to the final look you want, copy the entire skin directory to a new location, and then switch the <SCRIPT> loading tags above to point to the new location.

You can then:

modify or add to [skinName]/load_skin.js to change many skinning-related properties, such as paths to media and media sizes. The best overview for this is skins/SmartClient/load_skin.js. Individual properties can be looked up in the SmartClient reference.
modify or add [skinName]/skin_styles.js for CSS-based skinning, such as fonts and CSS borders. The best overview for this is skins/SmartClient/skin_styles.css
change media files, to eg, create a different look for media-based Tabs. Simply browsing the [skinName]/images folder with Windows Explorer in thumbnail mode is a good way to get an idea of how SmartClient uses images within components and what can be customized.

Also, when altering a built-in skin, best practice is to group all your changes at the end of the load_skin.js/skin_styles.css file, in order to protect your customizations against future changes in the default SmartClient skins.

2) performance

You are setting autoDraw:true on all components, so they are being drawn, then wiped out and redrawn as they are placed inside containing Layouts and Tabs. 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. Generally you should leave autoDraw:false on all components except the outermost container. If you correct this, both loading and tab switch will be faster.

Announcement

issues that we are facing

Comment

Comment

Comment