CN103176804B - A kind of user interface implementation method - Google Patents

A kind of user interface implementation method Download PDF

Info

Publication number
CN103176804B
CN103176804B CN201310136882.XA CN201310136882A CN103176804B CN 103176804 B CN103176804 B CN 103176804B CN 201310136882 A CN201310136882 A CN 201310136882A CN 103176804 B CN103176804 B CN 103176804B
Authority
CN
China
Prior art keywords
event
javascript
client
control
local
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Expired - Fee Related
Application number
CN201310136882.XA
Other languages
Chinese (zh)
Other versions
CN103176804A (en
Inventor
侯瑞春
丁香乾
周志明
石硕
宫会丽
于树松
井润环
丁英姿
王鲁升
钱正峰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ocean University of China
Original Assignee
Ocean University of China
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ocean University of China filed Critical Ocean University of China
Priority to CN201310136882.XA priority Critical patent/CN103176804B/en
Publication of CN103176804A publication Critical patent/CN103176804A/en
Application granted granted Critical
Publication of CN103176804B publication Critical patent/CN103176804B/en
Expired - Fee Related legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Information Transfer Between Computers (AREA)
  • Stored Programmes (AREA)
  • Computer And Data Communications (AREA)

Abstract

The present invention proposes a kind of implementation method of user interface, draw instruction and carried out in server end in the interface of its client, client host does not deposit interface and draws instruction, but the drafting at execute server end is instructed, carry out the drafting of client, make that based on functional upgrading client renewal bag need not be downloaded, generating new drafting by server end instructs, you can update the function interface of client.Then make the deployment light and flexible of client relative to C/S client-side technologies, solve the problems, such as that the software system updating and client graphical user interface of C/S frameworks are difficult in maintenance.

Description

A kind of user interface implementation method
Technical field
The present invention relates to areas of information technology, a kind of implementation method of graphic user interface is in particular related to.
Background technology
In the software of C/S frameworks, system is interacted by the graphic user interface of client with user, and user passes through Graphic user interface sends instructions to server end, and server end is processed, and result is passed through into graphic user interface Return to user.The software of current C/S frameworks has been widely used, and correlation technique is also very ripe, graphic user interface reality Existing related tool and means is also quite a lot of, and it can make full use of the advantage of client host local resource, but C/S frameworks is soft But there are some defects all the time in graphic user interface realization in part:Graphic user interface is all related according to system in client Business carries out hard coded completion, once needing to increase a kind of business, the correlative code for generally requiring to change client can be real It is existing, because the software client distribution of C/S frameworks is relatively broad, client code is modified if necessary to one by one aobvious It is so highly difficult.To solve the above problems, more common at present is upgraded by the built-in ROMPaq of client, but Some big systems, AKU is often very big, and upgrading once needs to spend the more time, and user is difficult to receive;In addition, a large amount of Client graphical user interface code be also distributed across in the client computer of different geographical, it is clear that attendant is difficult client computer Upper solution graphic user interface relevant issues.
In the software of B/S frameworks, user interface can only be realized by WWW browser, its software deployment, the easy spirit of upgrading It is living, but can not fully call the resource of client host.
Based on this, the easy flexibly advantage of a kind of deployment of existing B/S, upgrading is proposed with reference to B/S, C/S technology, also there is C/S Client-side program makes full use of the implementation method of the user interface of client host local resource advantage then as institute face of the present invention The problem faced.
The content of the invention
There is deployment, scaling difficulty for existing subscriber's interface implementing method or client master cannot be made full use of in the present invention The problem of machine local resource, proposes a kind of user interface implementation method of combination WPF and JavaScript, and it uses following technology Scheme is achieved:
A kind of user interface implementation method, including:
A, client obtain the network profile comprising XAML and JavaScript from server;
B, client draw user interface controls by XAML, and the interface control and boundary are managed by JavaScript Face control event;
After C, interface control event are produced, event is read by affair logic dispatcher, and by event, the control of firing event Part is tied to JavaScript function, calls JavaScript script interpreters to explain and performs the JavaScript function.
Further, user interface controls process is drawn in the step B also includes:Called by local control adapter Client host local resource.
Further, also include calling local third party's window step after step C median surface control event is produced:Thing Part logic dispatcher calls local third party's window by calling custom window loader.
Further, XML+ JavaScript loader load networks configuration files are passed through in the step A.
Further, also comprise the following steps before the step A:Server sends different nets according to client application Network configuration file.
Further, the step A obtains all control types and handle after obtaining XAML by control renderer, passes through Control data manager matches control data.
Further, the APP nodal communitys of the network profile include:Cipher mode, encryption Key values and close Text, the APP nodes include:Runtime nodes, reference window node, reference JavaScript file, local JavaScript File and window set are defined, and wherein window set definition includes:Can recursive attribute set, event sets, data acquisition system And XAML window datas.
Further, the client host local resource includes:Local API, local control or local hardware resources connect Mouthful.
Compared with prior art, advantages and positive effects of the present invention are as follows:
The interface of client of the present invention is drawn instruction and is carried out in server end, and client host is not deposited interface and drawn and refers to Order, but the drafting at execute server end is instructed, and carries out the drafting of client, makes that based on functional upgrading carrying need not be descended Family end updates bag, and generating new drafting by server end instructs, you can update the function interface of client.Relative to C/S visitors Family end technology then makes the deployment light and flexible of client, solves the software system updating and client graphical user of C/S frameworks The difficult problem of Interface maintenance.
After specific embodiment of the invention is read in conjunction with the figure, the other features and advantages of the invention will become more clear Chu.
Brief description of the drawings
Fig. 1 is embodiment of the present invention user interface implementation method flow chart.
Specific embodiment
The present invention realizes that thought is as follows:HTML+JavaScript+Web browsers can only be performed in a browser, it is impossible to be filled Divide the resource for calling client host, such as peripheral hardware of client host.The present invention combines HTML+JavaScript+Web browsers Technology and C/S technologies, based on Net platform developments, run directly in client the machine, can directly invoke client the machine hard The peripheral hardware of part resource, such as client host, reaches deployment, the easy spirit of upgrading of existing HTML+JavaScript+Web browsers It is living, also there is C/S client-side program to make full use of the advantage of client host local resource.
The present invention is further detailed explanation with reference to the accompanying drawings and detailed description, the present invention based on WPF and The user interface implementation method of JavaScript, including:
S01, client obtain the network profile comprising XAML and JavaScript from server;
S02, client by XAML draw user interface controls, by JavaScript manage the interface control and Interface control event;
After S03, interface control event are produced, event is read by affair logic dispatcher, and by event, firing event Control bundle calls JavaScript script interpreters to explain and performs the JavaScript function to JavaScript function.
May need to call local hardware resources information in the drawing process of interface(Such as cash box folding), the present invention is by local Control adapter calls client host local resource(Such as cash box folding information), specifically, XML+JavaScript mixing texts The special requirement included in part is called and uses client host local resource(Local API, local control, local hardware resources connect Mouthful), local control adapter be responsible for initialize these resources.In addition, interface is likely to needs calls local third party's window journey Sequence, step is as follows:After interface generation event, affair logic dispatcher calls JavaScript function, JavaScript function to adjust Local third party's window is called with custom window loader.Custom window is, for special applications prepare, under special circumstances, to need Native window is called, is created when these windows are not by running, but provided by client host, such as network dial journey Sequence.Several certain types of event response functions are defined in program operation process, during operation), such as mouse event, KeyEvent, After background event and system event etc., WPF controls, local control etc. send message, these events can be intercepted during operation, intercepted Event definition in transferring to affair logic dispatcher to read event node, sends by the ID for binding and currently the control ID of event These events are redirected in JavaScript function, that is, bind certain JavaScript function, JavaScript function ought Preceding event definition and current trigger event control are transmitted to event interpreter, and control object is packaged into This pairs by event interpreter JavaScript function is transmitted to as central.
Event of the present invention is distributed and separated with binding, is bound by run-time binding, and its advantage is:Interface is unified, and function can be replaced It is transsexual strong, and distributing for event is not influenceed, bind efficiency high.
During practical application, each client realizes that function differs, its in the drawing process of interface, the requirement to configuration file Differ, also comprised the following steps before step S01 in implementation process of the present invention:Server sends different according to client application Network profile.
Additionally, client obtains the network profile comprising XAML and JavaScript from server, by XML+ JavaScript loader load networks configuration files, XML+ JavaScript loaders are responsible for parsing XAML+ Data in JavaScript file, transfer to WPF interpreters to explain XAML contents, obtain the institute after WPF interpreters are explained There are control handle, control type.Call WPF controls renderer and local control adapter display XML+JavaScript files circle Face content(Comprising control pattern, control location), control data manager is then called, initialize the data of these controls.Control Number of packages from client host according to may obtain, it is also possible to be obtained from server end, control data manager is responsible for these data Be converted to the recognizable data object of runs software;Control data may flow to server end, it is also possible to flow to local control(This Ground peripheral hardware), control data manager is responsible for for these data being converted to server end or local control(Local peripheral hardware)Can know Other data.
Wherein, the network profile structure is as follows:APP nodal communitys include:Cipher mode, encryption Key values and Ciphertext, the APP nodes include:1st, runtime nodes:The node is mainly used to define main window, i.e., need display for the first time Window;2nd, window node is quoted:Including network access src addresses and character code;3rd, JavaScript file is quoted same Including network access SRC addresses and character code;4th, local JavaScript file;5th, window set definition, the window definition Comprising five child nodes:5.1st, attribute set:Including multiple attribute nodes, each attribute node includes property set, attribute again Collection correspondence multiple attributes again, such recurrence, can recurrence to 200 times, scalability is strong, the complicated attribute structure of definable, each Attribute includes:ID, title, type and property value;5.2nd, event sets include:ID codings, title, message key, binding, type are adjusted With function and event attribute collection, wherein event attribute collection can also recursive expansion;5.3rd, data acquisition system, comprising encryption under root roots Mode, encryption Key values, ciphertext, the dateset data sets of root roots include multiple data set nodes, and each data includes word again Section and sets of fields, field can both realize that field was nested with sets of fields, also can field it is parallel with sets of fields, its data support type is more Plus extensively;5.4th, XAML window datas.Whole file uses encryption format, and transmission is safer, and supports to introduce, multiple windows A set of file can be shared, file durability is increased, encoding amount and flourish error rate is reduced.
The realization of user interface of the present invention is included:1st, interface view;2nd, user's operation logic two parts.In implementation process It was found that:If all transferring to server end to perform user's operation logic, the network data that will increase client and server end is handed over Number of times and quantity are changed, the response speed that interface element is operated to user is reduced, increases the operand of server end, cause server The load increase at end, necessarily causes client end interface and server end to be closely integrated, the change of program when being unfavorable for that demand is changed It is dynamic, upgrading, and all transfer to server end to perform user's operation logic, client only carries out XML file parsing, such as Web Without JavaScript in html page in exploitation, it is impossible to provide dynamic interface effect;On the other hand, causing client cannot depart from Server end runs, it is necessary to have the server end could to run client.
Interface view of the present invention realizes that user's operation logic is by configuration file by the XAML in configuration file JavaScript is realized.Interface view and user's operation logic part(JavaScript)All it is, by client executing, only to exist (such as data at the reception server end) are just exchanged with server end and carry out network data exchange, most of user under the conditions of necessary Logical operation is all locally executed in client, so greatly reduces quantity and number of times with server end network data exchange, is filled The computing capability of client host is waved in distribution, reduces the computational load of server end.If there is client user's operation logic Change, can only change client configuration file part, it is not necessary to change server end logic, the program demandd reduction when changing Change amount.Therefore can depart from server end isolated operation with implementation client of the present invention.
Embodiment according to the inventive method realizes that flow is as follows:
Step 01:It is responsible for obtaining XML+JavaScript mixed files from server end during operation and creates window pair As all of WPF contents and local control are included in window object the inside, are included wherein in XML file and meet WPF definition Xaml file contents;
Step 02:XML+JavaScript loaders decompose XAML and JavaScript contents, and hand over WPF interpreter solutions Release;
Step 03:Control renderer is called to draw interface control, while the handle of returning an object value, and wait user to operate, This step may call local control adapter;
Step 04:User's clicking operation, produces control event, WPF to intercept event, and affair logic dispatcher is passed through during operation Call the JavaScript function in JavaScript script interpreters, JavaScript script interpreters are by client end interface control Part specific event unification be mapped in JavaScript function, do not recall hard coded, by the local code after compiling. When JavaScript runs, call control data manager to obtain Data Concurrent and send, obtaining data may be from client host Obtain, it is also possible to obtained from server end, the data started may flow to server end, it is also possible to flow to local control.
During practical application, can be provided with the after-sale service system of garage's industry towards the distribution system of apparel industry or business Its user interface implementation method, specifically can be applicable to a SAAS(Software-as-a-service)Platform on.
Wherein, the client towards the distribution system of apparel industry needs various peripheral hardwares(Member card, bank brushing card POS, Automatic cash box), these peripheral hardwares need to call local device to drive can just be operated, it is impossible to be solved by Web programs, Zhi Nengtong Cross the driving of client local program.By the invention it is possible to call client the machine peripheral hardware to drive, outside operation client the machine If.Distribution system and after-sale service system are in different fields, and operation flow, functional requirement, software interface are very different, Distribution system marketing orientation, is concerned about product quantity, the consumption sum of sale;After-sale service system is concerned about maintenance cost, maintenance mans Process;Cause software client user interface entirely different.By in server end a set of distribution system is provided for distribution system System client configuration file, a set of after-sale service system client configuration file is provided for after-sale service system, flat in SAAS Determine that the user belongs to distribution system user or after-sale service system user sends different configurations respectively during platform User logs in File, reaches software interface, function that two systems user seen entirely different.
The present invention proposes a kind of user interface implementation method based on WPF and JavaScript, wherein, WPF is a kind of Microsoft The interface rendering technique based on net platforms for providing, indicates WPF systems to draw interface by XAML, has drawn rear runtime and has returned The handle of all controls is returned, complicated interface is capable of achieving and is drawn, and it is good to draw effect, in addition, with XAML document definition systems, form Specification, semantic clear scalability is strong.JavaScript is a kind of script, the Dynamic Execution in the way of explaining, in HTML It is middle to occur as client script, wide application, low cost.
The above, is only presently preferred embodiments of the present invention, is not the limitation for making other forms to the present invention, is appointed What those skilled in the art changed possibly also with the technology contents of the disclosure above or be modified as equivalent variations etc. Effect embodiment is applied to other fields, but every without departing from technical solution of the present invention content, according to technical spirit of the invention Any simple modification, equivalent variations and the remodeling made to above example, still fall within the protection domain of technical solution of the present invention.

Claims (7)

1. a kind of user interface implementation method, it is characterised in that including:
A, client obtain the network profile comprising XAML and JavaScript from server;
B, client draw user interface controls by XAML, and the interface control and interface are managed by JavaScript Control event;User interface includes interface view and user's operation logic, and interface view is by the XAML realities in network profile Existing, user's operation logic is realized by the JavaScript in the network profile;
After C, interface control event are produced, event is read by affair logic dispatcher, and the control of event, firing event is tied up Surely JavaScript functions are arrived, is called JavaScript script interpreters to explain and is performed the JavaScript functions;
The C steps median surface control event also includes calling local third party's window step after producing:Affair logic dispatcher Local third party's window is called by calling custom window loader:After interface generation event, affair logic dispatcher is called JavaScript functions, JavaScript function call custom window loaders call local third party's window, the local 3rd Square window is provided by client host, and several certain types of event response functions are defined in program operation process, during operation, this Ground control send message after, these events can be intercepted during operation, has intercepted transfer to affair logic dispatcher reading event node in Event definition, send by the ID for binding and currently the control ID of event and these events be redirected to JavaScript In function, i.e. binding Java Script functions, JavaScript functions are by current event definitions and current trigger event control Part is transmitted to event interpreter, and be packaged into for control object JavaScript functions are transmitted in the middle of This objects by event interpreter.
2. the user interface implementation method according to claim 1, it is characterised in that:User circle is drawn in the B steps Face control process also includes:Client host local resource is called by local control adapter.
3. the user interface implementation method according to claim 1, it is characterised in that:Pass through XML+ in the A steps JavaScript loader load networks configuration files.
4. the user interface implementation method according to claim 1, it is characterised in that:Also include such as before the A steps Lower step:Server sends different network profiles according to client application.
5. the user interface implementation method according to claim 1, it is characterised in that:The A steps are led to after obtaining XAML Cross control renderer and obtain all control types and handle, control data is matched by control data manager.
6. the user interface implementation method according to claim any one of 1-5, it is characterised in that:The network configuration text The APP nodal communitys of part include:Cipher mode, encryption Key values and ciphertext, APP nodes include:Runtime nodes, Quote window node, quote JavaScript files, local JavaScript files and window set definition, wherein window Set definition includes:Can recursive attribute set, event sets, data acquisition system and XAML window datas.
7. the user interface implementation method according to claim 2, it is characterised in that:The client host local resource Including:Local API, local control or local hardware resources interface.
CN201310136882.XA 2013-04-19 2013-04-19 A kind of user interface implementation method Expired - Fee Related CN103176804B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201310136882.XA CN103176804B (en) 2013-04-19 2013-04-19 A kind of user interface implementation method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310136882.XA CN103176804B (en) 2013-04-19 2013-04-19 A kind of user interface implementation method

Publications (2)

Publication Number Publication Date
CN103176804A CN103176804A (en) 2013-06-26
CN103176804B true CN103176804B (en) 2017-06-20

Family

ID=48636709

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201310136882.XA Expired - Fee Related CN103176804B (en) 2013-04-19 2013-04-19 A kind of user interface implementation method

Country Status (1)

Country Link
CN (1) CN103176804B (en)

Families Citing this family (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104717268A (en) * 2013-12-16 2015-06-17 珠海世纪鼎利通信科技股份有限公司 Method and system for realizing interface configuration and development through object-oriented technology
CN105446710B (en) * 2014-08-06 2020-04-14 阿里巴巴集团控股有限公司 Interface providing system and interface providing method
CN104618733A (en) * 2014-10-31 2015-05-13 腾讯科技(深圳)有限公司 Image remote projection method and related device
CN105739957B (en) * 2014-12-09 2018-11-16 阿里巴巴集团控股有限公司 user interface data processing method and system
CN104484189B (en) * 2014-12-31 2018-07-10 北京拼图科技有限公司 The structure and design method of a kind of application interface
CN104699501B (en) * 2015-01-15 2018-02-16 腾讯科技(深圳)有限公司 A kind of method and device for running application program
CN104820604B (en) * 2015-05-27 2018-08-31 百富计算机技术(深圳)有限公司 A kind of browser applied to POS terminal
CN107153705A (en) * 2017-05-11 2017-09-12 深圳市茁壮网络股份有限公司 The application program sort method and server of a kind of web browser
CN107895120B (en) * 2017-11-06 2020-08-28 聚好看科技股份有限公司 Data processing method and device in cross-platform application, electronic equipment and storage medium
CN107832114A (en) * 2017-11-17 2018-03-23 上海瀚银信息技术有限公司 A kind of method that application modules are configured
WO2019114185A1 (en) * 2017-12-12 2019-06-20 华为技术有限公司 App remote control method and related devices
CN108563477B (en) * 2018-03-02 2022-04-26 北京奇艺世纪科技有限公司 Page event response method and device
CN108958868A (en) * 2018-06-30 2018-12-07 深圳市技达信息技术有限公司 The method, apparatus and computer readable storage medium of display interface

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102693238A (en) * 2011-03-23 2012-09-26 青岛海信电器股份有限公司 Widget application method and system and multimedia terminal
CN103034731A (en) * 2012-12-20 2013-04-10 北京思特奇信息技术股份有限公司 Method for generating Web front-end interactive page

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8924845B2 (en) * 2008-02-20 2014-12-30 Lsi Corporation Web application code decoupling and user interaction performance

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102693238A (en) * 2011-03-23 2012-09-26 青岛海信电器股份有限公司 Widget application method and system and multimedia terminal
CN103034731A (en) * 2012-12-20 2013-04-10 北京思特奇信息技术股份有限公司 Method for generating Web front-end interactive page

Also Published As

Publication number Publication date
CN103176804A (en) 2013-06-26

Similar Documents

Publication Publication Date Title
CN103176804B (en) A kind of user interface implementation method
US10277702B2 (en) Method and apparatus for accessing an enterprise resource planning system via a mobile device
CN108139935B (en) The extension of the resource constraint of service definition container
CN104484189B (en) The structure and design method of a kind of application interface
CN107291523B (en) Web front-end message bus system
CN101699393B (en) Network-facing intelligent software interface dynamic generation method
JP5439190B2 (en) Method and system for creating server-based web applications for IT
US20150261428A1 (en) Method and apparatus for updating a web-based user interface
CN103617066A (en) Workflow engine and implementation method thereof
WO2005083562A1 (en) System and method for building mixed mode execution environment for component applications
CN105045887A (en) Mixed mode cross-domain data interaction system and method
CN104182234A (en) Business processing method and business system
US10503378B2 (en) Methods and apparatus for user-customizable application software
CN102023847A (en) Method for realizing push-mode multisystem synchronous data entry based on IE browser based
CN110532045A (en) A kind of striding course call method and relevant apparatus
CN107040818B (en) Layout analytic hierarchy process method and system for Android TV
CN104717268A (en) Method and system for realizing interface configuration and development through object-oriented technology
Ururahy et al. ALua: Flexibility for parallel programming
Gill et al. The remote monad design pattern
Gu et al. Comparative analysis of WebForms MVC and MVP architecture
Bračevac et al. CPL: A core language for cloud computing
EP1249755A2 (en) A method and system for accessing software-based systems
CN102541647A (en) Method for calling external function of executable component in software integration process
Di Santo et al. Reversing guis to ximl descriptions for the adaptation to heterogeneous devices
US11875111B2 (en) Block level document revision

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CF01 Termination of patent right due to non-payment of annual fee

Granted publication date: 20170620

CF01 Termination of patent right due to non-payment of annual fee