How to show Glyphicon option for selection as widget with type=image

0
Question: How to use Glyphicon as an image in a widget property? Scenario: When I add an ActionButton to a layout there is an icon property of the button that offers a radio selector for 'GlyphIcon' or 'Image'. But, when creating a widget of type image, there is no option for use of a Glyphicon. <property key='myImage' type='image'> ... </property> When I alter to type='icon' I am told that the XML is invalid against the XSD as 'icon' is not a valif property.type value.
asked
2 answers
1

An alternative is to use glyphicon classnames(String) and add the class to the element together with "glyphicon" class. http://getbootstrap.com/components/#glyphicons

answered
1

Unfortunately, the widget setting options are lacking compared to what MX has built in for their own widgets. I solved this issue with the following code:

3 properties:

  • Icon type (none, glyphicon, image)
  • Glyphicon enum (with all glyphicons available in MX (if type is glyphicon)
  • Image selector to select the image (if type = image)

    <property key="button_iconType" type="enumeration" defaultvalue="none"> Icon type <category>Button</category> <description>Determines icon type</description> <enumerationvalues> <enumerationvalue key="none">None</enumerationvalue> <enumerationvalue key="glyphicon">Glypicon</enumerationvalue> <enumerationvalue key="image">Image</enumerationvalue> </enumerationvalues> </property>

    <property key="button_glyphIcon" type="enumeration" defaultValue="glyphicon_info_sign">
        <caption>Glypicon</caption>
        <category>Button</category>
        <description>Required if icon type is Glyphicon, represents one of the available glyphicons for MX.</description>
        <enumerationValues>
            <enumerationValue key="glyphicon_asterisk">asterisk</enumerationValue>
            <enumerationValue key="glyphicon_plus">plus</enumerationValue>
            <enumerationValue key="glyphicon_eur">eur</enumerationValue>
            <enumerationValue key="glyphicon_euro">euro</enumerationValue>
            <enumerationValue key="glyphicon_minus">minus</enumerationValue>
            <enumerationValue key="glyphicon_cloud">cloud</enumerationValue>
            <enumerationValue key="glyphicon_envelope">envelope</enumerationValue>
            <enumerationValue key="glyphicon_pencil">pencil</enumerationValue>
            <enumerationValue key="glyphicon_glass">glass</enumerationValue>
            <enumerationValue key="glyphicon_music">music</enumerationValue>
            <enumerationValue key="glyphicon_search">search</enumerationValue>
            <enumerationValue key="glyphicon_heart">heart</enumerationValue>
            <enumerationValue key="glyphicon_star">star</enumerationValue>
            <enumerationValue key="glyphicon_star_empty">star-empty</enumerationValue>
            <enumerationValue key="glyphicon_user">user</enumerationValue>
            <enumerationValue key="glyphicon_film">film</enumerationValue>
            <enumerationValue key="glyphicon_th_large">th-large</enumerationValue>
            <enumerationValue key="glyphicon_th">th</enumerationValue>
            <enumerationValue key="glyphicon_th_list">th-list</enumerationValue>
            <enumerationValue key="glyphicon_ok">ok</enumerationValue>
            <enumerationValue key="glyphicon_remove">remove</enumerationValue>
            <enumerationValue key="glyphicon_zoom_in">zoom-in</enumerationValue>
            <enumerationValue key="glyphicon_zoom_out">zoom-out</enumerationValue>
            <enumerationValue key="glyphicon_off">off</enumerationValue>
            <enumerationValue key="glyphicon_signal">signal</enumerationValue>
            <enumerationValue key="glyphicon_cog">cog</enumerationValue>
            <enumerationValue key="glyphicon_trash">trash</enumerationValue>
            <enumerationValue key="glyphicon_home">home</enumerationValue>
            <enumerationValue key="glyphicon_file">file</enumerationValue>
            <enumerationValue key="glyphicon_time">time</enumerationValue>
            <enumerationValue key="glyphicon_road">road</enumerationValue>
            <enumerationValue key="glyphicon_download_alt">download-alt</enumerationValue>
            <enumerationValue key="glyphicon_download">download</enumerationValue>
            <enumerationValue key="glyphicon_upload">upload</enumerationValue>
            <enumerationValue key="glyphicon_inbox">inbox</enumerationValue>
            <enumerationValue key="glyphicon_play_circle">play-circle</enumerationValue>
            <enumerationValue key="glyphicon_repeat">repeat</enumerationValue>
            <enumerationValue key="glyphicon_refresh">refresh</enumerationValue>
            <enumerationValue key="glyphicon_list_alt">list-alt</enumerationValue>
            <enumerationValue key="glyphicon_lock">lock</enumerationValue>
            <enumerationValue key="glyphicon_flag">flag</enumerationValue>
            <enumerationValue key="glyphicon_headphones">headphones</enumerationValue>
            <enumerationValue key="glyphicon_volume_off">volume-off</enumerationValue>
            <enumerationValue key="glyphicon_volume_down">volume-down</enumerationValue>
            <enumerationValue key="glyphicon_volume_up">volume-up</enumerationValue>
            <enumerationValue key="glyphicon_qrcode">qrcode</enumerationValue>
            <enumerationValue key="glyphicon_barcode">barcode</enumerationValue>
            <enumerationValue key="glyphicon_tag">tag</enumerationValue>
            <enumerationValue key="glyphicon_tags">tags</enumerationValue>
            <enumerationValue key="glyphicon_book">book</enumerationValue>
            <enumerationValue key="glyphicon_bookmark">bookmark</enumerationValue>
            <enumerationValue key="glyphicon_print">print</enumerationValue>
            <enumerationValue key="glyphicon_camera">camera</enumerationValue>
            <enumerationValue key="glyphicon_font">font</enumerationValue>
            <enumerationValue key="glyphicon_bold">bold</enumerationValue>
            <enumerationValue key="glyphicon_italic">italic</enumerationValue>
            <enumerationValue key="glyphicon_text_height">text-height</enumerationValue>
            <enumerationValue key="glyphicon_text_width">text-width</enumerationValue>
            <enumerationValue key="glyphicon_align_left">align-left</enumerationValue>
            <enumerationValue key="glyphicon_align_center">align-center</enumerationValue>
            <enumerationValue key="glyphicon_align_right">align-right</enumerationValue>
            <enumerationValue key="glyphicon_align_justify">align-justify</enumerationValue>
            <enumerationValue key="glyphicon_list">list</enumerationValue>
            <enumerationValue key="glyphicon_indent_left">indent-left</enumerationValue>
            <enumerationValue key="glyphicon_indent_right">indent-right</enumerationValue>
            <enumerationValue key="glyphicon_facetime_video">facetime-video</enumerationValue>
            <enumerationValue key="glyphicon_picture">picture</enumerationValue>
            <enumerationValue key="glyphicon_map_marker">map-marker</enumerationValue>
            <enumerationValue key="glyphicon_adjust">adjust</enumerationValue>
            <enumerationValue key="glyphicon_tint">tint</enumerationValue>
            <enumerationValue key="glyphicon_edit">edit</enumerationValue>
            <enumerationValue key="glyphicon_share">share</enumerationValue>
            <enumerationValue key="glyphicon_check">check</enumerationValue>
            <enumerationValue key="glyphicon_move">move</enumerationValue>
            <enumerationValue key="glyphicon_step_backward">step-backward</enumerationValue>
            <enumerationValue key="glyphicon_fast_backward">fast-backward</enumerationValue>
            <enumerationValue key="glyphicon_backward">backward</enumerationValue>
            <enumerationValue key="glyphicon_play">play</enumerationValue>
            <enumerationValue key="glyphicon_pause">pause</enumerationValue>
            <enumerationValue key="glyphicon_stop">stop</enumerationValue>
            <enumerationValue key="glyphicon_forward">forward</enumerationValue>
            <enumerationValue key="glyphicon_fast_forward">fast-forward</enumerationValue>
            <enumerationValue key="glyphicon_step_forward">step-forward</enumerationValue>
            <enumerationValue key="glyphicon_eject">eject</enumerationValue>
            <enumerationValue key="glyphicon_chevron_left">chevron-left</enumerationValue>
            <enumerationValue key="glyphicon_chevron_right">chevron-right</enumerationValue>
            <enumerationValue key="glyphicon_plus_sign">plus-sign</enumerationValue>
            <enumerationValue key="glyphicon_minus_sign">minus-sign</enumerationValue>
            <enumerationValue key="glyphicon_remove_sign">remove-sign</enumerationValue>
            <enumerationValue key="glyphicon_ok_sign">ok-sign</enumerationValue>
            <enumerationValue key="glyphicon_question_sign">question-sign</enumerationValue>
            <enumerationValue key="glyphicon_info_sign">info-sign</enumerationValue>
            <enumerationValue key="glyphicon_screenshot">screenshot</enumerationValue>
            <enumerationValue key="glyphicon_remove_circle">remove-circle</enumerationValue>
            <enumerationValue key="glyphicon_ok_circle">ok-circle</enumerationValue>
            <enumerationValue key="glyphicon_ban_circle">ban-circle</enumerationValue>
            <enumerationValue key="glyphicon_arrow_left">arrow-left</enumerationValue>
            <enumerationValue key="glyphicon_arrow_right">arrow-right</enumerationValue>
            <enumerationValue key="glyphicon_arrow_up">arrow-up</enumerationValue>
            <enumerationValue key="glyphicon_arrow_down">arrow-down</enumerationValue>
            <enumerationValue key="glyphicon_share_alt">share-alt</enumerationValue>
            <enumerationValue key="glyphicon_resize_full">resize-full</enumerationValue>
            <enumerationValue key="glyphicon_resize_small">resize-small</enumerationValue>
            <enumerationValue key="glyphicon_exclamation_sign">exclamation-sign</enumerationValue>
            <enumerationValue key="glyphicon_gift">gift</enumerationValue>
            <enumerationValue key="glyphicon_leaf">leaf</enumerationValue>
            <enumerationValue key="glyphicon_fire">fire</enumerationValue>
            <enumerationValue key="glyphicon_eye_open">eye-open</enumerationValue>
            <enumerationValue key="glyphicon_eye_close">eye-close</enumerationValue>
            <enumerationValue key="glyphicon_warning_sign">warning-sign</enumerationValue>
            <enumerationValue key="glyphicon_plane">plane</enumerationValue>
            <enumerationValue key="glyphicon_calendar">calendar</enumerationValue>
            <enumerationValue key="glyphicon_random">random</enumerationValue>
            <enumerationValue key="glyphicon_comment">comment</enumerationValue>
            <enumerationValue key="glyphicon_magnet">magnet</enumerationValue>
            <enumerationValue key="glyphicon_chevron_up">chevron-up</enumerationValue>
            <enumerationValue key="glyphicon_chevron_down">chevron-down</enumerationValue>
            <enumerationValue key="glyphicon_retweet">retweet</enumerationValue>
            <enumerationValue key="glyphicon_shopping_cart">shopping-cart</enumerationValue>
            <enumerationValue key="glyphicon_folder_close">folder-close</enumerationValue>
            <enumerationValue key="glyphicon_folder_open">folder-open</enumerationValue>
            <enumerationValue key="glyphicon_resize_vertical">resize-vertical</enumerationValue>
            <enumerationValue key="glyphicon_resize_horizontal">resize-horizontal</enumerationValue>
            <enumerationValue key="glyphicon_hdd">hdd</enumerationValue>
            <enumerationValue key="glyphicon_bullhorn">bullhorn</enumerationValue>
            <enumerationValue key="glyphicon_bell">bell</enumerationValue>
            <enumerationValue key="glyphicon_certificate">certificate</enumerationValue>
            <enumerationValue key="glyphicon_thumbs_up">thumbs-up</enumerationValue>
            <enumerationValue key="glyphicon_thumbs_down">thumbs-down</enumerationValue>
            <enumerationValue key="glyphicon_hand_right">hand-right</enumerationValue>
            <enumerationValue key="glyphicon_hand_left">hand-left</enumerationValue>
            <enumerationValue key="glyphicon_hand_up">hand-up</enumerationValue>
            <enumerationValue key="glyphicon_hand_down">hand-down</enumerationValue>
            <enumerationValue key="glyphicon_circle_arrow_right">circle-arrow-right</enumerationValue>
            <enumerationValue key="glyphicon_circle_arrow_left">circle-arrow-left</enumerationValue>
            <enumerationValue key="glyphicon_circle_arrow_up">circle-arrow-up</enumerationValue>
            <enumerationValue key="glyphicon_circle_arrow_down">circle-arrow-down</enumerationValue>
            <enumerationValue key="glyphicon_globe">globe</enumerationValue>
            <enumerationValue key="glyphicon_wrench">wrench</enumerationValue>
            <enumerationValue key="glyphicon_tasks">tasks</enumerationValue>
            <enumerationValue key="glyphicon_filter">filter</enumerationValue>
            <enumerationValue key="glyphicon_briefcase">briefcase</enumerationValue>
            <enumerationValue key="glyphicon_fullscreen">fullscreen</enumerationValue>
            <enumerationValue key="glyphicon_dashboard">dashboard</enumerationValue>
            <enumerationValue key="glyphicon_paperclip">paperclip</enumerationValue>
            <enumerationValue key="glyphicon_heart_empty">heart-empty</enumerationValue>
            <enumerationValue key="glyphicon_link">link</enumerationValue>
            <enumerationValue key="glyphicon_phone">phone</enumerationValue>
            <enumerationValue key="glyphicon_pushpin">pushpin</enumerationValue>
            <enumerationValue key="glyphicon_usd">usd</enumerationValue>
            <enumerationValue key="glyphicon_gbp">gbp</enumerationValue>
            <enumerationValue key="glyphicon_sort">sort</enumerationValue>
            <enumerationValue key="glyphicon_sort_by_alphabet">sort-by-alphabet</enumerationValue>
            <enumerationValue key="glyphicon_sort_by_alphabet_alt">sort-by-alphabet-alt</enumerationValue>
            <enumerationValue key="glyphicon_sort_by_order">sort-by-order</enumerationValue>
            <enumerationValue key="glyphicon_sort_by_order_alt">sort-by-order-alt</enumerationValue>
            <enumerationValue key="glyphicon_sort_by_attributes">sort-by-attributes</enumerationValue>
            <enumerationValue key="glyphicon_sort_by_attributes_alt">sort-by-attributes-alt</enumerationValue>
            <enumerationValue key="glyphicon_unchecked">unchecked</enumerationValue>
            <enumerationValue key="glyphicon_expand">expand</enumerationValue>
            <enumerationValue key="glyphicon_collapse_down">collapse-down</enumerationValue>
            <enumerationValue key="glyphicon_collapse_up">collapse-up</enumerationValue>
            <enumerationValue key="glyphicon_log_in">log-in</enumerationValue>
            <enumerationValue key="glyphicon_flash">flash</enumerationValue>
            <enumerationValue key="glyphicon_log_out">log-out</enumerationValue>
            <enumerationValue key="glyphicon_new_window">new-window</enumerationValue>
            <enumerationValue key="glyphicon_record">record</enumerationValue>
            <enumerationValue key="glyphicon_save">save</enumerationValue>
            <enumerationValue key="glyphicon_open">open</enumerationValue>
            <enumerationValue key="glyphicon_saved">saved</enumerationValue>
            <enumerationValue key="glyphicon_import">import</enumerationValue>
            <enumerationValue key="glyphicon_export">export</enumerationValue>
            <enumerationValue key="glyphicon_send">send</enumerationValue>
            <enumerationValue key="glyphicon_floppy_disk">floppy-disk</enumerationValue>
            <enumerationValue key="glyphicon_floppy_saved">floppy-saved</enumerationValue>
            <enumerationValue key="glyphicon_floppy_remove">floppy-remove</enumerationValue>
            <enumerationValue key="glyphicon_floppy_save">floppy-save</enumerationValue>
            <enumerationValue key="glyphicon_floppy_open">floppy-open</enumerationValue>
            <enumerationValue key="glyphicon_credit_card">credit-card</enumerationValue>
            <enumerationValue key="glyphicon_transfer">transfer</enumerationValue>
            <enumerationValue key="glyphicon_cutlery">cutlery</enumerationValue>
            <enumerationValue key="glyphicon_header">header</enumerationValue>
            <enumerationValue key="glyphicon_compressed">compressed</enumerationValue>
            <enumerationValue key="glyphicon_earphone">earphone</enumerationValue>
            <enumerationValue key="glyphicon_phone_alt">phone-alt</enumerationValue>
            <enumerationValue key="glyphicon_tower">tower</enumerationValue>
            <enumerationValue key="glyphicon_stats">stats</enumerationValue>
            <enumerationValue key="glyphicon_sd_video">sd-video</enumerationValue>
            <enumerationValue key="glyphicon_hd_video">hd-video</enumerationValue>
            <enumerationValue key="glyphicon_subtitles">subtitles</enumerationValue>
            <enumerationValue key="glyphicon_sound_stereo">sound-stereo</enumerationValue>
            <enumerationValue key="glyphicon_sound_dolby">sound-dolby</enumerationValue>
            <enumerationValue key="glyphicon_sound_5_1">sound-5-1</enumerationValue>
            <enumerationValue key="glyphicon_sound_6_1">sound-6-1</enumerationValue>
            <enumerationValue key="glyphicon_sound_7_1">sound-7-1</enumerationValue>
            <enumerationValue key="glyphicon_copyright_mark">copyright-mark</enumerationValue>
            <enumerationValue key="glyphicon_registration_mark">registration-mark</enumerationValue>
            <enumerationValue key="glyphicon_cloud_download">cloud-download</enumerationValue>
            <enumerationValue key="glyphicon_cloud_upload">cloud-upload</enumerationValue>
            <enumerationValue key="glyphicon_tree_conifer">tree-conifer</enumerationValue>
            <enumerationValue key="glyphicon_tree_deciduous">tree-deciduous</enumerationValue>
            <enumerationValue key="glyphicon_cd">cd</enumerationValue>
            <enumerationValue key="glyphicon_save_file">save-file</enumerationValue>
            <enumerationValue key="glyphicon_open_file">open-file</enumerationValue>
            <enumerationValue key="glyphicon_level_up">level-up</enumerationValue>
            <enumerationValue key="glyphicon_copy">copy</enumerationValue>
            <enumerationValue key="glyphicon_paste">paste</enumerationValue>
        </enumerationValues>
    </property>
    
    <property key="button_imageIcon" type="image" required="false">
        <caption>Image icon</caption>
        <category>Button</category>
        <description>Required if icon type is Image, the button image icon used to render the button.</description>
    </property>
    

The code that processes this into the proper nodes being added to your button is as follows:

    // buttonNode is the dojo queried button HTML node
_addIcon(buttonNode);

// Function to include in widget to call
this._addIcon = function(buttonNode){
    var c = dojo.create; // replace with "dojo/dom" variable argument past in declare call
    var iconNode = null;

    if(this.button_iconType === 'glyphicon') {
        /*<span class="glyphicon glyphicon-pencil"></span>*/
        iconNode = c("span", {
                        "class" : "glyphicon " + this.button_glyphIcon.split('_').join('-')
                    });
    } else if(this.button_iconType === 'glyphicon') {
        /*<img src="http://localhost:8080/img/System$New.png?636047244041668240">*/
        iconNode = c("img", {
                        "src" : this.button_imageIcon
                    });
    }
    // Replace dojo.html with "dojo/html" variable argument past in declare call
    dojo.html.set(buttonNode, iconNode);
};

Hope this helps :)

answered