πŸš€ Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
Documentation
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
(21 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<message>Write the content here to display this box</message>
<html>
=== MDriven Learn: Documentation ===
  <style>
    /* Reset + base */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      color: #242424;
    }
 
/* HEADER */
    .header {
      display: flex;
      align-items: center; /* Changed from flex-start to center */
      justify-content: space-between;
      background: linear-gradient(
        90deg,
        #F5F7FF 0%,  /* pale lavender */
        #FFFFFF 100%  /* pure white */
      );
      padding: 30px 5%; /* Increased padding for better spacing */
      overflow: hidden;
      min-height: 300px; /* Adjusted for fixed image height */
    }


===== '''INTRODUCTION''' =====
h1 {
'''Welcome to MDriven’s Documentation! '''
      border-bottom: none;
    }
 
    .header-content {
      max-width: 48%; /* Adjusted for better balance */
      padding: 0; /* Removed padding-top since we're centering */
    }
 
    .header-subtitle {
      display: block;
      font-size: 0.75rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #6e6e73;
    }
 
    .header-content h1 {
      font-size: 2rem;
      font-weight: 700;
      color: #1d1d1f;
      margin-bottom: 0.1em;
      letter-spacing: -1px;
    }
 
    .header-lead {
      font-size: 0.95rem;
      color: #3c3c44;
      margin-bottom: 0.5em;
      max-width: 600px;
      opacity: 0.9;
    }


Whether you’re a seasoned developer working on intricate projects or have some interest in modeling, this section is your go-to resource for understanding MDriven from the inside out. You’ll find detailed guides, explanations, and practical examples to help you model, prototype and execute your ideas. Do you have questions such as:
/* SEARCH */
    .search-box {
      display: flex;
      width: 100%;
      max-width: 500px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      overflow: hidden;
      transition: box-shadow 0.3s ease;
    }
 
    .search-box:hover {
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }
 
    .search-input {
      flex: 1;
      border: none;
      padding: 10px 18px;
      font-size: 0.95rem;
      outline: none;
    }
 
    .search-button {
      background: #007AFF;
      color: white;
      border: none;
      padding: 10px 22px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background 0.3s ease;
    }
 
    .search-button:hover {
      background: #0051D5;
    }


* What is MDriven?
/* HEADER IMAGE */
* How does it work?
    .header-image {
* How do I get started?
      max-width: 52%; /* Adjusted to match content width change */
* How much experience do I need to use the MDriven tools?
      text-align: left;
* How can MDriven benefit my business?
      display: flex;
* Is MDriven a good long-term solution for my business?
      align-items: center;
<html>
      justify-content: flex-start;
<style>
      height: 100%;
      padding-left: 20px; /* Reduced spacing to bring image closer */
    }
 
    .header-image img {
      width: auto; /* Let width adjust based on height */
      height: 240px; /* Fixed height for consistent sizing */
      max-width: 100%; /* Don't exceed container */
      display: inline-block;
      object-fit: contain; /* Ensures image maintains aspect ratio */
    }


.mw-parser-output > *:first-child {
/* MAIN CONTENT */
/* margin-right: 200px */
    .container {
display: none;
      max-width: 1400px;
}
      margin: 0 auto;
      padding: 0 5% 30px;
    }
 
    .section-title {
      text-align: left;
      margin-bottom: 15px;
      margin-top: 10px;
    }
 
    .section-title h2 {
      font-size: 1.75rem;
      font-weight: 600;
      margin-bottom: 2px;
      color: #242424;
    }
 
    .section-title p {
      font-size: 1rem;
      color: #707070;
      font-weight: 400;
    }


.products__docu__wrapper {
/* DOCUMENT GRID - Microsoft Learn Style */
   padding: 1rem 0;  
    .docs-grid {
}
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px;
      margin-bottom: 30px;
    }
    
    .doc-card {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 16px 18px;
      text-decoration: none;
      color: inherit;
      transition: all 0.2s ease;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }
 
    .doc-card:hover {
      border-color: #0078d4;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
 
    .doc-card::after {
      content: 'β†’';
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #0078d4;
      opacity: 0;
      transition: all 0.2s ease;
      font-size: 1rem;
    }
 
    .doc-card:hover::after {
      opacity: 1;
      right: 12px;
    }
 
    .doc-icon {
      width: 32px;
      height: 32px;
      min-width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      font-size: 16px;
      flex-shrink: 0;
    }
 
    /* icon background + color - more subtle */
    .icon-overview      { background: #e6f2ff; color: #0078d4; }
    .icon-designer      { background: #f0e6ff; color: #5c2e91; }
    .icon-modeling      { background: #ffe6f0; color: #c239b3; }
    .icon-turnkey        { background: #ffe6eb; color: #d13438; }
    .icon-server        { background: #fff0e6; color: #ff8c00; }
    .icon-framework      { background: #e6f5e6; color: #107c10; }
    .icon-legacy        { background: #f0f0f0; color: #5c5c5c; }
    .icon-integration    { background: #e6fff9; color: #00b7c3; }
    .icon-customization  { background: #fff9e6; color: #8661c5; }
    .icon-data          { background: #e6f3ff; color: #0078d4; }
    .icon-security      { background: #e6f5e6; color: #107c10; }
    .icon-extensions    { background: #ffe6e6; color: #d13438; }
    .icon-services      { background: #ebe6ff; color: #5c2e91; }
    .icon-operations    { background: #e6f7ff; color: #0078d4; }
    .icon-administration { background: #fff4e6; color: #ff8c00; }
    .icon-reporting      { background: #f5ede6; color: #7a5548; }


.grid-container {
.doc-content {
    display: flex;
      flex: 1;
    padding: 1rem 0;
      padding-right: 24px;
    gap: 20px;
     }
    flex-direction: row;
     flex-wrap: wrap;
  }


.documentation-card {
.doc-title {
    max-width: 280px !important;
      font-size: 1.1rem;
}
      font-weight: 600;
.documentation-card:hover {
      margin-bottom: 3px;
    transform: translateY(-5px);
      color: #242424;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      line-height: 1.2;
    cursor: pointer;
     }
}
 
    .doc-description {
      font-size: 0.875rem;
      color: #707070;
      line-height: 1.35;
    }


     @media (max-width: 767px) {
/* Responsive */
        .headerContent {
     @media (max-width: 768px) {
            padding: 2em 1em !important;
      .header {
            max-width: none;
        flex-direction: column;
         }
        text-align: center;
         .heading {
         padding: 20px 5%;
            font-size: 1.5em !important;
         align-items: center;
        }
        min-height: auto; /* Remove min-height on mobile */
        .sub-heading {
      }
            font-size: 1em;
      .header-content, .header-image {
         }
        max-width: 100%;
        .description {
         padding: 0;
            font-size: 0.875em;
      }
        }
      .header-image {
        .input-container {
        margin-top: 15px;
            max-width: none;
        justify-content: center;
            height: auto;
         padding-left: 0; /* Remove left padding on mobile */
         }
      }
        .search-icon {
      .header-image img {
            margin-left: 1em;
        height: 180px; /* Fixed height on mobile */
         }
         width: auto;
        .search-input {
      }
            padding-left: 1em;
      .header-content h1 {
            padding-right: 1em;
        font-size: 1.75rem;
        }
      }
      .grid-container {
      .docs-grid {
            grid-template-columns: 1fr;  
        grid-template-columns: 1fr;
            padding: 2rem 1em;
        gap: 8px;
           
      }
        }
      .section-title {
        .responsive-container {
        margin-bottom: 15px;
            padding-left: 1em !important;
        margin-top: 8px;
            padding-right: 1em;
      }
            padding-top: 2rem !important;
      .doc-card {
            padding-bottom: 0px;
        padding: 12px 14px;
        }
      }
        .responsive-text {
      .doc-card::after {
          width: auto;
        opacity: 1;
          font-size: 12px;  
      }
        }
     }
     }
  </style>
<body>
<!-- Header -->
  <header class="header">
    <div class="header-content">
      <small class="header-subtitle">DOCUMENTATION</small>
      <h1>Technical documentation</h1>
      <p class="header-lead">
        Search for in-depth articles on MDriven developer tools and technologies.
      </p>
      <form class="search-box">
        <input type="text" class="search-input" placeholder="Search documentation...">
        <button type="submit" class="search-button">Search</button>
      </form>
    </div>
    <div class="header-image">
      <!-- replace with your actual SVG/PNG/WEBP -->
      <img src="/images/documentation.webp" alt="Documentation illustration">
    </div>
  </header>
<!-- Main Content -->
  <main class="container">
    <!-- Documentation Categories -->
    <section>
      <div class="section-title">
        <h2>Product directory</h2>
        <p>Explore guides and articles by product.</p>
      </div>
<div class="docs-grid">
        <a href="/index.php/Documentation:General" class="doc-card">
          <div class="doc-icon icon-overview">πŸ“‹</div>
          <div class="doc-content">
            <h3 class="doc-title">Overview</h3>
            <p class="doc-description">Get started with MDriven fundamentals and core concepts</p>
          </div>
        </a>
<a href="/index.php/Documentation:Designer" class="doc-card">
          <div class="doc-icon icon-designer">🎨</div>
          <div class="doc-content">
            <h3 class="doc-title">Designer</h3>
            <p class="doc-description">Learn to design models and user interfaces visually</p>
          </div>
        </a>
<a href="/index.php/Documentation:Modeling" class="doc-card">
          <div class="doc-icon icon-modeling">πŸ—οΈ</div>
          <div class="doc-content">
            <h3 class="doc-title">Modeling</h3>
            <p class="doc-description">Master model creation and domain-driven design principles</p>
          </div>
        </a>
<a href="/index.php/Documentation:Turnkey" class="doc-card">
          <div class="doc-icon icon-turnkey">πŸš€</div>
          <div class="doc-content">
            <h3 class="doc-title">Turnkey</h3>
            <p class="doc-description">Deploy complete applications quickly with Turnkey solutions</p>
          </div>
        </a>
<a href="/index.php/Documentation:Server" class="doc-card">
          <div class="doc-icon icon-server">πŸ–₯️</div>
          <div class="doc-content">
            <h3 class="doc-title">Server</h3>
            <p class="doc-description">Configure and manage MDriven server environments</p>
          </div>
        </a>
<a href="/index.php/Documentation:Framework" class="doc-card">
          <div class="doc-icon icon-framework">βš™οΈ</div>
          <div class="doc-content">
            <h3 class="doc-title">Framework</h3>
            <p class="doc-description">Understand the MDriven framework architecture and APIs</p>
          </div>
        </a>
<a href="/index.php/Documentation:Legacy" class="doc-card">
          <div class="doc-icon icon-legacy">πŸ“š</div>
          <div class="doc-content">
            <h3 class="doc-title">Legacy</h3>
            <p class="doc-description">Documentation for previous versions and migration guides</p>
          </div>
        </a>
<a href="/index.php/Documentation:Integration" class="doc-card">
          <div class="doc-icon icon-integration">πŸ”—</div>
          <div class="doc-content">
            <h3 class="doc-title">Integration</h3>
            <p class="doc-description">Connect MDriven with external systems and services</p>
          </div>
        </a>
<a href="/index.php/Documentation:Customization" class="doc-card">
          <div class="doc-icon icon-customization">✨</div>
          <div class="doc-content">
            <h3 class="doc-title">Customization</h3>
            <p class="doc-description">Customize appearance, behavior, and functionality</p>
          </div>
        </a>
<a href="/index.php/Documentation:Data" class="doc-card">
          <div class="doc-icon icon-data">πŸ’Ύ</div>
          <div class="doc-content">
            <h3 class="doc-title">Data</h3>
            <p class="doc-description">Manage data persistence, queries, and migrations</p>
          </div>
        </a>
<a href="/index.php/Documentation:Security" class="doc-card">
          <div class="doc-icon icon-security">πŸ”’</div>
          <div class="doc-content">
            <h3 class="doc-title">Security</h3>
            <p class="doc-description">Implement authentication, authorization, and security best practices</p>
          </div>
        </a>
<a href="/index.php/Documentation:Extensions" class="doc-card">
          <div class="doc-icon icon-extensions">🧩</div>
          <div class="doc-content">
            <h3 class="doc-title">Extensions</h3>
            <p class="doc-description">Extend MDriven capabilities with plugins and add-ons</p>
          </div>
        </a>
<a href="/index.php/Documentation:Services" class="doc-card">
          <div class="doc-icon icon-services">☁️</div>
          <div class="doc-content">
            <h3 class="doc-title">Services</h3>
            <p class="doc-description">Build and consume web services and REST APIs</p>
          </div>
        </a>


<a href="/index.php/Documentation:Operations" class="doc-card">
          <div class="doc-icon icon-operations">⚑</div>
          <div class="doc-content">
            <h3 class="doc-title">Operations</h3>
            <p class="doc-description">Monitor performance and manage operational tasks</p>
          </div>
        </a>


</style>
<a href="/index.php/Documentation:Administration" class="doc-card">
<section class="products__docu__wrapper">
          <div class="doc-icon icon-administration">πŸ‘€</div>
<p>Explore more on how the MDriven tools help you build your ideas into reality.</p>
          <div class="doc-content">
<div class="grid-container">
            <h3 class="doc-title">Administration</h3>
            <p class="doc-description">Administer users, permissions, and system settings</p>
          </div>
        </a>


</html>
<a href="/index.php/Documentation:Reporting" class="doc-card">
{{#widget:Documentation
          <div class="doc-icon icon-reporting">πŸ“Š</div>
|image=/images/doc1.svg
          <div class="doc-content">
|titlelink=/index.php/Documentation:MDriven_designer_overview_Part_1
            <h3 class="doc-title">Reporting</h3>
|titletext=MDriven Designer
            <p class="doc-description">Create reports, dashboards, and data visualizations</p>
|text=A UML modeling tool that allows you to capture sufficient details to cover every aspect of a software system.
          </div>
}}
        </a>
{{#widget:Documentation
      </div>
|image=/images/doc2.svg
    </section>
|titlelink=/index.php/Documentation:MDriven_Framework
  </main>
|titletext=MDriven Framework
|text=A structure that allows you to write strongly typed C# code, accessing all the types and classes from your model.
}}
{{#widget:Documentation
|image=/images/doc3.svg
|titlelink=/index.php/Documentation:Starting_with_MDriven_Turnkey
|titletext=MDriven Turnkey
|text=MDriven's application that enables you to develop internet applications based on proven technologies like JQuery, AngularJS and Azure.
}}
{{#widget:Documentation
|image=/images/doc4.svg
|titlelink=/index.php/Documentation:MDriven_Server_Introduction
|titletext=MDriven Server
|text=An IIS application that stores your MDriven data in a database.
}}
{{#widget:Documentation
|image=/images/doc5.svg
|titlelink=/index.php/Documentation:Mockotype
|titletext=Mockotype
|text=MDriven Designer started in simplified mode.
}}
{{#widget:Documentation
|image=/images/doc1.svg
|titlelink=/index.php/Documentation:Part_1_OCL_Common_Expressions
|titletext=OCL
|text=The query and action language used in MDriven.
}}
{{#widget:Documentation
|image=/images/doc1.svg
|titlelink=/index.php/Documentation:Introduction_to_ECO
|titletext=ECO
|text=A Visual Studio Plugin that helps any .net application handle the objects of that model in memory.
}}


<html>
</body>
</div>
</section>
</html>
</html>
From troubleshooting common issues to providing step-by-step instructions, we’ve got you covered. Learn how to employ features like Tagged Values, Access groups and Placing Containers. Dive into, for example, our use of OCL, explore Autoforms, and understand the ViewModel, through clear instructions, code snippets, and best practices. With so much to discover, let’s unlock the possibilities together!
Browse Documentation in '''3''' ways:


1. Use the left menu
__HIDECREDIT__
* The left menu unfolds to showcase different, related topics to give you further insight.
2. Click one of the product cards below
* Each card points to specific pages on that product’s information.
3. Use the Search bar at the top
* If you need information on a particular term, the Search bar is a helpful tool.


{{Edited|September|12|2024}}
__NOBREADCRUMBS__

Revision as of 01:58, 21 July 2025

DOCUMENTATION

Technical documentation

Search for in-depth articles on MDriven developer tools and technologies.

Documentation illustration

Product directory

Explore guides and articles by product.

__HIDECREDIT__


MDriven Chat

How would you like to chat today?

Setting up your conversation…

This may take a few moments