• русский (Россия)
    • English (United States)
    • العربية (مصر)
    • Deutsch (Deutschland)
    • Español (España, alfabetización internacional)
    • français (France)
    • हिंदी (भारत)
    • italiano (Italia)
    • 日本語 (日本)
    • 한국어 (대한민국)
    • Nederlands (Nederland)
    • polski (Polska)
    • ไทย (ไทย)
    • Türkçe (Türkiye)
    • Tiếng Việt (Việt Nam)
    • 中文(中华人民共和国)
    • 中文(香港特別行政區)
  • Вход
  • Зарегистрироваться
DotNetAge - Mvc & jQuery CMS
Скрыть боковую панель

Introduction to DNA2 WidgetEngine


This document gives you an overview of programming with DNA2 WidgetEngine. Instroducting the architecture and some new features of the WidgetEngine.

What is new ?

  • In order to impove the runtime performance DNA2 Widget Engine separate the widget rendering mode into View Mode and Design Mode.
  • Optimize mapping speed between Widget instace and Widget definition.
  • Widget helper and WidgetZone helper methods added in DNA2 that will make your Widget proramming and Dynamic page layout designing more easy and “DRY”.
  • A Widget Manager is added. That will helping administrators distribute or deploy Widgets, helping Widget developers to packing and publishing the Widget package.

 

Widget Engine Architecture

Widget Package

Widget Package is an archive contains images,resources, author information, scripts, assemblies and other runtime files.  Developers could publish their Widget appliactions in Widget Page and distribute on other DotNetAge web site.

The Widget package abides by W3C Widget packaging spec. For more visit “Widget Packaging and Configuration” on W3C.

 

Widget Manager

Widget manager a browser base UI tools that use to manage , packing, discover and deploy widgets. Login as administrators and go “SiteTools/Console” you will get the screen below:

For developers could use Widget Mangager discover the Action Widgets and register them into DotNetAge runtime database. And also could use to generate and publishing Widget Packages.

For administrators could be used it to install/uninstall widgets register / unregister the widgets for DotNetAge widget users.

 

Widget Descriptor (Widget Snapshot)

Widget Descriptor is a Widget package snapshot in database. The Widget Descriptor use to :

  • Reduce Widget resources or services locating time.
  • Implementation of a weak coupling and high availablity between Widget Packages and Widget instances.
  • Controlling which Widgets could be used.

 

Widget Explorer

Widget explorer list all available Widgets for users. The users could use it to Add, Import, Preview the widgets.

 

Widget Instance

When user add a Widget from Widget Explorer to Dynamic page, that is call Widget instance. After widget added on page , the widget could be toggle, refresh, drag and drop , settings / export user preferences and change appearance settings.

 

Benefits

  1. DotNetAge provides the way that allows you developing , distributing and runing a samll price code.
  2. Provides the easy way to sharing user preferences data.
  3. Design a web page and put functions together just like a puzzle.

ViewMode & Preformence

In the DNA1.1 Widget engine only use asynchronous rendering mode for widgets. Every widget has their own request context that will produce a large quantity requests increase the server work load.We found it this mode is a best way for design widget for designer but not for all users.

So in order to impove the runtime performance of widgets DNA2 separate the Widget rendering mode in View mode and Design mode.

View Mode

In normaly Widgets are run in View mode, all widget is rendering on server at the same that mean all widgets in page are share one request context.

 

Design Mode

Asynchronous rendering mode it same as DNA1.1 widget engine it only use when the web page load into design time.

 

Page layout & WidgetZone

DNA2 offers WidgetZone helper. Developers could use it design their page layout in stead of use html + class name.

   1:  @{
   2:    
   3:  Ajax.Dna().WidgetZone("Top zone", "zone0").Render();
   4:      
   5:  Ajax.Dna().WidgetZone("Bottom zone", "zone1")
   6:          .HtmlAttributes(new { style="margin-top: 5px; clear: left; float: none;"})
   7:          .Render();
   8:  }

Widget helper

DNA2 offers the Widget helper method to write your Widget View

   1:  @{
   2:      Ajax.Dna().Widget()
   3:          .UserPreferences(widget =>
   4:          {
   5:             //Render the User preferences UI
   6:          }
   7:          .Content((widget) =>
   8:          {
   9:             //Render the Widget runtime UI
  10:          })
  11:          .Design((widget) => {
  12:             //Render the Widget Design time UI
  13:          })
  14:         .Preview((widget)=>{
  15:            //Render Widget in Widget Explorer Preview box.
  16:         })
  17:          .Render();
  18:  }

 


    Average:
  • Читает
    (1399)
  • Постоянная ссылка
Доля в:

Tag cloud

Anything in here will be replaced on browsers that support the canvas element