23, "open source" EFW framework Web front-end development of common components (Fusioncharts charts, Reportall reports, etc.)

Back to the "open source" EFW Framework Series article index

EFW Framework Source code Download V1.2:http://pan.baidu.com/s/1hcnua

EFW Framework Instance source code download: Http://pan.baidu.com/s/1o6MAKCa

        preface : The previous chapter describes the interface framework in EFW framework Jqueryeasyui, in a web system development in addition to the need for a good interface framework and need some features, such as: Chart Display, Web Report preview printing, File upload, text editing and other functions in the web system development process is also often used; in order to facilitate the use of EFW framework development system, I compared the online mainstream of these features, Some good evaluation or use of more comfortable functions to integrate into the EFW framework ; There are chart controls Fusioncharts, report controls Reportall and Grid++report, upload controls Jquery.uploadify, Web page text editor Xheditor; Of course, if you find that a better control can be easily added to the EFW framework. Here I will explain the use of these several controls and implementation of one by one;

This article highlights:

Introduction to 1.FusionCharts Chart controls

2.ReportAll Report Control Introduction

3.grid++report Report Control Introduction

4. Web page Text Editor

5. Upload File Control Introduction

Source code directory structure:

Introduction to 1.FusionCharts chart Controls

Fusioncharts is a flash charting component that can be used to animate data, which is animated using Flash made by Adobe Flash 8 (formerly Macromedia Flash). Fusioncharts can be used on any Web page in a scripting language similar to HTML,. net,asp, JSP, PHP, ColdFusion, etc., providing interactive and powerful charts. Using XML as its data interface, Fusioncharts takes full advantage of the fluid beautiful flash to create compact, interactive and visual arrest charts.

Fusioncharts is really powerful and the effect is very beautiful, but the format of XML is a bit complex, different graphics XML format is not the same, do make sure to check the demo instance to verify the XML format you generated;

See, is a line chart developed using the EFW framework, from the database to isolate the DataTable data, the first column is defined as the X axis of the line chart, the second column is defined as the y-axis data, the DataTable using the Webfusionchart object into XML, Interface code through the AJAX request controller output XML assignment to JS Fusioncharts Object display chart, interface code is relatively simple, reference fusioncharts.js file, call the corresponding chart SWF file;

2.REPORTALL Report Control Introduction

Reportall is a report development tool for software developers; she has a whole new design idea. From the point of view of report design, she integrates the advantages of "object placement" and "spreadsheet" reporting tools perfectly, and from the point of view of data filing, his unique multi-threaded background data loading mode makes any large data source can be returned quickly, so as to realize the effect of side loading side browsing.

Reportall Report plugin is fully compatible with IE, Firefox, Google Chrome, Opera, proud tour, TT and other mainstream browsers.

Reference: http://www.reportall.com.cn/index.html

Do the Web report has not found a good web report components, previously useful Crystal Reports, Dev Report control, Finereport, and so there are various reasons for the use of EFW framework is not appropriate, the Crystal report is too large, the Dev report control is too difficult to use, Finereport This is really good but not free; after a tangle of two homemade, lightweight web reporting tools Reportall and grid++report, two are very simple to use;

See, using the Reportall report packaged in the EFW framework to develop a simple report, report production involves front-end development, The front-end interface is simple to refer to the Reportallprint.js file to dynamically create the report object, and then request XML data through the URL to the background controller, the background using the framework of the Webreportall object to convert the DataTable data to XML data output display in the interface report control;

3.grid++report Report Control Introduction

Reference: http://www.rubylong.cn/index.htm

Grid++report is a high-performance and efficient report development tool that can develop both desktop software reporting and printing systems, as well as the development of Web (b/s) software reporting and printing systems. Providing a data grid (DataGrid) part with a strong data presentation capability makes it easy to make a variety of tabular reports, which can be used by event processing to interact with users, and specifically implemented for ticket sets, and is the best choice for developing dynamic reports. Provides a visual Report Designer for quick and easy design of reports. In addition to providing the printing function, Grid++report also provides unique report query display function, display data like various data grid (DataGrid) control, let the report's query display and print once implementation, improve development efficiency and maintain data consistency, this is also grid++ The maximum difference between the report and other reporting controls.

In the EFW framework WinForm version of the use of grid++report for the development of CS reports, Grid++report not only support the CS report also support Web Report development, so the framework also integrates it into the Web report; Functionally speaking grid++ Report should be more powerful than Reportall, can support the online design of the format of reports, using the same way as above Reportall;

See, a report was developed using the Grid++report encapsulated in the EFW framework, Front-end page references Createcontrol.js and grutility.js create report objects, request XML format data through URLs to the background controller, and the background controller leverages the GRID_ in the framework The Xmlreportdata object transforms the DataTable data into XML data output, and the interface displays the contents of the report;

4. Web page Text Editor

Reference: http://xheditor.com/

Xheditor is a simple mini and efficient online visual HTML editor based on jquery, web-based access and compatible with IE 6.0+,firefox 3.0+,opera 9.6+,chrome 1.0+,safari 3.22+.
Xheditor is entirely JavaScript-based, and you can apply it to any server-side language environment, such as PHP, ASP, ASP, and Java.
Xheditor can be used in your CMS, blog, Forum, Mall and other Internet platform perfect embedded operation, can be very flexible and simple and your system to achieve the perfect seamless connection.

The use of xheditor is that it is small enough, although there is no ckeditor control so many functions, but enough on the line;

See, Interface page reference Xheditor-1.1.14-zh-cn.min.js file can use this control;

5. Upload File Control Introduction

Reference: http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html

Uploadify, in short, is a file upload plugin based on jquery. Its functional features are summarized as follows:

1. Support single file or multi-file upload, can control the number of files uploaded concurrently

2. Support the use of various languages on the server side, such as Php,.net,java ...

3. Configurable upload file type and size limit via parameters

4. Parameters can be configured to automatically upload after selecting a file

5. Easy to scale, can control the callback function of each step (OnSelect, OnCancel ... ）

6. Control appearance via interface parameters and CSS

See, using the encapsulated uploadify in the EFW control to develop an instance of the upload file, the file upload involves interaction between the front and back The foreground page references the Swfobject.js file and jquery.uploadify.v2.1.0.min.js creates the uploaded button, selects the file, clicks Upload, sends the request to the background controller via the specified URL, and the background Uploadifycontroller controller receives the request to upload the The file is deposited in the Userfiles directory;

In short, EFW encapsulates these Web Components everything is for the convenience of everyone, save yourself to spend time to study a variety of Web control, not a boutique is not integrated, so we also rest assured that use.

23, "open source" EFW framework Web front-end development of common components (Fusioncharts charts, Reportall reports, etc.)