FiveTech Support Forums

FiveWin / Harbour / xBase community
Board indexAll discussionsLogin (GitHub)
Board index FiveWin for Harbour/xHarbour Windows 8 Metro style - A Class TMetro test
Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Windows 8 Metro style - A Class TMetro test
Posted: Tue Sep 20, 2011 09: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...



metro.prg
Code (fw): Select all Collapse
#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
Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Tue Sep 20, 2011 10:17 PM
Using some bitmaps...



metro.prg
Code (fw): Select all Collapse
#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
richard-service
Posts: 866
Joined: Tue Oct 16, 2007 08:57 AM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Wed Sep 21, 2011 03:57 AM

Nice job.

Best Regards,



Richard



Harbour 3.2.0dev (r2503251254) => Borland C++ v7.7 32bit

MySQL v8.0

Harbour 3.2.0dev (r2503251254) => Borland C++ v7.7 64bit
Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Wed Sep 21, 2011 07:49 AM
Implementing actions from the main menu and an overview of how to integrate traditional windows with it :-)



metro.prg
Code (fw): Select all Collapse
#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
Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Wed Sep 21, 2011 08:41 AM
Date, time, more Metro look style :-)



metro.prg
Code (fw): Select all Collapse
#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
Otto
Posts: 6983
Joined: Fri Oct 07, 2005 07:07 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Wed Sep 21, 2011 08: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




Code (fw): Select all Collapse
  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
Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Wed Sep 21, 2011 09: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
Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Wed Sep 21, 2011 09:15 AM
Using a bitmap for the background... :-)



metro.prg
Code (fw): Select all Collapse
#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
Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Wed Sep 21, 2011 09:33 AM
Great looking using Ruth's bitmaps ! :-)

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

regards, saludos

Antonio Linares
www.fivetechsoft.com
James Bott
Posts: 4840
Joined: Fri Nov 18, 2005 04:52 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Wed Sep 21, 2011 03:01 PM

Great work Antonio and Ruth!

James

FWH 18.05/xHarbour 1.2.3/BCC7/Windows 10
Otto
Posts: 6983
Joined: Fri Oct 07, 2005 07:07 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Fri Sep 23, 2011 06: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.




Best regards,
Otto
Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Fri Sep 23, 2011 07: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
Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Fri Sep 23, 2011 08:39 AM
Otto,

A possible start point :-)



metro2.prg
Code (fw): Select all Collapse
#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
norberto
Posts: 566
Joined: Thu Aug 30, 2007 03:40 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Fri Sep 23, 2011 01: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.

Antonio Linares
Posts: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Windows 8 Metro style - A Class TMetro test
Posted: Fri Sep 23, 2011 02: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
Static archive · New replies & topics via GitHub Discussions