Introduction to the Web parts mode (Part 1)

Web components support a total of five different display modes, each of which is special,

And applied to the entire web page,

The five modes are

Browsedisplaymode ---- browsing mode

Designdisplaymode ---- Design Mode

Editdisplaymode ---- edit mode

Catalogdisplay ---- directory Mode

Connectdisplaymode ---- connection mode

The browsing mode is purely used to display web parts and UI projects.

Design Mode: In this mode, users can re-arrange or delete controls to change the page layout.

In editing mode, the editing user interface becomes visible,

You can edit the appearance, properties, and behavior of visible controls in regular browsing mode.

In directory mode, the directory UI becomes visible. You can add the control to the page from the available control directory.

In connection mode, the connection UI becomes visible. You can connect, manage, or disconnect controls.

In this Web parts mechanism, why does pattern appear?

If you want to implement a custom page, you can add or delete things on the page,

You can edit the properties of these controls. You can drag and drop these items,

If we don't separate these parts, it's a mess,

Think about it again. All of the above functions are OK at one time.CodeHow to implement partial management?

So there is a mode, which combines the user's operation permissions on the page to achieve the purpose of managing the monitoring page.

In the browsing mode, the general browsing mode is used to minimize, maximize, and disable controls,

So I will not introduce it. (In fact, all the subsequent demos will use the browsing mode. If you don't need it, it's impossible ),

Next, let's take a look at a demo of the design mode.

Let's take a look at the effect first. After reading the effect, we will have a better understanding.

I log on with the username Xiaozhen,

Click "open design mode" to switch to design mode.

Now you can press and hold the left button in the area marked by the highlighter to drag these Web parts,

I can use the drag method in the design mode to change the positions of a photo in combination with a photo.

After you relay the layout, you can click "Close design mode" to return to the browsing mode,

In the browser mode, you can only view the data, but cannot modify or design it (of course, the predicate is still valid ),

The above demonstrates the usage of the design mode and browsing mode,

The following describes how to design and implement the demo above,

As mentioned above, if you want to use web parts,

You must have a webpartmanager control on the page,

The above design patterns and browsing patterns do not involve modifications or links,

Therefore, it is okay to use a simple webpartzone container to include controls,

Therefore, a 2*2 table (for typographical use) is inserted on the page ),

Add a webpartzone in each cell,

Then add an image to each webpartzone and specify the image,

The key lies in the modification of a mode, which depends on webpartdisplaymodecollection,

Modify the mode to be applied on the current page by specifying the mode in this set,

See the. ASPX page and code-behind.

Code-behind is very simple

Check the tab.

This demo is complete. The directory mode and editing mode are also introduced below,

First, let's introduce the directory mode. The directory mode mainly displays a list of specific Web Part controls.

Let the user select to add or import the exported Web Part Control to webpartzone,

When we introduced the Web parts control, we also talked about the directory mode, that is,

There are three types of controls in directory mode,

Declarativecatalogpart (you can select the Web Control in the directory list to add it to webpartzone)

Pagecatalogpart)

Importcatalogpart (import the directory control to webpartzone, usually an XML file)

Next, let's look at a demo, which is more effective,

Check the effect first (log on to Xiaozhen first)

After Login

Then open the directory mode.

As shown in the preceding figure, there are two directories in the directory area: declarative directory and page Directory.

Let me test the declarative directory first.

I select Photo 3 and add it to photo frame 1.

After adding the image, you can see picture 3. This image has been added to the one in the photo frame on the page.

Then add Photo 4 to the photo frame CMB.

You can see

Observe carefully and add the title bars of the two photos added to the page from the declarative directory.

An image button will be added to the title bar of a picture on the page from the beginning. This is the delete button (not disabled)

Deleted files cannot be recovered from the page Directory (disabled)

(Of course, in browser mode, this Delete predicate is invisible)

The following is the page Directory,

Demonstration on the basis of the above (there are four photos on the page)

I will exit directory mode and return to browsing mode.

Then I close photo 1 and Photo 4.

Turn off the directory mode and select the page directory in the directory area.

 

Now we can see that the closed pictures and pictures are saved in the page Directory.

You can select a photo, select the image frame to be added, and then click Add to add the photo to the page,

I add a photo to the second picture frame, and four to the second picture frame.

Let's look at the directory on the next page,

You can see that there is no photo in the page Directory, because there is no photo closed by the user on the page to save,

So it is empty.

The effect will be demonstrated here first, and it is interesting to see how it is implemented !!!

First, webpartmanager is required,

Then add two webpartzone as the photo frame,

Add an image to act as a photo

(Two of them are implemented in the form of usecontrols, which is actually an image)

Then add the catalogzone that acts as the directory area,

Add the declarativecatalogpart that acts as the declarative directory in the directory area.

And pagecatalogpart that acts as the page Directory

In this way, a basic page design is completed. Of course, there are still many attribute settings that will not be described much,

First look at code-behind

Then Mark

 

For this directory mode, I only introduced pagecatalogpart and declarativecatalogpart,

As for importcatalogpart, I will have a chance to see it later.

There is also an editing mode and connection mode (mainly the editing mode). Leave it to the next blog post to introduce it.

Today is Spring Festival and Valentine's Day, and I am also busy. I wish you a happy New Year and a happy Valentine's Day !!!

2010-2-14