Overview
After DNA2.0.2, Widget development has become more and more quickly and easy. The new Widget engine in DNA2 improves the performance of the Widget, supports more ViewEngines, providing better ways to develop and deploy widgets.
This document describes the new enhancement features of Widget Development - Widget Wizard and Widget Editor.
Before you start there are some articles you have read:
- Introduction to Widget engine
- Adding Widget action
- Adding User preferences
- Adding Widget View
Challenges
In previous versions of DNA we need to use the VS.NET to develop Widgets, but now things has changes.Before we start let's read the following example code:
Action:
[Widget("TwitterFeed",
Description = "Renders a Twitter stream for the specified user or search text.",
ShowHeader = false,
ShowBorder = false,
ImageUrl = "~/Content/Images/Widgets/twitter.png",
IconUrl = "~/Content/Images/Widgets/twitter_16.png")]
[Property("IsProfile", ValueType = typeof(bool), DefaultValue = true)]
[Property("Term")]
public ActionResult TwitterFeed()
{
return PartialView();
}
View:
@{
Ajax.Dna().Widget()
.UserPreferences(@<text>
@{
var _id = item.GenerateFieldID("IsProfile");
}
<div>
<label for="@item.GenerateFieldID("UserName")">
User namelabel>@Html.RadioButton(item.GenerateFieldID("IsProfile"),
item.GetBool("IsProfile"), item.GetBool("IsProfile"))
<label for="@item.GenerateFieldID("SearchKey")">
Search keylabel>@Html.RadioButton(item.GenerateFieldID("IsProfile"), !item.GetBool("IsProfile"),
!item.GetBool("IsProfile"))
div>
<div>().TextBox(item.GenerateFieldID("Term")).Value(item.GetString("Term")).GetHtml()div>
text>)
.Content(@<text>
@if (!string.IsNullOrEmpty(item.GetString("Term")))
{
<div style="text-align:center;">
@if (item.GetData<bool>("IsProfile"))
{
@Twitter.Profile(item.GetString("Term"))
}
else
{
@Twitter.Search(item.GetString("Term"))
}
div>
}
div>
}
text>)
.Render();
}
From the code above we could know the View and Widget attributes specifications are the important parts of the Widget：
[Widget("TwitterFeed",
Description = "Renders a Twitter stream for the specified user or search text.",
ShowHeader = false,
ShowBorder = false,
ImageUrl = "~/Content/Images/Widgets/twitter.png",
IconUrl = "~/Content/Images/Widgets/twitter_16.png")]
[Property("IsProfile", ValueType = typeof(bool), DefaultValue = true)]
[Property("Term")]
...
...
Complied the code and click "Discovery" in WidgetManager,DNA will generate a Xml file for this widget.In fact the DNA is generate the XML file from WidgetAttribute and PropertyAttributes.When we need to deploy this widget we not only need the View file but also an assembly file that contains the Action method.
As we see the Action method is do nothing but only specified attributes. And it must be depend on the assembly that contains it's Action method. That is not the beat way for rapid developing,deploying and sharing widgets.
What changes in DNA2 for Widget developing?
In order to let widgets development being more easy and quick, the objectives of DNA2 are:
- Keep the original way for widget development
- Support ViewOnly mode for Widgets.(No action,no controller and no assembly in this mode)
- Support HtmlOnly mode for Widgts.Allows using html and javascript to develop widgets.
- Support Razor,Html,ASP.NET FORM syntax for widget development.
- Developers need not learn about the W3C Widget XML specification.
DNA2.0.2 offers a Widget wizard to helper users create the widget descriptor.
ViewEngine
View engine will decide which language to develop a widget based on the actual use of your skills and needs.
- Html- Use html and javascript to write widgets
- ASP.NET Form- Use C# or vb in ASP.NET FORM syntax.
- Razor (Recommended)- Use Razor syntax to write you widget.
There are some suggestions for choosing ViewEngine for Widget:
1. In essence there are not differences from Razor and ASP.NET FORM ViewEngines in for widgets but only syntax.They are the server side ViewEngines.For server developers,need to call server methods frequently or needs good SEO they will be the best choice.
2.Html widget is new for DNA2, actually it's a client side widget container.It has the high running speed, working with independent threads, strong compatibility (can even run on clients that support W3C Widget, such as Andiord,iPhone,Firefox) features, for integrating html or scripts from other website he will be very useful.
Category
Specify what the widget will be stored in the category path, if you enter the class directory does not exist, it will automatically create the directory.
Name
Specify the name of the widget, in the same category the widget name is unique. After the widget creation the name field can not be changed. (Note: the widget name can not be separated with a space)
Title
The widget display title,it will be used as the default display text in widget header.
Title icon
The default icon of the widget it will be display on the left of the widget header.
Image
The widget image that shows in WidgetExplorer and WidgetManager.
Description
Describe you widget ,it will be display in WidgetExplorer and WidgetManager.
After the Widget form submission, DNA will generate a widget descriptor and go into WidgetEdtior.
The Widget Editor the tools for writing widget code,defining user performances and preview the widget.
Install and deploy widgets
We could install, deploy and discovery widgets by WidgetManager in DNA2.
Installation
There are two ways for Widget installation:
1.We upload the widget package file (*.wgt) to WidgetManager then DNA will install it automatic.That is so simple and easy. There is one thing we must note: when your widget package including bin folder that contains assembly files WidgetManger will not copy theme to the App/bin. For security considering you need the administrator (maybe yourself) copy the assembly files to application bin folder manually.
2.When your widget contains in GAC or assemblies that already in bin folder.You could using "Discovery" to generate the WidgetDescriptor for DNA.
Deployment
WidgetManager only supports assembly independence widget deployment. WidgetManager allows users using "Publish" to generate and download the Widget package file to distribute, to share for each other who using DNA.
[i]And you could upload widgets to dotnetage.com [/gallery|online gallery] [/i]
Finally
I will be setting out in detail in the next document on Html widget and Razaor widget development skills and methods.
-
Average:
-
Lee(1909)
-
Enlace permanente
