Flat Buttons in Jade

Forums for specific tips, techniques and example code
ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by Jade Dude >> Wed, 1 Oct 2003 5:38:11 GMT

Is there a way to have flat buttons in jade?
Like the buttons in the IE toolbar.

ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Re: Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by allistar >> Wed, 1 Oct 2003 8:29:18 GMT

We had the same need and ended up writing our own control. Do it like this:

- create a subclass of the Picture control
- when it gets created add a frame to it (at runtime). Position the frame so it is a bit bigger than the picture control, and set the borders so they look right.
- set the frame to hidden, and on the mouseOver event make it visible. On the mouseLeave event make it invisible again.

What you end up with is a flat button that "pops up" when the mouse is moved onto it. It may be that there is a control in JADE that does this, we created this control way back in Jade 4 days because there was no standard control to use.

Hope this helps,
Allistar.

------------------------------------------------------------------
Allistar Melville
Software Developer, Analyst allistar@silvermoon.co.nz
Auckland, NEW ZEALAND

Silvermoon Software
Specialising in JADE development and consulting
Visit us at: http://www.silvermoon.co.nz
*NEW* Simple web access to Jade at: www.silvermoon.co.nz/jhp.html ------------------------------------------------------------------

ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Re: Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by Patwos >> Wed, 1 Oct 2003 9:10:20 GMT

While Allistar's approach will work, I find a better approach to use the JadeMask control and have the roll over graphic for the JadeMask also include the rectangle. You can then also have your roll-over graphic a colour version of the image and the non-roll-over graphic a shades of grey graphic and disabled buttons a lighter shades of grey graphic. The advantage of this is that you have no need for a round trip to the application server in a thin client environment. On a slow or high-latency network this can make your application more responsive - but then I already told you this back on the 5th August in response to your posting titled "HELP: Toolbar in Jade" ;-)

Hope that helps,
Pat.

ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Re: Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by Jade Dude >> Wed, 1 Oct 2003 23:35:34 GMT

How to i add the frame to the picture control at runtime?

ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Re: Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by allistar >> Thu, 2 Oct 2003 2:11:28 GMT
How to i add the frame to the picture control at runtime?

Something like this:

vars
frame: Frame;begin

create frame transient;
frame.parent := parent;
frame.left := left - 5;
frame.top := top.5;
frame.height := height + 10;
frame.width := width + 10;
frame.caption := "";
form.addControl(frame);
myFrame := frame;
endif;

Caveat: That's off the top of my head. You will also need to specify other propeerties on the frame, like its transparency, colours, border styles etc. "myFrame" is a reference defined on your class that is a subclass of "Picture".

Regards,
Allistar.

------------------------------------------------------------------
Allistar Melville
Software Developer, Analyst allistar@silvermoon.co.nz
Auckland, NEW ZEALAND

Silvermoon Software
Specialising in JADE development and consulting
Visit us at: http://www.silvermoon.co.nz
*NEW* Simple web access to Jade at: www.silvermoon.co.nz/jhp.html ------------------------------------------------------------------

ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Re: Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by Jade Dude >> Wed, 8 Oct 2003 21:55:25 GMT

That code goes in the create method for the subclass of Picture?

When i go to create the control in the painter it says "Attempted access via null object reference" on "form.addControl(frame);".

How can i fix this?

ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Re: Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by allistar >> Thu, 9 Oct 2003 3:43:20 GMT
That code goes in the create method for the subclass of Picture?

When i go to create the control in the painter it says "Attempted access via null object reference" on "form.addControl(frame);".

How can i fix this?

Actually, the code should be in the "windowCreated" method, not the "crate" method. Sorry about that. You should also wrap you code in a condition so the windowCreated method of the subclassed control looks like this:

if (not isInPainter()) then
createFrame();
endif;
inheritMethod();

In fact, here is the exact code I have for that method:

if (not isInPainter()) then
create myFrame transient;
myFrame.parent := self.parent;
myFrame.left := self.left - FrameGap;
myFrame.top := self.top - FrameGap;
myFrame.width := self.width + (FrameGap * 2);
myFrame.height := self.height + (FrameGap * 2);
myFrame.bevelOuter := myFrame.Bevel_None;
myFrame.bevelOuterWidth := 1;
myFrame.bevelInner := myFrame.Bevel_None;
myFrame.bevelInnerWidth := 0;
myFrame.boundaryWidth := 0;
myFrame.borderStyle := 0;
myFrame.caption := null;

myFrame.transparent := false;
myFrame.visible := true;
self.form.addControl(myFrame);
myFrame.zOrder(0);
endif;

You will also need to put code in: mouseMove and mouseLeave to simulate the frame appearing and disappearing.

Regards,
Allistar.

------------------------------------------------------------------
Allistar Melville
Software Developer, Analyst allistar@silvermoon.co.nz
Auckland, NEW ZEALAND

Silvermoon Software
Specialising in JADE development and consulting
Visit us at: http://www.silvermoon.co.nz
*NEW* Simple web access to Jade at: www.silvermoon.co.nz/jhp.html ------------------------------------------------------------------

ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Re: Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by Patwos >> Thu, 9 Oct 2003 7:43:36 GMT

Or, save yourself a whole lot of hassle and remove the need to write any code or checking whether or not you're in painter etc by doing like I suggested and use a JadeMask control instead of a Picture control and include the "frame" outline in your roll over image. It really is quite simple to do it this way, it's far easier, you don't have to mess around with code like mouseMove and mouseLeave that will slow you down noticeably in thin client over slow links.

But mainly, why write code you don't have to anymore in current Jade releases now that there is a much better alternative for ToolBar roll-overs by using a JadeMask control. In older releases of Jade obviously you had to when there was no alternative but why bother now...

Pat.

ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Re: Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by Trailing Drones >> Fri, 10 Oct 2003 1:44:57 GMT

Pat, I really admire your tenacity here.
Jade Dude, why don't you take Pat's advice?

ConvertFromOldNGs
Posts: 5321
Joined: Wed Aug 05, 2009 5:19 pm

Re: Flat Buttons in Jade

Postby ConvertFromOldNGs » Fri Aug 07, 2009 2:45 pm

by Jade Dude >> Tue, 14 Oct 2003 20:26:56 GMT

How does the jadeMask control work?

I can't get the rollover effect to work.


Return to “Tips and Techniques”

Who is online

Users browsing this forum: No registered users and 8 guests

cron