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