git.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 <<<<<<< HEAD
  35         <div class="installs">
  36 =======
  37 <!--    <div class="installs">
  38 >>>>>>> 21a14d392f44458d749c76552e971f33625705ea
  39                 INSTALL:
  40                 <a href="files/mdictionary.install"
  41                    class="install" style="margin-top:4px;"
  42                    title="Click to install mDictionary on OS2006"><span>OS2006</span>
  43                 </a>
  44                 <a href="files/mdictionary.install"
  45                    class="install" style="clear:both; margin-top:4px;"
  46                    title="Click to install mDictionary on OS2007"><span style="letter-spacing:0px;">OS2007</span>
  47                 </a>
  48                 <a href="files/mdictionary2008.install"
  49                    class="install" style="clear:both; margin-top:4px;"
  50                    title="Click to install mDictionary on OS2008"><span style="letter-spacing:0px;">OS2008</span>
  51                 </a>
  52                 <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>
  53         </div>
  54 <<<<<<< HEAD
  55                 <div style="display:block;height:100px;">
  56 =======
  57 -->             <div style="display:block;height:100px;">
  58 >>>>>>> 21a14d392f44458d749c76552e971f33625705ea
  59                         <p class="title">
  60                                 mDictionary
  61                         </p>
  62                         <p class="description">
  63                                 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)
  64                         </p>
  65                         <p class="description">
  66                                 &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 )
  67                         </p>
  68                 </div>
  69                 <div id="topBarLinks">
  70                         <a href="index.html" >Home</a>
  71                         <a href="download.html">Download</a>
  72                         <a href="qmlelements.html" class="current">QML Elements</a>
  73                         <a href="howto.html">How to..</a>
  74                         <a href="screen800.html">Screenshots</a>
  75                         <a href="userguide.html">User Guide</a>
  76                         <a href="faq.html">FAQ</a>
  77                         <a href="devhowto.html">Development</a>
  78                         <a href="contact.html">Contact</a>
  79                 </div>
  80         </div>
  81         <div id="contentContainer">
  82                 <h1>
  83                         QML in mDictionary Multilingual Dictionary.
  84                 </h1>
  85                 <p>
  86                         <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
  87                         program can be run on systems such as MeeGo or Maemo
  88                 </p>
  89                 <p>
  90 When we created a graphic user interface we prepared a few basic components <br/>
  91                 </p>
  92                 <div class="faq_question">
  93                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
  94                         Text button
  95                         <div class="qml_answer">
  96                                 <p>
  97                                         Button with the ability to change width and height, enter any text and change it.
  98                                         He has three states: enable, disable and active.
  99                                         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.
 100                                         The font size automatically adjusts to the height of a button.
 101                                         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.
 102                                         Text in the button can be translatable.
 103                                         <br/>
 104                                         <img src="images/qml/button.png"></img>
 105                                         <br/>
 106                                         a.Enable b.Active c.Disable
 107                                         <br/>
 108                                         <br/>
 109                                         <strong>Signals: </strong><br>
 110                                         &nbsp;&nbsp;&nbsp;<span class="code">clicked()</span>- emit when button is clicked
 111                                         <br>
 112                                         <strong>Slots:  </strong><br>
 113                                         &nbsp;&nbsp;&nbsp;<span class="code">setText(string)</span>- change text in button to "string"
 114                                 </p>
 115                         </div>
 116                 </div>
 117                 <div class="faq_question">
 118                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 119                         Icon button
 120                         <div class="qml_answer">
 121                                 <p>
 122                                         The button has the same properties as the button with the text.
 123                                         Selection of icons in button is possible by specifying the file path or the path of the resource to the drawing.
 124                                         <br/>
 125                                         <img src="images/qml/iconButton.png"></img>
 126                                         <br/>
 127                                 </p>
 128                         </div>
 129                 </div>
 130                 <div class="faq_question">
 131                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 132                         Checkbox
 133                         <div class="qml_answer">
 134                                 <p> The field has the ability to select and unselec. Change of state is captured and sygnal is emited  </p>
 135                                 <img src="images/qml/checkBox01.png"></img>
 136                                 <br/>
 137                         </div>
 138                 </div>
 139                 <div class="faq_question">
 140                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 141                         Spinbox
 142                         <div class="qml_answer">
 143                                 <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>
 144                                 <img src="images/qml/spinBox01.png"></img>
 145                                 <br/>
 146                         </div>
 147                 </div>
 148                 <div class="faq_question">
 149                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 150                         Combobox
 151                         <div class="qml_answer">
 152 <<<<<<< HEAD
 153                                 <p> text </p>
 154 =======
 155                                 <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>
 156                                 <img src="images/qml/cb01.png" ></img>
 157 >>>>>>> 21a14d392f44458d749c76552e971f33625705ea
 158                         </div>
 159                 </div>
 160                 <div class="faq_question">
 161                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 162                         Progresbar
 163                         <div class="qml_answer">
 164                                 <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>
 165                                 <img src="images/qml/prograsbar.png" width="480"></img>
 166                         <br/>
 167
 168                         </div>
 169                 </div>
 170                 <div class="faq_question">
 171                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 172                         Line Edit
 173                         <div class="qml_answer">
 174                                 <p> Text box with a border and the button to clean the field. </p>
 175                                 <img src="images/qml/LineText.png" width="460"></img>
 176                         </div>
 177                 </div>
 178                 <div class="faq_question">
 179                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 180                         List
 181                         <div class="qml_answer">
 182                                 <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.
 183   Some lists have only text, other additional have checkbox, or icon </p>
 184                                 <img src="images/qml/l01.png" ></img>
 185                                 <img src="images/qml/l02.png" width="460"></img>
 186                                 <img src="images/qml/l03.png" width="460"></img>
 187                         </div>
 188                 </div>
 189                 <div class="faq_question">
 190                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 191                         Table
 192                         <div class="qml_answer">
 193                                 <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>
 194                                 <img src="images/qml/t01.png" ></img>
 195                         </div>
 196                 </div>
 197
 198                 <p>
 199                         We also use some component from QtQuick and expand it<br/>
 200                 </p>
 201                 <div class="faq_question">
 202                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 203                         WebView
 204                         <div class="qml_answer">
 205 <<<<<<< HEAD
 206                                 <p> text </p>
 207 =======
 208                                 <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>
 209 >>>>>>> 21a14d392f44458d749c76552e971f33625705ea
 210                                 <img src="images/qml/wv01.png" width="460"></img>
 211                         </div>
 212                 </div>
 213
 214                 <p>
 215                         Some examples with use our components <br/>
 216                 </p>
 217                 <div class="faq_question">
 218                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 219                         HeloWidget
 220                         <div class="qml_answer">
 221                                 <img src="images/qml/hello01.png"></img>
 222                                 <img src="images/qml/hello02.png" width="460"></img>
 223                         </div>
 224                 </div>
 225                 <div class="faq_question">
 226                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 227                         Dialogs
 228                         <div class="qml_answer">
 229                                 <img src="images/qml/w01.png"></img>
 230                                 <img src="images/qml/w02.png"></img>
 231                                 <img src="images/qml/w04.png"></img>
 232                                 <img src="images/qml/w06.png"></img>
 233 <<<<<<< HEAD
 234 =======
 235                                 <img src="images/qml/w07.png"></img>
 236 >>>>>>> 21a14d392f44458d749c76552e971f33625705ea
 237                                 <img src="images/qml/widget01.png"></img>
 238                                 <img src="images/qml/widget02.png" width="460"></img>
 239                         </div>
 240                 </div>
 241                 <div class="faq_question">
 242                         <div class="faq_switcher" onClick="javascript:faq_switcher(this);"></div>
 243                         SearchBar
 244                         <div class="qml_answer">
 245                                 <img src="images/qml/search01.png" width="460"></img>
 246                                 <img src="images/qml/search02.png" width="460"></img>
 247                         </div>
 248                 </div>
 249
 250         </div>
 251 </div>
 252 </body>
 253 </html>