Modeler1 source code (C++/MFC)

The url for downloading the source code for modeler1 is http://ultrafluid.codeplex.com/

The Ribbon (suite)

To make a Ribbon button with various shapes (elements), you have to define a bimap. In my case, I have a large image named ShapesInfra.png defined in the resource as IDB_SHAPES_INFRA.

The code to create the ribbon element is simple:

CRibbonListButton *pListBtnInfra = new CRibbonListButton(ID_DESIGN_SHAPESINFRA, _T("Infrastructurenti"), 20, -1, FALSE);
pListBtnInfra->AddGroup(_T("Built-In"), IDB_SHAPES_INFRA, 64, m_arInfraShapes);
pListBtnInfra->SetIconsInRow(4);
pListBtnInfra->EnableMenuResize();
pPanelDesign->Add(pListBtnInfra);

To display a text under each bitmap,we initialize a StringArray previously in the class:

m_arInfraShapes.RemoveAll();
m_arInfraShapes.Add(_T("AD Server"));
m_arInfraShapes.Add(_T("Server"));
m_arInfraShapes.Add(_T("Web Server "));
m_arInfraShapes.Add(_T("Database Server"));
m_arInfraShapes.Add(_T("Workstation"));
m_arInfraShapes.Add(_T("Laptop"));
m_arInfraShapes.Add(_T("Firewall"));
m_arInfraShapes.Add(_T("Network"));
m_arInfraShapes.Add(_T("Virtual Server"));
m_arInfraShapes.Add(_T("Virtual Web Server"));
m_arInfraShapes.Add(_T("Virtual Database Server"));
m_arInfraShapes.Add(_T("Virtualization Server"));
m_arInfraShapes.Add(_T("AD Server"));
m_arInfraShapes.Add(_T("Server"));
m_arInfraShapes.Add(_T("Database Server"));
m_arInfraShapes.Add(_T("Server Farm"));
m_arInfraShapes.Add(_T("Workstation"));
m_arInfraShapes.Add(_T("laptop"));

The power of the Ribbon / Properties View

A shape (an element) can be adjusted on its properties either by the Properties View either the ribbon. The ribbon is very intuitive.

Many shapes for my Modeler1

My application can draw many shapes. There are simple shapes like rectangle or arrow but the most interesting shapes are the infrastructure and development shapes. Every element is picked from the ribbon except the picture who need an image path from the properties views. In the next post, I will explain how is made an “Element”. This is how in the source code a shape is designed. It is a CElement object in the C++ source code. I will explain also the Element Factory to produce predefined shapes. Stay tune.

How to draw an image with GDI+

In my application Modeler1, I can display pictures. How can you do that operation using Win32 SDK?

It is not difficult. First you must acquire a Graphics object from GDI+.

On my side, the Graphics object is acquired with the View::OnDraw with :

Graphics graphics(pDC->m_hDC);

I store the graphics object in a context class to have a single point of definition.

Then, you have all the API from GDI+ available with the graphics object.

Just declare an Image object and fill a CStringW with the full path of your picture.

Graphics * graphics = ctxt.GetGraphics();

Image image(CStringW(imageFilePath.c_str()));

if( m_type == ElementType::type_shapes_infrastructure )

{

graphics->DrawImage(&image, rect.left, rect.top, image.GetWidth(), image.GetHeight());

}

The DrawImage member function of Graphics just makes the job.

In my application the draw picture is used first by clicking Picture in the upper left side of the ribbon.

Then, you click in the Properties View the Image […] button.

When the image is not selected, there is a rectangle drawed with the primitive DrawRectangle and DrawLine:

if( m_image.length() == 0 )
{
graphics->DrawRectangle(&colorPen, rect.left, rect.top, rect.Width(), rect.Height());
graphics->DrawLine(&colorPen, p1.x, p1.y, p2.x, p2.y);
graphics->DrawLine(&colorPen, p1.x, p2.y, p2.x, p1.y);
}
<pre>

Then you select an image.

image001

image002