Page 1 of 1

Metro Samples

PostPosted: Mon Nov 05, 2012 9:58 pm
by TimStone
There were controls for "metro style" apps built for FWH, and Otto has done his whole application that way.

I was considering modifying a small app that interacts with my primary database, and making it metro style for use on a tablet. I'd love to see some more samples of how this has been done, and specifically:

tabs ( folders )
menu bar
dialogs on folder pages
xbrowse implementation
edit fields

The samples shown seem to only create a initial start screen simulation.

I've seen videos of Otto's completed work, but don't see any samples of "how to get there".

Thanks.

Tim

Re: Metro Samples

PostPosted: Tue Nov 06, 2012 3:11 pm
by Antonio Linares
Tim,

Here you have some examples as a kind of tutorial. Do you plan to use the Metro alike menu too ?

Metro3.prg
Code: Select all  Expand view
#include "FiveWin.ch"

function Main()

   local oWnd, oFont

   DEFINE FONT oFont NAME "Segoe UI" SIZE 0, -50

   DEFINE WINDOW oWnd STYLE nOr( WS_POPUP, WS_VISIBLE ) ;
      COLOR CLR_BLACK, CLR_BLUE

   @ 5, 15 SAY "Modern UI Style" OF oWnd FONT oFont COLOR "W/B" SIZE 400, 300

   ACTIVATE WINDOW oWnd MAXIMIZED ;
      ON CLICK oWnd:End()
     
   oFont:End()  

return nil


Image

Re: Metro Samples

PostPosted: Tue Nov 06, 2012 3:27 pm
by Antonio Linares
A dialog box with Modern UI Style:

Code: Select all  Expand view
#include "FiveWin.ch"

#define CLR_DIALOGS RGB( 123, 140, 223 )

function Main()

   local oDlg, oFont

   DEFINE FONT oFont NAME "Segoe UI" SIZE 0, -50

   DEFINE DIALOG oDlg SIZE ScreenWidth(), ScreenHeight() + 100 ;
      STYLE nOr( WS_CHILD, WS_POPUP ) ;
      COLOR CLR_WHITE, CLR_DIALOGS

   @ 3, 10 SAY "I am a dialog" OF oDlg FONT oFont COLOR CLR_WHITE, CLR_DIALOGS SIZE 400, 200

   ACTIVATE DIALOG oDlg CENTERED ;
      ON CLICK oDlg:End()

return nil


Image

Re: Metro Samples

PostPosted: Tue Nov 06, 2012 7:14 pm
by TimStone
Antonio,

I want to modify a segment of my major application for use on a tablet ( touch ) computer. It is important to reduce "chrome" and focus on maximizing the screen real estate.

This is to prepare and edit invoices.

Currently, there is a primary dialog, and multiple folders. The main dialog has a button bar, and each folder has its own button bars. Folders typically have data entry fields, and an xbrowse. As you move up or down the xbrowse, the highlighted record can be edited in the upper half.

I either need four tabs, each with its own data display, or I need to create a panorama with each panel having its own data display. Tabs is likely faster.

The button bars can be replaced with a Modern Style top menu. I could probably use a small ribbon bar on the various tabs ( folders ).

Tim

Re: Metro Samples

PostPosted: Tue Nov 06, 2012 8:34 pm
by Antonio Linares
Tim,

Could you please post a screenshot of the screen that you want to give the modern UI look to ? thanks

Re: Metro Samples

PostPosted: Wed Nov 07, 2012 5:57 pm
by TimStone
The main screen, tab 1 ( General ):
Image

Tab 2 ( Parts )
Image

Re: Metro Samples

PostPosted: Wed Nov 07, 2012 8:15 pm
by Silvio.Falconi
Antonio Linares wrote:A dialog box with Modern UI Style:

Code: Select all  Expand view
#include "FiveWin.ch"

#define CLR_DIALOGS RGB( 123, 140, 223 )

function Main()

   local oDlg, oFont

   DEFINE FONT oFont NAME "Segoe UI" SIZE 0, -50

   DEFINE DIALOG oDlg SIZE ScreenWidth(), ScreenHeight() + 100 ;
      STYLE nOr( WS_CHILD, WS_POPUP ) ;
      COLOR CLR_WHITE, CLR_DIALOGS

   @ 3, 10 SAY "I am a dialog" OF oDlg FONT oFont COLOR CLR_WHITE, CLR_DIALOGS SIZE 400, 200

   ACTIVATE DIALOG oDlg CENTERED ;
      ON CLICK oDlg:End()

return nil


Image






Antonio,
is possible have a test sample of a metro panel into a dialog with button like windows 8 as this

Image

Re: Metro Samples

PostPosted: Thu Nov 08, 2012 8:25 am
by Antonio Linares
Tim,

In FWH\samples\touch.prg function AddCompany() you have a complete example of how to implement a folder:

Image