FiveTech Software tech support forums

www.FiveTechSoft.com
https://forums.fivetechsupport.com/

Windows 8 Metro style - A Class TMetro test

https://forums.fivetechsupport.com/viewtopic.php?f=3&t=22427

Page 1 of 5

Windows 8 Metro style - A Class TMetro test

PostPosted: Tue Sep 20, 2011 9:38 pm
by Antonio Linares
This is just an early prototype of a Class TMetro to get a little feeling of Windows 8 Metro for our apps :-)

Full source code provided...

Image

metro.prg
Code: Select all  Expand view

#include "FiveWin.ch"

#xcommand DEFINE METRO <oMtr> ;
             [ BACKGROUND <cFileName> ] ;
             [ BTNSIZE <nBtnWidth>, <nBtnHeight> ] ;
             [ TITLE <cTitle> ] ;
          => ;
          <oMtr> := TMetro():New( <cTitle>, <nBtnWidth>, <nBtnHeight>, <cFileName> )
         
#xcommand DEFINE METROBUTTON [<oBtn>] ;
             [ PROMPT <cPrompt> ] ;
             [ COLOR <nClrText>, <nClrPane> ] ;
             [ OF <oMetro> ] ;
             [ <large: LARGE> ] ;
          => ;
             [ <oBtn> := ] <oMetro>:AddButton( <cPrompt>, <nClrText>, <nClrPane>, <.large.> )              
         
#xcommand ACTIVATE METRO <oMtr> => <oMtr>:Activate()          

//----------------------------------------------------------------------------//

function Main()

   local oMetro

   DEFINE METRO oMetro ;
      TITLE "My FWH Metro app"
     
   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Files" COLOR CLR_WHITE, RGB( 2, 174, 224 )    

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Customers" COLOR CLR_WHITE, RGB( 234, 112, 39 )    

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Stock" COLOR CLR_WHITE, RGB( 181, 31, 60 ) LARGE

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Utilities" COLOR CLR_WHITE, RGB( 24, 152, 78 )

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Reports" COLOR CLR_WHITE, RGB( 2, 174, 224 )    

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Graphics" COLOR CLR_WHITE, RGB( 234, 112, 39 ) LARGE  

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Internet" COLOR CLR_WHITE, RGB( 2, 70, 133 ) LARGE  

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Calculator" COLOR CLR_WHITE, RGB( 86, 177, 14 )  

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Contact" COLOR CLR_WHITE, RGB( 213, 177, 1 )  

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Exit" COLOR CLR_WHITE, RGB( 2, 174, 224 )    

   ACTIVATE METRO oMetro

return nil  

//----------------------------------------------------------------------------//

CLASS TMetro

   DATA  oWnd, oFont
   DATA  cFileName
   DATA  aButtons
   DATA  nOriginX, nOriginY
   DATA  nBtnWidth, nBtnHeight
   DATA  cTitle
   DATA  nRow, nCol
   
   METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName )
   
   METHOD Activate()
   
   METHOD AddButton( cCaption, nClrText, nClrPane, lLarge )
   
ENDCLASS

//----------------------------------------------------------------------------//

METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName ) CLASS TMetro

   DEFAULT cTitle := "MyApp", nBtnWidth := 132, nBtnHeight := 132
   
   ::cTitle     = cTitle
   ::aButtons   = {}
   ::nBtnWidth  = nBtnWidth
   ::nBtnHeight = nBtnHeight
   ::nOriginX   = 200
   ::nOriginY   = 200
   ::nRow       =   0
   ::nCol       =   0  
 
   DEFINE FONT ::oFont NAME "Segoe UI Light" SIZE 0, -52

   DEFINE WINDOW ::oWnd STYLE nOr( WS_POPUP, WS_VISIBLE ) ;
      COLOR CLR_WHITE, RGB( 15, 109, 57 )
   
return Self  

//----------------------------------------------------------------------------//
   
METHOD Activate() CLASS TMetro

   ACTIVATE WINDOW ::oWnd MAXIMIZED ;
      ON PAINT ::oWnd:Say( 3, 16, ::cTitle,,, ::oFont ) ;
      ON CLICK ::oWnd:End()

return nil  

//----------------------------------------------------------------------------//

METHOD AddButton( cCaption, nClrText, nClrPane, lLarge ) CLASS TMetro

   local oBtn
   local nX := ::nOriginX + ( ::nRow * ( ::nBtnHeight + 8 ) )
   local nY := ::nOriginY + ( ::nCol * ( ::nBtnWidth + 8 ) )
   
   DEFAULT lLarge := .F.
   
   @ nX, nY BTNBMP oBtn ;
      SIZE ( ::nBtnWidth * If( lLarge, 2, 1 ) ) + If( lLarge, 8, 0 ), ::nBtnHeight ;
      PIXEL OF ::oWnd PROMPT cCaption NOBORDER
     
   oBtn:SetColor( nClrText, nClrPane )    
   
   AAdd( ::aButtons, oBtn )
   
   ::nCol++
   if lLarge
      ::nCol++
   endif  
   if ( ATail( ::aButtons ):nLeft + ATail( ::aButtons ):nWidth ) > ( ::nOriginY * 4 ) + 50
      ::nRow++
      ::nCol = 0
   endif  
   
return nil    

//----------------------------------------------------------------------------//
 

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Tue Sep 20, 2011 10:17 pm
by Antonio Linares
Using some bitmaps...

Image

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

#xcommand DEFINE METRO <oMtr> ;
             [ BACKGROUND <cFileName> ] ;
             [ BTNSIZE <nBtnWidth>, <nBtnHeight> ] ;
             [ TITLE <cTitle> ] ;
          => ;
          <oMtr> := TMetro():New( <cTitle>, <nBtnWidth>, <nBtnHeight>, <cFileName> )
         
#xcommand DEFINE METROBUTTON [<oBtn>] ;
             [ PROMPT <cPrompt> ] ;
             [ COLOR <nClrText>, <nClrPane> ] ;
             [ IMAGE <cImgName> ] ;
             [ OF <oMetro> ] ;
             [ <large: LARGE> ] ;
          => ;
             [ <oBtn> := ] <oMetro>:AddButton( <cPrompt>, <nClrText>, <nClrPane>, <.large.>, <cImgName> )              
         
#xcommand ACTIVATE METRO <oMtr> => <oMtr>:Activate()          

//----------------------------------------------------------------------------//

function Main()

   local oMetro

   DEFINE METRO oMetro ;
      TITLE "My FWH Metro app"
     
   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Files" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;
      IMAGE "..\bitmaps\AlphaBmp\files.bmp"  

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Customers" COLOR CLR_WHITE, RGB( 234, 112, 39 ) ;    
      IMAGE "..\bitmaps\32x32\users.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Stock" COLOR CLR_WHITE, RGB( 181, 31, 60 ) LARGE ;
      IMAGE "..\bitmaps\32x32\task.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Utilities" COLOR CLR_WHITE, RGB( 24, 152, 78 ) ;
      IMAGE "..\bitmaps\32x32\setup.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Reports" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\32x32\print.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Graphics" COLOR CLR_WHITE, RGB( 234, 112, 39 ) LARGE ;  
      IMAGE "..\bitmaps\32x32\graphics.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Internet" COLOR CLR_WHITE, RGB( 2, 70, 133 ) LARGE ;
      IMAGE "..\bitmaps\32x32\internet.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Calculator" COLOR CLR_WHITE, RGB( 86, 177, 14 ) ;
      IMAGE "..\bitmaps\32x32\calc.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Contact" COLOR CLR_WHITE, RGB( 213, 177, 1 ) ;  
      IMAGE "..\bitmaps\32x32\info.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Exit" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\32x32\quit.bmp"

   ACTIVATE METRO oMetro

return nil  

//----------------------------------------------------------------------------//

CLASS TMetro

   DATA  oWnd, oFont
   DATA  cFileName
   DATA  aButtons
   DATA  nOriginX, nOriginY
   DATA  nBtnWidth, nBtnHeight
   DATA  cTitle
   DATA  nRow, nCol
   
   METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName )
   
   METHOD Activate()
   
   METHOD AddButton( cCaption, nClrText, nClrPane, lLarge, cImgName )
   
ENDCLASS

//----------------------------------------------------------------------------//

METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName ) CLASS TMetro

   DEFAULT cTitle := "MyApp", nBtnWidth := 132, nBtnHeight := 132
   
   ::cTitle     = cTitle
   ::aButtons   = {}
   ::nBtnWidth  = nBtnWidth
   ::nBtnHeight = nBtnHeight
   ::nOriginX   = 200
   ::nOriginY   = 200
   ::nRow       =   0
   ::nCol       =   0  
 
   DEFINE FONT ::oFont NAME "Segoe UI Light" SIZE 0, -52

   DEFINE WINDOW ::oWnd STYLE nOr( WS_POPUP, WS_VISIBLE ) ;
      COLOR CLR_WHITE, RGB( 15, 109, 57 )
   
return Self  

//----------------------------------------------------------------------------//
   
METHOD Activate() CLASS TMetro

   ACTIVATE WINDOW ::oWnd MAXIMIZED ;
      ON PAINT ::oWnd:Say( 3, 16, ::cTitle,,, ::oFont ) ;
      ON CLICK ::oWnd:End()

return nil  

//----------------------------------------------------------------------------//

METHOD AddButton( cCaption, nClrText, nClrPane, lLarge, cImgName ) CLASS TMetro

   local oBtn
   local nX := ::nOriginX + ( ::nRow * ( ::nBtnHeight + 8 ) )
   local nY := ::nOriginY + ( ::nCol * ( ::nBtnWidth + 8 ) )
   
   DEFAULT lLarge := .F.
   
   @ nX, nY BTNBMP oBtn ;
      SIZE ( ::nBtnWidth * If( lLarge, 2, 1 ) ) + If( lLarge, 8, 0 ), ::nBtnHeight ;
      PIXEL OF ::oWnd PROMPT cCaption NOBORDER FILENAME cImgName
     
   oBtn:SetColor( nClrText, nClrPane )    
   
   AAdd( ::aButtons, oBtn )
   
   ::nCol++
   if lLarge
      ::nCol++
   endif  
   if ( ATail( ::aButtons ):nLeft + ATail( ::aButtons ):nWidth ) > ( ::nOriginY * 4 ) + 50
      ::nRow++
      ::nCol = 0
   endif  
   
return nil    

//----------------------------------------------------------------------------//

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Wed Sep 21, 2011 3:57 am
by richard-service
Nice job.

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Wed Sep 21, 2011 7:49 am
by Antonio Linares
Implementing actions from the main menu and an overview of how to integrate traditional windows with it :-)

Image

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

#xcommand DEFINE METRO <oMtr> ;
             [ BACKGROUND <cFileName> ] ;
             [ BTNSIZE <nBtnWidth>, <nBtnHeight> ] ;
             [ TITLE <cTitle> ] ;
          => ;
          <oMtr> := TMetro():New( <cTitle>, <nBtnWidth>, <nBtnHeight>, <cFileName> )
         
#xcommand DEFINE METROBUTTON [<oBtn>] ;
             [ PROMPT <cPrompt> ] ;
             [ COLOR <nClrText>, <nClrPane> ] ;
             [ IMAGE <cImgName> ] ;
             [ OF <oMetro> ] ;
             [ <large: LARGE> ] ;
             [ ACTION <uAction,...> ] ;
          => ;
             [ <oBtn> := ] <oMetro>:AddButton( <cPrompt>, <nClrText>, <nClrPane>, <.large.>, <cImgName>, [{||<uAction>}] )              
         
#xcommand ACTIVATE METRO <oMtr> => <oMtr>:Activate()          

//----------------------------------------------------------------------------//

function Main()

   local oMetro

   DEFINE METRO oMetro ;
      TITLE "My FWH Metro app"
     
   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Files" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;
      IMAGE "..\bitmaps\AlphaBmp\files.bmp" ;
      ACTION Files()  

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Customers" COLOR CLR_WHITE, RGB( 234, 112, 39 ) ;    
      IMAGE "..\bitmaps\32x32\users.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Stock" COLOR CLR_WHITE, RGB( 181, 31, 60 ) LARGE ;
      IMAGE "..\bitmaps\32x32\task.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Utilities" COLOR CLR_WHITE, RGB( 24, 152, 78 ) ;
      IMAGE "..\bitmaps\32x32\setup.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Reports" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\32x32\print.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Graphics" COLOR CLR_WHITE, RGB( 234, 112, 39 ) LARGE ;  
      IMAGE "..\bitmaps\32x32\graphics.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Internet" COLOR CLR_WHITE, RGB( 2, 70, 133 ) LARGE ;
      IMAGE "..\bitmaps\32x32\internet.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Calculator" COLOR CLR_WHITE, RGB( 86, 177, 14 ) ;
      IMAGE "..\bitmaps\32x32\calc.bmp" ;
      ACTION WinExec( "calc" )

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Contact" COLOR CLR_WHITE, RGB( 213, 177, 1 ) ;  
      IMAGE "..\bitmaps\32x32\info.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Exit" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\32x32\quit.bmp" ;
      ACTION If( MsgYesNo( "Want to exit ?" ), oMetro:End(),)

   ACTIVATE METRO oMetro

return nil  

//----------------------------------------------------------------------------//

function Files()

   local oWnd, oBar
   
   DEFINE WINDOW oWnd TITLE "Files"
   
   DEFINE BUTTONBAR oBar OF oWnd 2007 SIZE 80, 80
   
   DEFINE BUTTON OF oBar FILENAME "..\bitmaps\32x32\new.bmp" PROMPT "New"

   DEFINE BUTTON OF oBar FILENAME "..\bitmaps\32x32\edit.bmp" PROMPT "Edit"

   DEFINE BUTTON OF oBar FILENAME "..\bitmaps\32x32\quit.bmp" PROMPT "Exit" ;
      ACTION oWnd:End()
   
   DEFINE MESSAGE OF oWnd 2007 PROMPT "Files management"
   
   ACTIVATE WINDOW oWnd
   
return nil  

//----------------------------------------------------------------------------//

CLASS TMetro

   DATA  oWnd, oFont
   DATA  cFileName
   DATA  aButtons
   DATA  nOriginX, nOriginY
   DATA  nBtnWidth, nBtnHeight
   DATA  cTitle
   DATA  nRow, nCol
   
   METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName )
   
   METHOD Activate()
   
   METHOD AddButton( cCaption, nClrText, nClrPane, lLarge, cImgName, bAction )
   
   METHOD End() INLINE ::oWnd:End()
   
ENDCLASS

//----------------------------------------------------------------------------//

METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName ) CLASS TMetro

   DEFAULT cTitle := "MyApp", nBtnWidth := 132, nBtnHeight := 132
   
   ::cTitle     = cTitle
   ::aButtons   = {}
   ::nBtnWidth  = nBtnWidth
   ::nBtnHeight = nBtnHeight
   ::nOriginX   = 200
   ::nOriginY   = 200
   ::nRow       =   0
   ::nCol       =   0  
 
   DEFINE FONT ::oFont NAME "Segoe UI Light" SIZE 0, -52

   DEFINE WINDOW ::oWnd STYLE nOr( WS_POPUP, WS_VISIBLE ) ;
      COLOR CLR_WHITE, RGB( 15, 109, 57 )
   
return Self  

//----------------------------------------------------------------------------//
   
METHOD Activate() CLASS TMetro

   ACTIVATE WINDOW ::oWnd MAXIMIZED ;
      ON PAINT ::oWnd:Say( 3, 16, ::cTitle,,, ::oFont ) ;
      ON CLICK ::oWnd:End()

return nil  

//----------------------------------------------------------------------------//

METHOD AddButton( cCaption, nClrText, nClrPane, lLarge, cImgName, bAction ) CLASS TMetro

   local oBtn
   local nX := ::nOriginX + ( ::nRow * ( ::nBtnHeight + 8 ) )
   local nY := ::nOriginY + ( ::nCol * ( ::nBtnWidth + 8 ) )
   
   DEFAULT lLarge := .F.
   
   @ nX, nY BTNBMP oBtn ;
      SIZE ( ::nBtnWidth * If( lLarge, 2, 1 ) ) + If( lLarge, 8, 0 ), ::nBtnHeight ;
      PIXEL OF ::oWnd PROMPT cCaption NOBORDER FILENAME cImgName
     
   oBtn:bAction = bAction  
     
   oBtn:SetColor( nClrText, nClrPane )    
   
   AAdd( ::aButtons, oBtn )
   
   ::nCol++
   if lLarge
      ::nCol++
   endif  
   if ( ATail( ::aButtons ):nLeft + ATail( ::aButtons ):nWidth ) > ( ::nOriginY * 4 ) + 50
      ::nRow++
      ::nCol = 0
   endif  
   
return nil    

//----------------------------------------------------------------------------//

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Wed Sep 21, 2011 8:41 am
by Antonio Linares
Date, time, more Metro look style :-)

Image

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

#xcommand DEFINE METRO <oMtr> ;
             [ BACKGROUND <cFileName> ] ;
             [ BTNSIZE <nBtnWidth>, <nBtnHeight> ] ;
             [ TITLE <cTitle> ] ;
          => ;
          <oMtr> := TMetro():New( <cTitle>, <nBtnWidth>, <nBtnHeight>, <cFileName> )
         
#xcommand DEFINE METROBUTTON [<oBtn>] ;
             [ PROMPT <cPrompt> ] ;
             [ COLOR <nClrText>, <nClrPane> ] ;
             [ IMAGE <cImgName> ] ;
             [ OF <oMetro> ] ;
             [ <large: LARGE> ] ;
             [ ACTION <uAction,...> ] ;
          => ;
             [ <oBtn> := ] <oMetro>:AddButton( <cPrompt>, <nClrText>, <nClrPane>, <.large.>, <cImgName>, [{||<uAction>}] )              
         
#xcommand ACTIVATE METRO <oMtr> => <oMtr>:Activate()          

//----------------------------------------------------------------------------//

function Main()

   local oMetro

   DEFINE METRO oMetro ;
      TITLE "My FWH Metro app"
     
   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Files" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;
      IMAGE "..\bitmaps\AlphaBmp\files.bmp" ;
      ACTION Files()  

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Customers" COLOR CLR_WHITE, RGB( 234, 112, 39 ) ;    
      IMAGE "..\bitmaps\32x32\users.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Stock" COLOR CLR_WHITE, RGB( 181, 31, 60 ) LARGE ;
      IMAGE "..\bitmaps\32x32\task.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Utilities" COLOR CLR_WHITE, RGB( 24, 152, 78 ) ;
      IMAGE "..\bitmaps\32x32\setup.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Reports" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\32x32\print.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Graphics" COLOR CLR_WHITE, RGB( 234, 112, 39 ) LARGE ;  
      IMAGE "..\bitmaps\32x32\graphics.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Internet" COLOR CLR_WHITE, RGB( 2, 70, 133 ) LARGE ;
      IMAGE "..\bitmaps\32x32\internet.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Calculator" COLOR CLR_WHITE, RGB( 86, 177, 14 ) ;
      IMAGE "..\bitmaps\32x32\calc.bmp" ;
      ACTION WinExec( "calc" )

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Contact" COLOR CLR_WHITE, RGB( 213, 177, 1 ) ;  
      IMAGE "..\bitmaps\32x32\info.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Exit" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\32x32\quit.bmp" ;
      ACTION If( MsgYesNo( "Want to exit ?" ), oMetro:End(),)

   ACTIVATE METRO oMetro

return nil  

//----------------------------------------------------------------------------//

function Files()

   local oWnd, oBar
   
   DEFINE WINDOW oWnd TITLE "Files"
   
   DEFINE BUTTONBAR oBar OF oWnd 2007 SIZE 80, 80
   
   DEFINE BUTTON OF oBar FILENAME "..\bitmaps\32x32\new.bmp" PROMPT "New"

   DEFINE BUTTON OF oBar FILENAME "..\bitmaps\32x32\edit.bmp" PROMPT "Edit"

   DEFINE BUTTON OF oBar FILENAME "..\bitmaps\32x32\quit.bmp" PROMPT "Exit" ;
      ACTION oWnd:End()
   
   DEFINE MESSAGE OF oWnd 2007 PROMPT "Files management"
   
   ACTIVATE WINDOW oWnd
   
return nil  

//----------------------------------------------------------------------------//

CLASS TMetro

   DATA  oWnd, oFont, oFontB
   DATA  cFileName
   DATA  aButtons
   DATA  nOriginX, nOriginY
   DATA  nBtnWidth, nBtnHeight
   DATA  cTitle
   DATA  nRow, nCol
   DATA  oTimer
   
   METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName )
   
   METHOD Activate()
   
   METHOD AddButton( cCaption, nClrText, nClrPane, lLarge, cImgName, bAction )
   
   METHOD End() INLINE ::oWnd:End()
   
ENDCLASS

//----------------------------------------------------------------------------//

METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName ) CLASS TMetro

   DEFAULT cTitle := "MyApp", nBtnWidth := 132, nBtnHeight := 132
   
   ::cTitle     = cTitle
   ::aButtons   = {}
   ::nBtnWidth  = nBtnWidth
   ::nBtnHeight = nBtnHeight
   ::nOriginX   = 200
   ::nOriginY   = 200
   ::nRow       =   0
   ::nCol       =   0  
 
   DEFINE FONT ::oFont NAME "Segoe UI Light" SIZE 0, -52

   DEFINE FONT ::oFontB NAME "Segoe UI Light" SIZE 0, -60 BOLD

   DEFINE WINDOW ::oWnd STYLE nOr( WS_POPUP, WS_VISIBLE ) ;
      COLOR CLR_WHITE, RGB( 15, 109, 57 )
   
   DEFINE TIMER ::oTimer OF ::oWnd ACTION ::oWnd:Say( 13, 135, Time(),,, ::oFontB )
   
   ACTIVATE TIMER ::oTimer
   
return Self  

//----------------------------------------------------------------------------//
   
METHOD Activate() CLASS TMetro

   ACTIVATE WINDOW ::oWnd MAXIMIZED ;
      ON PAINT ( ::oWnd:Say( 3, 16, ::cTitle,,, ::oFont ),;
                 ::oWnd:Say( 2, 130, CDoW( Date() ),,, ::oFont ),;
                 ::oWnd:Say( 7, 130, CMonth( Date() ) + " " + ;
                             AllTrim( Str( Day( Date() ) ) ),,, ::oFont ) ) ;
      ON CLICK ::oWnd:End()

return nil  

//----------------------------------------------------------------------------//

METHOD AddButton( cCaption, nClrText, nClrPane, lLarge, cImgName, bAction ) CLASS TMetro

   local oBtn
   local nX := ::nOriginX + ( ::nRow * ( ::nBtnHeight + 8 ) )
   local nY := ::nOriginY + ( ::nCol * ( ::nBtnWidth + 8 ) )
   
   DEFAULT lLarge := .F.
   
   @ nX, nY BTNBMP oBtn ;
      SIZE ( ::nBtnWidth * If( lLarge, 2, 1 ) ) + If( lLarge, 8, 0 ), ::nBtnHeight ;
      PIXEL OF ::oWnd PROMPT cCaption NOBORDER FILENAME cImgName
     
   oBtn:bAction = bAction  
     
   oBtn:SetColor( nClrText, nClrPane )    
   
   AAdd( ::aButtons, oBtn )
   
   ::nCol++
   if lLarge
      ::nCol++
   endif  
   if ( ATail( ::aButtons ):nLeft + ATail( ::aButtons ):nWidth ) > ( ::nOriginY * 4 ) + 50
      ::nRow++
      ::nCol = 0
   endif  
   
return nil    

//----------------------------------------------------------------------------//

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Wed Sep 21, 2011 8:59 am
by Otto
Hello Antonio,

thank you for this new class.
I send you a contribution Ruth made.

Metro-bitmaps:
http://www.atzwanger-software.com/fw/metro.zip

I can’t find out how to implement the action event on the Metrobuttons.

Best regards,
Otto


Hello Antonio,

my father showed me your metro-class. This is great!!! We would be very happy if you could go on with this.
I tried to make some icons that look a bit like the ones we watched on the internet when you were here in Sillian.
We all hope very much that you come back to visit us soon!!!!

A lot of nice greetings an best wishes
Ruth


Image

Code: Select all  Expand view

  DEFINE METRO oMetro ;
      TITLE "My FWH Metro app"
     
   DEFINE METROBUTTON OF oMetro ;
    PROMPT "Files" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;
      IMAGE "..\bitmaps\metro\files.bmp"  

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Customers" COLOR CLR_WHITE, RGB( 234, 112, 39 ) ;    
      IMAGE "..\bitmaps\metro\users.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Stock" COLOR CLR_WHITE, RGB( 181, 31, 60 ) LARGE ;
      IMAGE "..\bitmaps\metro\stock.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Utilities" COLOR CLR_WHITE, RGB( 24, 152, 78 ) ;
      IMAGE "..\bitmaps\metro\utilities.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Reports" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\metro\print.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Graphics" COLOR CLR_WHITE, RGB( 234, 112, 39 ) LARGE ;  
      IMAGE "..\bitmaps\metro\graphics.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Internet" COLOR CLR_WHITE, RGB( 2, 70, 133 ) LARGE ;
      IMAGE "..\bitmaps\metro\internet.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Calculator" COLOR CLR_WHITE, RGB( 86, 177, 14 ) ;
      IMAGE "..\bitmaps\metro\calculator.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Contact" COLOR CLR_WHITE, RGB( 213, 177, 1 ) ;  
      IMAGE "..\bitmaps\metro\contact.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Exit" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\metro\exit.bmp"

   ACTIVATE METRO oMetro

 

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Wed Sep 21, 2011 9:12 am
by Antonio Linares
Otto,

Very nice!!! Congratulations to Ruth and you !!! :-)

Thanks! Yes, thats the way to go ;-)

In my previous recently published code the buttons actions are already implemented

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Wed Sep 21, 2011 9:15 am
by Antonio Linares
Using a bitmap for the background... :-)

Image

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

#xcommand DEFINE METRO <oMtr> ;
             [ BACKGROUND <cFileName> ] ;
             [ BTNSIZE <nBtnWidth>, <nBtnHeight> ] ;
             [ TITLE <cTitle> ] ;
          => ;
          <oMtr> := TMetro():New( <cTitle>, <nBtnWidth>, <nBtnHeight>, <cFileName> )
         
#xcommand DEFINE METROBUTTON [<oBtn>] ;
             [ PROMPT <cPrompt> ] ;
             [ COLOR <nClrText>, <nClrPane> ] ;
             [ IMAGE <cImgName> ] ;
             [ OF <oMetro> ] ;
             [ <large: LARGE> ] ;
             [ ACTION <uAction,...> ] ;
          => ;
             [ <oBtn> := ] <oMetro>:AddButton( <cPrompt>, <nClrText>, <nClrPane>, <.large.>, <cImgName>, [{||<uAction>}] )              
         
#xcommand ACTIVATE METRO <oMtr> => <oMtr>:Activate()          

//----------------------------------------------------------------------------//

function Main()

   local oMetro

   DEFINE METRO oMetro ;
      TITLE "My FWH Metro app" ;
      BACKGROUND "..\bitmaps\hires\earth.bmp"
     
   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Files" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;
      IMAGE "..\bitmaps\AlphaBmp\files.bmp" ;
      ACTION Files()  

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Customers" COLOR CLR_WHITE, RGB( 234, 112, 39 ) ;    
      IMAGE "..\bitmaps\32x32\users.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Stock" COLOR CLR_WHITE, RGB( 181, 31, 60 ) LARGE ;
      IMAGE "..\bitmaps\32x32\task.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Utilities" COLOR CLR_WHITE, RGB( 24, 152, 78 ) ;
      IMAGE "..\bitmaps\32x32\setup.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Reports" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\32x32\print.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Graphics" COLOR CLR_WHITE, RGB( 234, 112, 39 ) LARGE ;  
      IMAGE "..\bitmaps\32x32\graphics.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Internet" COLOR CLR_WHITE, RGB( 2, 70, 133 ) LARGE ;
      IMAGE "..\bitmaps\32x32\internet.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Calculator" COLOR CLR_WHITE, RGB( 86, 177, 14 ) ;
      IMAGE "..\bitmaps\32x32\calc.bmp" ;
      ACTION WinExec( "calc" )

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Contact" COLOR CLR_WHITE, RGB( 213, 177, 1 ) ;  
      IMAGE "..\bitmaps\32x32\info.bmp"

   DEFINE METROBUTTON OF oMetro ;
      PROMPT "Exit" COLOR CLR_WHITE, RGB( 2, 174, 224 ) ;    
      IMAGE "..\bitmaps\32x32\quit.bmp" ;
      ACTION If( MsgYesNo( "Want to exit ?" ), oMetro:End(),)

   ACTIVATE METRO oMetro

return nil  

//----------------------------------------------------------------------------//

function Files()

   local oWnd, oBar
   
   DEFINE WINDOW oWnd TITLE "Files"
   
   DEFINE BUTTONBAR oBar OF oWnd 2007 SIZE 80, 80
   
   DEFINE BUTTON OF oBar FILENAME "..\bitmaps\32x32\new.bmp" PROMPT "New"

   DEFINE BUTTON OF oBar FILENAME "..\bitmaps\32x32\edit.bmp" PROMPT "Edit"

   DEFINE BUTTON OF oBar FILENAME "..\bitmaps\32x32\quit.bmp" PROMPT "Exit" ;
      ACTION oWnd:End()
   
   DEFINE MESSAGE OF oWnd 2007 PROMPT "Files management"
   
   ACTIVATE WINDOW oWnd
   
return nil  

//----------------------------------------------------------------------------//

CLASS TMetro

   DATA  oWnd, oFont, oFontB
   DATA  cFileName
   DATA  aButtons
   DATA  nOriginX, nOriginY
   DATA  nBtnWidth, nBtnHeight
   DATA  cTitle
   DATA  nRow, nCol
   DATA  oTimer
   DATA  hBitmap
   
   METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName )
   
   METHOD Activate()
   
   METHOD AddButton( cCaption, nClrText, nClrPane, lLarge, cImgName, bAction )
   
   METHOD End() INLINE ::oWnd:End()
   
ENDCLASS

//----------------------------------------------------------------------------//

METHOD New( cTitle, nBtnWidth, nBtnHeight, cFileName ) CLASS TMetro

   DEFAULT cTitle := "MyApp", nBtnWidth := 132, nBtnHeight := 132
   
   ::cTitle     = cTitle
   ::aButtons   = {}
   ::nBtnWidth  = nBtnWidth
   ::nBtnHeight = nBtnHeight
   ::nOriginX   = 200
   ::nOriginY   = 200
   ::nRow       =   0
   ::nCol       =   0
   
   if File( cFileName )
      ::hBitmap = ReadBitmap( 0, cFileName )
   endif    
 
   DEFINE FONT ::oFont NAME "Segoe UI Light" SIZE 0, -52

   DEFINE FONT ::oFontB NAME "Segoe UI Light" SIZE 0, -60 BOLD

   DEFINE WINDOW ::oWnd STYLE nOr( WS_POPUP, WS_VISIBLE ) ;
      COLOR CLR_WHITE, RGB( 15, 109, 57 )
   
   DEFINE TIMER ::oTimer OF ::oWnd ACTION ::oWnd:Say( 13, 135, Time(),, CLR_BLACK, ::oFontB )
   
   ACTIVATE TIMER ::oTimer
   
return Self  

//----------------------------------------------------------------------------//
   
METHOD Activate() CLASS TMetro

   ACTIVATE WINDOW ::oWnd MAXIMIZED ;
      ON PAINT ( DrawBitmap( hDC, ::hBitmap, 0, 0, GetSysMetrics( 0 ), GetSysMetrics( 1 ) ),;
                 ::oWnd:Say( 3, 16, ::cTitle,,, ::oFont,, .T. ),;
                 ::oWnd:Say( 2, 130, CDoW( Date() ),,, ::oFont,, .T. ),;
                 ::oWnd:Say( 7, 130, CMonth( Date() ) + " " + ;
                             AllTrim( Str( Day( Date() ) ) ),,, ::oFont,, .T. ) ) ;
      ON CLICK ::oWnd:End()

return nil  

//----------------------------------------------------------------------------//

METHOD AddButton( cCaption, nClrText, nClrPane, lLarge, cImgName, bAction ) CLASS TMetro

   local oBtn
   local nX := ::nOriginX + ( ::nRow * ( ::nBtnHeight + 8 ) )
   local nY := ::nOriginY + ( ::nCol * ( ::nBtnWidth + 8 ) )
   
   DEFAULT lLarge := .F.
   
   @ nX, nY BTNBMP oBtn ;
      SIZE ( ::nBtnWidth * If( lLarge, 2, 1 ) ) + If( lLarge, 8, 0 ), ::nBtnHeight ;
      PIXEL OF ::oWnd PROMPT cCaption NOBORDER FILENAME cImgName
     
   oBtn:bAction = bAction  
     
   oBtn:SetColor( nClrText, nClrPane )    
   
   AAdd( ::aButtons, oBtn )
   
   ::nCol++
   if lLarge
      ::nCol++
   endif  
   if ( ATail( ::aButtons ):nLeft + ATail( ::aButtons ):nWidth ) > ( ::nOriginY * 4 ) + 50
      ::nRow++
      ::nCol = 0
   endif  
   
return nil    

//----------------------------------------------------------------------------//

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Wed Sep 21, 2011 9:33 am
by Antonio Linares
Great looking using Ruth's bitmaps ! :-)

Congratulations Ruth, you are improving everyday. Hope to see you all the family again very soon ! :-)

Image

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Wed Sep 21, 2011 3:01 pm
by James Bott
Great work Antonio and Ruth!

James

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Fri Sep 23, 2011 6:29 am
by Otto
Hello Antonio,,

it seems that from Metro UI
you should start applications that look like the Control Panel.

Would you be so kind to provide such a class too.

Image


Best regards,
Otto

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Fri Sep 23, 2011 7:55 am
by Antonio Linares
Otto,

That could be implemented with two xBrowses and two SAYs, and the style of window that we have used for Class TMetro.

Anyhow, we are not following any Windows 8 rules actually. We are just playing with some ideas and concepts from it :-)

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Fri Sep 23, 2011 8:39 am
by Antonio Linares
Otto,

A possible start point :-)

Image

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

function Main()

   local oWnd, oFont, oBrw, oFont2
   local aItems := { "Personalize", "Users", "Wireless" }
   
   DEFINE FONT oFont NAME "Segoe UI Light" SIZE 0, -52    

   DEFINE FONT oFont2 NAME "Segoe UI Light" SIZE 0, -32    

   DEFINE WINDOW oWnd STYLE nOr( WS_POPUP, WS_VISIBLE ) ;
      COLOR RGB( 170, 170, 170 ), CLR_WHITE
     
   @ 2, 10 SAY "Control Panel" FONT oFont SIZE 300, 100
   
   @ 2, 80 SAY "Personalize" FONT oFont SIZE 300, 100
     
   @ 8, 5 XBROWSE oBrw ARRAY aItems COLSIZES 800 CELL ;
      FONT oFont2 SIZE 400, 650 TRANSPARENT NOBORDER OF oWnd
     
   oBrw:nDataLines = 2  
   oBrw:lRecordSelector = .F.
   oBrw:bClrStd = { || { RGB( 170, 170, 170 ), CLR_WHITE } }
   oBrw:bClrSelFocus = { || { CLR_WHITE, RGB( 34, 177, 76 ) } }
   
   oBrw:CreateFromCode()
   oBrw:SetFocus()
   
   ACTIVATE WINDOW oWNd MAXIMIZED ;
      ON CLICK oWnd:End()
     
return nil        

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Fri Sep 23, 2011 1:30 pm
by norberto
We can make ours appl look like metro UI, but to make programs in Native metro UI, only in HTML5+java. :?
Win32 aplications runs in desktop mode in windows 8.(old start menu).
Appl make to native metro UI, runs in windows 8, tablets with windows 8 and smartphones with windows phone 8,
maybe not in tablets with ARM.

Re: Windows 8 Metro style - A Class TMetro test

PostPosted: Fri Sep 23, 2011 2:57 pm
by Antonio Linares
Norberto,

Yes, right, but Windows 8 will require a long time to replace Windows 7, and in the meantime we can take advantage of its UI model and its advertising :-)
All times are UTC
Page 1 of 5
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/