Results 1 to 6 of 6

Thread: Grooveshark.com like search bar

  1. #1
    Join Date
    Oct 2010
    Posts
    11
    Thanks
    4
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11 Windows

    Question Grooveshark.com like search bar

    what is the best way to implement the grooveshark.com search bar in Qt?

    grooveshark_search1.jpg

    i found a post on how to do it in HTML with CSS3
    http://designindevelopment.com/css/g...rch-with-css3/
    maybe i could adapt the html version styles to a custom widget
    but i am not sure how to start

    should i implement a custom widget or use a QFrame or something else?

  2. #2
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: Grooveshark.com like search bar

    Quote Originally Posted by bittuthegr8 View Post
    should i implement a custom widget or use a QFrame or something else?
    I would go for a QLineEdit and do some custom drawings for the border. As for the image inside: there are at least two exapmles of doing so out there in the web.

  3. #3
    Join Date
    Oct 2010
    Posts
    11
    Thanks
    4
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: Grooveshark.com like search bar

    the border is a gradient and i dont know how to do that with a border
    and the image inside is actually a functioning button

    i was thinking that i use a QFrame with layout managed by a QHBoxLayout containing the QLineedit and QPushButton
    and apply the nessary styles

  4. #4
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: Grooveshark.com like search bar

    Well to compose it is hard, so go just strait to a custom widget. With a QLineEdit as base. Reimp the paint event and do all the border drawing there. For this have a look at QPainter, QPainterPath and QLinearGradient.

    And my "image" meant to be button You can simple position a QPushButton absolute inside the custom widget.

  5. The following user says thank you to Lykurg for this useful post:

    bittuthegr8 (2nd February 2011)

  6. #5
    Join Date
    Oct 2010
    Posts
    11
    Thanks
    4
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: Grooveshark.com like search bar

    thanks i was not sure if to use a custom widget or not until now

  7. #6
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: Grooveshark.com like search bar

    Ehm, just came in my mind: if you wish to use this border also somewhere else, better subclass a QWidget/QFrame, set its contentMargins to lets say 15px, then you could do your 15px-borderdrawings and put inside that border any widget you like (e.g. QLineEdit).

Similar Threads

  1. Is there a web search pattern?
    By thewooferbbk in forum Qt Programming
    Replies: 1
    Last Post: 18th October 2009, 17:02
  2. file search
    By Benjamin in forum Qt Programming
    Replies: 1
    Last Post: 21st August 2009, 15:33
  3. QSortFilterProxyModel and search
    By vr in forum Qt Programming
    Replies: 1
    Last Post: 16th May 2007, 14:37
  4. Search box?
    By sdfisher in forum Qt Programming
    Replies: 2
    Last Post: 19th March 2007, 19:37

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.