πŸš€ Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
Documentation
No edit summary
No edit summary
Tag: 2017 source edit
(20 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;
    }


===== '''INTRODUCTION''' =====
/* HEADER */
'''Welcome to MDriven’s Documentation! '''
    .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 */
    }


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:
h1 {
      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;
    }


* What is MDriven?
/* SEARCH */
* How does it work?
    .search-box {
* How do I get started?
      display: flex;
* How much experience do I need to use the MDriven tools?
      width: 100%;
* How can MDriven benefit my business?
      max-width: 500px;
* Is MDriven a good long-term solution for my business?
      background: white;
<html>
      border-radius: 8px;
<style>
      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;
    }


.mw-parser-output > *:first-child {
/* HEADER IMAGE */
/* margin-right: 200px */
    .header-image {
display: none;
      max-width: 52%; /* Adjusted to match content width change */
}
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      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 */
    }


.products__docu__wrapper {
/* MAIN CONTENT */
   padding: 1rem 0;  
    .container {
}
      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;
    }


.grid-container {
/* DOCUMENT GRID - Microsoft Learn Style */
    display: flex;
    .docs-grid {
     padding: 1rem 0;
      display: grid;
     gap: 20px;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     flex-direction: row;
      gap: 10px;
     flex-wrap: wrap;
      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; }
 
.doc-content {
      flex: 1;
      padding-right: 24px;
    }


.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>


</style>
<a href="/index.php/Documentation:Turnkey" class="doc-card">
<section class="products__docu__wrapper">
          <div class="doc-icon icon-turnkey">πŸš€</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">Turnkey</h3>
            <p class="doc-description">Deploy complete applications quickly with Turnkey solutions</p>
          </div>
        </a>


</html>
<a href="/index.php/Documentation:Server" class="doc-card">
{{#widget:Documentation
          <div class="doc-icon icon-server">πŸ–₯️</div>
|image=/images/doc1.svg
          <div class="doc-content">
|titlelink=/index.php/Documentation:MDriven_designer_overview_Part_1
            <h3 class="doc-title">Server</h3>
|titletext=MDriven Designer
            <p class="doc-description">Configure and manage MDriven server environments</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
 
|image=/images/doc2.svg
<a href="/index.php/Documentation:Framework" class="doc-card">
|titlelink=/index.php/Documentation:MDriven_Framework
          <div class="doc-icon icon-framework">βš™οΈ</div>
|titletext=MDriven Framework
          <div class="doc-content">
|text=A structure that allows you to write strongly typed C# code, accessing all the types and classes from your model.
            <h3 class="doc-title">Framework</h3>
}}
            <p class="doc-description">Understand the MDriven framework architecture and APIs</p>
{{#widget:Documentation
          </div>
|image=/images/doc3.svg
        </a>
|titlelink=/index.php/Documentation:Starting_with_MDriven_Turnkey
 
|titletext=MDriven Turnkey
<a href="/index.php/Documentation:Legacy" class="doc-card">
|text=MDriven's application that enables you to develop internet applications based on proven technologies like JQuery, AngularJS and Azure.
          <div class="doc-icon icon-legacy">πŸ“š</div>
}}
          <div class="doc-content">
{{#widget:Documentation
            <h3 class="doc-title">Legacy</h3>
|image=/images/doc4.svg
            <p class="doc-description">Documentation for previous versions and migration guides</p>
|titlelink=/index.php/Documentation:MDriven_Server_Introduction
          </div>
|titletext=MDriven Server
        </a>
|text=An IIS application that stores your MDriven data in a database.
 
}}
<a href="/index.php/Documentation:Integration" class="doc-card">
{{#widget:Documentation
          <div class="doc-icon icon-integration">πŸ”—</div>
|image=/images/doc5.svg
          <div class="doc-content">
|titlelink=/index.php/Documentation:Mockotype
            <h3 class="doc-title">Integration</h3>
|titletext=Mockotype
            <p class="doc-description">Connect MDriven with external systems and services</p>
|text=MDriven Designer started in simplified mode.
          </div>
}}
        </a>
{{#widget:Documentation
 
|image=/images/doc1.svg
<a href="/index.php/Documentation:Customization" class="doc-card">
|titlelink=/index.php/Documentation:Part_1_OCL_Common_Expressions
          <div class="doc-icon icon-customization">✨</div>
|titletext=OCL
          <div class="doc-content">
|text=The query and action language used in MDriven.
            <h3 class="doc-title">Customization</h3>
}}
            <p class="doc-description">Customize appearance, behavior, and functionality</p>
{{#widget:Documentation
          </div>
|image=/images/doc1.svg
        </a>
|titlelink=/index.php/Documentation:Introduction_to_ECO
 
|titletext=ECO
<a href="/index.php/Documentation:Data" class="doc-card">
|text=A Visual Studio Plugin that helps any .net application handle the objects of that model in memory.
          <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>


<html>
<a href="/index.php/Documentation:Administration" class="doc-card">
</div>
          <div class="doc-icon icon-administration">πŸ‘€</div>
</section>
          <div class="doc-content">
</html>
            <h3 class="doc-title">Administration</h3>
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!
            <p class="doc-description">Administer users, permissions, and system settings</p>
          </div>
        </a>


Browse Documentation in '''3''' ways:  
<a href="/index.php/Documentation:Reporting" class="doc-card">
          <div class="doc-icon icon-reporting">πŸ“Š</div>
          <div class="doc-content">
            <h3 class="doc-title">Reporting</h3>
            <p class="doc-description">Create reports, dashboards, and data visualizations</p>
          </div>
        </a>
      </div>
    </section>
  </main>


1. Use the '''left menu''': The left menu unfolds to showcase different, related topics to give you further insight.
</body>
</html>


2. Click one of the '''product cards''' above: Each card points to specific pages on that product’s information.
__HIDECREDIT__


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