200931281 九、發明說明： 【發明所屬之技術領域】 本發明係提供一種應用程式介面之編輯系統及其方 法，特別是一種運用可擴展標記語言（XML)的程式介面進行 物件編輯之系統及方法。 【先前技術】 Ο 〇 目則在開發應用程式或使用者介面時，軟體 通常會運隸式語言（如Visuale++k_程式 程式編輯。最相的程式編輯方式係直接在程式語言之開 發環境中撰寫程式瑪，進一步則可在應用程式介面上拖放 各種的控制項至預定的位置，並於程式碼⑽定控制項之 ΐ稱、識別碼、大小、風格、字體、對齊方式...等屬性， 這些屬性會保存到—個資職案（ re) 後，再將録編譯為二進㈣可執行檔。 寫 李统H第圖1 1，係為習知技藝中應用程式介面之編輯 v 中，應用程式介面11係為程式語言 : 之程式介面，軟體開發人員透過圖形介面12 内修改控制 數、對齊方式…等屬性。例如:對字串=項= 稱，，Static Text、以⑽卜+ ,利項Η的石 ,.〜Slngle llne text，進行修改，並調整 其位置、大小、子體...等。雖然軟體開發 項的名稱’並將控制項拖放至想要的位置，== 200931281 制項的控制卻相當不易且複雜。因控制項在調整或設定 上，大都需要修改應用程式介面11背後的程式碼才能達 成’而無法直接在圖形介面12上進行修改。 上述習知技藝之缺點，在於此編輯系統之控制項難以 編輯，主因軟體開發人員經常要花費許多時間修改程式 碼，非常的費時費力且維護不易。而且，習知技藝之程^ 碼不易被人們所讀取，在於連軟體開發人員都很&理解ς ❹式碼之涵義，更遑論對程式碼不熟悉或一無所知的美工人 5及使用者。加上，習知技藝較難以加人圖形或圖播至圖 /介面上’並快速進行編輯、修改與控制。 為解決習知技藝之缺點’以滿足使用者者對編輯系統 J求，本發明人基於多年從事研究與諸多實務經驗，經 方研究設計與專題探討，於本發明提&—觀用程式介 之編輯系統及其方法，以作為前述期望之實現方式與依 〇 【發明内容】 有上述課題’本發明之目的係提供—種應用程式 之編輯系統及其方法，特別是一種運用可钮 ^(eXtensibleMarkup Language , XML)的程式介面進行物 並=輯之系統及方法，以滿足使用者對編輯系統之需求， 知技藝之缺點，除編輯系統之控制項很容易編輯 、徑制外，使用者亦毋須讀取或熟悉程式碼， 樓也可輕易在圖形介面上進行編輯與修改。 $ 6 200931281 緣是，為達上述目的，本發明係提出一種應用程式介 面之編輯系統，其包含一應用程式介面、一編輯單元及一 處理單元。其中，應用程式介面係包含一圖形介面疋一控 制物件表及一屬性表，且控制物件表具有至少一控制物 件，屬性表昊有至少一屬性攔位。而編輯單元係連接應用 程式介面，以選取一圖形物件或控制物件至圖形介面:， 且編輯單元設定一屬性設定值於屬性攔位中。另處理單元 Ο 係連接應用程式介面及編輯單元’以接收屬性設定值而產 生一控制碼，並根據控制碼控制位於圖形介面上之 件或控制物件。 物 此外’本發明再提出一 其包含下列步驟： 種應用程式介面之編輯方法，200931281 IX. Description of the Invention: [Technical Field] The present invention provides an editing system for an application interface and a method thereof, and more particularly to a system and method for editing an object using a program interface of Extensible Markup Language (XML). [Prior Art] 〇 When developing an application or user interface, the software usually runs in a language (such as Visuale++k_program editing. The most common program editing method is directly in the programming language development environment). In the program, you can drag and drop various control items to the predetermined location on the application interface, and set the nickname, identification code, size, style, font, alignment of the control item in the code (10)... Such attributes, these attributes will be saved to a job (re), and then compiled into a binary (four) executable file. Write Li Tong H Figure 1 1, is the editing of the application interface in the traditional skills In v, the application interface 11 is a programming language: the program interface, the software developer modifies the control number, the alignment method, etc. through the graphic interface 12. For example: pair string = item = scale, Static Text, (10) Bu +, Li Xiangyu's stone, ~Slngle llne text, modify it, and adjust its position, size, child body, etc.. Although the name of the software development item 'and drag and drop the control to the desired position ,== 200931281 The control of the item is quite difficult and complicated. Because the control item needs to be modified or set, most of the code needs to be modified to achieve the 'application code' and cannot be directly modified on the graphic interface 12. The shortcomings of the above-mentioned conventional techniques, In this editing system, the control items are difficult to edit, and the main software developers often spend a lot of time to modify the code, which is very time-consuming and labor-intensive and difficult to maintain. Moreover, the process of the conventional technology is not easy to be read by people, and it is connected with software. Developers are both & understand the meaning of the ❹ code, not to mention the US workers 5 and users who are unfamiliar with the code or know nothing about it. Plus, it is more difficult to add graphics or pictures to the map. /Interface 'and quickly edit, modify and control. In order to solve the shortcomings of the traditional skills' to meet the user's request for editing system J, the inventor based on years of research and many practical experience, research and design Exploring, in the present invention, the editing system and the method thereof, as the implementation of the foregoing desired implementation Contents] The above object is directed to an application editing system and method thereof, and more particularly to a system and method for using a program interface of an eXtensible Markup Language (XML) to To meet the user's needs for editing systems, the shortcomings of knowing the skills, in addition to the editing system controls are easy to edit, the system, the user does not need to read or familiar with the code, the building can also be easily edited on the graphical interface The invention is directed to an application interface editing system comprising an application interface, an editing unit and a processing unit. The application interface includes a graphical interface, a control object table, and an attribute table, and the control object table has at least one control object, and the attribute table has at least one attribute block. The editing unit is connected to the application interface to select a graphic object or control object to the graphic interface: and the editing unit sets an attribute setting value in the attribute blocking position. The processing unit 连接 connects the application interface and the editing unit to generate a control code by receiving the attribute setting value, and controls the device or the control object located on the graphic interface according to the control code. Further, the present invention further includes the following steps: an editing method of an application interface,
(a) 提供一編輯系統，其包含一應用程式介面、一編輯 單元及一處理單元，應用程式介面包含一圖形介 面、一控制物件表及一屬性表，且控制物件表具有 至少一控制物件，屬性表具有至少一屬性棚位。 (b) 以編輯單元選取一圖形物件或控制物件至圖形介 面上。 (c) 以編輯單元設定一屬性設定值於屬性欄位中。 (d) 以處理單元接收屬性設定值而產生一控制碼。 (幻根據控制碼控制位於圖形介面上之圖形物件或控 制物件。 茲為使貴審查委員對本發明之技術特徵及所達成之 功效有更進一步之暸解與忍識，下文謹提供較佳之實施例 及相關圖示以為輔佐之用，並以詳細之說明文字配合說明 7 200931281 如後。 【實施方式】 為使本發明之上述目的、特徵和優點能更明顯易懂， 下文依本發明之應用程式介面之編輯系統及其方法，特舉 較佳實施例，並配合所附相關圖示，作詳細說明如下，其 中相同的元件將以相同的元件符號加以說明。 Ο Ο 言月參閱第2圖，係顯示本發明應用程式介面之編輯系 統之示意圖。圖中，編輯系統2主要包含—應用程式介面 21編輯單元22及一處理單元23，亦可增加一儲存單 元24。其中，應用程式介面21係包含一圖形介面211、一 控制物件表212及一屬性表213，且控制物件表212具有 至少一控制物件212卜屬性表213具有至少一屬性欄位 2131。再者，編輯單元22係連接應用程式介面21，以選 取一圖形物件241或控制物件2121至圖形介面211上且 =單元22設定-屬性設定值2132於屬性棚位2ΐ3ι中。 夕’處理單it 23係連接應用程式介面21及編輯單元 22 ’以接收屬性設定值2132而產生一控制碼 控制碼231控制位於圖形介 並根據 ”面211上之圖形物件241戎批 制物件2121。此外，儲存單亓94後田，、，冲七干1次控 B ^ ^ t/ 仔早70 24係用以儲存圖形物件241， 且圖形物件241較佳為—圖形或-圖槽。 =特別說明的是，上述之應用程式介 言_之程式介面。圖形介面：二； 面工具嫌輪面。控制物件21」:界 200931281 且控制項包含一按紐（Button)控制項、一單選按钮（Radi〇 Button)控制項、一矩形塊（Rectangle)控制項、一字串 (String)控制項、一列表（List)控制項、一複合（Combo) 控制項、一滾動條（Slider)控制項、一編輯（Edit)控制項、 一背景（Background)控制項及一界面工具集（Widget)控制 項其中一者。而屬性設定值2132較佳為一名稱、一識別 碼、一位置、一大小、一字體、一粗細、一斜體、一對齊 方式、一風格（Style)、一偏移量（Offset)及一顯示方式其 ❹中一者。另控制碼231較佳為一程式碼。 請一併參閱第3A圖至第3C圖，係顯示本發明應用程 式介面之編輯系統之較佳實施例示意圖。第3A圖係顯示編 輯系統在開始編輯前之畫面。此編輯系統係包含一應用程 式介面31、一編輯單元、一處理單元及一儲存單元（圖中 未顯示此三個單元）。其中，應用程式介面31係包含一圖 形介面31卜一控制物件表312及一屬性表313，且應用程 式介面31為一可擴展標記語言（XML)之程式介面。圖形介 〇面311為一界面工具集（Widget)介面。控制物件表312具 有一按鈕（Button)控制項、一單選按鈕（Radi〇此_^〇1〇控 制項、一矩形塊（Rectangle)控制項、一字串（string)控制 項、一列表（List)控制項、一複合（c〇mb〇)控制項、一滾動 條（Slider)控制項、一編輯控制項、一背景 (Background)控制項及一界面工具集（Widget)控制項。而 屬性表313之屬性欄位3131係用以設定屬性設定值 3132,例如：名稱（Name)、識別碼（ID)、位置（Left/T〇p)、 大小（Width/Height)、對齊方式（Sync type)、風格 200931281 等。另儲存單元_存至少—圖形物件。 再者’第3B圖係顯示編輯系統在進行編輯時之晝面。 在進订編輯時’編輯單认料單域取 或從控制物件表312選取至少-控制物件至圓= ❹ ❹ 屬性設定值3132於每-個屬二 再由處理早TG將屬性設定值3132轉換成控制 碼，並根據控制碼控制位於圖形介面311上之圖形物 ，制物件。舉例來說’編輯單元從控制物件表312選取一 子串控制項322,並設定字串控制項322之屬性設定值3132 於屬性棚位3131中，例如：；g_ame)為”Text丨”、識別 碼（ID)為、位置（Left)為”47”、A^、（Width)為”⑽，，、 風格（Style)V，Multi_Line，，··.等，再按下執行”Appiy”， 將屬性設定值3132傳送至處理單元中。而處理單元在接收 到屬性設定值3132後，將屬性設定值轉換為控制喝， 並以控制碼調整字串控制項322之名稱、位置、大小、風 格…等。同樣地，編輯單元亦可從儲存單元選取圖形物件 321至圖形介面311上，並設定屬性設定值31犯於屬性攔 位3131中，再按下執行”Apply，，’將屬性設定值3132傳送 至處理單元中，由處理單元轉換屬性設定值3132為控制 碼’並以控制碼控制圖形物件321。 最後，第3C圖係顯示編輯系統在完成編輯後之畫面。 圖中，圖开>介面311可設為一個或多個，並顯示一圖形物 件321、一圖形物件331、一單行字串控制項332、一多行 字串控制項333及一按鈕控制項334。而屬性表313之屬 性攔位3131係顯示單行字串控制項332之屬性設定值 200931281 3132。 清參閱第4圖，係趣-丄 法之流程圖。圖卜此方=本發明應用程式介面之編輯方 介面之編If系^ 係對應第2圖所示之應用程式 介面之編輯系統之不意圖，並包含下列步驟： ❹ 〇 步驟輯系統2,其包含-應用程式介面2卜 ，辑單％ 22及—處理單元23，亦可增加一儲 子早70 24。此應用程式介面21係包含一圖形介 :211、一控制物件表212及一屬性表2〗3，且 二，物件表212具有至少一控制物件212卜屬 ^表213具有至少一屬性棚位213卜應用程式 二面21較佳為一可擴展標記語言（XML)之程式 面。而圖形介面211較佳為-界面工且集 ⑽㈣介®。另控制物件2121較佳為一控制 f ’且控制項包含一按紐控制項、-單選按紐控 制項、-矩形塊控制項、一字串控制項、一列表 控制項、-複合控制項、一滚動條控制項、一編 輯控制項、一背景控制項及一界面工隼 (Widget)控制項其中一者。 、/' 步驟S42:以編輯單元22選取-圖形物件241或控 2121至圖形介面211上。此圖形物件241較^ 為-圖形或-圖播，且通常儲存於儲存單元 中。 步驟S43 :以編輯單元22設定-屬性設定值2132 襴位2131中。此屬性設定值2132較佳為二= 11 200931281 稱 細 一識別碼、一位置、 斜體、'—對齊方式 示方式其中一者。 大小、一字體、一粗 風格、一偏移量及 ^S44：^^ ㈣231。此控制竭231較佳為一程式碼。 '驟S45=r碼231控制位於圖形介面241上之圖 Ο 勿件241或控制物件2121。 本發例:對::為限制性者。任何未脫離 應包含於後附之申;專：圍f修改或變更’均 【圖式簡單說明】 第1圖係為習知技藝中應用程式介面之編輯系統之 示意圖； 〇 第2圖係顯示本發明應用程式介面之編輯系統之示 意圖； 第3A圖至第3C圖係顯示本發明應用程式介面之編 輯系統之較佳實施例示意圖；以及 第4圖係顯示本發明應用程式介面之編輯方法之流 程圖。 12 200931281 【主要元件符號說明】 11:應用程式介面； 12 :圖形介面； 13 :字串控制項； 2 :編輯系統； 21 :應用程式介面； 211 :圖形介面； 〇 212 :控制物件表； 2121 :控制物件； 213 :屬性表； 2131 :屬性欄位； 2132 :屬性設定值； 22 :編輯單元； 23 :處理單元； 〇 231 :控制碼； 24 :儲存單元； 241 :圖形物件； 31 :應用程式介面； 311 :圖形介面； 312 :控制物件表； 313 :屬性表； 3131 :屬性攔位； 3132 :屬性設定值； 321 :圖形物件； 322 :字串控制項； 331 :圖形物件； 332 :單行字串控制項； 333 :多行字串控制項； 334 :按鈕控制項；以及 S41〜S45 :流程步驟。 13(a) providing an editing system comprising an application interface, an editing unit and a processing unit, the application interface comprising a graphic interface, a control object table and a property sheet, and the control object table has at least one control object. The property sheet has at least one property booth. (b) Select a graphic object or control object from the editing unit to the graphic interface. (c) Set an attribute setting value in the attribute field in the editing unit. (d) generating a control code by receiving the attribute set value by the processing unit. (The Magic Controls the graphic object or the control object located on the graphic interface according to the control code. In order to give the reviewer a better understanding and understanding of the technical features and the effects achieved by the reviewer, the preferred embodiments are provided below. The related drawings are used for assistance, and the detailed descriptions are in conjunction with the descriptions. 7 200931281 hereinafter. [Embodiment] In order to make the above objects, features and advantages of the present invention more apparent, the following application interface according to the present invention The editing system and its method are described in detail with reference to the accompanying drawings, wherein the same elements will be described with the same element symbols. Ο 言A schematic diagram showing an editing system of the application interface of the present invention. In the figure, the editing system 2 mainly includes an application interface 21 editing unit 22 and a processing unit 23, and a storage unit 24 may be added. The application interface 21 includes a graphical interface 211, a control object table 212 and an attribute table 213, and the control object table 212 has at least one control object 21 The second attribute table 213 has at least one attribute field 2131. Further, the editing unit 22 is connected to the application interface 21 to select a graphic object 241 or control the object 2121 to the graphic interface 211 and = unit 22 setting - attribute setting value 2132 is in the attribute booth 2ΐ3ι. The evening processing unit is 23 connected to the application interface 21 and the editing unit 22' to receive the attribute set value 2132 to generate a control code control code 231 control located in the graphic interface and according to the "face 211" The graphic object 241 is a batch object 2121. In addition, the storage unit 94, Houtian, and the seven-time control B ^ ^ t / Aberdeen 70 24 are used to store the graphic object 241, and the graphic object 241 is preferably - Graphic or - slot. = Specially stated, the application interface of the above application is _. Graphic interface: 2; face tool suspected wheel surface. Control object 21": boundary 200931281 and the control contains a button (Button) Control, a radio button (Radi〇Button) control, a rectangular block (Rectangle) control, a string control, a list control, a Combo control, a scroll bar (Sl The ider) control item, an edit control item, a background control item, and an interface tool set (Widget) control item, and the attribute setting value 2132 is preferably a name, an identification code, and a One of the top position, one size, one font, one thickness, one italic, one alignment, one style, one offset, and one display mode. The other control code 231 is preferably one. Please refer to Figures 3A through 3C for a preferred embodiment of the editing system of the application interface of the present invention. Figure 3A shows the screen of the editing system before it starts editing. The editing system includes an application interface 31, an editing unit, a processing unit, and a storage unit (the three units are not shown). The application interface 31 includes a graphical interface 31, a control object table 312, and an attribute table 313, and the application interface 31 is an extensible markup language (XML) program interface. The graphic interface 311 is an interface tool set (Widget) interface. The control object table 312 has a button control item, a radio button (Radi 〇 〇 〇 〇 control item, a rectangular block (Rectangle) control item, a string control item, a list ( List) control item, a composite (c〇mb〇) control item, a slider (Slider) control item, an edit control item, a background control item, and an interface tool set (Widget) control item. The attribute field 3131 of Table 313 is used to set the attribute setting value 3132, for example: Name, ID, Left/T〇p, Width/Height, Sync type. ), style 200931281, etc. Another storage unit _ save at least - graphic objects. In addition, '3B shows the editing system when editing. In the edit editing 'Edit single-receipt single-domain or slave control The object table 312 selects at least the control object to the circle = ❹ ❹ the attribute set value 3132 in each of the two genus, and then converts the attribute set value 3132 into a control code by the processing early TG, and controls the graphic located on the graphic interface 311 according to the control code. Object, object, for example The unit selects a substring control item 322 from the control object table 312, and sets the attribute setting value 3132 of the string control item 322 in the attribute booth 3131, for example: ;g_ame) is "Text丨", and the identification code (ID) is , position (Left) is "47", A^, (Width) is "(10),,, style (Style) V, Multi_Line,, ...., etc., and then press "Appiy" to transfer the attribute setting value 3132. After receiving the attribute set value 3132, the processing unit converts the attribute set value to control drinking, and adjusts the name, position, size, style, etc. of the string control item 322 by the control code. The editing unit may also select the graphic object 321 from the storage unit to the graphic interface 311, and set the attribute setting value 31 to be committed in the attribute block 3131, and then press the execution "Apply," to transfer the attribute setting value 3132 to the processing unit. The attribute set value 3132 is converted by the processing unit to the control code ' and the graphic object 321 is controlled by the control code. Finally, the 3C figure shows the screen of the editing system after editing. In the figure, the interface 311 can be set to one or more, and displays a graphic object 321, a graphic object 331, a single-line string control item 332, a multi-line string control item 333, and a button control item. 334. The attribute block 3131 of the attribute table 313 displays the attribute setting value of the single line string control item 332 200931281 3132. See Figure 4 for a clear description of the flow chart. This is the intention of the editor interface of the application interface of the present invention, which corresponds to the editing system of the application interface shown in FIG. 2, and includes the following steps: ❹ 〇 Step Sequence System 2, Including - application interface 2, album % 22 and - processing unit 23, can also add a storage early 70 24 . The application interface 21 includes a graphic interface: 211, a control object table 212, and an attribute table 2, and the object table 212 has at least one control object 212. The table 213 has at least one attribute booth 213. The application side 2 is preferably a program surface of an Extensible Markup Language (XML). The graphical interface 211 is preferably an interface and a set (10) (four). The other control object 2121 is preferably a control f' and the control item includes a button control item, a --select button control item, a rectangular block control item, a string control item, a list control item, and a composite control item. One of a scroll bar control item, an edit control item, a background control item, and an interface widget control item. / / Step S42: The editing unit 22 selects the - graphic object 241 or the control 2121 to the graphic interface 211. The graphical object 241 is - graphics or - and is typically stored in a storage unit. Step S43: The setting unit 22 sets the attribute setting value 2132 in the position 2131. This attribute setting value 2132 is preferably two = 11 200931281. One of the identification codes, one position, italic, and the '-alignment mode. Size, a font, a thick style, an offset, and ^S44:^^ (four) 231. This control 231 is preferably a code. 'Step S45 = r code 231 controls the picture 241 or the control object 2121 located on the graphic interface 241. This example: Pair:: is a restrictive one. Any application that does not deviate from the following shall be included; special: modification or change of the 'f' (simplified description of the drawing) Figure 1 is a schematic diagram of the editing system of the application interface in the prior art; 〇 Figure 2 shows A schematic diagram of an editing system of an application interface of the present invention; FIGS. 3A to 3C are diagrams showing a preferred embodiment of an editing system of an application interface of the present invention; and FIG. 4 is a diagram showing an editing method of an application interface of the present invention. flow chart. 12 200931281 [Key component symbol description] 11: Application interface; 12: Graphic interface; 13: String control; 2: Editing system; 21: Application interface; 211: Graphic interface; 〇212: Control object table; : control object; 213: attribute table; 2131: attribute field; 2132: attribute setting value; 22: editing unit; 23: processing unit; 〇231: control code; 24: storage unit; 241: graphic object; Program interface; 311: graphical interface; 312: control object table; 313: attribute table; 3131: attribute block; 3132: attribute set value; 321: graphic object; 322: string control item; 331: graphic object; Single line string control item; 333: multi-line string control item; 334: button control item; and S41~S45: process step. 13