Web Application Opener - WebSnap!
Chapter 10, ImageButtonProducer
In the example of Websnap, there are several components that are quite useful for us. One is imageButtonProducer, she can let us replace the scheduled preset button in the way of graphic press, this will make your webpage look More valuable, of course! We have to take some efficiency to change. Before we use her, we have to put her first, please open the following package:
Borland / Delphi6 / DEMOS / Websnap / ImgbtnProducer / DclimgbtnProducer
You will see the window below:
Press Install to press New button to install this component, you should be able to see this component in the last page of Component Palette:
It is very simple to use her way. Please open a new proposal (starting from this chapter, we will use another model):
Please choose AdapterPageProducer, which allows us to make a graphic guide button, and then please change the template option to Blank, because I don't want to use the original formula (she is very ugly ...):
This time, we have established a full web page. When we have to join all the webpages, please check the components in Components to check:
The whole application page module looks like the figure below:
Take a caravan, use ApplicationAdapter to put some elements, first first add one Action to the home page:
The following program is added to the Action.onexecute event:
Uses WebReq, Webcntxt, WebFact, Variants, SiteComp; ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 帖子 帖子 帖子 帖子 帖子 帖子 帖子 帖子 帖子 \ DPPUBLISHED]);
Seriously, you should ask, can we be guided in the way in Visual Page Designer to set up PageName? This is not written? Oh, please think! If we have 10 pages, this 10 web pages I need this button, then have you set a few times? You can use it here, it is easy! Go back to the program, we open Visual Page Designer to design our homepage, current our purpose Just join a guided column, you can use FieldGroup commandGroup to reach: Oh! We want an empty web page, don't be this Title Field, please add the AddDefaultFields feature value to false, let her return to us a clean web page, Then please add an AdapterCommandGroup component in Adapterform1:
Then set her DISPLAYCOMPONENT characteristic to AdapterfieldGroup1.
Very good! The tetan is ugly, pressing the New:
Hey! I don't want this, please return to Page Module, put the ImageButtonProducer component into the page module, follow the Visual Page Designer Press the right button in AdapterCommandGroup1, put our Home Action to:
After that, we have become ImageButtonProducer1 after we put CMDHomeAction's ImageProducer1.
When we can't be able to be full, the first first, her color is still a bit ugly, we can use the characteristics of the characteristics in ImageButtonProducer to beautify her:
Well! It looks more than the industry, and this process is taken with the browser.
The figure is not normal display? Let me look at the picture and pick up the question, press the right button on the figure:
It turns out more /, it seems to be the problem of ImageButtonProducer components. We return to Delphi, re-adjust the characteristic value of ImageButtonProducer, first we must establish an images directory in this item's directory, which is used to generate imageButtonProducer components Graphical Temporary File, then set the imagebuttonproducer.cachedir feature value of Images, and adjust her VirtualDir characteristic value by image.
Since we use WebAppDebuger mode, we must also need to adjust her Search Path setting, add our new images directory, this can be indeed correctly to find the figure: After re-executive, you should be able to see the picture in a normal view.
Hey! Not just a beautiful graphic button, there is Tooltip display, though! Overall looks still monotonous, we plus a title image, which looks more beautiful, we open ApplicationAdapter Fields Designer Window, add an AdapterImageField:
Then set her HREF characteristic value to the diagram URL to be displayed.
At the end, Visual Page Designer, add this field to AdapterFieldGroup1.
Prelude the screen that will appear, and we set her viewmodule as VMDisplay.
Is it true that TitleImage is hindering? Please fill in a blank to take the original TitleImage string in her CAPTION characteristic value (the time to have a word).
Under the Designer mode, I can't see the actual map display, which is the path to the designer when the path is a poor path, and the relationship between the URL is the system. Please use IE after IE.
It seems that it is good, at least takes at least a few lines of Web Application, and then we have to add some of the functions of the database. First, please add a WebDataModule to this item, we need A Table: ORDERS Data Sheet in Bcdemos.
When using BDE to develop Web Application, you need to pay attention to it, that is, you must use the session, and you have to set the autograSessionName to true, otherwise it will not apply to the Web multi-user case, then we have to join a TQuery, this Query's role is Remove all the PayMethod fields in ORDERS and take the Paymethod list with her GROU, we will use her below.
Then I will join the DataSetadapter element, and join our ORDERS TABLE.
Next, we have to add a page module, which is used to display a list of ORDERS lists. We hope to let the user choose a PayMethod, guide another web page, list all the information that meets this PayMethod in that page. Therefore, we must join a Tadapter to this new page module, and we have to join a DataSetValueliST component, which is used to display Query after the group command. Then I settle Dataset for DSVLPAYMETHODLIST to qypaymethodlist. (You must first need Uses DMData unit)
Please open the adapter1 Fields Designer, add an Adapterfield.
Enter the Action Designer of Adapter1 and add an adaptection.
When the user performs this Action, we have to guide him to a web page that filters information with PayMethod, so we must write her Onexecute incident:
procedure TGrid.AdaptGoFilterExecute (Sender: TObject; Params: TStrings); var AParams: TStringList; begin AParams: = TStringList.Create; AParams.Add ( 'FilterValue =' AdaptSelectFilter.ActionValue.Values [0]); RedirectToPageName ( 'FilterGrid ', Aparams, Response, [DPPBLISHED]); END;
FILTERGRID is the name of the network page we used to show the filter results. We will make this web page again, now let me first set up this grid display method, first we join the CSS code, which allows us to order our Grid style:
.Gridtable {width: 100%; Background-color: # 8baadc; border: 1px solid # 003388;} .gridHeader {font-weight: normal; font-size: 9pt; color: #ffffff; Background-Color: # 60a7db; Font-Family: Arial, TEXT-DECORATION: NONE;} .gridrow140 {font-family: arial, helpty: normal; font-size: 9pt; color: # 003388; background-color : # D6dbb9; width = 150;} .gridrow {font-family: arial, helvetica, sansserif; font-weight: Normal; font-size: 9pt; width: 100%; color: # 003388; Background-Color: # d6dbb9 (} .Gridrowfixed {font-family: arial, helvetica, sansserif; font-weight: Normal; font-size: 9pt; width: 100%; color: #ffff; background-color: # 003366;} Please open Visual after completion Page Designer and add three Adapterform inside.
First, let's set the page title graphics and navigation bar, we must use to ApplicationAdapter element in Home Module, so she uses to remember, right after the completion by adding a AdapterFieldGroup and a AdapterCommandGroup on AdapterForm1, set AdapterCommandGroup.DisplayComponent to AdapterFieldGroup Then, then set Adapter's adapter for Home.ApplicationAdapter, and other settings are set according to the method of setting the home page:
After completing, we will continue to set Adapterform3, please add an adapterLayout and set her DisplayColumns 2, which allows us to display the Select PayMethod ComboBox and the determined button in a list, then press the right click to add an AdapterfieldGroup and A AdapterCommandGroup and set adaptercommandgroup2.displaycomponent to AdapterfieldGroup2:
The Adapter characteristics of AdapterfieldGroup2 will then be set to Adapter1.
Then add an adaptergrid in Adapterform2, and set her Adapter to DMData.dsaorders, we only need some simple fields, so press the right click on the AdapterGrid, select Add Column, and take the picture to select the column: After completing, we want to set the Stylerule feature in Adaptergrid's headrattributes, RowaTtributes, TableAttributes to change the Grid display style.
If you don't ask questions, you should have to see the picture below:
This Grid is shown to show all of the information, which can limit the maximum number of materials that can be displayed by setting the PageSize in DSaorders, I will be 25:
We have to provide the use of the use of the action to switch the page, please return to Grid Module, and add an AdapterCommandGroup in AdapterForm2 after opening Visual Page Designer, set AdapterCommandGroup.DisplayComponent to Adaptergrid1.
After setting up, press the right button on AdapterCommandGroup3 to select Add Commands, add Prevpage, Gotopage, NextPage.
Set CAPTION for PrevPage for the previous page, NextPage's caption is the next page, so that this page is designed, then complete the FilterGrid webpage, you can complete the entire program, please add a Page Module, put it inside A Tadapter and join an action inside:
Then please open the Visual Page Designer to join the two Adapterform, the first one, set the title graphics and map columns, the second is to display a Grid, which is the same as the Grid Module, remember to put the grid module. The Styles feature value is copied to AdapterPageProducer.Styles in this module, and we also join nextpage, gotopage, prevpage to this web page, the entire page looks like the picture below:
The module.defaultAction.adapter and module.default grapper are connected to Adapter1 and DefaultFilteractions.
And write the following events:
procedure TFilterGrid.AdaptDefaultExecute (Sender: TObject; Params: TStrings); var FFilter: string; begin FFilter: = Params.Values [ 'FilterValue']; dmData.dsaOrders.DataSet.Filter: = 'PaymentMethod =' '' FFilter ' '' '; dmData.dsaOrders.DataSet.Filtered: = True; dmData.dsaOrders.DataSet.Open; end; procedure TFilterGrid.WebPageModuleDeactivate (Sender: TObject); begin dmData.dsaOrders.DataSet.Filtered: = False; dmData.dsaOrders .Dataset.filter: = '; END; First let's explain AdaPTDefaultExecute, which is a defaultaction's Onexecute event. We take the parameters passed here, use this parameter to filter information, when this Module is deactivate, Let's cancel the filter so that the GRID web page can display all the information, this is one of the DEFAULTACTION, of course, you can also choose to use OnBeforeDispatchPage or onactivate, but these two events have a shortcoming, OnbeforeDispatchPage will be on the web page Trigger before outputting, that is, when you use the switching page function, Filter will trigger once, onactivate, so in this case, DefaultAction is the best processing location because she only triggers once.
This chapter
In this chapter, we use ImageButtonProducer, and use DefaultAction to reach Filter function. The following chapter will continue to strengthen this program, this chapter is an review chapter, I try to explain every action in detail, I hope you are already familiar with it. AdapterPageProducer and Adapter, and Visual Page Designer design. Another thing to remind you, WebAppdebuger is an HTTP Server for our debuger. It means that this program function is quite simple. In some ways, it will cause abnormal results, and the example of this chapter is often because of her It is not working properly, and the case is generated, these problems will not appear after you convert it to isapi / CGI. Only, you can choose HTTP Server, Omnihttp is an unlikely selected.
