ArticleDirectory
- What is a widget?
- Requirement Analysis
- Create Content Parts
- Convert a content part into a widget
- Deploy Widgets
- References
- Sample download
Based on the previously created product module, this article expands a widget that displays the latest products. This example describes some related concepts of widgets and the basic steps for developing widgets. For details about the product module examples, click here. What is widgetwidget. Is a reusable UI block that can be deployed in any zone of the website. For example, common tag clouds, quick searches, the latest blog posts, and blog calendars on webpages can all be made into widgets to enrich the page layout. In this example, You need to implement the function of displaying the latest n products on the home page. Based on this requirement, we need at least two screens to complete this function. First, we can set the screen to display the latest number of widgets when adding widgets, the other is to display the latest n products. To create a content part, you must first create a content part. Because the content in orchard is organized by content components, Widgets are no exception. This content part needs to complete the following functions: 1. Access the setting of the latest number of display items; 2. display the latest n data items. As with the previous product content parts, we need to create a data model (recentproductspartrecord) to store the latest display number settings. You also need to create a recentproductspart and a recentproductsparthandler and a recentproductspartdriver. You also need to create an editing and display view for this part, at the same time, we also need to register some information about the newly added part in the placement.info file. These steps and Code It is similar to the code used to create a product part. You can view the code in this example. One thing to note is that the display of this part is not to display the latest n settings, but to display the latest n products. To convert a content part into a widget, you must specify the corresponding code in the Database Installation File to define the content part as a widget. In the migrations. CS file, add an upatefrom1 Method to the original file to indicate that the module needs to be upgraded. Enter the following code: View code Public Int Updatefrom1 ()
{
// Create a table store and set the latest data records
Schemabuilder. createtable ( " Recentproductspartrecord " , Table => Table
. Contentpartrecord ()
. Column < Int > ( " Count " ) // Product Price
);
// Define a widget
Contentdefinitionmanager. altertypedefinition ( " Recentproducts " , Cfg => Cfg
. Withpart ( " Recentproductspart " )
. Withpart ( " Widgetpart " )
. Withpart ( " Commonpart " )
. Withsetting ( " Stereotype " , " Widget " ));
Return 2;
When defining a widget, You need to combine the widgets that need to be converted into widgets, widgetpart parts, and commonpart parts, and set the properties of this type as widgets. Deploy a widget by following the preceding steps. First, log on to the management background using management. Once we enter the background, we can see a reminder that the module needs to be upgraded. Click the upgrade product module to go To the widgets menu in the control background, select the current layer as thehomepage (indicating that it is only displayed on the homepage), and click Add on asidefirst. Select the recent products widget we just created. The title attribute is the title of the widget. You can enter recent products. The Count attribute is the expected count. We enter 2. Save and return to the homepage of the front-end website to see the effect.
For more information about the widget, see http://www.orchardproject.net/docs/writing-a-widget.ashx. click here.
