Susucms development-create Widgets

The development of susucms widgets is very simple. Maybe the complicated and difficult development model of other CMS has made you feel tired and scared,

But with susucms, you don't need to create a new project. You only need several files in a directory.

Here we will illustrate the richtext widget in CMS. Richtext helps you add rich text on the page.

 

In the project's root directory widgets, we can see a richtext folder. widgets placed in the root directory widgets belong to system-level widgets and can be used by all sites.

Widgets can also be placed under the site template for the site that uses the site template.

1. widget background.

Admin. cshtml in the richtext Directory allows you to add rich text in the background. Shows the effect.

Okay. Open a dialog.CodeWe don't need to write it. We just need Admin. cshtml to insert some simple code.

 @ Inherits susucms. Web. widgetadminpagebase <Tr> <TH> @ Html. Label (  "  Content  " , Localize ( "  Content  "  )) </Th> <TD> @ Telerikhelper. Editor (  "  Content  " , I => {I. htmlattributes ( New {Style = "  Height: 420px  "  });}) <SCRIPT type = " Text/JavaScript  " > Function getdata (){  Return {Content: $ ( '  # Content  ' ). Data ( '  Teditor  '  ). Value () };} function setdata (data ){  If (Data! = Null ) {$ (  '  # Content  ' ). Data ( '  Teditor  '  ). Value (data. Content );}} </SCRIPT> </TD> </tr>

Admin. cshtml must inherit from the class susucms. Web. widgetadminpagebase.

1. Multiple Languages

We only need to call localize ("content"). The Chinese Translation of content is stored in resources/admin in the current widget directory. in the zh-CN.resx file, we have agreed on the file name and directory name.

2. initialize data

There are two methods to initialize the data. One is to use Js for initialization, and the other is the server code.

To initialize data with JS, we must implement the setdata method in the code. Data is the object we have stored.

Use the server code to initialize data. Model is the widget type. The getdata method returns a dynamic object.

 
@{VaRData =Model. getdata ();If(Data! =Null) {Viewbag. Content=Data. Content ;}}
 

3. Save the data.

Only one way to save data is to implement the JS getdata method.

 

Description of widget. config

 <?  XML version = "1.0"  ?>  <  Widgetinfo  >     <  Displayname  > Rich Text </  Displayname  >      <  Description  > A widget allow you to place HTML code. </  Description  >      <  Adminwindowheight  > 540</  Adminwindowheight  >      <  Admin1_wwidth  > 1080 </  Admin1_wwidth  >  </  Widgetinfo  > 

 
Displayname refers to the type text displayed when the widget is added in the background.
 

 
Description is the widget description, which is useless for the moment.
 

 
Admin1_wwidth andAdminwindowheight is used to set the size of the dialog pop-up window in the background.

 

2. Front-end display.

The front-end display is handled by the widget. cshtml. This file must inherit from susucms. Web. widgetpagebase.

 
@ Inherits susucms. Web. widgetpagebase @ {fronthtml. clientscript. jquery (True);VaRData =Currentwidget. getdata ();If(Data! =Null) {@ Html. Raw (data. Content )}}
 

1. Get data.

The data set in the background can be obtained through currentwidget. getdata (), which is also a dynamic type. For other data, suchArticleWe can use other methods to obtain data.

The following code is used. Therefore, data can be obtained freely and freely.

@{VaRDatacontext =Blogworkcontext. getdatacontext ();VaRList =Datacontext. Articles. withsiteid (currentsite. ID );}
 

2. Introduce the JS file.

If jquery is required for widget modification, you only need to call fronthtml. clientscript. jquery (true.

If you need to register a JS file. We can also call

 
Fronthtml. clientscript. registerscript ("~ /Scripts/codemirror. js");
 

During page parsing, JavaScript will be compressed in a unified manner and there will be no repeated JS references.

3. Use of label.

In the widget, we can use widgetlabel to modify the text in the background. Of course, pagelabel and sitelabel can also be used here.

<H2> @ widgetlabel ("Javascript Minify") </H2>
 

4. Form submission and verification.

See http://susucms.svn.sourceforge.net/viewvc/susucms/SusuCMS.Web/Widgets/Blog.Contact/Widget.cshtml for details? Revision = 343 & view = Markup