Jump to content

Need Help!


Recommended Posts

I need to give a presentation on this project tonight.

 

I could use the project in the state it is in, but I would like to make it more presentable and functionable.

 

https://dl.dropboxusercontent.com/u/73677254/SMS/GITA.zip

 

Can I get help in these areas:

 

Menu page - will not center (unless i move to another page and come back) - if I add more menu items and switch to landscape (horizontal), the scrollbar does not scroll

 

Communications page - if I add more labels and combo boxes and switch to landscape (horizontal), the scrollbar does not scroll

 

Guidelines page - on the panel, I use the InnerHtml to build a Unordered List. How can i control the font, color of the list and each individual item?

 

For any page that has a W3Panel on it, how can i control its color (change it from anything other than white? For example,   W3Panel1.Color:= #ff6600   does not work

 

I hope you can help me with these

 

thanks

 

shane

Link to post
Share on other sites
  • Administrators

Center

On which device do you have trouble? They seem centered to me.

 

 

ScrollBox

Add

 
FBox: TW3Scrollbox; 

 

to private section of the form.

 

 

Create the component in InitializeLayout the way you do with the others:

 
 if not assigned (FBox) then 
 begin 
  FBox:=TW3Scrollbox.Create(self); 
  FBox.SetBounds(0,50,self.Width, self.Height - W3HeaderControl1.Height); 
  FBox.StyleClass:='TW3CustomControl'; 
 end; 

 

Change rour Panel-code to this:

 
   if not assigned (W3Panel1) then 
   begin 
    W3Panel1:= TW3Panel.Create(FBox.Content); 
    W3Panel1.Left:= 0; 
    W3Panel1.setBounds(0,0,3000, 2000); 
   end; 
   W3Panel1.Top:= 0; 

 

The ScroppBox.Ower is set to be the owner of the panel.

Set the bounderies.

 

 

Color

Go to the "DigitalForm" and add this code to the ResizeEvent (or elsewhere);

 

 
W3Panel1.Color := RGBToColor(0, 0, 255); 

Link to post
Share on other sites
  • Administrators

Thanks, Jorn, this solved my problem too!

 

Note to self: scrollbox content must be parented by the scrollbox.Content, not by the scrollbox!

 

IElite, here is a working scrollbox sample. Drop a scrollbox on a form and enter the code below:

 
type 
  TForm1=class(TW3form) 
  private 
    {$I 'Form1:intf'} 
    FListMenu: TW3ListMenu; 
  protected 
    procedure InitializeObject; override; 
    procedure Resize; override; 
  end; 

implementation 

{ TForm1} 

procedure TForm1.InitializeObject; 
begin 
  inherited; 
  {$I 'Form1:impl'} 
  FListMenu := TW3ListMenu.Create(W3ScrollBox1.Content); 
  for var i := 1 to 10 do 
    FListMenu.Items.Add.Text := Format('Menu selection %d', [ i ] ); 
end; 

procedure TForm1.Resize; 
begin 
  inherited; 
  FListMenu.Width := W3ScrollBox1.Width - CNT_SCROLLBAR_SIZE - 2; 
end; 

Link to post
Share on other sites

THANKS to the both of you for your help! The scrollbar works as expected now :)

 

However, on my communications form, I had a TW3Panel with my labels and comboBoxes on it.

 

I replace the panel with a TW3Scrollbox and now the labels heights are cut in half for some reason.

 

I tried changing their hieghts, but it made no difference. Here is a new version if the code with the added scrollbar on the menu form and communication form

 

https://dl.dropboxusercontent.com/u/73677254/SMS/GITA.zip

 

To get to communications, select Assessment from the menu form and scroll to the Communications form

 

 

 

thanks

Shane

Link to post
Share on other sites
  • 4 weeks later...
  • Administrators

There are several ways to adjust the color, and they might interfere with eachother and thus cause one change to override another. Eg. if you set color in the OnCreate method, this will ignore the color on the Object Inspector...

 

I'll go trough these by using the "Calc (by Eric Grange)" demo in the Demos folder.

 

Open this project one and follow these steps:

 

 

Change by code

As you can see, Eric already sets the color in InitializeObject. In Form1, line 45, you'll find the code:

 Color := clIndianRed; 

 

Which is the same as:

 Self.Color := clIndianRed;

 

If you change this color to eg.

clTeal

, you will see the immediate change when you hit F9.

 

This approach is just the same as setting the color in the Object Inspector.

 

 

Change by using the ObjectInspector

Comment out (or delete) line 45, and switch to the visual designer. Select the From and set Color to

clMaroon

. Hit F9, and you'll see the change.

 

The settings in the ObjectInspector are applied in the

{$I 'Form1:impl'}

-part of InitializeObject. Ie. if you try to set the color by code before this line, the setting from the ObjectInspector will override this by applying the ObjInsp-properties in the

{$I 'Form1:impl'}

-line.

 

 

Change by using the CSS

If you try these steps in a brand new project, you will not get the same result. You will notice some changes, but only as stripes across the background. Why's that?

 

Well, I've already revealed the answer in the title ;-)

It's the stying in the CSS. If you compare the setting in the Calc-demo with a new project, you will notice that the

StyleClass

property is set to

TW3Form

in a brand new project, while it's altered to

one

in Eric's Calc demo. The Smart you'll notice that the CSS class name is similar to the component class name. This makes it very easy to update the visual appearance of all components in your projects by simply modifying the CSS.

 

Now, if you set the

StyleClass

property to

one

in your brand new project, you will get the full effect from the changes you've made in the ObjectInspector or by code. :-)

 

Change by really using the CSS

OK. The change above was really all about not using the CSS. :-P

Lets use the CSS to create some nice visual look...

 

Eric's demo is quite old. It's actually from the early alpha/beta development.

We have done some changes to the HTML and CSS after this demo was created, so when you're going to adjust stuff here, you would want to update these two files first. Right-click each of them in the project inspector and select "Revert to default".

 

Set the form's

StyleClass

property to

TW3Form

, and Execute.

You will now get the classic iOS stripes as background.

 

Open the CSS-file and navigate to the TW3Form definition (line 684).

 

At http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/ and http://www.colorzilla.com/gradient-editor/ you can generate various gradient backgrounds. Try for instance the default one, and replace the whole CSS class with this code:

 
.TW3CustomForm, .TW3Form 
{ 
  background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); 
  background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); 
  background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); 
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF)); 
  background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); 
  background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%); 
} 

 

This looks nice, huh?

 

 

You can further experiment with some more fancy CSS background, like the ones on http://lea.verou.me/css3patterns/:

 
.TW3CustomForm, .TW3Form 
{ 
  background: 
  radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent), 
  radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px; 

  background-color: slategray; 
  background-size:75px 100px; 
} 

 

I'm not sure why, but this doesn't show correctly in the internal browser or in Safari (even though the original site is OK in Safari). FF, IE and Chrome is OK.

 

Probably some vendor prefix issue...

 

 

Hey. Why not make it _even_ cooler!

With images as background, you can create some really nice look.

 

Just do a Google-image search for "free nice backgrounds" and pick a background you like (but be aware of the license if you're going to redistribute things you find on-line. There are plenty of cheap graphics you can buy out there!).

 

Add any of these backgrounds to your project (just drag it into the Project Manager in the Smart IDE, and it will be added to the project. At compile-time it's extracted to the "res" folder).

 

And use this CSS:

 
.TW3CustomForm, .TW3Form 
{ 
  background-image:url('res/bg.jpg'); 
} 

 

While we're at it. Why not combine a few images and create a nice calc for kids while we're at it...

(Graphics and code from http://learn.shayhowe.com/html-css/backgrounds-gradients)

Add the three images to you project, and use this code:

 
.TW3CustomForm, .TW3Form 
{ 
 background: 
  url('res/dyno.png') no-repeat 280px 18px, 
  url('res/grass.png') no-repeat 0 100%, 
  url('res/sky.jpg') repeat 0 0; 
} 

 

 

Why stop there?

Let's brush up the buttons and labels as well...

 

Replace the TW3Edit-look at line 347 with this code

 

 
.TW3Memo, .TW3EditBox, .TW3ComboBox { 
  border: 2px solid #333333; 
  resize: none; 
  -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      -ie-border-radius: 5px; 
    font-family: "Helvetica Neue", Verdana, sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
    text-shadow: 1px 1px -1px #cecece; 
} 

 

 

And insert this code at line 715 (right before the original button styles):

 

 
	/* ============================================= 
 * TW3NiceButton 
 * ============================================= */ 

.TW3NiceButton { 
    -webkit-filter: blur(1px); 
       -moz-filter: blur(1px); 
            filter: blur(1px); 

    transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000); 
    box-shadow: 0 15px 25px -4px rgba(0,0,0,0.5), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2); 
    border-radius: 120; 
    position: absolute; 
    background: #ccd0d4; 
    margin-left: 20 * -0.5; 
    margin-top: 20 * -0.5; 
    display: block; 
    font-family: "Helvetica Neue", Verdana, sans-serif; 
    font-size: 14px; 
    font-weight: bold; 
    text-shadow: 1px 1px -1px #cecece; 
} 

.TW3NiceButton:active { 
   box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4), inset 0 -8px 25px -1px rgba(255,255,255,0.9), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 8px 20px 0 rgba(0,0,0,0.2), inset 0 0 5px 1px rgba(255,255,255,0.6); 
} 

 

 

Remember to set the correct style for each component.

For the edit component, you can just set the

StyleClass

property to

TW3Form

directly.

 

For the buttons, this can be a tedious job, and you might want to do it the easy way by code:

 
 for Index := 0 to getChildCount - 1 do 
  begin 
    Component := getChildObject(Index); 
    if (Component is TW3Button) then 
      TW3Button(Component).StyleClass := 'TW3NiceButton'; 
  end; 

 

I'll add some illustrations as well.

Link to post
Share on other sites
  • 3 weeks later...

First, let me say - GREAT Tutorial! It helped alot! This should be added to the smart book!

 

Secondly,

 

1.) "Now, if you set the StyleClass property to none in your brand new project, you will get the full effect from the changes you’ve made in the ObjectInspector or by code"

 

This did not work for me. I believe its because of maybe the fact that I am not using app.css, but that my IDE projects all default to android - and i can only change to iphone. I can create a new .css file and it will show up in options, but i can't switch to it. I would have to recreate the project from start and then select it when creating the project

 

2.) What about this: (how is it used)?

 

procedure TForm1.StyleTagObject;

begin

// Custom styling

end;

 

 

Shane

Link to post
Share on other sites
  • Administrators

1) Did you set the property to "" (blank, no chars), or to "none" (four chars)?

The former will use the default style, but the latter will apply the non-exsisting "none" style...

 

2) This is used to apply custom styling to the class itself (not other classes/components). If you take a look in the RTL, you will find "StyleTagObject" introduced in "TW3TagObj". In "TW3TagObj.Create" you find a call to "StyleTagObject". I.e. every "TW3TagObj" descendent, you can add custom/special styling in an overridden "StyleTagObject" method. Eg. if you create a slider like this (http://smartmobilestudio.com/2012/08/07/making-a-slider-control/) - which is actualy a TextEdit descendant, you can add the default and special styling you need in the "StyleTagObject" method.

 

We should perhaps remove this from the standard "form template", because it can give the impression that you are supposed to do all the styling in this method (just like you can do all component layout in the "resize" method). But this method is only intended to adjust the style of the form itself, and not all the components on the form. (It was added to give easy access to various "special styling" that could be necessary for the form to appear and behave correct).

Link to post
Share on other sites

I am looking at all your other answers...thanks for responding. Can you please tell me why my storage is not working

 

 
procedure TfrmMain.InitializeObject; 
begin 
  inherited; 
  {$I 'frmMain:impl'} 
  fStorage:= TW3LocalStorage.Create; 
  try 
    fStorage.Open('CladView'); 
    PennyQty:= fStorage.GetKeyInt('PennyQty', 0); 
    NickelQty:= fStorage.GetKeyInt('NickelQty', 0); 
    DimeQty:= fStorage.GetKeyInt('DimeQty', 0); 
    QuarterQty:= fStorage.GetKeyInt('QuarterQty', 0); 
    HalfDollarQty:= fStorage.GetKeyInt('HalfDollarQty', 0); 
    DollarQty:= fStorage.GetKeyInt('DollarQty', 0); 
    fStorage.Close; 
  except 
   // storage not supported 
   fStorage:= nil; 
  end; 
 //more code here 
end; 

procedure TfrmMain.FinalizeObject; 
begin 
  inherited; 
 try 
  fStorage.Open('CladView'); 
  fStorage.SetKeyInt('PennyQty', PennyQty); 
  fStorage.SetKeyInt('DimeQty', DimeQty); 
  fStorage.SetKeyInt('NickelQty', NickelQty); 
  fStorage.SetKeyInt('DimeQty', DimeQty); 
  fStorage.SetKeyInt('QuarterQty', QuarterQty); 
  fStorage.SetKeyInt('HalfDollarQty', HalfDollarQty); 
  fStorage.SetKeyInt('DollarQty', DollarQty); 
  fStorage.Close; 
 except 
  fStorage:= nil 
 end; 
//more code here 
end; 

Link to post
Share on other sites
  • Administrators

Have you tested the demo from the "Smart Book"?

 

Take a look at this:

http://code.google.com/p/a-smart-book/

 

 

 

<i>Update</i>

It seems like the trunk edition of the .opp file is updated to a newer format (with CDATA instead of Base64). The compiled project itself (in the bin-folder) is OK, but you cant open the trunk-edition of the project in the current release of Smart. This was added in revision 46. Checkout revision 45 to get opp file that's compatible with v1.1.1.5...

Link to post
Share on other sites
  • Administrators

At http://code.google.com/p/a-smart-book/, Primoz has published all the examples from the book. I'm not referring to the book itself, but the actual source-code of all the examples.

 

I.e. from the url above you can download them and test them.

 

The reason I want you to test _this_ project, is because this project works. And if the limitation is in your environment (browser or device) due to some restrictions, settings or missing support - you will notice that immediately.

 

If the book-example works OK, then it's something in your project that's not entirely by the book. Literally ;-)

 

What I meant by revisions: We have added support for "raw source-code" in the OPP file. Ie your opp file will contain CDATA elements with pure pascal instead of Base64-encoded source-code. This feature is not released yet, but Primoz is working on that Smart-version. Thus, when he updated his "LocalStoreage" project in his book repository, the project was updated to "CDATA"-style project file. Since this project type is not readable in the latest Smart version (v1.1.1.5), you would need to update (the book-examples) to r45 to get the v1.1.1.5-friendly version of the project.

Link to post
Share on other sites
  • Administrators

BTW:

 

In your FinalizeObject method, you call "inherited" before the actual saving code. Try to move "inherited;" to the end of the "FinalizeObject" method.

 

If this does not work, try to move the saving code out of the "FinalizeObject" method, and trigger it manually trough a button click. (Isn't this what the book example does?)

Link to post
Share on other sites

I moved the inherited to end of code. that didn't work.

 

I then created two new menu items

Save

Load

 

and added the two new event handlers

 

 
Procedure TfrmMenu.HandleMenuItemClicked(Sender:TObject); 
Begin 
  case TW3ListItem(sender).tagValue of 
  0: Application.gotoForm('frmAbout',fefromRight); 
  1: Application.gotoForm('frmAdd',feFromRight); 
  2: Application.gotoForm('frmStats',feFromRight); 
  3: Application.gotoForm('frmSettings',feFromRight); 
  4: begin SaveToFile end; 
  5: begin LoadFromFile end; 
  else 
    Begin 
        application.terminate; 
      end; 
  end; 
end; 

 

and added the code to two new procedures (and that didn't work)

 

 
procedure TfrmMenu.SaveToFile; 
begin 
try 
  fStorage.Open('CladView'); 
  fStorage.SetKeyInt('PennyQty', PennyQty); 
  fStorage.SetKeyInt('DimeQty', DimeQty); 
  fStorage.SetKeyInt('NickelQty', NickelQty); 
  fStorage.SetKeyInt('DimeQty', DimeQty); 
  fStorage.SetKeyInt('QuarterQty', QuarterQty); 
  fStorage.SetKeyInt('HalfDollarQty', HalfDollarQty); 
  fStorage.SetKeyInt('DollarQty', DollarQty); 
  fStorage.Close; 
 except 
  fStorage:= nil 
 end; 
end; 

procedure TfrmMenu.LoadFromFile; 
begin 
 fStorage:= TW3LocalStorage.Create; 
  try 
    fStorage.Open('CladView'); 
    PennyQty:= fStorage.GetKeyInt('PennyQty', 0); 
    NickelQty:= fStorage.GetKeyInt('NickelQty', 0); 
    DimeQty:= fStorage.GetKeyInt('DimeQty', 0); 
    QuarterQty:= fStorage.GetKeyInt('QuarterQty', 0); 
    HalfDollarQty:= fStorage.GetKeyInt('HalfDollarQty', 0); 
    DollarQty:= fStorage.GetKeyInt('DollarQty', 0); 
    fStorage.Close; 
  except 
   // storage not supported 
   fStorage:= nil; 
  end; 
end; 

 

Still didn't work

 

I guess i have to download a svn client and get the smartbook source code and test it to see if it works.

Link to post
Share on other sites

I could not get the smartbook source code.I downloaded Tortoise SVN and just kept getting errors

https://dl.dropboxusercontent.com/u/73677254/error.png

 

can someone please look at my source and tell me why the localstorage is not working.

 

https://dl.dropboxusercontent.com/u/73677254/CladView.zip

 

I have now moved it from main form to the application

 

Shane

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...