Jump to content

mhmda

uniGUI Subscriber
  • Posts

    1141
  • Joined

  • Last visited

  • Days Won

    157

Posts posted by mhmda

  1. Hello everybody,

     

    It's very important to understand the layout and the best way to learn them is by practicing, and here is a project showing how to design a dashboard in uniGUI using layouts, I have searched the internet for a dashboard and found this one and this project for you.

     

    I hope this will help you understand layouts.

     

    Plus: responsive content ! + UniCharts (Pie & line) - try to resize your browser, and try to refresh page to see random results for the charts.

     

    Online demo here: http://5.189.151.122:xxxx

     

    Download project (with .exe) http://3msoft.net/mhmd/layout.rar

     

    layout_1.png

    • Like 1
    • Upvote 12
  2. Hello everyone, I'm already a uniGUI member for few years and it's a time to know each other better.

     

    The most important thing that I would like to know Farshad Mohajeri:-) at least a picture... I'll start from myself:-)

     

    mhmd.png

     

    I want to say thank you Farshad for a great framework that help us to develop Web Applications FAST & PROFESSIONL :-)

     

    • Upvote 2
  3.  

     

    1. Would the same be for tablets? Im thinking they might need forms of their own?

     

    You can use profiles: https://docs.sencha.com/touch/2.4/core_concepts/device_profiles.html

     

     

     

    2. With what you said, Im assuming that the web forms and mobile forms will still need much of their own logic? Separate code?

     

    The back-end code is the same for both: Desktop/Mobile, but the design is different, here an example of my own app: 

     

    ss2.png

     

     

     

    ss1.png

  4.  

     

    there are many kinds and sizes of Mobile devices.. Are you implying that I need to make a form for each possible size of mobile device? If so, does each then have to have its own code to maintain?

     

    It's really simple let Sencha Touch handle everything for you :-)

     

    Please read Sencha Touch documentation to have basic kknowledge of its concept.

     

    Beside that Sencha Touch give you "Feel & Look" of native mobile app, no matter  what is the size of your device, you can see screenshots here: http://forums.unigui.com/index.php?/topic/4869-mobile-phonebook-mobile-app/?hl=phonebook

  5. The 'Layout' is for Form's children (panel, button...)

     

    If you want to make your app responsive then do this:

     

    1. In 'ServerModule' -> 'MainFormDisplayMode' = mfPage.

    2. In 'MainForm':

    • 'AlignmentControl' = uniAlignmentClient.
    • 'Layout' = fit.
    • Leave it without any controls (empty).

    3. When you want to display a form then display it inside the 'MainForm':

    frmAdminDashboard.Parent:=MainForm;
    frmAdminDashboard.Show();
    

    4. In the displayed form:

    • 'AlignmentControl' = uniAlignmentClient.
    • 'Layout' = ? (as you design the form: vbox, hbox...)
    • You may consider remove the border.

    Don't change any other property beside those I mentioned above.

     

    You must understand the Extjs layout before using it, and please at least make a mockup design for your app (forms) before start coding.

     

    There is many samples in unigui directory and you can use this link http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/layout-browser/layout-browser.html

  6. First use chrom->Inspect (CTRL+SHFT+I) it's very useful, and examine the width, height, top, left...

     

    When resizing the window it depends in how the user resize it:

     

    - Does he use the [min][max] buttons

    - Does he use the mouse to scale (drag) the size. 

     

    Second consider using a more advanced solution for triggering resize such: https://github.com/louisremi/jquery-smartresize

     

    We already build a Jquery components using these methods you can download from here http://forums.unigui.com/index.php?/topic/5995-circle-progress-jquery-widget-fully-customized/ and see how we trigger the resize events.

×
×
  • Create New...