Export translations

Settings

Group

Language

Format

Export for off-line translation

Export in native format

{{DISPLAYTITLE:FP Laboratory 11}}== Complex data structure ==
Consider following data structure representing some kind of GUI.

<syntaxhighlight lang="Haskell">
data Point = Point {column::Int,row::Int} deriving (Show)

data Position = Position {leftTopCorner :: Point, width :: Int, height :: Int}

data Component
  = TextBox {name :: String, position :: Position, text :: String}
  | Button {name :: String, position :: Position, text :: String}
  | Container {name :: String, children :: [Component]} 
</syntaxhighlight>

As an example, we can use following data structure.

<syntaxhighlight lang="Haskell">
gui :: Component
gui =
  Container "My App"
    [ Container "Menu"
        [ Button "btn_new" (Position (Point 0 0) 100 20) "New",
          Button "btn_open" (Position (Point 100 0) 100 20) "Open",
          Button "btn_close" (Position (Point 200 0) 100 20) "Close"
        ],
      Container "Body" [TextBox "textbox_1" (Position (Point 0 20) 300 500) "Some text goes here"],
      Container "Footer" []
    ]
</syntaxhighlight>

* Add the data type <code>Component</code> into the type class <code>Show</code>.

The result for our data from previous example should be something like this.

<syntaxhighlight lang="Haskell" class="myDark">
ghci> gui
Container - My App
        Container - Menu
                (0,0)[100,20] Button[btn_new]: New
                (100,0)[100,20] Button[btn_open]: Open
                (200,0)[100,20] Button[btn_close]: Close
        Container - Body
                (0,20)[300,500] TextBox[textbox_1]: Some text goes here
        Container - Footer
</syntaxhighlight>

<div class="mw-collapsible mw-collapsed" data-collapsetext="Hide solution" data-expandtext="Show solution">
<syntaxhighlight lang="Haskell">
instance Show Position where
    show (Position (Point col row) width height) = "(" ++ show col ++ "," ++ show row ++ ")["++ show width++","++ show height++"]"

instance Show Component where
    show :: Component -> String
    show gui = showIndent "" gui where
        showIndent ind (TextBox name position text) = ind ++ show position ++ " TextBox[" ++ name ++ "]: " ++ text ++"\n" 
        showIndent ind (Button name position text) = ind ++ show position ++ " Button[" ++ name ++ "]: " ++ text ++"\n"
        showIndent ind (Container name children) = let 
            inner = concat[showIndent (ind++"\t") c |c<-children]
            in ind ++ "Container - " ++ name ++ "\n" ++ inner
</syntaxhighlight>
</div>
<div style="clear:both"></div>

* Cerate a function <code>insertInto</code>, it will insert an element into the existing container from a GUI. The functions parameters will be: 
** first parameter will be the GUI, where we are inserting the new element;
** second parameter is the name of the container, where we insert the new element, you can safely assume, that it will always exist. The element will be placed as last in the container;
** last parameter is the inserted element.

<syntaxhighlight lang="Haskell">
insertInto :: Component -> String -> Component -> Component
</syntaxhighlight>

<syntaxhighlight lang="Haskell" class="myDark">
ghci> insertInto gui "Footer" (TextBox "Done" (Position (Point 0 500) 300 10) "We are done!")
Container - My App
        Container - Menu
                (0,0)[100,20] Button[btn_new]: New
                (100,0)[100,20] Button[btn_open]: Open
                (200,0)[100,20] Button[btn_close]: Close
        Container - Body
                (0,20)[300,500] TextBox[textbox_1]: Some text goes here
        Container - Footer
                (0,500)[300,10] TextBox[Done]: We are done!
</syntaxhighlight>

<div class="mw-collapsible mw-collapsed" data-collapsetext="Hide solution" data-expandtext="Show solution">
<syntaxhighlight lang="Haskell">
insertInto :: Component -> String -> Component -> Component
insertInto (Container cName children ) toName element 
    | cName == toName = Container cName (children++[element]) 
    | otherwise = Container cName [insertInto c toName element  |c<-children]
insertInto x toName element = x      
</syntaxhighlight>
</div>
<div style="clear:both"></div>

* Create a function <code>deleteFrom</code>, it will delete an element from the existing container from a GUI. The functions parameters will be: 
** first parameter will be the GUI, where we are deleting the element;
** second parameter is the name of the component, that will be removed, you can safely assume, that it will always exist;

<syntaxhighlight lang="Haskell">
deleteFrom :: Component -> String -> Component
</syntaxhighlight>

<syntaxhighlight lang="Haskell" class="myDark">
ghci> deleteFrom gui "btn_close"            
Container - My App
  Container - Menu
    (0,0)[100,20] Button[btn_new]: New
    (100,0)[100,20] Button[btn_open]: Open
  Container - Body
    (0,20)[300,500] TextBox[textbox_1]: Some text goes here
  Container - Footer
</syntaxhighlight>

<div class="mw-collapsible mw-collapsed" data-collapsetext="Hide solution" data-expandtext="Show solution">
<syntaxhighlight lang="Haskell">
deleteFrom :: Component -> String -> Component
deleteFrom (Container x child) target = Container x [deleteFrom c target |c<-child, name c /=target ]
deleteFrom c _ = c
</syntaxhighlight>
</div>
<div style="clear:both"></div>

* Extend the definition of a button in our GUI as follows.

<syntaxhighlight lang="Haskell">
data Event = MouseEvent Point
           | KeyEvent {keyPressed::Char} deriving (Show)
...
  | Button {name :: String, position :: Position, text :: String, onClick :: Maybe (Event -> String)}
...
</syntaxhighlight>
Our '''onClick''' is a function, that will be fired when the button is clicked on. The parameter of this function is data describing the firing event.

<syntaxhighlight lang="Haskell">
...
[ Button "btn_new" (Position (Point 0 0) 100 20) "New" (Just (\event -> "Clicked on new button.")),
  Button "btn_open" (Position (Point 100 0) 100 20) "Open" Nothing,
  Button "btn_close" (Position (Point 200 0) 100 20) "Close" (Just (\event -> "Clicked on close button.")) ]
...
</syntaxhighlight>
* Create a function <code>clickOnButton</code> that will take our GUI and an event. If it is a mouse event, and the position where we have clicked is inside some of the buttons from the gui, then it evaluates the coresponding <code>onClick</code> function and the result will be produced string. In all other cases, the result will be <code>Nothing</code>.

<syntaxhighlight lang="Haskell">
clickOnButton :: Component -> Event -> Maybe String
</syntaxhighlight>

<syntaxhighlight lang="Haskell" class="myDark">
ghci> clickOnButton gui (MouseEvent (Point 5 5))
Just "Clicked on new button."
ghci> clickOnButton gui (MouseEvent (Point 205 5))
Just "Clicked on close button."
ghci> clickOnButton gui (MouseEvent (Point 205 50))
Nothing
</syntaxhighlight>

<div class="mw-collapsible mw-collapsed" data-collapsetext="Hide solution" data-expandtext="Show solution">
<syntaxhighlight lang="Haskell">
isInside :: Point -> Position -> Bool
isInside (Point pCol pRow) (Position (Point cornerCol cornerRow) width height) =
     cornerCol <= pCol && pCol <= cornerCol + width && cornerRow <= pRow && pRow <= cornerRow + height

getFirstOrNothing :: [Maybe a] -> Maybe a
getFirstOrNothing [] = Nothing
getFirstOrNothing (Nothing:xs) = getFirstOrNothing xs
getFirstOrNothing (Just x: xs) = Just x

clickOnButton :: Component -> Event -> Maybe String
clickOnButton (Button {position = pos, onClick = (Just func)}) (MouseEvent point) | isInside point pos = Just (func (MouseEvent point))
clickOnButton (Container {children=inner}) event = getFirstOrNothing [clickOnButton c event |c<-inner]
clickOnButton _ _ = Nothing
</syntaxhighlight>
</div>
<div style="clear:both"></div>

== Additional exercises ==

* Consider the following definition and the example of the m-ary tree.

<syntaxhighlight lang="Haskell">
data MTree a = MTree a [MTree a] 
</syntaxhighlight>

<syntaxhighlight lang="Haskell">
testTree1 :: MTree Int            
testTree1 = MTree 1 [(MTree 2 [(MTree 3 []),(MTree 4 [(MTree 5 []),(MTree 6 [])]), (MTree 7 []),(MTree 8 [])]), (MTree 9 [])]
</syntaxhighlight>

* Create a function that sums all values stored in the m-ary tree.

<syntaxhighlight lang="Haskell">
msum :: MTree Int -> Int
</syntaxhighlight>

* Create a function that extracts all values from the m-ary tree into a list.

<syntaxhighlight lang="Haskell">
mToList :: MTree a -> [a]
</syntaxhighlight>

* Create a function that counts all leaves in the m-ary tree.
<syntaxhighlight lang="Haskell">
mLeafCount :: MTree a -> Int
</syntaxhighlight>

* Create a function that finds a maximum value stored in the m-ary tree.

<syntaxhighlight lang="Haskell">
mMaxTree :: Ord a => MTree a -> a
</syntaxhighlight>

* Create a function that checks whether a given element is stored in the m-ary tree.

<syntaxhighlight lang="Haskell">
mContains :: Eq a => MTree a -> a -> Bool
</syntaxhighlight>

* Create a function that returns a number of elements greater than a given value.
<syntaxhighlight lang="Haskell">
mGreaterThan :: Ord a => MTree a -> a -> Int
</syntaxhighlight>

Export translations

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Education

History Entries

Tools