vcs.maemo.org Git - mdictionary/blob - www/qmlelements.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3 <head>
   4         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   5         <meta http-equiv="content-language" content="EN" />
   6         <meta name="description" content="Home page for mDictionary project -
   7                     mobile multilingual dictionary for maemo.org platform
   8                     (previously known as a 'WhiteStork')" />
   9         <meta name="keywords" content="mdictionary whitestork maemo n770
  10                     n800 n810 dictionary xdxf stardict mobile linux comarch" />
  11         <meta name="language" content="English" />
  12         <meta name="owner" content="ComArch S.A." />
  13         <meta name="copyright" content="ComArch, 2006-2007. All rights Reserved."/>
  14
  15         <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon"></link>
  16         <link rel="stylesheet" href="styles/main.css" type="text/css"></link>
  17         <!--[if IE 6]>
  18                 <link rel="stylesheet"
  19                       type="text/css"
  20                       href="styles/main_ie.css" />
  21
  22                 <script src="scripts/pngfix.js" type="text/javascript"></script>
  23         <![endif]-->
  24         <script language="JavaScript" src="scripts/javascripts.js" ></script>
  25
  26         <title>
  27                 mDictionary - multilingual dictionary for Maemo
  28         </title>
  29 </head>
  30 <body>
  31 <div id="webContainer">
  32         <div id="topBar">
  33                 <img src="images/mLogo_ie24.png" style="float:left;"></img>
  34         <div class="installs">
  35                 INSTALL:
  36                 <a href="files/mdictionary.install"
  37                    class="install" style="margin-top:4px;"
  38                    title="Click to install mDictionary on OS2006"><span>OS2006</span>
  39                 </a>
  40                 <a href="files/mdictionary.install"
  41                    class="install" style="clear:both; margin-top:4px;"
  42                    title="Click to install mDictionary on OS2007"><span style="letter-spacing:0px;">OS2007</span>
  43                 </a>
  44                 <a href="files/mdictionary2008.install"
  45                    class="install" style="clear:both; margin-top:4px;"
  46                    title="Click to install mDictionary on OS2008"><span style="letter-spacing:0px;">OS2008</span>
  47                 </a>
  48                 <span style="clear:both;text-align:center;display:block;font-size:9px;"><a href="howto.html" style="font-size:9px;text-decoration:none;">(read How To... first)</a></span>
  49         </div>
  50                 <div style="display:block;height:100px;">
  51                         <p class="title">
  52                                 mDictionary
  53                         </p>
  54                         <p class="description">
  55                                 multilingual dictionary for <a href="http://www.maemo.org" target="_blank"><img align="top" border="0" src="images/maemo_logo.png" ></a>(N770, N800 &amp; N810)
  56                         </p>
  57                         <p class="description">
  58                                 &nbsp; and <a href="http://www.meego.com" target="_blank"><img align="top" border="0" src="images/Meego.png" width="80" height="20" ></a> (N900 & netbook )
  59                         </p>
  60                 </div>
  61                 <div id="topBarLinks">
  62                         <a href="index.html" >Home</a>
  63                         <a href="download.html">Download</a>
  64                         <a href="qmlelements.html" class="current">QML Elements</a>
  65                         <a href="howto.html">How to..</a>
  66                         <a href="screen800.html">Screenshots</a>
  67                         <a href="userguide.html">User Guide</a>
  68                         <a href="faq.html">FAQ</a>
  69                         <a href="devhowto.html">Development</a>
  70                         <a href="contact.html">Contact</a>
  71                 </div>
  72         </div>
  73         <div id="contentContainer">
  74                 <h1>
  75                         QML in mDictionary Multilingual Dictionary.
  76                 </h1>
  77                 <p>
  78                         <strong>mDictionary</strong> was converted from "c" language to "c++" using QT library. The latest version of the user interface is created using <strong>QML</strong>, and
  79                         program can be run on systems such as MeeGo or Maemo
  80                 </p>
  81                 <p>
  82 When we created a graphic user interface we prepared a few basic components <br/>
  83                 </p>
  84                 <div class="faq_question">
  85                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
  86                         Text button
  87                         <div class="qml_answer">
  88                                 <p>
  89                                         Button with the ability to change width and height, enter any text and change it.
  90                                         He has three states: enable, disable and active.
  91                                         Active state occurs when the button is pressed and he is not disabled, disable state occurs when the button is switch off, and in other situations he is in normal state.
  92                                         The font size automatically adjusts to the height of a button.
  93                                         He is scalable by dividing to three parts. Two in the sides have always retain ratio of width to height, and the center which extends to any size.
  94                                         Text in the button can be translatable.
  95                                         <br/>
  96                                         <img src="images/qml/button.png"></img>
  97                                         <br/>
  98                                         a.Enable b.Active c.Disable
  99                                         <br/>
 100                                         <br/>
 101                                         <strong>Signals: </strong><br>
 102                                         &nbsp;&nbsp;&nbsp;<span class="code">clicked()</span>- emit when button is clicked
 103                                         <br>
 104                                         <strong>Slots:  </strong><br>
 105                                         &nbsp;&nbsp;&nbsp;<span class="code">setText(string)</span>- change text in button to "string"
 106                                 </p>
 107                         </div>
 108                 </div>
 109                 <div class="faq_question">
 110                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 111                         Icon button
 112                         <div class="qml_answer">
 113                                 <p>
 114                                         The button has the same properties as the button with the text.
 115                                         Selection of icons in button is possible by specifying the file path or the path of the resource to the drawing.
 116                                         <br/>
 117                                         <img src="images/qml/iconButton.png"></img>
 118                                         <br/>
 119                                 </p>
 120                         </div>
 121                 </div>
 122                 <div class="faq_question">
 123                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 124                         Checkbox
 125                         <div class="qml_answer">
 126                                 <p> The field has the ability to select and unselec. Change of state is captured and sygnal is emited  </p>
 127                                 <img src="images/qml/checkBox01.png"></img>
 128                                 <br/>
 129                         </div>
 130                 </div>
 131                 <div class="faq_question">
 132                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 133                         Spinbox
 134                         <div class="qml_answer">
 135                                 <p> Box with text field accepting only numbers, and two buttons. In this component, you can set maximum and minimum values. The value can be changed using two buttons, and by keyboard. Buttons accept pressed and holding.  </p>
 136                                 <img src="images/qml/spinBox01.png"></img>
 137                                 <br/>
 138                         </div>
 139                 </div>
 140                 <div class="faq_question">
 141                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 142                         Combobox
 143                         <div class="qml_answer">
 144                                 <p> ComboBox component allows to select one text item from the dropdown list, In the non-expanded state displays the currently selected item, when you expand it is possible to return without selecting a new element by clicking arrow at the component's right edge. You can use any set of text elements as a data model, as well as the change in size (it can be extended to the width). </p>
 145                                 <img src="images/qml/cb01.png" ></img>
 146                         </div>
 147                 </div>
 148                 <div class="faq_question">
 149                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 150                         Progresbar
 151                         <div class="qml_answer">
 152                                 <p> Widget has two display modes. The first when we dontknown what is level of progress, pointer moves from left to right. Second when we know exactly what percentage of the operation was performed. ProgressBar has propertis to set maximum, minimum and current values </p>
 153                                 <img src="images/qml/prograsbar.png" width="480"></img>
 154                         <br/>
 155
 156                         </div>
 157                 </div>
 158                 <div class="faq_question">
 159                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 160                         Line Edit
 161                         <div class="qml_answer">
 162                                 <p> Text box with a border and the button to clean the field. </p>
 163                                 <img src="images/qml/LineText.png" width="460"></img>
 164                         </div>
 165                 </div>
 166                 <div class="faq_question">
 167                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 168                         List
 169                         <div class="qml_answer">
 170                                 <p> Lists based on the model list. Have a bidirectional connection with the program. Changes in list are signaled to model, and from model to list.
 171   Some lists have only text, other additional have checkbox, or icon </p>
 172                                 <img src="images/qml/l01.png" ></img>
 173                                 <img src="images/qml/l02.png" width="460"></img>
 174                                 <img src="images/qml/l03.png" width="460"></img>
 175                         </div>
 176                 </div>
 177                 <div class="faq_question">
 178                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 179                         Table
 180                         <div class="qml_answer">
 181                                 <p> Table is based on the model list. It has four expandable columns. The values of rows are inserted by the model, while the header name by the qml code. </p>
 182                                 <img src="images/qml/t01.png" ></img>
 183                         </div>
 184                 </div>
 185
 186                 <p>
 187                         We also use some component from QtQuick and expand it<br/>
 188                 </p>
 189                 <div class="faq_question">
 190                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 191                         WebView
 192                         <div class="qml_answer">
 193                                 <p> This component uses a WebView from QtQuick. It is responsible for displaying html pages formatted using CSS. It has a zoom option, available by two buttons at the bottom right corner. The screen is also movable, the user by touch is able to move screen in all directions </p>
 194                                 <img src="images/qml/wv01.png" width="460"></img>
 195                         </div>
 196                 </div>
 197
 198                 <p>
 199                         Some examples with use our components <br/>
 200                 </p>
 201                 <div class="faq_question">
 202                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 203                         HeloWidget
 204                         <div class="qml_answer">
 205                                 <img src="images/qml/hello01.png"></img>
 206                                 <img src="images/qml/hello02.png" width="460"></img>
 207                         </div>
 208                 </div>
 209                 <div class="faq_question">
 210                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 211                         Dialogs
 212                         <div class="qml_answer">
 213                                 <img src="images/qml/w01.png"></img>
 214                                 <img src="images/qml/w02.png"></img>
 215                                 <img src="images/qml/w04.png"></img>
 216                                 <img src="images/qml/w06.png"></img>
 217                                 <img src="images/qml/w07.png"></img>
 218                                 <img src="images/qml/widget01.png"></img>
 219                                 <img src="images/qml/widget02.png" width="460"></img>
 220                         </div>
 221                 </div>
 222                 <div class="faq_question">
 223                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 224                         SearchBar
 225                         <div class="qml_answer">
 226                                 <img src="images/qml/search01.png" width="460"></img>
 227                                 <img src="images/qml/search02.png" width="460"></img>
 228                         </div>
 229                 </div>
 230
 231         </div>
 232 </div>
 233 </body>
 234 </html>