{"id":20327,"date":"2016-12-02T14:49:49","date_gmt":"2016-12-02T14:49:49","guid":{"rendered":"https:\/\/legacy.livecode.com\/?p=20327"},"modified":"2016-12-02T14:49:49","modified_gmt":"2016-12-02T14:49:49","slug":"livecode-widgets-the-segmented-control","status":"publish","type":"post","link":"https:\/\/legacy.livecode.com\/livecode-widgets-the-segmented-control\/","title":{"rendered":"LiveCode Widgets: The Segmented Control"},"content":{"rendered":"

LiveCode 8 introduced the segmented control widget. \u00a0This very versatile widget can be used in several user interface roles, and this blog post shows you how to use it to align text in a field\u00a0and to create a 5-star rating control.<\/p>\n

<\/p>\n

This post is part of an on-going series about the widgets included in LiveCode 8 and how to get the most from them. \u00a0In previous posts, you can read about the line chart<\/a>, the SVG path<\/a>, the header bar<\/a>\u00a0and the navigation bar<\/a>.<\/p>\n

The segmented control shows several options (“segments”), and allows one or more of them to be highlighted by clicking on them. \u00a0Each segment is identified either by a label, or an icon.<\/p>\n

We chose to include a segmented control widget in LiveCode 8 because segmented controls are quite widely used in modern user interfaces. \u00a0For example, Xcode uses a segmented control at the top right of its main project\u00a0view to allow quick access to toggling parts of the user interface without using a large area of the screen.<\/p>\n

Controlling text alignment<\/h3>\n

One of the ways that we use the segmented control in the LiveCode IDE is to control the alignment of text. \u00a0You can find it used in that way on the Property Inspector’s “Text” page for the Field control, for example.<\/p>\n

\"The<\/a>

The Property Inspector uses segmented controls as property editors.<\/p><\/div>\n

To build a similar control, create a new stack and drag a field and a segmented control onto it from the tools palette.<\/p>\n

Open the Property Inspector for the segmented control, and set the “Display style” (the itemStyle<\/strong> property) to “icons”. \u00a0This will display an icon for each segment, instead of a textual label. \u00a0The segmented control is set up with the text alignment icons that you need by default.<\/p>\n

Next, set the “Segment names” to “left”, “center” and “right”. \u00a0This\u00a0itemNames<\/strong> property allows you to associate a value or tag with each segment, separately from the text that’s displayed on the control. I usually think of the\u00a0itemNames<\/strong>\u00a0as\u00a0values that have meaning to the app, and\u00a0the\u00a0itemLabels<\/strong> as values that have meaning to the user. The segment names and labels are similar to the\u00a0tags and labels used by LiveCode menus.<\/p>\n

Finally, you need a script for the segmented control. \u00a0When the user changes the highlight of the segmented control by clicking on one of the segments, it sends the\u00a0hiliteChanged<\/strong> message, and your script should handle this message to change the field’s\u00a0textAlign<\/strong> property.<\/p>\n

on hiliteChanged\r\n   set the textAlign of field 1 to the hilitedItemNames of me\r\nend hiliteChanged<\/code><\/pre>\n
And that’s it. \u00a0Switch to browse mode, and click on the segmented control to change the alignment of the field’s text.<\/p>\n
\"Alignment<\/a>
Alignment control with a segmented widget.<\/p><\/div>\n
A 5-star rating control<\/h3>\n
By adding some script support,\u00a0you can use the segmented control to create some controls that would be quite difficult to do using “classic” LiveCode controls. \u00a0For example, you can build a “5 star rating” control quite quickly. \u00a0When you click on a segment, the control will display filled stars for the segment you clicked on and all the segments to the left, and empty stars for all the segments to the right.<\/p>\n
Create a new segmented control, set it to display icons, and give it 5 segments. \u00a0Next, go to the “Icons” pane of the Property Inspector. \u00a0Set all the “Segment icons” (the\u00a0itemIcons<\/strong> property) to the “empty star” icons, and all the “Hilited segment icons” (the\u00a0hilitedItemIcons<\/strong> property) to the “star” icon. \u00a0You should now be able to click on individual segments to have them turn from an empty star to a full star.<\/p>\n
To get the star rating to work properly, however, it’ll be necessary to allow multiple segments to be highlighted. You can do this on the “Basic” pane of the Property Inspector by enabling the “Multiple hilites” (multipleHilites<\/strong>)\u00a0property.<\/p>\n
The appearance of the control is almost right, but why not tweak the colours too? It would be nicer if the stars changed colour when highlighted, but the background colours of the segments stayed the same. To do this, go to the\u00a0“Colors” pane of the Property Inspector. \u00a0Change the “Hilited segment label color” (hilitedTextColor<\/strong>) to blue, and the the “Selected segment color” (hiliteColor<\/strong>) to the same grey background colour as used for the “Segment color” (backColor<\/strong>).<\/p>\n
The final part is to add a script that hooks this all together, and makes sure that the correct segments are highlighted when the user clicks on the control by responding to the hiliteChanged<\/strong> message. The\u00a0hilitedItems<\/strong> property contains the segment numbers that are highlighted.<\/p>\n
The script first checks which segment was clicked, and then creates a new value for the\u00a0hilitedItems<\/strong> that includes all the segments up to and including the clicked segment.<\/p>\n
\r\nlocal sRating\r\non hiliteChanged\r\n   local tHilited\r\n   -- Find the rightmost item that changed.  This is\r\n   -- the segment that the user clicked\r\n   put the hilitedItems of me into tHilited\r\n   repeat with tSegment = the itemCount of me down to 1\r\n      if tSegment is among the items of tHilited then\r\n         if tSegment > sRating then\r\n            put tSegment into sRating\r\n            exit repeat\r\n         end if\r\n      else\r\n         if tSegment <= sRating then\r\n            put tSegment into sRating\r\n            exit repeat\r\n         end if\r\n      end if    \r\n   end repeat\r\n   \r\n   -- Highlight all the segments up to and\r\n   -- including the one that was clicked\r\n   local tNewHilite\r\n   repeat with tSegment = 1 to sRating\r\n      put tSegment & comma after tNewHilite\r\n   end repeat\r\n   -- Remove trailing comma\r\n   delete char -1 of tNewHilite\r\n   set the hilitedItems of me to tNewHilite\r\nend hiliteChanged\r\n<\/code><\/pre>\n
\"A<\/a>
A 5-star rating control built with the segmented control widget.<\/p><\/div>\n
Going further<\/h3>\n
There are many other good uses for the segmented control: you can use it for switching between cards, as a row of options that can be toggled, or possibly even to create an upvote\/downvote control in a forum comment-viewing app.<\/p>\n
How are you using the segmented control widget in your apps?<\/p>\n","protected":false},"excerpt":{"rendered":"
LiveCode 8 introduced the segmented control widget. \u00a0This very versatile widget can be used in several user interface roles, and this blog post shows you how to use it to align text in a field\u00a0and to create a 5-star rating control.<\/p>\n","protected":false},"author":27,"featured_media":20469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[45],"tags":[192,107],"class_list":["post-20327","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-livecode-8","tag-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts\/20327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/comments?post=20327"}],"version-history":[{"count":7,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts\/20327\/revisions"}],"predecessor-version":[{"id":20468,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts\/20327\/revisions\/20468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/media\/20469"}],"wp:attachment":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/media?parent=20327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/categories?post=20327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/tags?post=20327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}