Metro Samples

[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

[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

[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

[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

[Antonio Linares]

Tim,

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

[TimStone]

The main screen, tab 1 ( General ):


Tab 2 ( Parts )

[Silvio.Falconi]

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

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

[Antonio Linares]

Tim,

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