Windows 8 Metro style - A Class TMetro test

Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Tue Sep 20, 2011 9:38 pm

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    

//----------------------------------------------------------------------------//
 
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Re: Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Tue Sep 20, 2011 10:17 pm

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    

//----------------------------------------------------------------------------//
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Re: Windows 8 Metro style - A Class TMetro test

Postby richard-service » Wed Sep 21, 2011 3:57 am

Nice job.
User avatar
richard-service
 
Posts: 730
Joined: Tue Oct 16, 2007 8:57 am
Location: New Taipei City, Taiwan

Re: Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Wed Sep 21, 2011 7:49 am

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    

//----------------------------------------------------------------------------//
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Re: Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Wed Sep 21, 2011 8:41 am

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    

//----------------------------------------------------------------------------//
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Re: Windows 8 Metro style - A Class TMetro test

Postby Otto » Wed Sep 21, 2011 8:59 am

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

 
********************************************************************
mod harbour - Vamos a la conquista de la Web
modharbour.org
https://www.facebook.com/groups/modharbour.club
********************************************************************
User avatar
Otto
 
Posts: 5994
Joined: Fri Oct 07, 2005 7:07 pm

Re: Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Wed Sep 21, 2011 9:12 am

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
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Re: Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Wed Sep 21, 2011 9:15 am

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    

//----------------------------------------------------------------------------//
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Re: Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Wed Sep 21, 2011 9:33 am

Great looking using Ruth's bitmaps ! :-)

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

Image
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Re: Windows 8 Metro style - A Class TMetro test

Postby James Bott » Wed Sep 21, 2011 3:01 pm

Great work Antonio and Ruth!

James
User avatar
James Bott
 
Posts: 4840
Joined: Fri Nov 18, 2005 4:52 pm
Location: San Diego, California, USA

Re: Windows 8 Metro style - A Class TMetro test

Postby Otto » Fri Sep 23, 2011 6:29 am

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
********************************************************************
mod harbour - Vamos a la conquista de la Web
modharbour.org
https://www.facebook.com/groups/modharbour.club
********************************************************************
User avatar
Otto
 
Posts: 5994
Joined: Fri Oct 07, 2005 7:07 pm

Re: Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Fri Sep 23, 2011 7:55 am

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 :-)
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Re: Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Fri Sep 23, 2011 8:39 am

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        
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Re: Windows 8 Metro style - A Class TMetro test

Postby norberto » Fri Sep 23, 2011 1:30 pm

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.
norberto
 
Posts: 566
Joined: Thu Aug 30, 2007 3:40 pm
Location: BR

Re: Windows 8 Metro style - A Class TMetro test

Postby Antonio Linares » Fri Sep 23, 2011 2:57 pm

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 :-)
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 41206
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain

Next

Return to FiveWin for Harbour/xHarbour

Who is online

Users browsing this forum: byron.hopp and 10 guests