Build a Conference App part 3

This is the third and last video in the series on how to build a Conference App in the DataFlex Mobile framework. In this post we will add the final touch to the application in order to make it production ready. By modifying the layout, captions and to top it of we add some colors.

Profile layout

It is very easy to modify the views in DataFlex. You just drag and drop the data aware components on the screen and the code will update it self. You can also drag elements directly from the database and then just change what type of element you want. If that is not enough you might want to take a look in the properties list for the element for a final touch.
If you want a default value on some field, you add that into the DataDictionary like this:

Procedure Field_Defaults
    Forward Send Field_Defaults
    Set Field_Changed_Value Field Attendee.Attendee to "1"
End_Procedure

Login and HtmlBox

We can check if we are logged in by checking the IsLoggedIn property of the ghoWebSessionManager object. So when we are in the profile view we can use that information to decide if we want to show the information in the form field view or in a pure HTML view using a component called WebHtmlBox. Here is a sample on how to do that:

Move (REPLACES ((Character(13)), Attendee.About, "")) to psAbout 
Move (REPLACES ((Character(10)), psAbout, "<br>")) to psAbout

Move ('<h1 style="font-size: 2em;">' + Attendee.FirstName + ' ' + Attendee.LastName + '</h1>') to psHTML
Move (psHTML + '<p>' + Attendee.Title + ' at <b>' + Attendee.Company + '</b></p>') to psHTML
Move (psHTML + '<p><b>Mail:</b> <a href="mailto:' + Attendee.Email + '">' + Attendee.Email + '</a><br><b>URL:</b> <a href="' + Attendee.Web + '" target="_blank">' + Attendee.Web + '</a></p>') to psHTML
Move (psHTML + '<p><b>About</b><br> ' + psAbout + '</p>') to psHTML

Send UpdateHTML of oStyledContent (psHTML)

Then we switch between the HtmlBox and the forms using this code:

WebSet pbRender of oAttendeeFirstName to False
WebSet pbRender of oAttendeeLastName to False
/*...*/

WebSet pbRender of oStyledContent to True
        
WebSet pbRender of oEditBtn to False

Get IsLoggedIn of ghoWebSessionManager to bLoggedIn
If (bLoggedIn) Begin
	If (NavigateData.bReadOnly) Begin
		WebSet pbRender of oEditBtn to True
	End
	Else Begin
		WebSet pbRender of oAttendeeFirstName to True
		WebSet pbRender of oAttendeeLastName to True
		/*...*/
		
		WebSet pbRender of oStyledContent to False
	End
End

OnViewSaved automatically sends us back to the list. But if we want to stay in the profile view we need to remove the NavigateClose and instead set the bReadOnly to true and rerun the SetActionButtons procedure like this:

Procedure OnViewSaved Handle hoServer Boolean bChanged
    tWebNavigateData NavigateData
    Move True to NavigateData.bReadOnly
    Send SetNavigateData NavigateData
    
    Send SetActionButtons
    // Close after save
    //Send NavigateClose Self
End_Procedure

Breadcrumb captions

By default the Breadcrumb captions are just the value from the property psCaption in each object. But we can modify them from anywhere by using this kind of call:

Set psCaption of oAttendeeZoom to (Attendee.FirstName + " " + Attendee.LastName)

Constrains

In this case we wanted to filter out the profiles not marked as attendee, if we are logged out. This can be done in the DataDictionary globaly or if the rule only applies to one view we can do it like this with the OnConstrain procedure:

Object oAttendee_DD is a cAttendeeDataDictionary
    Procedure OnConstrain
        Boolean bLoggedIn
        
        Get IsLoggedIn of ghoWebSessionManager to bLoggedIn
        If (Not(bLoggedIn)) Begin
            Constrain Attendee.Attendee eq 1
        End            
    End_Procedure
End_Object 

Style with CSS

If you try to use the developer tool in the browser you believe that you should modify the styles in theme.css. But this file is overwritten every time there is a new version of DataFlex released. Instead you should write the css in the application.css file that is completely empty by default.

If you enjoy this video then don't forget to go into the channel on youtube and subscribe or add your mail to my newsletter. You may also want to see the entire course Discovering DataFlex available on youtube.

quot;

2016-10-14 15:51:48 - DataFlex Conference App Mobile Styling

Follow using RSS