{"id":2602,"date":"2016-05-22T10:06:42","date_gmt":"2016-05-22T08:06:42","guid":{"rendered":"https:\/\/www.vikingsoftware.com\/uncategorized-da\/encapsulation-in-qml-components\/"},"modified":"2016-05-22T10:06:42","modified_gmt":"2016-05-22T08:06:42","slug":"encapsulation-in-qml-components","status":"publish","type":"post","link":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/","title":{"rendered":"Encapsulation in QML Components"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2602\" class=\"elementor elementor-2602 elementor-659\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-50cb995 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"50cb995\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-902978e\" data-id=\"902978e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c3830ab elementor-widget elementor-widget-text-editor\" data-id=\"c3830ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<pre><strong>Written by Bo Thorsen<\/strong><br \/><strong>2016\/05\/22<\/strong><\/pre>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be676ef elementor-widget elementor-widget-text-editor\" data-id=\"be676ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In QML, it\u2019s so easy to use properties of components directly, and it\u2019s even the way most examples do it. But here\u2019s my quesion: If we consider this the wrong approach in C++, isn\u2019t it wrong in QML as well? The answer is usually yes.<\/p>\n<p>Here, I\u2019ll show you how I think the best practice of building QML components is. It seems so simple, maybe even trivial. But I have met a lot of code that doesn\u2019t follow it, and seen the problems that follow. QML is still so new, that best practice isn\u2019t common knowledge. And in many cases, best practice haven\u2019t even been discovered yet.<\/p>\n<p>Let me give a quick example that shows the problem: You have created a Button component with all the bells and whistles such a component needs. You chose to build it using a Rectangle, so the border is handled by an existing component. Reuse is always a good and popular choice.&nbsp;<\/p>\n<p>Here is some of the code of how the Button could be done:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eec85f8 elementor-widget elementor-widget-code-highlight\" data-id=\"eec85f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>Button.qml:\nRectangle {\n    id: button\n    border.width: 1\n    signal clicked()\n    property alias text: buttonText.text\n    Text {\n        id: buttonText\n        anchors.centerIn: parent\n    }\n    ...\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-386d9f3 elementor-widget elementor-widget-text-editor\" data-id=\"386d9f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"full-width-section\"><div class=\"single-container\"><p>You now declare a Button, set the size and the text, and that\u2019s it. However, you might also want to have a different border, so this is what we do in the UI QML file:<\/p><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbad7a8 elementor-widget elementor-widget-code-highlight\" data-id=\"cbad7a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>Ui.qml:\nRectangle {\n    width: 360\n    height: 360\n    Button {\n        anchors.centerIn: parent\n        text: \"Hello World\"\n        width: 100\n        height: 30\n        border.width: 2\n        border.color: \"blue\"\n    }\n    ...<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-409314c elementor-widget elementor-widget-text-editor\" data-id=\"409314c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"full-width-section\"><div class=\"single-container\"><p>Now, here\u2019s the problem: If you decide to expand the Button with other choices of how it can look, you will have a problem. For example, you might want to offer a BorderImage for the way the Button looks. But with the current use of a Rectangle, you can\u2019t do this without modifying the code that uses this Button.<\/p><p>This is exactly the problem encapsulation solves: It allows you to make local changes to your component without modifying all the code that uses it.<\/p><p>The simple solution of the Button is to make it an Item that has a Rectangle. In OO terms, this changes from inheritance to aggregation.<\/p><p>My solution for creating QML components is to nearly always base them on Item, and expose whatever properties I want. The interface to my components is the sum of properties, functions and signals. How I choose to implement the component itself is an implementation detail, and should not be available to other components.<\/p><p>For a simple example, suppose we have a system where a bunch of Text items should always follow a shared style. If the style changes, all text must follow. In fact, the only thing the users of the text item can set, is the text itself.<\/p><p>This could clearly be done with Text directly:<\/p><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb0c8de elementor-widget elementor-widget-code-highlight\" data-id=\"cb0c8de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>StyledText.qml:\r\nText {\r\n    \/\/ Event handlers to set the Style parts here:\r\n    ...\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b696f3c elementor-widget elementor-widget-text-editor\" data-id=\"b696f3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"full-width-section\"><div class=\"single-container\"><p>This a valid choice, we simply need to tell ourselves that we shouldn\u2019t set the color, size etc. directly, but allow the central style code to set it. And this is of course doomed. Some day, we hire a new coder, or forget ourselves. Whatever the reason, we will break the rules.<\/p><p>The proper solution is to encapsulate the component and hide the implementation behind the Item:<\/p><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab1f653 elementor-widget elementor-widget-code-highlight\" data-id=\"ab1f653\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>StyledText.qml:\nItem {\n    property alias text: textItem.text\n    Text {\n        anchors.fill: parent\n        \/\/ Event handlers to set the Style parts here:\n        ...\n    }\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7cfb029 elementor-widget elementor-widget-text-editor\" data-id=\"7cfb029\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"full-width-section\"><div class=\"single-container\"><p>It seems so simple, but I have seen a bunch of QML code that doesn\u2019t do this. Every time you start modifying the code of components, you wonder what you break. And this only becomes much more valuable with real components that have much more complexity than the simple example code I have here.<\/p><p>If you follow this pattern instead, you will create robust and encapsulated components with no properties accessible by accident.<\/p><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>If we consider this the wrong approach in C++, isn\u2019t it wrong in QML as well? This blog post will discuss best practice of building QML components.<\/p>\n","protected":false},"author":4,"featured_media":1890,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[94],"tags":[101],"class_list":["post-2602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-da","tag-qml-da"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Encapsulation in QML Components - Viking Software A\/S<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Encapsulation in QML Components - Viking Software A\/S\" \/>\n<meta property=\"og:description\" content=\"If we consider this the wrong approach in C++, isn\u2019t it wrong in QML as well? This blog post will discuss best practice of building QML components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Viking Software A\/S\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-22T08:06:42+00:00\" \/>\n<meta name=\"author\" content=\"Maria Lisberg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maria Lisberg\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/\"},\"author\":{\"name\":\"Maria Lisberg\",\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/#\\\/schema\\\/person\\\/9b67e226302628047186fd9359931e56\"},\"headline\":\"Encapsulation in QML Components\",\"datePublished\":\"2016-05-22T08:06:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/\"},\"wordCount\":580,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vikingsoftware.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/QML-button.png\",\"keywords\":[\"QML\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/\",\"url\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/\",\"name\":\"Encapsulation in QML Components - Viking Software A\\\/S\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vikingsoftware.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/QML-button.png\",\"datePublished\":\"2016-05-22T08:06:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/#\\\/schema\\\/person\\\/9b67e226302628047186fd9359931e56\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vikingsoftware.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/QML-button.png\",\"contentUrl\":\"https:\\\/\\\/www.vikingsoftware.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/QML-button.png\",\"width\":947,\"height\":322},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/blog-da\\\/encapsulation-in-qml-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Encapsulation in QML Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/#website\",\"url\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/\",\"name\":\"Viking Software A\\\/S\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.vikingsoftware.com\\\/da\\\/#\\\/schema\\\/person\\\/9b67e226302628047186fd9359931e56\",\"name\":\"Maria Lisberg\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8b13978f2a67726c7f50acfc73600aa7902481eec9fb6673919cfaf3db353b8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8b13978f2a67726c7f50acfc73600aa7902481eec9fb6673919cfaf3db353b8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8b13978f2a67726c7f50acfc73600aa7902481eec9fb6673919cfaf3db353b8?s=96&d=mm&r=g\",\"caption\":\"Maria Lisberg\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Encapsulation in QML Components - Viking Software A\/S","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/","og_locale":"da_DK","og_type":"article","og_title":"Encapsulation in QML Components - Viking Software A\/S","og_description":"If we consider this the wrong approach in C++, isn\u2019t it wrong in QML as well? This blog post will discuss best practice of building QML components.","og_url":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/","og_site_name":"Viking Software A\/S","article_published_time":"2016-05-22T08:06:42+00:00","author":"Maria Lisberg","twitter_card":"summary_large_image","twitter_misc":{"Skrevet af":"Maria Lisberg","Estimeret l\u00e6setid":"3 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/#article","isPartOf":{"@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/"},"author":{"name":"Maria Lisberg","@id":"https:\/\/www.vikingsoftware.com\/da\/#\/schema\/person\/9b67e226302628047186fd9359931e56"},"headline":"Encapsulation in QML Components","datePublished":"2016-05-22T08:06:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/"},"wordCount":580,"commentCount":0,"image":{"@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vikingsoftware.com\/wp-content\/uploads\/2021\/05\/QML-button.png","keywords":["QML"],"articleSection":["Blog"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/","url":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/","name":"Encapsulation in QML Components - Viking Software A\/S","isPartOf":{"@id":"https:\/\/www.vikingsoftware.com\/da\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/#primaryimage"},"image":{"@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vikingsoftware.com\/wp-content\/uploads\/2021\/05\/QML-button.png","datePublished":"2016-05-22T08:06:42+00:00","author":{"@id":"https:\/\/www.vikingsoftware.com\/da\/#\/schema\/person\/9b67e226302628047186fd9359931e56"},"breadcrumb":{"@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/#primaryimage","url":"https:\/\/www.vikingsoftware.com\/wp-content\/uploads\/2021\/05\/QML-button.png","contentUrl":"https:\/\/www.vikingsoftware.com\/wp-content\/uploads\/2021\/05\/QML-button.png","width":947,"height":322},{"@type":"BreadcrumbList","@id":"https:\/\/www.vikingsoftware.com\/da\/blog-da\/encapsulation-in-qml-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vikingsoftware.com\/da\/"},{"@type":"ListItem","position":2,"name":"Encapsulation in QML Components"}]},{"@type":"WebSite","@id":"https:\/\/www.vikingsoftware.com\/da\/#website","url":"https:\/\/www.vikingsoftware.com\/da\/","name":"Viking Software A\/S","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vikingsoftware.com\/da\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Person","@id":"https:\/\/www.vikingsoftware.com\/da\/#\/schema\/person\/9b67e226302628047186fd9359931e56","name":"Maria Lisberg","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/b8b13978f2a67726c7f50acfc73600aa7902481eec9fb6673919cfaf3db353b8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b8b13978f2a67726c7f50acfc73600aa7902481eec9fb6673919cfaf3db353b8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8b13978f2a67726c7f50acfc73600aa7902481eec9fb6673919cfaf3db353b8?s=96&d=mm&r=g","caption":"Maria Lisberg"}}]}},"_links":{"self":[{"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/posts\/2602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/comments?post=2602"}],"version-history":[{"count":0,"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/posts\/2602\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/media\/1890"}],"wp:attachment":[{"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/media?parent=2602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/categories?post=2602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vikingsoftware.com\/da\/wp-json\/wp\/v2\/tags?post=2602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}