OS X like Search Field

ibe · Post by **ibe** » Sun Oct 04, 2009 12:22 pm

How could one make an OS X type search edit field that has the magnifying glass in the left corner and an "x" on the right side if the edit field contains characters to empty it.

An example of the control is in the Revolution Dictionary window's right-hand top corner.

Any suggestions are more than welcome.

espais · Post by **espais** » Sun Oct 04, 2009 12:47 pm

Hi,

Capture the search box and convert to png with transparent background.
Import into your stack "Import image as control".
Create on text field and change the properties with no border and no focus.
Put the field text over the image search box.

Code like this for example:

I have a button named "b_search" that have the code for perform the searches. From the field text I call it.

on rawkeydown theKey
switch theKey
case 65293
send "mouseUp" to button "b_search"
break
case 65421
send "mouseUp" to button "b_search"
break
default
pass rawkeydown
end switch
end rawkeydown

on OpenField
put "" into the fld f_buscar -- To delete the last search words
--select the text of field f_buscar --To select the last seach words
pass openfield
end OpenField

If you want perform some special search clicking into the magnifying glass, cut it and import as another image into your stack and asign to a menu option for example. Code as you need inside the menu option.

Salut,
Josep

ibe · Post by **ibe** » Thu Oct 08, 2009 1:22 pm

Ok, I was just hoping that I wouldn't have to do it at such a low level. Thanks for the tip, I will do it as suggested and make it a group control thingie.

espais · Post by **espais** » Thu Oct 08, 2009 3:39 pm

Yes, creating a group you can copy pasta and only changing a few code you can reuse it.

Salut,
Josep

FourthWorld · Post by **FourthWorld** » Thu Oct 08, 2009 4:11 pm

ibe wrote:Ok, I was just hoping that I wouldn't have to do it at such a low level. Thanks for the tip, I will do it as suggested and make it a group control thingie.

Three tips if you're using v3.5:

1. You can set the group's selectGroupedControls property to false and you'll be able to select and work with the control just like any native control, as if it were a single object. If you need to edit its inner controls again just set the selectGroupedControls property of the group to true again while you're working on it.

2. You can put any resizing code you need directly in the control, and use the resizeControl message in the group's script to handle adjusting its inner controls.

3. You may consider using behaviors for the group, so you can reuse it easily across multiple stacks with the code centralized in one place.

v3.5 took us a major leap forward for making custom controls. Lots of great stuff can be done so much more easily than ever before.