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.
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
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)
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.
- DataFlex Conference App Mobile Styling