{"id":613,"date":"2015-09-02T20:48:00","date_gmt":"2015-09-02T19:48:00","guid":{"rendered":"http:\/\/ipsview.brownson.at\/?p=613"},"modified":"2015-09-02T20:49:02","modified_gmt":"2015-09-02T19:49:02","slug":"progressbar-in-ipsview-erstellen","status":"publish","type":"post","link":"https:\/\/ipsview.brownson.at\/?p=613","title":{"rendered":"ProgressBar in IPSView erstellen"},"content":{"rendered":"<p>Diese Woche m\u00f6chte ich einmal aufzeigen, welche M\u00f6glichkeiten es in IPSView gibt, eine ProgressBar zu realisieren.<\/p>\n<p>IPSView bietet derzeit kein eigenes Steuerelement \u201eProgressBar\u201c an, es stehen aber mehrere M\u00f6glichkeiten zur Verf\u00fcgung, um mit vorhandenen Steuerelementen einen Prozessfortschrittes zu visualisieren:<\/p>\n<p>Folgende Beispiele basieren auf einer Integer Variable, die die Werte 0 bis 100 annehmen kann.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>M\u00f6glichkeit 1 \u2013 ein Slider:<\/strong><\/span><\/p>\n<p>Die einfachste M\u00f6glichkeit besteht in der Verwendung eines Sliders.<\/p>\n<p>Slider auf die Zeichenfl\u00e4che ziehen, Minimum und Maximum Wert setzen \u2013 fertig<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-618\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_Slider_Editor.png\" alt=\"IPSView_ProgressBar_Slider_Editor\" width=\"286\" height=\"148\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_Slider_Editor-200x103.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_Slider_Editor.png 286w\" sizes=\"(max-width: 286px) 100vw, 286px\" \/><\/p>\n<p>Im Client zeigt der Slider dann den aktuellen Prozessfortschritt an<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_Slider_Client.png\"><img decoding=\"async\" class=\"alignnone wp-image-635 size-full\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_Slider_Client.png\" alt=\"IPSView_ProgressBar_Slider_Client\" width=\"700\" height=\"100\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_Slider_Client-200x29.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_Slider_Client-300x43.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_Slider_Client.png 700w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>Um zu verhindern, dass man den Slider in der View manuell verstellen kann, muss man dann noch ein TxtLabel mit transparenten Hintergrund \u00fcber den Slider legen.<\/p>\n<p>Diese Vorgangsweise zum Schutz gegen eine Benutzerinteraktion ist auch bei den anderen Beispielen n\u00f6tig (an dieser Stelle f\u00e4llt mir ein, dass es sicher eine gute Idee w\u00e4re die Option \u201eKeine Benutzerinteraktion\u201c auf alle Steuerelemente auszuweiten \uf04a)<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>M\u00f6glichkeit 2 \u2013 AssociationImage<\/strong><\/span><\/p>\n<p>Die n\u00e4chste M\u00f6glichkeit ist die Verwendung eines AssociationImages, hierzu braucht man f\u00fcr jeden Schritt der ProgressBar ein Image, das den aktuellen Status visualisiert.<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_Progress_AssocImage_Images.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-638\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_Progress_AssocImage_Images.png\" alt=\"IPSView_Progress_AssocImage_Images\" width=\"650\" height=\"118\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_Progress_AssocImage_Images-200x36.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_Progress_AssocImage_Images-300x54.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_Progress_AssocImage_Images.png 650w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>Diese Images kann man nun dazu verwenden die Assoziationen f\u00fcr die Werte 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 und 100 zu setzen.<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Editor.png\"><img decoding=\"async\" class=\"alignnone wp-image-616 size-medium\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Editor-300x195.png\" alt=\"IPSView_ProgressBar_AssocImage_Editor\" width=\"300\" height=\"195\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Editor-200x130.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Editor-300x195.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Editor.png 507w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Im Client wird dann je nach wert das zugeh\u00f6rige Image angezeigt<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Client.png\"><img decoding=\"async\" class=\"alignnone wp-image-634 size-full\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Client.png\" alt=\"IPSView_ProgressBar_AssocImage_Client\" width=\"705\" height=\"101\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Client-200x29.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Client-300x43.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocImage_Client.png 705w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/a><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>M\u00f6glichkeit 3 \u2013 Mehrere AssociationButtons<\/strong><\/span><\/p>\n<p>Die n\u00e4chste M\u00f6glichkeit besteht in der Verwendung mehrerer AssociationButtons. Jedem Button visualisiert einen Schritt der ProgressBar und hat 2 Assoziationen:<br \/>\nDie erste Assoziation hat immer fix den Wert 0 und visualisiert den inaktiven Zustand.<br \/>\nDie zweite Assoziation hat je nach Button den\u00a0Wert 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 oder\u00a0100 .<\/p>\n<p>Anbei ein Screenshot des Buttons mit dem Wert 40<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Editor.png\"><img decoding=\"async\" class=\"alignnone wp-image-615 size-medium\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Editor-300x195.png\" alt=\"IPSView_ProgressBar_AssocButtons_Editor\" width=\"300\" height=\"195\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Editor-200x130.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Editor-300x195.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Editor.png 507w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Im Client werden dann je nach Wert der Variable die ersten x Buttons aktiv dargestellt.<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client1.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-631\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client1.png\" alt=\"IPSView_ProgressBar_AssocButtons_Client1\" width=\"700\" height=\"102\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client1-200x29.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client1-300x44.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client1.png 700w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>Hier noch eine Version mit Label f\u00fcr Hintergrund<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client2.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-632\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client2.png\" alt=\"IPSView_ProgressBar_AssocButtons_Client2\" width=\"593\" height=\"100\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client2-200x34.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client2-300x51.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client2.png 593w\" sizes=\"(max-width: 593px) 100vw, 593px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Oder eine Version wo die oberen Wert farbig gestaltet sind<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client3.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-633\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client3.png\" alt=\"IPSView_ProgressBar_AssocButtons_Client3\" width=\"582\" height=\"102\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client3-200x35.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client3-300x53.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_AssocButtons_Client3.png 582w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/><\/a><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>M\u00f6glichkeit 4 &#8211; Mehrere ValueButtons<\/strong><\/span><\/p>\n<p>Die n\u00e4chste M\u00f6glichkeit ist die Verwendung von ValueButtons. Diese M\u00f6glichkeit setzt allerdings voraus, dass die Variable nur vordefinierte Werte annehmen darf (in diesem Fall 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 und 100, alle anderen vorgestellten M\u00f6glichkeiten funktionieren auch mit Zwischenschritten).<\/p>\n<p>F\u00fcr jeden Step der Variable wird ein ValueButton erzeugt und der dazugeh\u00f6rige Wert gesetzt.<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Editor.png\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-617\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Editor-300x253.png\" alt=\"IPSView_ProgressBar_ValueButtons_Editor\" width=\"300\" height=\"253\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Editor-200x169.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Editor-300x253.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Editor.png 359w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Im Client wird dann der Button mit dem passenden Wert aktiv dargestellt<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Client.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-636\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Client.png\" alt=\"IPSView_ProgressBar_ValueButtons_Client\" width=\"699\" height=\"101\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Client-200x29.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Client-300x43.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/IPSView_ProgressBar_ValueButtons_Client.png 699w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diese Woche m\u00f6chte ich einmal aufzeigen, welche M\u00f6glichkeiten es in  [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[49],"class_list":["post-613","post","type-post","status-publish","format-standard","hentry","category-howto","tag-progressbar"],"_links":{"self":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts\/613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=613"}],"version-history":[{"count":6,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts\/613\/revisions"}],"predecessor-version":[{"id":641,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts\/613\/revisions\/641"}],"wp:attachment":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}