{"id":2013,"date":"2019-07-16T07:24:03","date_gmt":"2019-07-15T22:24:03","guid":{"rendered":"https:\/\/www.oqiita.com\/?p=2013"},"modified":"2019-07-16T07:24:03","modified_gmt":"2019-07-15T22:24:03","slug":"%e3%80%90genexus16%e3%80%91usercontrol","status":"publish","type":"post","link":"https:\/\/www.oqiita.com\/?p=2013","title":{"rendered":"\u3010GeneXus16\u3011UserControl"},"content":{"rendered":"

GeneXus16\u3067\u30e6\u30fc\u30b6\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306b\u3064\u3044\u3066<\/p>\n

<\/p>\n

GeneXus16\u304b\u3089\u30e6\u30fc\u30b6\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092GeneXus\u4e0a\u3067\u4f5c\u6210\u3067\u304d\u305f\u306e\u3067\u4f5c\u3063\u3066\u307f\u305f\u3002
\n\u307b\u307cwiki\u3068\u540c\u3058\u304b\u306a\u3002<\/p>\n

<\/p>\n

\u53c2\u8003\u30ea\u30f3\u30af<\/h3>\n


\n \u53c2\u8003<\/span>
\n SemanticUI Design Systemwiki.genexus.com<\/span><\/span>
\n <\/a><\/p>\n


\n \u53c2\u8003<\/span>
\n User Control objectwiki.genexus.com<\/span><\/span>
\n <\/a><\/p>\n

User control object \u4f5c\u6210<\/h3>\n

\u4ed6\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u540c\u69d8\u306b\u4f5c\u6210\u3057\u307e\u3059\u3002
\n\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

HTML\u3092\u8a18\u8ff0<\/h3>\n

UserControl\u304c\u51fa\u529b\u3059\u308bHTML\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n

<\/i> UserControl<\/span><\/p>\n
<div class=\"ui card\"> \n   <div class=\"image\"> \n      <img src=\"\/images\/test.png\"> <\/div> \n      <div class=\"content\">\n         <a class=\"header\">Title<\/a> \n         <div class=\"meta\"> <span class=\"date\">\u60c5\u5831\uff10\uff10\uff11<\/span> <\/div>\n         <div class=\"description\"> \u30c7\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3 <\/div> \n     <\/div> \n   <div class=\"extra content\">\n       <a> <i class=\"user icon\"><\/i> 22 Friends <\/a> \n   <\/div> \n<\/div>\n<\/code><\/pre>\n<\/div>\n
\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a<\/h3>\n
\u5404\u753b\u9762\u3067\u8a2d\u5b9a\u53ef\u80fd\u306a\u90e8\u5206\u306f\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3057\u3066\u304a\u304f\u3068\u4fbf\u5229\u3067\u3059\u3002
\n{{ImageUrl}} \u306e\u3088\u3046\u306b\u8a18\u8ff0\u3059\u308b\u3068\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u306a\u308a\u307e\u3059\u3002
\n\u3061\u306a\u307f\u306b\u81ea\u52d5\u3067\u30d7\u30ed\u30d1\u30c6\u30a3\u30bf\u30d6\u306e\u5185\u5bb9\u304c\u4f5c\u6210\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n
<\/i> UserControl<\/span><\/p>\n
<div class=\"ui card\"> \n   <div class=\"image\"> \n      <img src=\"{{ImageUrl}}\"> <\/div> \n      <div class=\"content\">\n         <a class=\"header\">{{Title}}<\/a> \n         <div class=\"meta\"> <span class=\"date\">{{MetaInfo}}<\/span> <\/div>\n         <div class=\"description\"> {{Description}} <\/div> \n     <\/div> \n   <div class=\"extra content\">\n       <a> <i class=\"user icon\"><\/i> {{ExtraContent}} <\/a> \n   <\/div> \n<\/div>\n<\/code><\/pre>\n
\u753b\u9762\u306b\u914d\u7f6e<\/h3>\n
\u4f5c\u6210\u3057\u305f\u30e6\u30fc\u30b6\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092WebPanel\u306b\u914d\u7f6e\u3057\u307e\u3059\u3002
\nTollBox\u306e\u4e00\u756a\u4e0b\u306b\u3042\u308b\u306f\u305a\u3002
\n\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3057\u3001\u30d3\u30eb\u30c9\u3057\u307e\u3059\u3002
\n<\/p>\n
Event Start\n    UserControl1.Title = \"Oqiita\"\n    UserControl1.MetaInfo = \"2019 Now\"\n    UserControl1.Description = \"Blog \u8a18\u4e8b\u7528\u3067\u3059\uff01\"\n    UserControl1.ExtraContent = \"\u62d2\u5426\"\n    UserControl1.ImageUrl = \"https:\/\/www.oqiita.com\/wp-content\/uploads\/2017\/07\/profile3.png\"\nEndEvent\n<\/code><\/pre>\n<\/div>\n
\"\"<\/a><\/p>\n
CSS\u304c\u8db3\u308a\u306a\u3044<\/h3>\n
CSS\uff08SemanticUI\uff09\u3092\u4f7f\u7528\u3059\u308b\u60f3\u5b9a\u306a\u306e\u3067\u3001\u4eca\u56de\u306fCDN\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n
<\/i> WebPanel2<\/span><\/p>\n
Event Start\n\tForm.HeaderRawHTML = !''\n\tForm.HeaderRawHTML += !'<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/semantic-ui\/2.3.3\/semantic.min.css\">'\n\tForm.HeaderRawHTML += !'<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/semantic-ui\/2.3.3\/semantic.min.js\"><\/script>'\n\n    UserControl1.Title = \"Oqiita\"\n    UserControl1.MetaInfo = \"2019 Now\"\n    UserControl1.Description = \"Blog \u8a18\u4e8b\u7528\u3067\u3059\uff01\"\n    UserControl1.ExtraContent = \"\u62d2\u5426\"\n    UserControl1.ImageUrl = \"https:\/\/www.oqiita.com\/wp-content\/uploads\/2017\/07\/profile3.png\"\nEndEvent\n<\/code><\/pre>\n<\/div>\n
\u30ab\u30fc\u30c9\u578b\u306b\u306a\u308c\u3070\u6210\u529f\u3067\u3059\u3002
\n\"\"<\/a><\/p>\n
\u30a4\u30d9\u30f3\u30c8<\/h3>\n
\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3084\u305d\u306e\u4ed6JavaScript\u3067\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3067\u304d\u308b\u30a4\u30d9\u30f3\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n
<\/i> UserControl<\/span><\/p>\n
<div class=\"ui card\" {{OnClick}} > \n   <div class=\"image\"> \n      <img src=\"{{ImageUrl}}\"> <\/div> \n      <div class=\"content\">\n         <a class=\"header\">{{Title}}<\/a> \n         <div class=\"meta\"> <span class=\"date\">{{MetaInfo}}<\/span> <\/div>\n         <div class=\"description\"> {{Description}} <\/div> \n     <\/div> \n   <div class=\"extra content\">\n       <a> <i class=\"user icon\"><\/i> {{ExtraContent}} <\/a> \n   <\/div> \n<\/div>\n<\/code><\/pre>\n<\/div>\n
WebPanel\u5074\u3067\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
<\/i> WebPanel2<\/span><\/p>\n
Event UserControl1.OnClick\n    MSG(\"TEST MSG!!!!\")\nEndEvent\n<\/code><\/pre>\n<\/div>\n
\u81ea\u7531\u306b\u5909\u66f4\u3067\u304d\u308b\u90e8\u5206<\/h3>\n
slot\u3092\u4f7f\u7528\u3057\u3066WebPanel\u5074\u304b\u3089\u81ea\u7531\u306b\u7de8\u96c6\u3067\u304d\u308b\u90e8\u5206\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n
<\/i> UserControl<\/span><\/p>\n
<div class=\"ui card\" {{Click}} > \n   <div class=\"image\"> \n      <img src=\"{{ImageUrl}}\"> <\/div> \n      <div class=\"content\">\n         <a class=\"header\">{{Title}}<\/a> \n         <div class=\"meta\"> <span class=\"date\">{{MetaInfo}}<\/span> <\/div>\n         <div class=\"description\"> {{Description}} <\/div> \n     <\/div> \n   <div class=\"extra content\">\n       <a> <i class=\"user icon\"><\/i> {{ExtraContent}} <\/a> \n       <slot name=\"extraContent\" \/>\n   <\/div> \n<\/div>\n<\/code><\/pre>\n<\/div>\n
\n
 \u6ce8\u610f<\/div>\n
\u4e00\u5ea6\u914d\u7f6e\u3057\u3066\u5f8c\u304b\u3089Slot\u3092\u8ffd\u52a0\u3057\u3066\u3082WebPanel\u5074\u306b\u306fSlot\u9818\u57df\u306f\u51fa\u73fe\u3057\u307e\u305b\u3093\uff01
\nSlot\u3092UserControl\u306b\u8ffd\u52a0\u3057\u305f\u5834\u5408\u306f\u3001\u518d\u5ea6WebPanel\u306bUserControl\u3092\u914d\u7f6e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p><\/div>\n
WebPanel\u5074\u3067\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7de8\u96c6\u53ef\u80fd\u306a\u30be\u30fc\u30f3\u304cUserControl\u5185\u3042\u308b\u3053\u3068\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002
\n\u203b\u6c34\u8272\u306e\u90e8\u5206\u304cUserControl\u3067\u305d\u306e\u4e2d\u306e\u30c6\u30fc\u30d6\u30eb\uff1f\u3063\u307d\u3044\u306e\u304cSlot\u3067\u3059w
\n\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
\u5b9f\u884c\u7d50\u679c
\n\"\"<\/a><\/p>\n
\u5909\u6570\uff08\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\uff09\u3092\u4f7f\u7528<\/h3>\n
\u5909\u6570\u3092\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u6307\u5b9a\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u5185\u3067\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002
\n\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u3066\u8907\u6570\u306e\u60c5\u5831\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
<\/i> UserControl<\/span><\/p>\n
<div class=\"ui card\" {{OnClick}} > \n   <div class=\"image\"> \n      <img src=\"{{ImageUrl}}\"> <\/div> \n      <div class=\"content\">\n         <a class=\"header\">{{Title}}<\/a> \n         <div class=\"meta\"> <span class=\"date\">{{MetaInfo}}<\/span> <\/div>\n         <div class=\"description\"> {{Description}} <\/div> \n         <div>\n            <UL>\n            {{#Categories}}\n               <LI>{{Name}}<\/LI>\n             {{\/Categories}}\n             <\/UL>\n         <\/div>\n     <\/div> \n   <div class=\"extra content\">\n       <a> <i class=\"user icon\"><\/i> {{ExtraContent}} <\/a> \n       <slot name=\"extraContent\" \/>\n   <\/div> \n<\/div>\n<\/code><\/pre>\n<\/div>\n
SDT\u3092\u4f5c\u6210\u3002
\n\"\"<\/a><\/p>\n
\u30a4\u30d9\u30f3\u30c8\u3067SDT\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
<\/i> WebPanel2<\/span><\/p>\n
Event Start\n\tForm.HeaderRawHTML = !''\n\tForm.HeaderRawHTML += !'<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/semantic-ui\/2.3.3\/semantic.min.css\">'\n\tForm.HeaderRawHTML += !'<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/semantic-ui\/2.3.3\/semantic.min.js\"><\/script>'\n\n    UserControl1.Title \t\t\t= \"Oqiita\"\n    UserControl1.MetaInfo \t\t= \"2019 Now\"\n    UserControl1.Description \t= \"Blog \u8a18\u4e8b\u7528\u3067\u3059\uff01\"\n    UserControl1.ExtraContent \t= \"\u62d2\u5426\"\n    UserControl1.ImageUrl \t\t= \"https:\/\/www.oqiita.com\/wp-content\/uploads\/2017\/07\/profile3.png\"\n\t\n\t&Category = new()\n\t&Category.Id = 1\n\t&Category.Name = \"TEST001\"\n\t&CategoryCollection.Add(&Category)\n\t\n\t&Category = new()\n\t&Category.Id = 2\n\t&Category.Name = \"TEST002\"\n\t&CategoryCollection.Add(&Category)\n\t\nEndEvent\n<\/code><\/pre>\n<\/div>\n
\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u8a2d\u5b9a\u3002
\n\"\"<\/a><\/p>\n
\u5b9f\u884c\u7d50\u679c
\n\"\"<\/a><\/p>\n
\n
 \u30ad\u30e3\u30c3\u30b7\u30e5<\/div>\n
UserControl\u306fJavascript\u306a\u306e\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u304c\u805e\u3044\u3066\u308b\u3068\u7de8\u96c6\u3057\u3066\u3082\u66f4\u65b0\u3055\u308c\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002
\n\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u524a\u9664\u3082\u304a\u5fd8\u308c\u306a\u304f\uff01\uff01\uff01\uff01\uff01<\/p><\/div>\n
\u9078\u629e\u3057\u305f\u8981\u7d20<\/h3>\n
SDT\u306f\u7e70\u308a\u8fd4\u3057\u8981\u7d20\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u7e70\u308a\u8fd4\u3057\u306e\u3069\u308c\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u304b\u5224\u65ad\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
\u307e\u305a\u306fUserControl\u306e\u4fee\u6b63\u3002OnClick\u3092\u79fb\u52d5\u3055\u305b\u307e\u3059\u3002<\/p>\n
<\/i> UserControl<\/span><\/p>\n
<div class=\"ui card\"> \n   <div class=\"image\"> \n      <img src=\"{{ImageUrl}}\"> <\/div> \n      <div class=\"content\">\n         <a class=\"header\">{{Title}}<\/a> \n         <div class=\"meta\"> <span class=\"date\">{{MetaInfo}}<\/span> <\/div>\n         <div class=\"description\"> {{Description}} <\/div> \n         <div>\n            <UL>\n            {{#Categories}}\n               <LI {{OnClick}}>{{Name}}<\/LI>\n             {{\/Categories}}\n             <\/UL>\n         <\/div>\n     <\/div> \n   <div class=\"extra content\">\n       <a> <i class=\"user icon\"><\/i> {{ExtraContent}} <\/a> \n       <slot name=\"extraContent\" \/>\n   <\/div> \n<\/div>\n<\/code><\/pre>\n<\/div>\n
\u30a4\u30d9\u30f3\u30c8\u3092\u4fee\u6b63<\/p>\n
<\/i> WebPanel2<\/span><\/p>\n
Event UserControl1.OnClick\n\t\n\t&Name = &CategoryCollection.Item(UserControl1.CategoriesCurrentIndex).Name\n\tMSG(\"TEST!!! - \" + &Name)\n\t\nEndEvent\n<\/code><\/pre>\n<\/div>\n
\u5b9f\u884c\u7d50\u679c(gif)
\n\"\"<\/a><\/p>\n
\u307e\u3068\u3081<\/h3>\n
GeneXus\u3067UserControl\u304c\u4f5c\u6210\u3067\u304d\u308b\u306e\u306f\u3044\u3044\u3067\u3059\u306d\u3002
\n\u305f\u3060\u3057\u30ea\u30bd\u30fc\u30b9\u3068\u304b\u306e\u53d6\u308a\u8fbc\u307f\u304c\u3082\u3063\u3068\u7c21\u5358\u306b\u7ba1\u7406\u3067\u304d\u308c\u3070\u3044\u3044\u3067\u3059\u304c\u3002<\/p>\n
\u3042\u3068\u306f\u3082\u3063\u3068\u30b4\u30ea\u30b4\u30ea\u306bJavaScript\u66f8\u304d\u305f\u3044\u6642\u306f\u3069\u3046\u3059\u308c\u3070\u3044\u3044\u306e\u304b\u30fb\u30fb\u30fb\u30fb\uff1f
\n\u307e\u305f\u6642\u9593\u306e\u3042\u308b\u6642\u306b\u691c\u8a3c\u3057\u307e\u3059\u3002<\/p>\n
\u3068\u308a\u3042\u3048\u305a\u4f5c\u6210\u306e\u4e00\u6b69\u306f\u3067\u304d\u305f\u304b\u306a\uff1f<\/p>\n
\u4ee5\u4e0a\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
GeneXus16\u3067\u30e6\u30fc\u30b6\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306b\u3064\u3044\u3066<\/p>\n","protected":false},"author":1,"featured_media":1928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[256,220],"class_list":{"0":"post-2013","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-genexus","8":"tag-genexus16","9":"tag-usercontrol","10":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.oqiita.com\/wp-content\/uploads\/2019\/06\/sango_gx16_2_icatch.png","jetpack_shortlink":"https:\/\/wp.me\/p8QluP-wt","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.oqiita.com\/index.php?rest_route=\/wp\/v2\/posts\/2013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oqiita.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oqiita.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oqiita.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oqiita.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2013"}],"version-history":[{"count":25,"href":"https:\/\/www.oqiita.com\/index.php?rest_route=\/wp\/v2\/posts\/2013\/revisions"}],"predecessor-version":[{"id":2051,"href":"https:\/\/www.oqiita.com\/index.php?rest_route=\/wp\/v2\/posts\/2013\/revisions\/2051"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.oqiita.com\/index.php?rest_route=\/wp\/v2\/media\/1928"}],"wp:attachment":[{"href":"https:\/\/www.oqiita.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oqiita.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oqiita.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}